body{
    background: #211611;
    margin: auto !important;
    max-width: 480px !important;
    font-size: small;
    font-family: verdana;
    line-height: 15px;
}

a{
    color: #610000;
    text-decoration: none;
    outline: none;
}
#pomoshnik_1 {
    display: none;
}
button{
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}
.vip-sword-text { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); font-family: 'Impact', serif; font-size: 18px; color: #313131; text-transform: uppercase; letter-spacing: 5px; margin: 0; z-index: 100; animation: battleText 5s infinite; pointer-events: none; }
#perelivs{
    display: none;
}
.mail_news{
   filter: grayscale(100%);  
}
.brother_ic{
filter: grayscale(100%);
}
.request_ic{
filter: grayscale(100%);
}
.clan_ic{
filter: grayscale(100%);
}
.personal_ic{
filter: grayscale(100%);
}
.news_ic{
 filter: grayscale(100%);   
}
.ic_news_ins{
   filter: grayscale(100%); 
}
.DoneTask{
    color: #1a9530;
}
#estate_task_1{
 display: none;
}
#estate_task_2{
 display: none;
}
#estate_task_3{
 display: none;
}
#estate_task_4{
 display: none;
}
#estate_task_5{
 display: none;
}
#estate_task_6{
 display: none;
}
#estate_task_7{
 display: none;
}
#estate_task_8{
 display: none;
}
#estate_task_9{
 display: none;
}
#estate_task_10{
 display: none;
}
#estate_task_11{
 display: none;
}
#estate_task_12{
 display: none;
}
#estate_task_13{
 display: none;
}
#estate_task_14{
 display: none;
}
#estate_task_15{
 display: none;
}
#estate_task_16{
 display: none;
}
#estate_task_17{
 display: none;
}
p{
    margin: 0;
}
ul{
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
textarea{
    resize: none;
    height: 50px;
}
#news{

}
.bold_item{
    color: #610000;
    font-weight: bold;
}
.transaction-info{
    text-align: center;
}
:root {
        --bg-color: #1e1e24;
        --card-bg: #2b2b36;
        --accent-color: #d4af37; /* Золотой */
        --accent-hover: #f3c74a;
        --text-main: #f0f0f0;
        --text-muted: #a0a0b0;
        --border-color: #D6D6D6;
        --success-color: #4caf50;
        --epic-color: #b967ff; /* Для супер-награды */
        --accent: #007aff;
        --accent-hover: #0056b3;
        --bg: #f5f5f7;
        --surface: #ffffff;
        --border: #d1d1d6;
        --text-main: #1c1c1e;
        --text-secondary: #8e8e93;
        --gold: #fcd116;
        --blue-track: #134c9c;
        --purple-track: #6f21c2;
        --legendary: #ff7800;
    }
.hidden {
  display: none;
}
/*загрузка*/

/*Шапка header*/
.header{
    text-align: center;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(180deg, #730F00 0%, #7A1405 8.65%, #D11F05 13.85%, #A81500 13.86%, #C01800 23.22%, #961300 41.98%, #AA1701 57.6%, #AD240F 61.77%, #BC1A02 71.15%, #7C1001 92.52%, #9A1400 98.34%, #630D00 99.98%, #670D00 99.99%, #E22003 100%);
    padding-top: 6px;
    padding-bottom: 3px;
}
.hr{
    background: linear-gradient(180deg, #EBC15F 0%, #C06F1E 31.92%, #DE9D3F 42.98%, #DFA041 49.62%, #E7B34D 67.33%, #BC7B2B 91.67%);
    height: 4px;
}
.discript_events{
    color: #EEB6A8;
}
#lord_start{
    display: none;
}
.goldings{
    margin-top: auto;
}
.logo{
    border: 0;
    vertical-align: middle;
    width: 112px
}
.header div.info {
    margin-top: 5px;
}
.img-icon-header{
    display: inline-block;
    max-width: 22px;
    max-height: 22px;
}
.img_icon_header{
    display: inline-block;
    max-width: 16px;
    max-height: 24px;
}
.title_push{
    color: #EEB6A8;
}
.discript_push{
    color: #EEB6A8;
}
.notification{
    display: none;
}
.repeat_event{
    color: #EEB6A8;
    text-decoration: underline;
}
.time_push{
    color: #EEB6A8;
}
.info div.notifications_block{
    padding-left: 6px;
    text-align: left;
    background: url(banner/header-txture.png) repeat scroll 0 0;
    color: #AD6E6A;
    font-size: small;
    display: block;
    margin: auto;
    padding-bottom: 2px !important;
    opacity: 0.8;
}
.info div.notifications_block img{
    margin-right: 0px;
    margin-top: 1px;
}
.img-user{
    max-width: 150px;
}
.info div.notifications_block a{
    text-decoration: underline;
}
.info div.icons div.body{
    background: url(banner/texture.png) repeat scroll 0 0 #791e01;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 3px;
    padding-bottom: 2px;
    text-align: center;

}
.page{
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 4px;
}
.margin{
    margin-top: 15px;
}
.repeat{
    color: #EEB6A8;
}
.info .icons span.parameter_info{
    padding-right: 2px;
}
.info div.icons a{
    color: #FFCA9A;
    font-size: smaller;
}
.icon_info_block{
    vertical-align: middle;
    padding-right: 1px;
}
.icon_sprite {
    width: 100%;
}
.content {
    background: #F5F6E0;
    color: #313131;
    word-break: break-word;
}
/*меню навигации*/
ul.navigation li a:hover{
    background: #a3a3a32e;
}
ul.navigation li button:hover{
    background: #a3a3a32e;
}
ul.navigation li{
    border-bottom: 1px solid #D6D6D6;
    padding: 0;
}
ul.navigation li a,
ul.navigation li button {
    display: block;
    width: 100%;
    min-height: 33px;
    padding: 0;
    background: none;
    border: none;
    font-weight: bold;
    color: #313131;
    text-align: left;
    cursor: pointer;
    line-height: normal;
    font-family: inherit;
    font-size: inherit;
}

ul.navigation li button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.rules{
    padding-top: 10px;
    padding-bottom: 10px;
}
ul.navigation span.body-navigation{
    padding: 8px 5px 5px 10px;
    display: block;
    background-image: url(img_design/arrow-button.png);
    background-position: 97% 60%;
    background-repeat: no-repeat;
}

.icon_main_page{
    vertical-align: middle;
    padding-right: 4px;
}
/*футер footer*/
.footer{
    background: #501601;
    color: #a5531a;
    height: 100%;
    font-size: smaller;
    padding-bottom: 8px;
    padding-top: 5px;
    text-align: center;
}
.links{
    padding: 8px 0 5px;
}
.footer a{
    color: #a5531a;
    text-decoration: underline;
}
.text{
    word-spacing: 1px;
    padding-top: 2px
}
.footer_share a{
    color: #a5531a;
    text-decoration: underline;
}
.icon_social_group{
    width: 34px;
    height: 34px;
}
/*баннеры*/
.img-banner{
    max-width: 250px;
    margin: 0 auto;
}
.img-banner img{
    width: 100%;
}
.page{
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 4px;
}
.page h1{
    color: #610000;
    font-weight: bold;
    text-align: center;
    font-size: medium;
    margin: 0;
    padding: 5px 0px 0;
}
h1{
    color: #610000;
    font-weight: bold;
    text-align: center;
    font-size: medium;
}
.page h2,h3,h4{
    margin: 0;
}
.desc{
    padding: 10px 0px 5px;
}
.user_list{
    margin-top: 5px;
    margin-bottom: 5px;
}
/*form*/
form{
    text-align: center;
}
.user_name{
    width: 99%;
    padding: 4px 0 3px 3px;
    color: #000;
    margin: 2px 0 6px;
    border: 1px solid #D7D8C2;
    background: #FBFBF0;
}
.doxc{
    font-size: x-small;
    margin-bottom: 10px;
}
.doxc a{
    text-decoration: underline;
}
.block{

}
/* Дополнительные стили для контейнеров (чтобы всё работало гармонично) */
.canvas_frame {
    text-align: center;
    padding-bottom: 10px;
    padding-top: 10px;
}

.pigment_pool {
    display: flex; /* Flex для равномерного распределения left/center/right */
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.left_stroke_edge,
.right_texture_edge {
    flex: 0 0 auto; /* Фиксированная ширина, если нужны для отступов */
    width: 10px; /* Пример: добавьте ширину, если псевдоэлементы не сработают в старых браузерах */
    height: 100%;
}

.center_mix_flow {
    flex: 1; /* Центральная часть растягивается */
    text-align: center;
}

.glyph_field {
    display: inline-block;
}

/* Стиль для текста внутри кнопки */
.mid_layer_inscription {
    margin: 0;
    font-size: 14px;
    color: #fff; /* Белый текст на тёмном фоне */
    font-weight: normal; /* Или bold, если нужно */
}
.brush_path {
    border: none;
    color: #fff;
    display: inline-block;
    position: relative;
    background:linear-gradient(180deg, #F8D595 0%, #CD4C12 46.86%, #8E0400 100%);
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 5px;
    padding-top: 5px;
    font-size: 14px;
    text-decoration: none; /* Убираем подчёркивание у ссылки */
}

/* Псевдоэлементы для декоративных кружков (аналог eyelets) */
.brush_path::before,
.brush_path::after {
    content: '';
    position: absolute;
    top: 52%;
    transform: translateY(-50%);
    font-size: 14px; /* Замена var(--eyelet-size) */
    border: 1px solid #ffd700;
    width: 5px;
    height: 5px;
    background: #ffffff;
    border-radius: 50%;
}

.brush_path::before {
    left: 5px;
}

.brush_path::after {
    right: 5px;
}
.field-error {
    color: #d60000;
    font-size: 12px;
    display: block;
}

.form-error {
    color: #d60000;
    padding-top: 10px;
}

.input-error {
    border: 2px solid #d60000;
    background: #fff0f0;
}
.border{
    border: dashed #D6D6D6;
    border-left: none;
    border-right: none;
    border-width: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
}
/*events*/

.border button.active {
    color: #940b01;
}
.btn-menu{
    color: #610000;
}
.tab {
    display: none;
}

.tab.active {
    display: block;
}
.green{
    color: #027902;
}
.red{
    color: #f30000;
}
.date_event{
    font-size: x-small;
}
.bold{
    color: #610000;
}
/*слева картинка справа описание*/
.wrap{
    display: flex;
}
.left-img {
    margin-top: 2px;
    width: 100px;
}
.left-img img{
    width: 100%;
}
.right-title{
    margin-left: 5px;
    margin-right: 8px;
    width: 100%;
}
.right-title p{
    overflow: hidden;
    text-align: left;
}
.wrapper-request {
    display: flex;
    margin-bottom: 0px;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.sell_item{
    margin-right: 12px;
}
.active_sell_item .icon_menu{
    width: 28px;
    background: #cfcfcf;
}
#buy_potion_item{
    
}
.wrapper_menu{
    display: flex;
}
.icon_menu{
    width: 25px;
    vertical-align: text-bottom;
    padding-right: 2px;
    padding-left: 2px;
}
.left-button {
    margin-right: 10px;
}
#chek_modal{
    display: none;
}
/*pagination*/
.pagination_bookmarks{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}
.pagination_friend{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}
.pagination{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}
.active_paginaton{
    background: linear-gradient(180deg, #D89D43 0%, #D89D43 100%);
    padding: 4px 10px;
    transition: background-color .3s;
    margin: 0 4px;
    color: #6D4A14;
    margin-top: 5px;
    display: inline-table;
}
.not_pagination{
    padding: 4px 10px;
    transition: background-color .3s;
    margin: 0 4px;
    background: linear-gradient(180deg, #FFDEA8 0%, #E6A35F 100%);
    color: #6D4A14;
    margin-top: 5px;
    display: inline-table;
}
.active_potion{
    background: linear-gradient(180deg, #D89D43 0%, #D89D43 100%);
    padding: 4px 10px;
    transition: background-color .3s;
    margin: 0 4px;
    color: #6D4A14;
    margin-top: 5px;
    display: inline-table;
}
.not_potion{
    padding: 4px 10px;
    transition: background-color .3s;
    margin: 0 4px;
    background: linear-gradient(180deg, #FFDEA8 0%, #E6A35F 100%);
    color: #6D4A14;
    margin-top: 5px;
    display: inline-table;
}
.active_firends{
    background: linear-gradient(180deg, #D89D43 0%, #D89D43 100%);
    padding: 4px 10px;
    transition: background-color .3s;
    margin: 0 4px;
    color: #6D4A14;
    margin-top: 5px;
    display: inline-table;
}
.not_active_friends{
    padding: 4px 10px;
    transition: background-color .3s;
    margin: 0 4px;
    background: linear-gradient(180deg, #FFDEA8 0%, #E6A35F 100%);
    color: #6D4A14;
    margin-top: 5px;
    display: inline-table;
}
.active_bookmarks{
    background: linear-gradient(180deg, #D89D43 0%, #D89D43 100%);
    padding: 4px 10px;
    transition: background-color .3s;
    margin: 0 4px;
    color: #6D4A14;
    margin-top: 5px;
    display: inline-table;
}
.not_active_bookmarks{
    padding: 4px 10px;
    transition: background-color .3s;
    margin: 0 4px;
    background: linear-gradient(180deg, #FFDEA8 0%, #E6A35F 100%);
    color: #6D4A14;
    margin-top: 5px;
    display: inline-table;
}

/*детальный вид экипировки в профиле*/
.wrapper-equiment{
    display: inline-block;
    margin-right: 4px;
}
.zero-item {
    filter: grayscale(100%);
}
/*Экипировка*/
.equiment-img {
    max-width: 72px;
    margin-top: 5px;
    display: inline-block;
}
.equiment-img img {
    width: 72px;
    height: 72px;
}
.btn-images{
    border: none;
    background: none;
    cursor: pointer;
    padding:0;
}
/*по центру империя викинги*/
div.block_header_center{
    background: url(img_design/midle-ban.png) repeat-x scroll 0 0 transparent;
    max-width: 100%;
    margin-left: 10px;
    margin-right: 10px;
}
div.block_header_left{
    background-image: url(img_design/left-ban.png);
    background-repeat: repeat-y;
    background-size: 15px;
    margin-left: -12px;
}
div.block_header_right {
    background-image: url(img_design/right-ban.png);
    background-repeat: repeat-y;
    background-size: 15px;
    background-position: 100% 0;
    margin-right: -12px;
}
div.block_header_text {
    height: 28px;
    margin: 2px 0;
    padding-top: 3px;
    text-align: center;
    color: #65491b;
    font-size: small;
    font-weight: bold;
}
.par-mid{
    margin-top: 4px;
    color: #65491b;
}
.icon{
    width: 14px;
    vertical-align: text-bottom;
    padding-right: 2px;
}
.form{
    text-align: left;
}
/*Профиль*/
.img_avatars{
    max-width: 140px;
}
.avatar_container{
    position: relative;
    display: inline-block;
    width: 150px;
    height: 200px;
    margin-top: 18px;
}
.img_avatars img{
    width: 100%;
    height: 100%;
}
.user-status{
    margin-top: 10px;
    margin-bottom: 10px;
}
.title-users{
    margin-top: 8px;
    overflow: hidden;
}
.circle{
    background: #00B91E;
    clip-path: circle(50%);
    height: 14px;
    width: 14px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
}
.circle-not-active{
    background: #9C0900;;
    clip-path: circle(50%);
    height: 14px;
    width: 14px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;  
}
.icon_clan{
    width: 18px;
    vertical-align: text-bottom;
    padding-right: 2px;
    margin-top: 2px;
}
.brother_banner {
    max-width: 150px;
    margin-top: 20px;
}
.brother_banner img{
   width: 100%;
   max-height: 200px;
}
/*карточки достижение*/
.game_knife {
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Верх и низ */
.top_knife,
.bottom_knife {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px;
    align-items: center;
}
.card-vs{
    width: 50px;
}
.card-vs img{
    width: 100%;
}

/* Нижние карточки могут переноситься */
.bottom_knife {
    flex-wrap: wrap;
    justify-content: center;
}

/* Карточка */
.card_knife {
    width: 140px;
    height: 180px;
    background: #F5F6E0;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    transition: 0.3s;
    border: none;
}

/* Картинки */
.card_knife img {
    width: 90px;
    height: 90px;
    object-fit: contain;
}

/* Текст */
.card_knife span {
    margin-top: 10px;
    font-size: 16px;
    padding-left: 5px;
    padding-right: 5px;
}
.result_card_cnife{
    width: 160px!important;
}
/* Выбор */
.choice_knife {
    cursor: pointer;
}

.choice_knife:hover {
    transform: translateY(-10px);
    background: #3d3d7a;
    color: #fff;
}
.timer-knife{
    margin-top: 10px;
}
.timer-knife p{
    text-align: center;
}
/* ===================== */
/* 📱 ПЛАНШЕТ */
@media (max-width: 900px) {
    .card_knife {
        width: 120px;
        height: 160px;
    }

    .card_knife img {
        width: 75px;
        height: 75px;
    }
}

/* ===================== */
/* 📱 ТЕЛЕФОН */
@media (max-width: 600px) {
    .top_knife,
    .bottom_knife {
        gap: 12px;
    }

    .card_knife {
        width: 100px;
        height: 140px;
        border-radius: 12px;
    }

    .card_knife img {
        width: 60px;
        height: 60px;
    }

    .card_knife span {
        font-size: 14px;
    }
}

/* ===================== */
/* 📱 ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ */
@media (max-width: 360px) {
    .card_knife {
        width: 90px;
        height: 120px;
    }

    .card_knife img {
        width: 50px;
        height: 50px;
    }
} 
/*для участка*/
/* ===== GRID ===== */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 768px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.plant-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* или cover */
    display: block;
}
/* ===== CARD ===== */
.plant-card {
    background: #ecdac2;
    border: 3px solid #7b4a2b;
    border-radius: 14px;
    padding: 8px;
}

/* ===== HEADER ===== */
.card-header {
    background: #f5ead9;
    border: 2px solid #7b4a2b;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    padding: 6px;
    margin-bottom: 6px;
}

/* ===== IMAGE ===== */
.plant-image {
    position: relative;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
    background: linear-gradient(#7c5a3c, #5a3a22);
}

.basil {
    background: linear-gradient(#8a4fd6, #4b2277);
}
.tea {
    background: linear-gradient(#7bcf58, #3e7c2a);
}

/* ===== LOCK ===== */
.lock {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #f4c542;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 12px;
}
/* ===== X7 BADGE ===== */
.x7 {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: #d86a2c;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 8px;
    box-shadow: 0 2px 3px rgba(0,0,0,.4);
}

/* ===== OVERLAYS ===== */
.overlay {
    position: absolute;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
    background: rgba(0,0,0,.35);
    padding: 2px 6px;
    border-radius: 6px;
}

.size {
    bottom: 6px;
    left: 6px;
}

.level {
    top: 6px;
    left: 6px;
}

/* ===== STATS WITH DIVIDER ===== */
.stats {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 6px;
    font-size: 13px;
    margin-bottom: 6px;
    align-items: center;
}

.divider {
    height: 100%;
    border-left: 2px dashed #b08c6a;
}

.stats-left,
.stats-right {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stats-left div,
.stats-right div {
    display: flex;
    align-items: center;
    gap: 6px;
}
#booze{
    display: none;
}
#block_ban{
    display: none;
}

/* ===== EXP ===== */
.exp {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}
/*Arena*/
.avatar-duels table{
    margin: 0 auto;
    width: 60%;
    border-collapse: collapse;
}
.name-battle{
    word-wrap: break-word;
    width: 200px;
}
.tbody_item{
    text-align: center;
}
.avatar-img{
    width: 80px;
    max-height: 100%;
    height: 120px;
}
.battle-it{
    word-wrap: break-word;
    max-width: 110px;
}
.img-battle{
    width: 15px;
}
table.playerGold td {
    padding: 4px;
    border: 1px solid #D6D6D6;
    text-align: center;
    width: 50%;
}
table.playerGold_ban td {
    padding: 4px;
    border: 1px solid #D6D6D6;
    text-align: center;
    width: 25%;
}
.playerGold_ban{
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}
.avatar-container {
    position: relative;
    display: inline-block;
    margin-top: 10px;
    height: 110px;
    width: 100%;
}
.avatar-beast-img{
    width: 75px;
}
.avatar-beast-container img{
    position: relative;
    display: inline-block;
    width: 90px;
    margin-top: 10px;
}
.left-img-user{
    margin-top: 2px;
    max-width: 72px;
    width: 100%;

}
.left-img-user img{
    width: 100%;
    max-height: 100px;
}
.pagination_level{
    text-align: center;
}
sup{
    color: #7F1414;
    margin-right: 2px;
}
/*прогресс бар тренироваться*/
.progress-container {
    width: 100%;
}
.progress-bar {
    width: 100%;
    height: 4px;
    margin-top: 3px;
    margin-bottom: 3px;
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid #FFBE7F;
    padding-top: 1px;
    padding-bottom: 1px;
    max-width: 240px;
}
.progress {
    width: 0%; /* Изменяемое значение прогресса */
    height: 100%;
    background-color: #CA822E; /* lighter shade of orange */
    transition: width 0.5s ease;
}
.left{
    width: 72px;
    margin-top: 3px;
    margin-right: 5px;
}
.left img{
    width: 100%;
}
/*ekipirovka*/
    .frame-container-box {
    width: 72px;
    max-width: 800px;
    height: 16px;
    background-color: #DBDBDB;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.frame-container-ambfora{
    width: 72px;
    max-width: 800px;
    height: 16px;
    background-color: #F4CE00;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.frame-container-ambfora_2{
    width: 72px;
    max-width: 800px;
    height: 16px;
    background-color: #DBDBDB;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.frame-container-ambfora_3{
    width: 72px;
    max-width: 800px;
    height: 16px;
    background-color: #92caed;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.frame-container-ambfora_3 p{
    margin: 0 auto;
    color: black;
}
.frame-container-ambfora_4{
    width: 42px;
    max-width: 800px;
    height: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.frame-container-ambfora_4 p{
    color: black;
}
.frame-container-ambfora_7{
    width: 72px;
    max-width: 800px;
    height: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: #E4E4E4;
}
.frame-container-ambfora_7 p{
    color: black;
    margin: 0 auto;
}
.frame-container-ambfora_8{
    width: 72px;
    max-width: 800px;
    height: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: #EECD01;
}
.frame-container-ambfora_8 p{
    color: black;
    margin: 0 auto;
}
.frame-container-key{
    width: 51px;
    max-width: 800px;
    height: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin: 0 auto;
    background-color: #a1d3f1;
}
.frame-container-key p{
    color: black;
    margin: 0 auto;
}
.img_keys{
    max-width: 25px;
    width: 100%;
}
.frame-container-silverbox{
    width: 72px;
    max-width: 800px;
    height: 16px;
    background-color: #DBDBDB;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.frame-container-zel{
    width: 72px;
    max-width: 800px;
    height: 16px;
    background-color: #6bcf62;
    position: relative;
    /* border-radius: 15px; */
    overflow: hidden;
    display: flex;
    align-items: center;
}
.frame-container-zel-box{
    width: 72px;
    max-width: 800px;
    height: 16px;
    background-color: #DBDBDB;
    position: relative;
    /* border-radius: 15px; */
    overflow: hidden;
    display: flex;
    align-items: center;
        }
.frame-container-scroll{
    width: 72px;
    max-width: 800px;
    height: 16px;
    background-color: #5BAD61;
    position: relative;
    /* border-radius: 15px; */
    overflow: hidden;
    display: flex;
    align-items: center;
}
.frame-container-podarok{
    width: 72px;
    max-width: 800px;
    height: 16px;
    background-color: #8767F4;
    position: relative;
    /* border-radius: 15px; */
    overflow: hidden;
    display: flex;
    align-items: center;
}
.frame-container-curses{
    width: 72px;
    max-width: 800px;
    height: 16px;
    background-color: #60a75f;
    position: relative;
    /* border-radius: 15px; */
    overflow: hidden;
    display: flex;
    align-items: center;
}

.frame-container-zel_box{
    width: 72px;
    max-width: 800px;
    height: 16px;
    background-color: #DBDBDB;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.frame-container-blessings{
    width: 72px;
    max-width: 800px;
    height: 16px;
    background-color: #8b8b8b;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.add_photo_forum{
    text-align: center;
    margin: 0 auto;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}
.frame-container-blessings p{
    margin:0 auto;
    color: black;
}
.frame-container-zel_box p{
    margin:0 auto;
    color: black;
}
.frame-container-box p{
    margin:0 auto;
    color: black;
}
.frame-container-ambfora p{
    margin:0 auto;
}
.frame-container-ambfora_2 p{
    margin:0 auto;
    color: black;
}
.frame-container-silverbox p{
    margin:0 auto;
    color: black;
}
.frame-container-zel p{
    margin:0 auto;
}
.frame-container-zel-box p{
    margin:0 auto;
    color: black;
}
.frame-container-scroll p{
    margin:0 auto;
}
.frame-container-podarok p{
    margin:0 auto;
}
.frame-container-curses p{
    margin:0 auto;
}
.edge-img {
    position: absolute;
    height: 100%;
    object-fit: cover;
}
.edge-img-left {
    left: 0;
}
.edge-img-right {
    right: 0;
}
.decorative-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}
.decorative-border-left, .decorative-border-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    background: linear-gradient(to bottom, #ff9a3c, #ffc56e);
    clip-path: polygon(0% 0%, 100% 10%, 100% 90%, 0% 100%);
}
.decorative-border-left {
    left: 0;
    transform: scaleX(-1);
}
.decorative-border-right {
    right: 0;
}
.left-img-avatar{
    max-width: 72px;
    width: 100%;
}
.left-img-avatar img{
    width: 100%;
    max-height: 100px;
}
.ava-items{
    text-align: center;
}
.ava-img {
    max-width: 150px;
    display: inline-block;
    margin-right: 5px;
}
.ava-img img {
    width: 72px;
    border: 1px solid #fff;
}
.task_no_accepted{
    padding: 10px 0px 5px;
}
.content-titles{
    display: none;
}
/*Правила*/
.rules-item li{
    border-bottom: none!important;
}
.rules{
    padding-left: 0;
    margin-right: 10px;
    margin-left: 20px;
}
.rules li{
    border-bottom: none!important;
}
.rules-item{
    list-style: square;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.rules-item li{
    padding-top: 5px;
}
.rules-item li p{
    margin-top: 5px;
}
/*task*/
.reward-track {
  
}
.task_super{
  display: flex;
  border-radius: 12px;
  margin-bottom:20px;
}
.level-badge {
    width: 82px;
    height: 48px;
    display: flex;
    align-items: center;
    margin-right: 12px;
}
.level-badge img{
    width: 100%;
}
.progress-alfa{
    text-align: center;
    z-index: 1999;
    position: relative;
    margin-top: -25px;
}

.track {
    position: relative;
    height: 8px;
    width: 100%;
    height: 4px;
    margin-top: 3px;
    margin-bottom: 3px;
    border-radius: 100px;
    border: 1px solid #FFBE7F;
    padding-top: 1px;
    padding-bottom: 1px;
}

.progress_chest {
  position: absolute;
  height: 100%;
  width: 0%; 
  background: linear-gradient(90deg, #ffd36a, #ff9f1a);
  border-radius: 6px;
}

.chest {
  position: absolute;
  top: -34px;
  transform: translateX(-50%);
  text-align: center;
}

.chest img {
  width: 30px;
  height: auto;
}

.chest span {
  display: block;
  margin-top: 18px;
  font-weight: bold;
}
.chest:nth-child(2) { left: 10%; }
.chest:nth-child(3) { left: 30%; }
.chest:nth-child(4) { left: 50%; }
.chest:nth-child(5) { left: 70%; }
.chest:nth-child(6) { left: 90%; }
/*end task*/

/*Сообщение болталка*/
/*batle старый*/
.avatar_battle_pass {
  position: relative; /* чтобы .pass-title позиционировалась относительно картинки */
  display: inline-block;
}

.avatar_battle_pass img {
  display: block;
  width: 100%;
  height: auto;
}

.pass-title {
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translate(-50%, -50%); /* центрируем pass-title по середине avatar_battle_pass */
  text-align: center;
  margin-top: 18px;
}

.pass-title img {
  margin: 0 auto;
  min-width: 250px;
  max-height: 36px;
}

.pass-title p {
  position: absolute;       /* поверх картинки в pass-title */
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%); /* центрируем текст по своей картинке */
  margin: 0;
  color: #fff;
  font-weight: bold;
  line-height: 1.2;
  pointer-events: none;
}
/*конец*/
#messageArea{
    height: 50px;
    overflow-y: auto;
}
.emoji-popup{
    display: none;
    position: absolute;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 10;
    flex-wrap: wrap;
    width: 250px;
    max-width: 250px;
    max-height: 300px;
    overflow-y: auto;
}
.emoji-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 10px;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    justify-content: center;
}
.gif-search-input{
    display: none;
}
.circular-left{
    margin-top: 4px;
}
.circular-midle{
    padding-top: 3px;
}
.circular-btn img{
    width: 25px;
    height: 28px;
    border-radius: 50%;
}
.circular-right{
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-top: 4px;
    background: linear-gradient(180deg, rgba(165, 38, 43, 0.2) 5.1%, rgba(73, 9, 12, 0.2) 100%), radial-gradient(50% 50% at 50% 50%, #3E080A 0%, #8B2023 71.5%, #9C2227 100%);
}
.circular-btn{
    background: none;
    border: none;
}
.circular-btn svg{
    width: 23px;
    height: 24px;
    fill: white;
    margin-top: 3px;
}
.emoji-modal{
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}
.emoji-modal-content {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: visible;
    padding: 20px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
        flex-wrap: wrap;
    gap: 10px;
}
.emoji-modal-close{
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #666;
    cursor: pointer;
}
#ReviveBeast{
    display: none;
}
.active-btn{
    color: black!important;
}
.color_user_name_mess_2{
    color: #f7c079;
}
.color_user_name_mess_1{

}
.color_user_name_mess_3{
    color: #1a9530;
}
.color_user_name_mess_4{
    color: #007104;
}
.color_user_name_mess_5{
    color: #007104;
}
.color_user_name_mess_6{
    color: #007104;
}
.choose_name_chat_active {
    display: none;
}
.emoji-category-button {
    background: none;
    border: none;
    color: #610000;
    font-size: small;
    font-family: verdana;
    font-weight: bold;
}
.emoji-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 10px;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    justify-content: center;
}
.emoji-modal-grid img{
    width: 60%;
    aspect-ratio: 1;
    object-fit: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s;
}
/*Катакомб*/
.img-banner-avatar{
    width: 110px;
    margin: 0 auto;
    text-align: center;
}
.img-banner-avatar img{
    width: 100%;
}
.busy{
    background: none;
    border: none;
    color: #f7c079;
}
/*.catacomb_choose_order,
.catacomb_sqard {
    display: none;
}*/
/*перезарядка*/

.image-container {
    position: relative;
    display: block;
}

.image-container .overlay_equipment {
    width: 72px;
    height: 72px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}
.image-container .overlay-text {
    color: white;
    font-size: 0.9em;
    font-weight: bold;
}
/*Создание клана*/
.image-radio {
    display: inline-block;
    width: 72px;
}
.image-radio input[type="radio"] {
    display: none;
}
.image-radio .img-label {
    display: inline-block;
    cursor: pointer;
}
.imgss {
    display: inline-block;
    max-width: 150px;
}
.image-radio input[type="radio"]:checked + .img-label .imgss img {
    border: 2px solid #007BFF;
    border-radius: 5px;
}
.imgss img {
    width: 72px;
    height: 65px;
}
.img-label {
    vertical-align: middle;
}
.flag{
    text-align: center;
}
.clan_banner{
    max-width: 150px;
    margin-top: 20px;
}
.clan_banner img{
    width: 100%;
}
/*переключатель*/
.tab {
    display: none;
}

.tab.active {
    display: block;
}

.btn-menu.active {
    color: #fff;
}
.brother-banner{
    width: 150px;
    margin-top: 20px;
}
.brother-banner img{
    width: 100%;
    max-height: 200px;
}
/*ranking*/
.leaderboard {
    display: flex;
    gap: 5px;
    align-items: flex-end;
    justify-content: center;
    padding-top: 60px;
    color: #fff;
}

/* CARD */
.card {
    position: relative;
    width: 140px;
    height: 250px;
    text-align: center;
}

.card.blue {
    background-image: url(icons/flag_blue.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 90%;
}

.card.red {
    background-image: url(icons/flag_red.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    color: #fff;
}
.red .medal{
    top: -43px;
}

.name_ranking{
    color: #fff;
    font-weight: bold;
}
/* MEDAL */
.medal {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: 62px;
    z-index: 5;
}

/* FLAG (ABSOLUTE OVER CARD) */
/*.flag {
    position: absolute;
    right: 35px;
    top: 170px;
    width: 40px;
    z-index: 4;
}*/


/* AVATAR */
.avatar {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    z-index: 1;
}

/* FRAME OVER AVATAR */
.avatar-frame {
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    z-index: 3;
    pointer-events: none;
}



/* NAME */
.name {
    margin-top: 9px;
    font-weight: 700;
    padding-left: 10px;
    padding-right: 10px;
    font-size: smaller;
}
.score {
    margin-top: 6px;
}


.score img {
    width: 16px;
}
/*Фотостена*/

.topbar_wall {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 14px;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

/* POST */
.post_wall {
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  position: relative;
}

.post-header_wall {
  display: flex;
  align-items: center;
  padding: 10px;
}

.avatar_wall {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
}

.username_wall {
  font-weight: bold;
}

.post-media_wall {
  max-width: 100%;   
  max-height: 400px;  
  width: auto;          
  height: auto;       
  display: block;
  margin: 0 auto;     
  object-fit: contain; 
  padding-bottom: 10px;
}
.like-btn_wall, .comment-btn_wall {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.like-icon_wall, .comment-icon_wall {
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}

.like-btn_wall.liked_wall .like-icon_wall,
.comment-btn_wall.active_wall .comment-icon_wall {
  transform: scale(1.2);
}
.post-actions_wall {
  display: flex;
  gap: 8px;
  padding: 10px;
}
.post-actions_wall button_wall {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  transition: 0.1s;
}
.post-actions_wall button_wall:active {
  transform: scale(1.2);
}
.like-btn_wall.liked_wall {
  color: #ed4956;
}

.likes_wall {
  font-weight: bold;
  padding: 0 10px 5px;
}
.caption_wall {
  padding: 0 10px 10px;
  font-size: 14px;
}
.mini-heart_wall {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
  font-size: 50px;
  pointer-events: none;
  user-select: none;
}
.overlay_wall {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 50;
}
.overlay_wall.active_wall {
  opacity: 1;
  visibility: visible;
}
.comments-sheet_wall {
  position: fixed;
  left: 0;
  right: 0;
  bottom: -100%;
  height: 75vh;
  background: #F5F6E0;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15);
  transition: bottom 0.35s ease;
  z-index: 100;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
}
.comments-sheet_wall.active_wall {
  bottom: 0;
}
.sheet-handle_wall {
  width: 40px;
  height: 5px;
  background: #ccc;
  border-radius: 10px;
  margin: 10px auto;
}
.sheet-title_wall {
  text-align: center;
  margin-bottom: 10px;
}
.comments-list_wall {
  overflow-y: auto;
  padding: 0 15px;
  flex: 1;
}
body.no-scroll {
  overflow: hidden;
  height: 100vh;
}
.comment_wall {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 14px;
}
.comment_wall img_wall {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.add-comment_wall {
  border-top: 1px solid #eee;
  padding: 10px;
}
.add-comment_wall input_wall {
  width: 100%;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid #ddd;
}
/*добавление в фотостенку*/
.preview-video{
  display: none;
  width: 100%;
  max-height: 400px;
}
.input_files{
  display: none;
}
.post-form_wall {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
}
.upload-label_wall {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
    border: dashed #D6D6D6;
    border-left: none;
    border-right: none;
    border-width: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.preview-wall img {
  width: 100%;
  border-radius: 10px;
  max-height: 400px;
  object-fit: cover;
  display: none;
}
.caption-input_wall {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ddd;
  resize: none;
  min-height: 60px;
  font-size: 14px;
}
.brush_path:disabled {
  opacity: 0.5;
  cursor: default;
}
/*endfotostena*/
.playerGold {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}
/*правила*/
.rules{
    padding-left: 0;
    margin-right: 10px;
    margin-left: 20px;
}
.rules-item{
    list-style: square;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.rules-item li{
    padding-top: 5px;
}
.rules-item li p{
    margin-top: 5px;
}
/*news*/
.banner_news {
  position: relative;
  height: 170px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 4px;
}

/* Картинка */
.banner_news img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Затемнение (градиент) */
.banner_news::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgb(0 0 0 / 65%));
  z-index: 1;
}

/* Контент поверх */
.banner-content_news {
  position: relative;
  z-index: 2;
}
.me_ask{
    color: #1a9530;
    font-weight: bold;
}
.left_btn_btn{
    display: inline-block;
}
.right_btn_btn{
    display: inline-block;
}
.midle_btn_btn{
    display: inline-block;
}
.pagination_bonus{
    text-align: center;
}
/*Accaount*/
/* Верхняя панель (имитация вашей шапки) */
._change_game-header {
    width: 100%;
    background-color: #5c1414;
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    border: 2px solid #a37547;
    border-bottom: none;
}
/* Кнопка вызова меню */
._change_account-toggle-btn {

}
._change_main-wrapper {
    width: 100%;
    max-width: 480px;
    position: relative;
    box-sizing: border-box;
}

._change_account-toggle-btn:hover {
    background: #a1693f;
}
.g-recaptcha {
    transform: scale(0.70);
    display: inline-block;
}
/* --- КОНТЕЙНЕР ОКНА (МОДАЛКА / ВЫПАДАЮЩИЙ СПИСОК) --- */
._change_account-modal {
    display: none;
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    position: absolute;
    top: 15;
    width: 100%;
    max-width: 480px;
    left: 50%;
    right: 50%;
    top: 15;
    z-index: 100;
    transform: translateX(-50%);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(92, 45, 21, 0.2);
    box-sizing: border-box;
    padding: 8px;
}
._change_account-item{
    background: #d9c7a1;
}
._change_account-modal._change_open {
    display: block;
}
._accounts-modal-container._change_open {
    display: block;
}
/* Список аккаунтов */
._change_account-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 500px;
    overflow-y: auto;
}

/* Элемент аккаунта */
._change_account-item {
    display: flex;
    padding: 8px;
    border-bottom: 1px solid rgba(74, 35, 17, 0.2);
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}
._change_account-item:last-child {
    border-bottom: none;
}
._change_account-item:hover {
    background-color: rgba(74, 35, 17, 0.05);
}

/* Активный/выбранный аккаунт (Зеленая рамка) */
._change_account-item._change_active {
    border: 2px solid #49a310;
    border-radius: 6px;
    padding: 6px; /* Компенсируем border */
}

/* Аватар контейнер */
._change_avatar-box {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    overflow: visible; /* Чтобы зеленый индикатор не обрезался сверху */
}

/* Стилизация картинок аватарок (фикс для любых размеров картинок) */
._change_avatar-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* Обрезает и центрирует огромные картинки, не искажая их */
    object-position: center;
}

/* Зеленый индикатор поверх аватарки активного игрока */
._change_active-dot {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 14px;
    height: 14px;
    background-color: #00ff00;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px #00ff00;
    z-index: 2;
}
/* Информационный блок */
._change_account-info {
    flex-grow: 1;
    padding-left: 12px;
    color: #7F1414;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Строка Ника и Статуса */
._change_info-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

._change_username {
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
._change_username-text{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 170px;
    max-width: 100%;
}
        
/* Иконка человечка перед ником */
._change_user-icon {
    font-size: 14px;
}
._change_active ._change_user-icon {
    color: #49a310;
}

/* Статусы (online, offline, away) */
._change_status {
    font-size: 13px;
    font-weight: 500;
}
._change_status._change_online { color: #49a310; font-weight: bold; }
._change_status._change_offline { color: #7a6256; }
._change_status._change_away { color: #a1693f; }

/* Нижняя строка (Уровень, Золото и т.д.) */
._change_info-bottom {
    font-size: 14px;
    display: flex;
    flex-wrap: wrap; /* Чтобы на экранах < 360px красиво переносилось */
    align-items: center;
    column-gap: 6px;
    row-gap: 2px;
}

/* Оформление иконок валюты и боя */
._change_inline-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
        
._change_coin-gold { color: #d4a313; font-weight: bold; }
._change_coin-silver { color: #9e9e9e; font-weight: bold; }

/* Кнопка добавления аккаунта */
._change_add-account-btn {
    width: 100%;
    border: none;
    border-top: 2px dashed rgba(74, 35, 17, 0.2);
    margin-top: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #d9c7a1;
}
._change_add-account-btn:hover {
    color: #6e2707;
}
._change_add-account-btn ._change_plus {
    font-size: 22px;
    line-height: 1;
    color: #5c2d15;
}

/* --- ПОЛНОЭКРАННОЕ МОДАЛЬНОЕ ОКНО "ДОБАВИТЬ АККАУНТ" --- */
._change_modal-overlay {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Затемнение заднего фона */
    z-index: 200;
    justify-content: center;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
}

/* Класс открытия для полноэкранного окна */
._change_modal-overlay._change_open {
    display: flex;
}

/* Карточка самого окна */
._change_modal-content {
    background: radial-gradient(#fff0cc, #f0d5a6); /* Тот же пергамент */
    border-radius: 12px;
    width: 100%;
    max-width: 400px; /* Ограничение по ширине, чтобы на ПК смотрелось аккуратно */
    padding: 24px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.7);
    animation: _change_fadeInModal 0.2s ease-out;
}

@keyframes _change_fadeInModal {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Кнопка Крестик (справа вверху) */
._change_close-btn {
    position: absolute;
    top: 10px;
    right: 16px;
    font-size: 28px;
    color: #4a2311;
    cursor: pointer;
    line-height: 1;
    user-select: none;
    transition: transform 0.1s, color 0.1s;
}
._change_close-btn:hover {
    transform: scale(1.15);
    color: #7a1f1f;
}

/* Заголовок модального окна */
._change_modal-title {
    color: #4a2311;
    text-align: center;
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 22px;
    font-weight: bold;
    border-bottom: 2px dashed rgba(74, 35, 17, 0.2);
    padding-bottom: 12px;
}

/* Стилизация формы */
._change_form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

._change_form-group label {
    color: #4a2311;
    font-weight: bold;
    font-size: 14px;
}/* Стили инпутов в игровом стиле */
._change_form-input {
    background-color: #fffdec;
    border: 2px solid #a37547;
    border-radius: 6px;
    padding: 11px 12px;
    color: #3a1302;
    font-size: 16px;
    font-family: inherit;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.15);
    outline: none;
    box-sizing: border-box;
    width: 100%;
}
._change_form-input:focus {
    border-color: #4a2311;
    background-color: #ffffff;
}
._change_submit-btn {
    width: 100%;
    background: linear-gradient(#875631, #5c2d15);
    border: 2px solid #edd19c;
    color: #fff;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    margin-top: 8px;
    transition: background 0.1s;
}
._change_submit-btn:hover {
    background: linear-gradient(#a1693f, #70381b);
}
._change_submit-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 3px rgba(0,0,0,0.4);
}

/* Специфичный фикс для ультра-маленьких экранов (адаптив) */
@media (max-width: 360px) {
    ._change_username { font-size: 14px; }
    ._change_info-bottom { font-size: 12px; }
    ._change_avatar-box { width: 50px; height: 50px; }
    ._change_modal-content { padding: 18px; }
    ._change_modal-title { font-size: 18px; }
}
.wrapper{
    text-align: center;
}
.banner_news h1,
.banner_news p {
  color: #fff;
  margin-left: 12px;
}

.banner_news h1 {
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

.banner_news p {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}
/* --- КОНТЕЙНЕР ОКНА (МОДАЛКА / ВЫПАДАЮЩИЙ СПИСОК) --- */
.armor_kit img{
    width: 50px;
    height: 50px;
}
.amulet_kit img{
    width: 50px;
    height: 50px;
}
._kit_change_username-text{
    margin-bottom: 10px!important;
    text-align: left!important;
    display: inline-block;
}
.active_itemss{
    display: none;
}
.numer_kits{
    color: #313131;
    margin-right: 8px;
}
.dont_kit_empty{
    text-align: center; 
    margin: 20px 0; 
    font-size: 16px; 
    color: #7F1414;
}
._kit_change_account-modal {
    display: none;
    width: 100%;
    box-sizing: border-box;
    padding-top: 8px;
    top: 100%;
    left: 0;
    z-index: 100;
}
._kit_change_username{

}
.redact_kid_item{
    display: inline-block;
    float: right;
}
._kit_change_account-modal._kit_change_open {
    display: block;
}

/* Список аккаунтов */
._kit_change_account-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Элемент аккаунта */
._kit_change_account-item {
    padding: 5px;
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    background: #d9c7a1;
    box-sizing: border-box;
    padding: 8px;
    margin-right: 10px;
    margin-left: 10px;
}
.kits_list_container{
    max-height: 500px;
    overflow-y: auto;
}

._kit_change_account-item:last-child {
    border-bottom: none;
}

._kit_change_account-item:hover {
    background-color: rgba(74, 35, 17, 0.05);
}

/* Активный аккаунт */
._kit_change_account-item._kit_change_active {
    background-color: rgba(139, 195, 74, 0.15);
    border: 2px solid #49a310;
    border-radius: 6px;
    padding: 6px;
    background: #caa35f;
}


.season_news {
  margin-top: 10px;
  display: flex;
  gap: 15px;
  align-items: center;
}

.season-badge_news {
  background: linear-gradient(90deg, #f4c542, #c79200);
  color: black;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 14px;
}

.days-left_news {
  color: #bbb;
}

/* === ЗАГОЛОВОК === */
.opponents-header_news {
  margin-top: 30px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #aaa;
  font-weight: 600;
  letter-spacing: 1px;
}

.refresh_news {
  background: none;
  border: none;
  color: #caa84b;
  cursor: pointer;
  font-weight: 600;
}

/* === КАРТОЧКИ === */
.opponent-card_news {
    display: flex;
    margin-bottom: 5px;
    border: 1px solid #D6D6D6;
    padding-top: 5px;
    padding-bottom: 5px;
    border-left: none;
    border-right: none;
    color: #313131;;
}

.left_news {
  position: relative;
  margin-right: 15px;
  margin-left: 6px;
}

.level_news {
  position: absolute;
  top: -8px;
  left: -8px;
  background: #c43737;
  color: white;
  font-weight: bold;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 6px;
}

.left_news.gold_news .level_news {
  background: #d4a514;
}

.avatar_news {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
}

.info_news {
  flex: 1;
}
.stats_news {
  margin-top: 6px;
  display: flex;
  gap: 5px;
  align-items: center;
}

/* === КНОПКА БИТВА === */
.fight_news {
  background: linear-gradient(180deg, #c42121, #7f1111);
  border: none;
  padding: 12px 26px;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
  box-shadow: 0 4px 15px rgba(196,33,33,0.5);
}

.fight_news:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255,50,50,0.6);
}
.forum_underline{
    text-decoration: underline;
}
.forum_title{
    padding-top: 5px;
}
.error-message{
    color: #f30000;
}
.preview-wall{
    padding-bottom: 10px;
}
/*Прогресс для задания*/
.progress-container-task {
    width: 100%;
}
.progress-bar-task {
    width: 100%;
    height: 4px;
    margin-top: 3px;
    margin-bottom: 3px;
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid #FFBE7F;
    padding-top: 1px;
    padding-bottom: 1px;
}
.progress-task {
    width: 0%; /* Изменяемое значение прогресса */
    height: 100%;
    background: linear-gradient(90deg, #ffd36a, #ff9f1a);
    transition: width 0.5s ease;
}
.task_img{
    width: 114px;
    margin-right: 12px;
}
.task_img img{
    width: 100%;
}
.task{
    display: flex;
    border-radius: 12px;
    margin-bottom: 20px;
}
.right_task{
    width: 100%;
}
.get_task {
  display: none;
}
#rewardIcons{
    margin:20px 0;
    display:flex; 
    justify-content:center; 
    gap:10px; 
    flex-wrap:wrap;
}
#rewardModal{
    display: none;
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:rgba(0,0,0,0.5); 
    justify-content:center; 
    align-items:center;
}
.modal-content{
    background:#fff; 
    padding:20px; 
    border-radius:10px; 
    text-align:center; 
    max-width:300px;
}

/* Контейнер пушей */
.arena-notification-container {
    position: fixed;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 100%;
    pointer-events: none;
}

/* Сам пуш */
.arena-notification {
    background: green;
    color: #fff;
    padding: 10px 14px;
    margin-bottom: 2px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 455px;
    margin-left: auto;
    margin-right: auto;

    opacity: 0;
    transform: translateY(-20px);
    transition: transform 0.35s ease, opacity 0.35s ease;

    pointer-events: auto;
}

.arena-notification.show {
    opacity: 1;
    transform: translateY(0);
}

.arena-notification.hide {
    opacity: 0;
    transform: translateY(-25px);
}

.arena-notification .close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}
.modal-content_shop .quantity-buttons_shop label{
    text-align: left;
}
.modal_shop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal_shop.active_shop {
    display: flex;
}

.modal-content_shop {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 85%;
    max-width: 400px;
    transform: translate(-50%, -50%) scale(.7);
    background: #F5F6E0;
    border-radius: 16px;
    padding: 6px 20px 20px 20px;
    text-align: center;
    animation: modalIn .4s ease forwards;
    overflow: hidden;
}

.quantity-buttons_shop {
    margin: 15px 0;
}

.qty-btn_shop {
    margin: 0 4px;
    padding: 4px 10px;
    cursor: pointer;
    background: linear-gradient(180deg, #FFDEA8 0%, #E6A35F 100%);
    color: #6D4A14;
    transition: background-color .3s;
    margin-top: 5px;
}

.qty-btn_shop.active_shop {
    background: linear-gradient(180deg, #D89D43 0%, #D89D43 100%);
    padding: 4px 10px;
    transition: background-color .3s;
    margin: 0 4px;
    color: #6D4A14;
    margin-top: 5px;
}
.modal-close_shop {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    color: #6D4A14;
    transition: transform .2s ease, color .2s ease;
}

#conutinie_chat{
    text-align: center;
    margin: 0 auto;
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: 600;
}

.modal-close_shop:hover {
    transform: scale(1.2);
    color: #b22222;
}
.img_block_potion{
    max-width: 76px;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 10px;
}
.img_potion{
    width: 100%;
}
.check{
    font-size: x-small;
    padding-bottom: 10px;
}
/*модальное окно при подарке*/
.modal-target-content {
    max-width: 400px;
    width: 90%;
}
.target-list {
    max-height: 300px;
    overflow-y: auto;
    margin: 15px 0;
    padding: 5px;
    border-radius: 5px;
}
.target-item {
    display: flex;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
}
.target-item:last-child {
    border-bottom: none;
}
.target-item.selected {
    background: #e0f0ff;
    border-left: 3px solid #007bff;
}
.target-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}
.target-info {
    flex: 1;
}
.target-name {
    font-weight: bold;
    margin: 0;
    margin-left: 10px;
}
.target-level {
    font-size: 0.9em;
    color: #666;
    margin: 0;
}
.target-item {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.img_avatar_send{
    width: 100%;
    max-width: 40px;
}

/*модальное окно в экипировке*/
.modal-content_equipment .quantity-buttons_equipment label{
    text-align: left;
}

.modal_equipment {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal_equipment.active_equipment {
    display: flex;
}

.modal-content_equipment {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 85%;
    max-width: 400px;
    transform: translate(-50%, -50%) scale(.7);
    background: #F5F6E0;
    border-radius: 16px;
    padding: 6px 20px 20px 20px;
    text-align: center;
    animation: modalIn .4s ease forwards;
}

.quantity-buttons_equipment {
    margin: 15px 0;
}

.qty-btn_equipment {
    margin: 0 4px;
    padding: 4px 10px;
    cursor: pointer;
    background: linear-gradient(180deg, #FFDEA8 0%, #E6A35F 100%);
    color: #6D4A14;
    transition: background-color .3s;
    margin-top: 5px;
}

.qty-btn_equipment.active_equipment {
    background: linear-gradient(180deg, #D89D43 0%, #D89D43 100%);
    padding: 4px 10px;
    transition: background-color .3s;
    margin: 0 4px;
    color: #6D4A14;
    margin-top: 5px;
}

.modal-close_equipment {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    color: #6D4A14;
    transition: transform .2s ease, color .2s ease;
}

.modal-close_equipment:hover {
    transform: scale(1.2);
    color: #b22222;
}


.img_potion{
    width: 100%;
}

.check{
    font-size: x-small;
    padding-bottom: 10px;
}
#time_date_house{
    display: none;
}

/*подтвержение анимации в лавке*/
.shop-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* не блокирует клики */
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.shop-animation-container.show {
    opacity: 1;
    visibility: visible;
}

.shop-animation-circle {
    width: 100px;
    height: 100px;
    background-color: #4CAF50; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.shop-animation-container.error .shop-animation-circle {
    background-color: #F44336; 
}
.shop-animation-circle.bounce {
    transform: scale(1);
}
.shop-animation-icon {
    width: 60px;
    height: 60px;
    fill: none;
    stroke: white;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.shop-animation-circle.pulse {
    animation: pulse 0.5s ease-out;
}

/*серые блоки в shop*/
.skeleton-container {
    width: 100%;
}

.skeleton-card {
    display: flex;
    gap: 5px;
    border: 1p;
    border: dashed #D6D6D6;
    border-left: none;
    border-right: none;
    border-width: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.skeleton-left {
    width: 72px;
    height: 72px;
    background: linear-gradient(91deg, #bdb7b7 25%, #cbcbcb 50%, #cbcbcb 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
}

.skeleton-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.skeleton-line {
    height: 16px;
    background: linear-gradient(91deg, #bdb7b7 25%, #cbcbcb 50%, #cbcbcb 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
}

.skeleton-button {
    width: 150px;
    height: 28px;
    background: linear-gradient(91deg, #bdb7b7 25%, #cbcbcb 50%, #cbcbcb 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
    align-self: center;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/*настройка переключателей*/
.checkbox-green {
    position: relative;
    display: inline-block;
    width: 33px;
    height: 16px;
    cursor: pointer;
    margin-top: 10px;
}
/*desk_item*/
.desc_items{
    display: block;
}
.desc_items .stats_armor{
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: left;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;

}
.stats_armor p{
    padding-top: 5px;
    padding-bottom: 5px;
}
.desc_items .amulet_discriptions{
    padding-top: 5px;
    text-align: left;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;

}
.amulet_discriptions p{
    padding-top: 2px;
    padding-bottom: 2px;
}
.upgrade-info p{
    text-align: left;
    padding-top: 2px;
    padding-bottom: 2px;
}
.desc_items .scroll_discriptions{
    padding-top: 5px;
    text-align: left;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}
.scroll_discriptions p{
    padding-top: 2px;
    padding-bottom: 2px;
}
.transaction-info p{
    text-align: left;
    padding-top: 2px;
    padding-bottom: 2px;
}
.desc_items .potion_discriptions{
    padding-top: 5px;
    text-align: left;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}
.potion_discriptions p{
    padding-top: 2px;
    padding-bottom: 2px;
}
.desc_items .present_discriptions{
    padding-top: 5px;
    text-align: left;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}
.present_discriptions p{
    padding-top: 2px;
    padding-bottom: 2px;
}
.desc_items .curse_discriptions{
    padding-top: 5px;
    text-align: left;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}
.curse_discriptions p{
    padding-top: 2px;
    padding-bottom: 2px;
}
.desc_items .drawing_discriptions{
    padding-top: 5px;
    text-align: left;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}
.drawing_discriptions p{
    padding-top: 2px;
    padding-bottom: 2px;
}
.desc_items .blacksmith_discriptions{
    padding-top: 5px;
    text-align: left;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}
.blacksmith_discriptions{
    padding-top: 2px;
    padding-bottom: 2px;
}
.delete-btn{
    position: absolute;
    right: -2px;
    top: 2px;
    font-size: 20px;
}
/*скрываем и показываем зверя в арене*/
.beast_result{
    display: none;
}
.beast_user{
    display: none;
}
.beast_hero{
    display: none;
}
.resources_win_loose{

}
.who_win{
    display: none;
}
.all_scroll {
    display: none;
}
.effect_icon{
    width: 100%;
    max-width: 25px;
    vertical-align: middle;
    margin-right:5px;
    cursor: pointer;
}
.effects-container_details{
    display: flex;
    justify-content: start;
}
.drop_down_effects_creat strong{
    margin-left: 5px;
    margin-right: 10px;
}
.drop_down_effects_dodge strong{
    margin-left: 5px;
    margin-right: 10px;
}
.drop_down_effects_protect strong{
    margin-left: 5px;
    margin-right: 10px;
}
#start, #battle_swimming, #continue, #continue_end {
    display: none;
}
.wrapper_effect{
    display: flex;
    justify-content: start;
    padding-top: 10px;
    padding-bottom: 10px;
}
/* скрываем стандартный checkbox */
.checkbox-green input {
    opacity: 0;
    width: 0;
    height: 0;
}
/*урон*/
.dmg-number {
    color: red;
    font-weight: bold;
}
.beast-dead {
    font-style: italic;
}
.drop_down_effects_creat_user strong{
    color:green;
}
.drop_down_effects_dodge_user strong{
    color:green;
}
.drop_down_effects_protect_user strong{
    color:green;
}
.drop_down_effects_creat_hero strong{
    color:red;
}
.drop_down_effects_dodge_hero strong{
    color:red;
}
.drop_down_effects_protect_hero strong{
    color:red;
}

/* фон переключателя */
.checkbox-green-switch {
    position: absolute;
    inset: 0;
    background: #cfcfcf;
    border-radius: 50px;
    transition: 0.4s ease;
    border: 1px solid #9c9c9c;
}
/*Эффекты*/

/* кружок */
.checkbox-green-switch::before {
    content: attr(data-label-off);
    position: absolute;
    height: 18px;
    width: 18px;
    left: -1px;
    top: -3px;
    background: linear-gradient(145deg, #ffffff, #dcdcdc);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: #666;
    transition: 0.4s ease;
    border: 1px solid #a4a4a4;
}

/* состояние включено */
.checkbox-green input:checked + .checkbox-green-switch {
    background: #37a71b;
}

.checkbox-green input:checked + .checkbox-green-switch::before {
    transform: translateX(19px);
    content: attr(data-label-on);
    color: #1fae4b;
}

/* hover эффект */
.checkbox-green:hover .checkbox-green-switch {
    filter: brightness(1.1);
}

/*пустота в экипировке*/
.empty-slot{
    filter: grayscale(100%);
}
.choice-item{
    display: inline-block;
}
.choice-item img{
    max-width: 72px;
    margin-top: 5px;
    display: inline-block;
}
/*поиск в экипровке*/
.search-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
}
.search-wrapper input {
    padding-right: 30px;
    width: 100%;
    box-sizing: border-box;
}
.search-icon, .search-spinner {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.search-spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}
/*переключалка в модальном окне для маркета*/
.switcher {
    display: inline-flex;
    border: 1px solid #999;
    border-radius: 4px;
    overflow: hidden;
    background: #eee;
    margin-top: 5px;
    margin-bottom: 5px;
}

.switcher input {
    display: none;
}
.btn_kit{
    padding: 8px 10px;
    cursor: pointer;
    background: #f3f3f3;
    transition: background 0.2s;
    user-select: none;
    margin-top: 10px;
}
.switcher label {
    padding: 8px 20px;
    cursor: pointer;
    background: #f3f3f3;
    border-right: 1px solid #999;
    transition: background 0.2s;
    user-select: none;
}

.switcher label:last-child {
    border-right: none;
}

/* активное состояние */
.switcher input:checked + label {
    background: #f4d7a1;
}

/* hover */
.switcher label:hover {
    background: #e6e6e6;
}
/*переключалка аренды в модалном окне для маркета*/
.power-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Arial, sans-serif;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* скрываем чекбокс */
.power-toggle input {
    display: none;
}

/* сам переключатель */
.power-slider {
    width: 33px;
    height: 16px;
    background: #cfcfcf;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

/* бегунок */
.power-slider::before {
    content: "";
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    top: -2px;
    transition: transform 0.3s;
    border: 1px solid #afafaf;
}

/* включено */
.power-toggle input:checked + .power-slider {
    background: #37a71b;
}

.power-toggle input:checked + .power-slider::before {
    transform: translateX(15px);
}

/* подписи */
.power-label {
    font-size: 14px;
}

.power-toggle input:checked ~ .off {
    display: none;
}

.power-toggle input:not(:checked) ~ .on {
    display: none;
}
/*запланировать дату в экипировке*/
.radio-block {
  text-align: left;
}

.schedule {
    display: none;

}
.switch_date{
    display: inline-flex;
    border: 1px solid #999;
    border-radius: 4px;
    overflow: hidden;
    background: #eee;
    margin-top: 5px;
    margin-bottom: 5px;
}
.date-option {
    text-align: left;
    padding: 8px 0px;
}
.date-option:last-child label {
    border-right: none;
}
.date-option input:checked + span {
    background: #f4d7a1;
}

.date-option label span{
    padding: 8px 20px;
    cursor: pointer;
    background: #f3f3f3;
    border-right: 1px solid #999;
    transition: background 0.2s;
    user-select: none;
}

.date-option label:hover {
    background: #f1f5ff;
}

.date-option input {
    display: none;
}

.time-title {
    margin-top: 10px;
    margin-bottom: 8px;
    text-align: left;
    font-weight: 600;
}

.time-picker {
    display: flex;
    align-items: center;
    gap: 10px;
}

.time-select {
    appearance: none;
    padding: 6px 8px;
    font-size: 16px;
    border: 1px solid #D7D8C2;
    background: #FBFBF0;
    cursor: pointer;
    transition: 0.2s;
    min-width: 50px;
}

.time-select:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.time-separator {
    font-size: 20px;
    font-weight: bold;
}
.wrap_alchemist{
    background: #cccccc54;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #cccccc54;
}
.wrap_alchemist p{
    padding-bottom: 5px;
    text-align: center;
}
#potion_put{
    text-align: center;
}
.grayscale{
    filter: grayscale(100%);
}
/*alhimik*/
.slot-image {
    filter: grayscale(100%);
    transition: filter 0.3s;
}
.slot-image:not([src*="empty_boiler"]) {
    filter: none;
}
/*шахта*/
.mine-container {

}

.header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.image-block {

}

.image-block img {

}

.description {
    border-bottom: 1px dashed #a67c52;
    height: 40px;
    display: flex;
    align-items: center;
}

.stats-panel {
    border-bottom: 1px solid #e0d5b1;
    padding-top: 6px;
    padding-bottom: 6px;
}

.stat-line {
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
}

.stat-val {
    font-weight: bold;
}

.highlight-green {
    color: #1e7d32;
}

.actions {
    background: #fff;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #e0d5b1;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
}

.btn:hover {
    background: #f0e6c5;
}

.btn:active {
    background: #e2d7b0;
}

.btn-content {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #4e3620;
}

.arrow {    
    font-weight: bold;
}

.logs-title {
    background: #741717;
    color: #fff;
    padding: 4px 10px;
    font-size: 11px;
    text-transform: uppercase;
}

.logs-window {
    height: 160px;
    background: #eeeeeeab;
    overflow-y: auto;
    padding: 5px 10px;
    font-size: 12px;
    border-top: 1px solid #a67c52;
}

.log-entry {
    border-bottom: 1px solid #ddd;
    padding: 3px 0;
    animation: fadeIn 0.3s ease;
}

.log-time {
    color: #888;
    font-size: 10px;
    margin-right: 6px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Модальное окно выбора зелий */
.alchemist-modal-content {
    width: 400px;
    max-width: 90%;
}

.alchemist-potion-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
}

.potion-select-btn {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

.potion-select-btn .potion-icon {
    width: 60px;
    height: 60px;
    display: block;
}

.qty-btn_shop.active_shop {
    background-color: #ffd700; 
    font-weight: bold;
}
/**/
.loc-name { 
    background: rgba(0,0,0,0.6); 
    text-align: center; 
    padding: 6px; 
    font-weight: bold; 
    font-size: 15px; 
    color: #ffcc66; 
    position: relative; 
    z-index: 5; 
    border-bottom: 1px solid #ffcc66; 
}

/* Статус-панель */
.status-panel { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 10px; 
}
.bar-wrap { 
    position: relative; 
    background: #111; 
    height: 14px; 
    border-radius: 7px; 
    border: 1px solid #555; 
    overflow: hidden; 
    margin-top: 3px; 
}
.bar-fill { 
    height: 100%; 
    width: 100%; 
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}
.hp-fill { background: linear-gradient(90deg, #ff3333, #aa0000); }
.sp-fill { background: linear-gradient(90deg, #33ccff, #0066aa); }
.bar-label { 
    display: flex; 
    justify-content: space-between; 
}

/* Прогресс пути */
.path-progress { 
    padding-top: 10px;
}
.path-bar { 
    height: 6px; 
    background: #111; 
    border-radius: 3px; 
    position: relative; 
    border: 1px solid #444; 
}
.path-fill { 
    height: 100%; 
    width: 0%; 
    background: linear-gradient(90deg, #cc6600, #ffd700); 
    border-radius: 3px; 
}
.path-point { 
    position: absolute; 
    width: 6px; 
    height: 6px; 
    background: #fff; 
    border-radius: 50%; 
    top: 0px; 
    box-shadow: 0 0 5px #fff; 
}

/* Экран старта */
#start-screen { 

}
.btn-start { 
    background: linear-gradient(180deg, #ff9933, #cc6600); 
    border: 1px solid #fff; 
    padding: 15px; 
    color: #fff; 
    font-weight: bold; 
    width: 100%; 
    cursor: pointer; 
    font-size: 14px; 
    text-shadow: 1px 1px #000; 
}

/* Оверлей привала */
#camp-overlay {
    top: 0;
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: 100;
    display: none; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    padding: 25px; 
    box-sizing: border-box;
}
.camp-title {  
    margin-bottom: 5px; 
}
.camp-actions { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 8px; 
    max-width: 480px;
    width: 100%;
    margin-top: 15px; 
}
.camp-btn { 
    background: #F5F6E0; 
    border: 1px solid #ababab;
    padding: 10px; 
    cursor: pointer; 
    text-align: left; 
}
.camp-btn:hover { background: #4d3b2f; }
.exit-btn { background:#b11; border-color:#fff; text-align:center; margin-top:10px; }

/* Логи */
.logs { 
    height: 200px; 
    overflow-y: auto; 
    padding-top: 10px; 
}
.log-entry { 
    margin-bottom: 6px; 
    border-left: 3px solid #4a3b2f; 
    padding-left: 10px; 
    animation: fadeIn 0.3s; 
    line-height: 1.3; 
}
.log-rare { 
    font-weight: bold; 
}
.log-dmg { 
    color: #ff6666; 
}
.log-item { 
    color: #558b55; 
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

#action_timer{
    display: none;
}
#not_personal{
    display: none;
}
/*Поход*/
.location-name { 
    background: rgba(0,0,0,0.4); 
    text-align: center; 
    padding: 6px; 
    font-weight: bold; 
    font-size: 16px; 
    color: #ffcc66; 
}

.info-block { 
    border-bottom: 1px dashed #ffd700; 
    line-height: 1.4; 
}

.stats-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 5px; 
}

.stat-item { 
    padding-top: 5px;
    border-radius: 3px; 
}

.stat-val { 
    font-weight: bold; 
    float: right; 
}

.expedition-monitor { 
    padding-top: 10px;
    display: none; 
}
.scren_copy{
    float: right;
    gap: 12px;
    display: flex;
}
.icon_copy{
    width: 22px;
    vertical-align: text-bottom;
    padding-right: 2px;
}
.progress-box { 
    margin-bottom: 10px; 
}

.bar-bg { 
    background: #111; 
    height: 14px; 
    border-radius: 7px; 
    border: 1px solid #ffcc66; 
    position: relative; 
    overflow: hidden; 
}

.bar-fill { 
    background: linear-gradient(90deg, #ffd700, #ff8c00); 
    width: 0%; 
    height: 100%; 
    transition: width 0.5s; 
}

.bar-text { 
    position: absolute; 
    width: 100%; 
    text-align: center; 
    top: 0; 
    font-size: 10px; 
    font-weight: bold; 
    line-height: 14px; 
    color: #fff; 
}

.live-logs { 
    height: 120px; 
    overflow-y: auto; 
    font-size: 12px; 
}

.log-line { 
    padding: 3px 0; 
    animation: slideIn 0.3s; 
}

.log-gain { 
    color: #027902;
}

.log-event { 
    color: #ff6666; 
}

.setup-block { 
 padding-top: 5px;
}

.work-select { 
    width: 100%; 
    padding: 10px; 
    background: #fffdf2; 
    border: 2px solid #a67c52; 
    margin-bottom: 10px; 
    font-weight: bold; 
}

.btn-start { 
    background: linear-gradient(to bottom, #ff9933, #cc6600); 
    border: 1px solid #fff; 
    padding: 12px; 
    color: #fff; 
    font-weight: bold; 
    width: 100%; 
    cursor: pointer; 
    border-radius: 4px; 
    text-shadow: 1px 1px #000; 
    box-shadow: 0 2px 5px #000; 
}

.nav-btn { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 12px 15px; 
    border-bottom: 1px solid #a67c52; 
    cursor: pointer; 
    background: #c6702c; 
    color: #fffdf2; 
    font-weight: bold; 
}

.nav-btn:hover { 
    background: #d6803c; 
}

.nav-icon { 
    margin-right: 10px; 
    width: 20px; 
    display: inline-block; 
    text-align: center; 
}

.nav-arrow { 
    color: #ffcc66; 
    font-size: 14px; 
}

@keyframes slideIn { 
    from { opacity: 0; transform: translateX(-10px); } 
    to { opacity: 1; transform: translateX(0); } 
}
/*house training*/
.img-lock-wrapper {
    position: relative;
    display: inline-block;
}

.lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(96%, -145%);
    width: 100%;
    pointer-events: none;
    max-width: 18px;
}
.lock_block{
    filter: grayscale(100%);
}
.icon_stats{
    width: 22px;
    margin-left: 10px;
}
.right_stats{
    display: flex;
}
.quantity-buttons_trainingHouse{
        position: absolute;
    top: 50%;
    left: 50%;
    width: 85%;
    max-width: 400px;
    transform: translate(-50%, -50%) scale(.7);
    background: #F5F6E0;
    border-radius: 16px;
    padding: 6px 20px 20px 20px;
    text-align: center;
    animation: modalIn .4s ease forwards;
    overflow: hidden;
}
.arena-notification.with-button {
    display: flex;
    align-items: center;
    gap: 10px;
}
.arena-notification .use-btn {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.arena-notification .use-btn:hover {
    background: #45a049;
}
.arena-notification .use-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.action-btn{
    background: #4CAF50;
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.power_switch_name{
    display: block;
}
/*история кузнеца*/
.game-panel {
    padding-top: 12px;
}
.subtitle {
    text-align: center;
    font-size: 14px;
    color: #6b4c1e;
    margin-top: 4px;
}

.section-title {
    background: linear-gradient(#d2b378, #c39a55);
    color: #5a3b0c;
    font-weight: bold;
    padding: 6px;
    text-align: center;
    margin-top: 12px;
}

.filter-row {
    text-align: left;
}

.filter-btn {
    background: #d9c7a1;
    border: none;
    padding: 6px;
    cursor: pointer;
    margin-top: 5px;
    margin-bottom: 5px;;
}

.filter-btn img {
    width: 25px;
    height: 25px;
}

.filter-btn.active {
    background: #caa35f;
}

.history-list {
    max-height: 400px;
    overflow-y: auto;
}

.history-list{
    max-height:400px;
    overflow-y:auto;
}

.history-card{
    border:1px solid #d2b378;
    padding:12px;
    margin-bottom:12px;
}

/* верх */

.card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.card-title{
    display: inline-flex;   
}

.card-level{
    color:#c39a55;
    margin-left:6px;
}

/* пропуск */

.card-propusk{
    padding:4px 8px;
    font-size:12px;
}
.wraper_cars{
    display: flex;
    justify-content: space-between;
}

.card-propusk.yes{
    background:#2f6b2f;
    color:white;
}

.card-propusk.no{
    background:#8b2c2c;
    color:white;
}

/* хлебные крошки */

.card-meta{
    margin-top:4px;
    font-size:12px;
}

.card-meta span{
    background:#d9c7a1;
    padding:2px 6px;
}

/* ресурсы */

.card-resources{
    display:flex;
    gap:15px;
    margin-top:6px;
}

.card-resources img{
    width:16px;
    vertical-align:middle;
    margin-right:4px;
}

/* блок прогресса */

.card-progress{
    margin-top:8px;
}

.progress-row{
    display:flex;
    gap:10px;
}

.progress-block{
    background:#e8dcc0;
    padding:6px 8px;
}

/* значение */

.value{
    font-size:15px;
    font-weight:bold;
}

.green{
    color:#2f6b2f;
}

/* нижний ряд */

.bottom-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:6px;
}

/* статы */

.card-stats{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.card-stats_old img{
    max-width:16px;
    max-height: 16px;
    margin-right:2px;
    vertical-align: top;
}
.card-stats_now img{
    max-width:16px;
    max-height: 16px;
    margin-right:2px;
    vertical-align: top;
}
.card-stats_old span{
    margin-right: 5px;
}
.card-stats_now span{
    margin-right: 5px;
}
/* ускорение */

.card-speed{
    font-size:12px;
}

.speed-yes{
    color:green;
}

.speed-no{
    color:red;
}


.success { color: #2f6b2f; font-weight: bold; }
.fail { color: #8b2c2c; font-weight: bold; }

.stats {
    font-size: 14px;
    color: #5a3b0c;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.last-blueprint {
    margin-top: 8px;
}
.card-progress {
    padding-top: 8px;
    margin-top: 8px;
    font-size: 13px;
}

.card-speed {
    text-align: right;
    margin-top: 6px;
    font-size: 12px;
}

.speed-yes {
    color: #2f6b2f;
    font-weight: bold;
}

.speed-no {
    color: #8b2c2c;
}
.amulet_history{
    width: 35px;
}
/**/
.armor-name{
    text-align: center;
    text-overflow: ellipsis;
    width: 72px;
    white-space: nowrap;
    overflow: hidden;
}
.no-items{
    margin-top: 10px;
    margin-bottom: 10px;
}
.card-stats_old{
    margin-top: 10px;
}
/*дата истории в кузнице*/
._blachmitch_date_button{
    cursor: pointer;
    width: 110px;
}

/* быстрые даты */

._blachmitch_fast_dates{
display:flex;
margin-top: 10px;
}

/* скрыто изначально */

._blachmitch_fast_hidden{
display:none;
}

._blachmitch_fast_day{
    padding: 8px 3px;
    cursor: pointer;
    border: 1px solid #999
}

._blachmitch_fast_active{
background:#f4d7a1;
}

.armor-description{
    text-align: left;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}
.amulet-description{
    text-align: left;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}
/* календарь */

._blachmitch_calendar{
position:absolute;
margin-top:10px;
width:320px;
background:white;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,.12);
overflow:hidden;
display:none;
}

/* header */

._blachmitch_header{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px;
border-bottom:1px solid #eee;
font-size:16px;
}

/* стрелки */

._blachmitch_nav{
cursor:pointer;
font-size:18px;
}

/* дни недели */

._blachmitch_weekdays{
display:grid;
grid-template-columns:repeat(7,1fr);
padding:10px;
font-size:13px;
color:#6b7280;
}

/* сетка */

._blachmitch_days{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:6px;
padding:10px;
}

._blachmitch_day{
text-align:center;
padding:10px;
border-radius:8px;
cursor:pointer;
}

._blachmitch_day:hover{
background:#f3f4f6;
}

._blachmitch_active{
background:#2563eb;
color:white;
}

._blachmitch_disabled{
color:#c7c7c7;
cursor:not-allowed;
}
.date-selector {
    display: flex;
    align-items: center;
    gap: 2px;
}
.date-label {
}
#pagination_history_things{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}
.icon_set_wish{
    width: 20px;
    vertical-align: text-bottom;
    padding-right: 2px;
}
.luck_left{
    text-align: left;
}

/*Новый ччат*/
.prints_new{
}
#prints{
   font-size: 12px;
}
        /* Основные стили чата */
        .chat_boltalka {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            display: flex;
            flex-direction: column;
            height: 400px;
        }

        .date_boltalka {
            text-align: center;
            font-size: 12px;
            color: #999;
            margin: 10px 0;
        }

        .system_boltalka {
            text-align: center;
            font-size: 13px;
            color: #4caf50;
            margin: 10px 0;
        }

        .message_boltalka {
            display: flex;
            margin: 6px 0;
            align-items: flex-end;
        }

        .message_right_boltalka {
            justify-content: flex-end;
        }

        .message_left_boltalka {
            justify-content: flex-start;
        }

        .avatar_boltalka {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }

        .message_left_boltalka .avatar_boltalka {
            margin-right: 8px;
        }

        .message_right_boltalka .avatar_boltalka {
            margin-left: 8px;
        }

        .bubble_boltalka {
            padding: 8px 12px;
            border-radius: 18px;
            font-size: 14px;
            line-height: 1.4;
            word-wrap: break-word;
            position: relative;
        }

        .message_left_boltalka .bubble_boltalka {
            background: white;
            border-top-left-radius: 0;
        }

        .message_right_boltalka .bubble_boltalka {
            background: #0088ff;
            color: white;
            border-top-right-radius: 0;
        }

        .time_boltalka {
            font-size: 11px;
            opacity: 0.7;
            margin-left: 8px;
            float: right;
            line-height: 1;
            margin-top: 2px;
        }

        .message_left_boltalka .time_boltalka {
            color: #555;
        }

        .message_right_boltalka .time_boltalka {
            color: #fff;
        }

        .name_boltalka {
            margin-bottom: 2px;
        }
        /* Блок выбора собеседника */
        .choose_name_chat_active {
            display: none;
        }
        .choose_name_chat_active a {
            font-weight: bold;
        }
        .choose_name_chat_active a:hover {
            text-decoration: underline;
        }

        /* Область ввода */
        .chat_input_boltalka {
            display: flex;
            gap: 6px;
            position: relative;
        }

        .textarea_boltalka {
            flex: 1;
            border: none;
            outline: none;
            resize: none;
            padding: 8px 12px;
            font-size: 14px;
            line-height: 20px;
            box-sizing: border-box;
            min-height: 36px;
            max-height: 96px;
            height: auto;
            overflow-y: hidden;
            overflow-x: hidden;
            word-wrap: break-word;
            white-space: pre-wrap;
            background: white;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
            transition: box-shadow 0.2s;
        }
        .textarea_boltalka:focus {
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 0 0 2px rgba(0,136,255,0.3);
        }

        .button_boltalka {
            color: white;
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            font-size: 18px;
            cursor: pointer;
            transition: background 0.2s, transform 0.1s;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: linear-gradient(180deg, rgba(165, 38, 43, 0.2) 5.1%, rgba(73, 9, 12, 0.2) 100%), radial-gradient(50% 50% at 50% 50%, #3E080A 0%, #8B2023 71.5%, #9C2227 100%);
        }
        .button_boltalka:active {
            transform: scale(0.95);
        }

        /* Символы смайлов (спаны внутри contenteditable) */
        .gif-symbol {
            display: inline-block;
            padding: 0 2px;
            margin: 0 1px;
            cursor: default;
        }

        /* Скрытое поле для отправки */
        #hiddenMessageInput {
            display: none;
        }

        /* Подсветка упоминаний */
        .bubble_boltalka .mention {
            color: #ff9900;
            border-radius: 4px;
            padding: 0 2px;
            font-weight: 500;
        }
        /* Tabs */
.tabs_dota{
display:flex;
gap:6px;
margin-bottom:10px;
}
.tab_dota{
flex:1;
padding:6px;
border:none;
background: #731717;
color:#ddd;
font-weight:bold;
border-radius:6px;
cursor:pointer;
}
.tab_dota.active_dota{
background:#7c66d4;
color:white;
}
/* Grid */
.heroes-grid_dota{
    text-align: left;
}
/* Hero */
.hero_dota{
position:relative;
border-radius:8px;
overflow:hidden;
border:2px solid #3f1b7a;
box-shadow:0 0 6px #000;
cursor:pointer;
width: 75px;
display: inline-block;
margin-right: 10px;
}
.hero_dota img{
width:100%;
height:70px;
object-fit:cover;
}
#pagination{
    text-align: center;
}
.pagination_search_clan{
    text-align: center;
}
.hero_dota span{
position:absolute;
bottom:0;
left:0;
right:0;
font-size:12px;
text-align:center;
padding:3px;
font-weight:bold;
color: #fff;
background: linear-gradient(#00000052, rgba(0, 0, 0, 0.7));
}
/* Overlay */
.hero-sheet-overlay_dota{
position:fixed;
inset:0;
background:rgba(0,0,0,.6);
opacity:0;
pointer-events:none;
transition:.3s;
}
.hero-sheet-overlay_dota.active_dota{
opacity:1;
pointer-events:auto;
}
/* Bottom sheet */
.hero-sheet_dota{
position:fixed;
left:0;
right:0;
bottom:0;
background:linear-gradient(#4a2a8a,#2a0d54);
border-radius:16px 16px 0 0;
padding:14px;
transform:translateY(100%);
transition:.35s;
max-width: 480px;
margin: 0 auto;
}
/* Active sheet */
.hero-sheet_dota.active_dota{
transform:translateY(0);
}
/* Handle */
.sheet-handle_dota{
width:60px;
height:6px;
background:#bba8ff;
border-radius:10px;
margin:0 auto 12px;
cursor:pointer;
}
/* Layout */
.sheet-layout_dota{
display:flex;
gap:12px;
}
/* Left hero info */
.hero-left_dota{
width:110px;
text-align:center;
}
.hero-left_dota img{
width:100%;
border-radius:10px;
border:2px solid #6f55d1;
}
.hero-stats_dota{
margin-top:10px;
color: #fff;
}
.hero-stats_dota div{
margin:6px 0;
}
.tavern_game{
    margin-left: 20px;
    margin-right: 20px;
}
.time{
    color: #f7c079;
    font-size: x-small;
}
/* Skills */
.skills_dota{
flex:1;
display:flex;
flex-direction:column;
gap:8px;
}
.skill_dota{
display:flex;
align-items:center;
gap:8px;
background:#6e4eb7;
border-radius:8px;
padding:6px;
}
.skill_dota img{
width:60px;
height:60px;
}
.skill-text_dota{
flex:1;
color: #fff;
}
.skill-text_dota b{
display:block;
}
.skill-text_dota p{
font-size:13px;
margin:2px 0 0;
opacity:.9;
}
.skill-stats_dota{
text-align:right;
color: #fff;
}

/* TIMER */

.timer_dota{
text-align:center;
font-size:15px;
color:#ffd200;
margin-bottom:10px;
margin-top: 10px;
}

/* DRAFT */

.draft-container_dota{
justify-content:center;
align-items:center;
gap:15px;
margin-bottom:20px;
}

.slots_dota{
display:flex;
gap:6px;
justify-content: center;
}

.slot-wrapper_dota {
display: flex;
flex-direction: column;
align-items: center;
width: 60px;
    margin-right: 5px;
}

.slot_dota{
width:60px;
height:60px;
background:#6f55d1;
border-radius:8px;
border:2px solid #3f1b7a;
overflow:hidden;
}

.slot_dota img{
width:100%;
height:100%;
object-fit:cover;
}

.slot-name_dota {
max-width: 60px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 12px;
text-align: center;
margin-top: 4px;
color: #ccc;
}

.vs_dota{
font-size:20px;
font-weight:bold;
}

/* TABS */

.tabs_dota{
display:flex;
gap:6px;
margin-bottom:10px;
}

.tab_dota{
flex:1;
padding:6px;
border:none;
background:#731717;
color:#ddd;
font-weight:bold;
border-radius:6px;
cursor:pointer;
}

.tab_dota.active_dota{
background:#7c66d4;
color:white;
}

/* HERO GRID */

.heroes-grid_dota{
text-align:center;
}

.hero_dota{
position:relative;
border-radius:8px;
overflow:hidden;
border:2px solid #3f1b7a;
cursor:pointer;
width:75px;
display:inline-block;
margin:5px;
}

.hero_dota img{
width:100%;
height:70px;
object-fit:cover;
}

.hero_dota span{
position:absolute;
bottom:0;
left:0;
right:0;
font-size:12px;
text-align:center;
padding:3px;
background:rgba(0,0,0,.7);
}

/* OVERLAY */

.overlay_dota{
position:fixed;
inset:0;
background:rgba(0,0,0,.6);
opacity:0;
pointer-events:none;
transition:.3s;
}

.overlay_dota.active_dota{
opacity:1;
pointer-events:auto;
}

/* HERO SHEET */

.hero-sheet_dota{
position:fixed;
left:0;
right:0;
bottom:0;
background:linear-gradient(#4a2a8a,#2a0d54);
border-radius:16px 16px 0 0;
padding:14px;
transform:translateY(100%);
transition:.35s;
max-width:480px;
margin:auto;
}

.hero-sheet_dota.active_dota{
transform:translateY(0);
}

.sheet-layout_dota{
display:flex;
gap:12px;
}

.hero-left_dota{
width:110px;
text-align:center;
color: #fff;
}

.hero-left_dota img{
width:100%;
border-radius:10px;
border:2px solid #6f55d1;
}

.skills_dota{
flex:1;
display:flex;
flex-direction:column;
gap:8px;
}

.skill_dota{
display:flex;
align-items:center;
gap:8px;
background:#6e4eb7;
border-radius:8px;
padding:6px;
}

.skill-text_dota{
flex:1;
}

.skill-stats_dota{
text-align:right;
}

.select-btn_dota{
margin-top:12px;
background:#3cd65c;
border:none;
padding:10px;
width:100%;
border-radius:8px;
font-weight:bold;
cursor:pointer;
}
.hero-main-content {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.hero-main-content img {
  width: 110px;
  height: 110px;
  border-radius: 8px;
}
h2{
    margin: 0;
}
p{
    margin: 0;
}
#heroInfoName{
    color: #2fe6ff;
}
#heroInfoDesc{
    color: #2fe6ff;
}
.skill-discription{
    color: #fff;
}
/* Правая часть */
.hero-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 145px;
  overflow-y: auto;
  width: 100%;
  margin-bottom: 20px;
}

.hero-desc {
  font-size: 13px;
}

/* Скиллы */
.hero-skills {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skill {
  display: flex;
  gap: 8px;
}

.skill img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

/* Кнопка */
.select-btn {
  display: block;
  padding: 8px 20px;
  font-size: 16px;
  cursor: pointer;
  float: right;
}
/*mobilt tournire*/
.imgtoure img{
    width: 48px;
    height: 48px;
}
.toureimg-radio .imgtoure-label{
    display: inline-block;
    cursor: pointer;
}
.toure{
    text-align: center;
    margin-top: 10px;
}
.toureimg-radio input[type="radio"] {
    display: none;
}
.toureimg-radio input[type="radio"]:checked + .imgtoure-label .imgtoure img {
    border: 4px solid #00ff90;
}
.imgtoure-label {
    vertical-align: middle;
}
.toureimg-radio{
    display: inline-block;
}
.imgtoure{
    object-fit: cover;
}
/**/
.main-container{
  display:flex;
  padding-top: 10px;
}
.team-column{
  flex:1;
}
.team-b{
  margin-left: 10px;
}
.team-a{
    margin-right: 10px;
}
/* TEAM B ALIGN RIGHT */
.team-b .participant{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}

.team-b .avatar{
    margin-left:auto;
}

.team-b .progress-tourney{
    width:100%;
}

.team-b .progress-tourney-bars{
    justify-content:flex-end;
}

.team-b .skills-container{
    justify-content:flex-end;
    flex-direction:row-reverse;
}

.logs-column{
  width: 150px;
}   
.participant{
  text-align:center;
  margin-bottom:8px;
}
.avatar{
  width:60px;
  height:60px;
}
.avatar img{
  width:100%;
}

.progress-tourney{
  margin:5px 0;
}
.progress-tourney-bars{
  height:6px;
  background:#333;
  margin-bottom:2px;
}
.progress-fill{
  height:100%;
}
.hp{
  background:#ff4444;
}
.mana{
  background:#4444ff;
}

/* SIDE SKILLS */
.skills-container{
  display:flex;
  gap:4px;
}
.skill-icon{
    width:22px;
    height:22px;
    position:relative;
    pointer-events:none;
}
.skill-icon img{
  width:100%;
  height:100%;
}

/* PERSONAL SKILLS */
.personal-skills{
    margin-top:12px;
    display:flex;
    gap:10px;
    justify-content:center;
}
.personal-skill{
    width:80px;height:80px;
    background:none;border:none;
    position:relative;
    cursor:pointer;
}
.personal-skill img{
  width:100%;
  height:100%;
}
.personal-skill:disabled{
  cursor:not-allowed;
}

/* COOLDOWN */
.cd-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.6);
    color:#fff;
    font-size:11px;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:.2s;
}
.cd-overlay.activetour{
  opacity:1;
  visibility:visible;
}

/* LOGS */
.logs-list{
    background:#000;
    padding:5px;
    height:400px;
    overflow-y:auto;
}
.log-entry{
    font-size:12px;
    padding:5px;
    margin-bottom:5px;
    background:#333;
    color: #fff;
}
/* TEAM B RIGHT PROGRESS */
.team-b .progress-tourney-bars{
    display:flex;
    justify-content:flex-end;
}

.team-b .progress-fill{
    margin-left:auto;
}
.log-entry{
  color: #fff;
}
@keyframes damageFloat {

0%{
transform:translate(-50%,0);
opacity:1;
}

100%{
transform:translate(-50%,-40px);
opacity:0;
}

}

.team-bar-ui{
position:relative;
height:22px;
background:#222;
border-radius:10px;
overflow:hidden;
margin-bottom:10px;
}

.team-bar-fill-red{
position:absolute;
height:100%;
width:80%;
background:#d13a3a;
}

.team-bar-fill-blue{
position:absolute;
height:100%;
width:80%;
background:#3a9cff;
}

.team-bar-text{
position:absolute;
width:100%;
text-align:center;
line-height:22px;
font-weight:bold;
color:#fff;
}

/* ===== ЦЕНТР ТАЙМЕР ===== */

.center-timer{
text-align:center;
font-weight:bold;
color:#ffd400;
margin-bottom: 10px;
font-size: 16px;

}

/* ===== НИЖНИЕ ПОЛОСЫ ===== */

.bottom-bars{
width:100%;
}

.bottom-bar{
position:relative;
height:24px;
background:#222;
border-radius:12px;
margin-bottom:10px;
overflow:hidden;
}

.bottom-fill-red{
position:absolute;
height:100%;
width:100%;
background:#d13a3a;
}

.bottom-fill-blue{
position:absolute;
height:100%;
width:100%;
background:#3a9cff;
}

.bottom-text{
position:absolute;
width:100%;
text-align:center;
line-height:24px;
font-weight:bold;
color:#fff;
}
/* ===== БЛОК СТАТОВ СКИЛЛА ===== */

.skill-stats{
position: absolute;
    bottom: 0px;
    left: 70%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: self-end;
    gap: 4px;
    padding: 5px 6px;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    pointer-events: none;
    min-width: 38px;
}

/* урон */
.skill-dmg{
color:#ff4b4b;
line-height:12px;
}

/* мана */
.skill-mana{
color:#3aa3ff;
line-height:12px;
}

/* кулдаун */
.skill-cd{
color:#c96cff;
line-height:12px;
}

/* чтобы позиционирование работало */
.personal-skill{
position:relative;
}
.name_nick_a{
    text-align: left;
    font-weight: bold;
    white-space: nowrap; /* Не переносить текст */
  overflow: hidden; /* Скрыть вылезающий текст */
  text-overflow: ellipsis; /* Добавить ... */
  margin-bottom: 5px;
}
.name_nick_b{
    text-align: right;
    font-weight: bold;
    white-space: nowrap; /* Не переносить текст */
  overflow: hidden; /* Скрыть вылезающий текст */
  text-overflow: ellipsis; /* Добавить ... */
  margin-bottom: 5px;
}
/* лог боя */

.battle-log{
display:inline-block;
align-items:center;
gap:8px;
}

.log-avatar{
width:22px;
height:22px;
}

.log-arrow{
width:22px;
height:22px;
rotate: 90deg;
}

.log-damage{
display:flex;
align-items:center;
gap:4px;
margin-left:8px;
font-weight:bold;
font-size:18px;
color:#fff;
}

.log-sword{
width:15px;
height:15px;
}
.search-overlay_dota {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
backdrop-filter: blur(5px);
transition: opacity 0.5s;
}

.search-content_dota {
text-align: center;
color: #fff;
}

.spinner_dota {
border: 6px solid rgba(255,255,255,0.3);
border-top: 6px solid #ffd200;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}

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

.search-text_dota {
font-size: 24px;
font-weight: bold;
color: #ffd200;
}

.search-subtext_dota {
font-size: 16px;
color: #ccc;
margin-top: 10px;
}

.hidden_dota {
opacity: 0;
pointer-events: none;
}
.icon_dota_mp_atach{
    width: 14px!important;
    height: 14px!important;
    vertical-align: text-bottom;
    padding-right: 2px;
    border: none!important;
}
.hero-left_dota  p{
    text-align: left;
}
.market-price{
    margin-bottom: 10px;
}
.old-action-btn{
    display: inline-block;
    text-decoration: underline;
}
.old-close-btn{
    display: inline-block;
    text-decoration: underline;
}
.collar_discriptions{
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: left;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}
.blachmitch_item_armor{
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: left;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}
.collar_discriptions{
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: left;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}
.market-details{
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: left;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}
.modal_shop {
    display: none;
}
.modal_shop.active_equipment {
    display: flex; /* или block */
}
.modal_shop .wrapper-request {
    display: flex !important;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
.modal_shop .canvas_frame {
    display: inline-block !important;
}
/* подтверждения pin */
.app_pin {
    display: none; /* по умолчанию скрыто */
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1000;
    flex-direction: column;
    overflow-y: auto;
    margin-bottom: 10px;
    max-width: 480px;
    color: #000001;
}
.app_pin_create_change{
    display: none; /* по умолчанию скрыто */
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1000;
    flex-direction: column;
    overflow-y: auto;
    margin-bottom: 10px;
    max-width: 480px;
    color: #000001;
}
.app_pin_forget_password{
    display: none; /* по умолчанию скрыто */
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1000;
    flex-direction: column;
    overflow-y: auto;
    margin-bottom: 10px;
    max-width: 480px;
    color: #000001;    
}
body.modal-open {
    overflow: hidden;
}
.app_pin_change_password{
    display: none; /* по умолчанию скрыто */
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1000;
    flex-direction: column;
    overflow-y: auto;
    margin-bottom: 10px;
    max-width: 480px;
    color: #000001;
}
.app_pin_change_mail{
    display: none; /* по умолчанию скрыто */
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1000;
    flex-direction: column;
    overflow-y: auto;
    margin-bottom: 10px;
    max-width: 480px;
    color: #000001;
}
.app_pin_change_password .content_pin{
    display: none; /* по умолчанию скрыто */
}
.app_pin_change_mail .content_pin{
    display: none; /* по умолчанию скрыто */
}
/* активное состояние – показываем модалку */
.app_pin_create_change.active_equipment {
    display: flex;
}

.app_pin.active_equipment {
    display: flex;
}
.user_name_pass{
    width: 99%;
    height: 30px;
    padding: 4px 0 3px 3px;
    color: #000;
    margin: 2px 0 6px;
    border: 1px solid #D7D8C2;
    background: #ffffff;
    margin-top: 10px;
    margin-bottom: 10px;
}

.header_pin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

.header-title_pin {
    font-weight: bold;
}

.icon_pin {
    font-size: 20px;
    cursor: pointer;
    user-select: none;
}

.content_pin {
    flex: 1;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.title_pin {
    margin-bottom: 20px;
}

.dots_pin {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.dot_pin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ccc;
}

.dot_pin.active_pin {
    background: #333;
}

.button-confirm_pin {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: #a5bdf2;
    color: white;
    margin-bottom: 20px;
    cursor: not-allowed;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.button-confirm_pin.active_pin {
    background: #3b6df2;
    cursor: pointer;
}

.button-confirm_pin.loading_pin {
    background: #3b6df2;
    cursor: wait;
}

.spinner_pin {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.5);
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spin_pin 0.7s linear infinite;
}

@keyframes spin_pin {
    to {
        transform: rotate(360deg);
    }
}

.keypad_pin {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 81px;
}

.key_pin {
    padding: 18px;
    background: #eee;
    border-radius: 12px;
    font-size: 20px;
    cursor: pointer;
    color: #000001;
}

.key_pin:active {
    background: #ddd;
}

.disabled_pin {
    pointer-events: none;
    opacity: 0.6;
}
.key_pin_forget{
    padding: 18px;
    background: #eee;
    border-radius: 12px;
    cursor: pointer;
}
.log-entry {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
}

.log-new {
    opacity: 0;
    transform: translateY(-10px);
}
#logs_mine{
    display: none;
}
/*награды в руинах*/
.rewards-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 8px;
}

/* Общий стиль награды */
.rewards-row > div {
    position: relative;
    width: 90px;
    height: 110px;
    background: radial-gradient(circle at 30% 30%, #2a2a2a, #121212);
    border-radius: 14px;
    text-align: center;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(255,255,255,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Hover эффект */
.rewards-row > div:hover {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 0 20px rgba(255,255,255,0.4);
}

/* Иконки */
.rewards_img {
    width: 48px;
    margin-top: 15px;
    z-index: 2;
    position: relative;
}

/* Текст */
.rewards-row p {
    margin-top: 8px;
    font-weight: bold;
    font-size: 14px;
    z-index: 2;
    position: relative;
}

/* ✨ Частицы */
.rewards-row > div::before,
.rewards-row > div::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    opacity: 0;
    animation: particles 3s infinite;
}

/*смена пароля*/
.email_user{
    color: #610000;
}
.modal-header_change_m{
    border-bottom: 1px solid #D6D6D6;
}
.title_modal_left{
    text-align: left;
}
.back_modal{
    position: absolute;
    top: 8px;
    left: 20px;
    background: transparent;
    border: none;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    color: #6D4A14;
    transition: transform .2s ease, color .2s ease;
}
/* Разные позиции */
.rewards-row > div::after {
    left: 70%;
    animation-delay: 1.5s;
}

.rewards-row > div::before {
    left: 30%;
}

/* Анимация частиц */
@keyframes particles {
    0% {
        top: 80%;
        opacity: 0;
        transform: scale(0.5);
    }
    30% {
        opacity: 1;
    }
    100% {
        top: 10%;
        opacity: 0;
        transform: scale(1.2);
    }
}

/* ✨ Цвета под тип награды */
.reward_ruin_1 { box-shadow: 0 0 12px rgba(0, 200, 255, 0.6); }
.reward_ruin_2 { box-shadow: 0 0 12px rgba(180, 0, 255, 0.6); }
.reward_ruin_3 { box-shadow: 0 0 12px rgba(255, 215, 0, 0.6); }
.reward_ruin_4 { box-shadow: 0 0 12px rgba(0, 255, 120, 0.6); }

/* Лёгкое пульсирование */


@keyframes glow {
    from { filter: brightness(1); }
    to { filter: brightness(1.4); }
}
.reward_ruin_4{
    width: 50px!important;
    height: 70px!important;
}
.reward_ruin_5{
    width: 50px!important;
    height: 70px!important
}
.reward_ruin_6{
    width: 50px!important;
    height: 70px!important;
}
.reward_ruin_7{
    width: 50px!important;
    height: 70px!important;
}
.reward_ruin_8{
    width: 50px!important;
    height: 70px!important;
}
.reward_ruin_9{
    width: 50px!important;
    height: 70px!important;
}
.reward_ruin_10{
    width: 50px!important;
    height: 70px!important;
}
.reward_ruin_11{
    width: 50px!important;
    height: 70px!important;
}
.reward_ruin_12{
    width: 50px!important;
    height: 70px!important;
}
.reward_ruin_13{
    width: 50px!important;
    height: 70px!important;
}
.reward_ruin_10 .rewards_img{
    width: 14px;
}
.reward_ruin_11 .rewards_img{
    width: 14px;
}
.reward_ruin_12 .rewards_img{
    width: 14px;
}
.reward_ruin_13 .rewards_img{
    width: 14px;
}
.reward_ruin_4 .rewards_img{
    width: 21px;
    margin-top: 11px;
    z-index: 2;
    position: relative;
}
.reward_ruin_5 .rewards_img{
    width: 21px;
    margin-top: 11px;
    z-index: 2;
    position: relative;
}
.reward_ruin_6 .rewards_img{
    width: 21px;
    margin-top: 11px;
    z-index: 2;
    position: relative;
}
.reward_ruin_7 .rewards_img{
    width: 21px;
    margin-top: 11px;
    z-index: 2;
    position: relative;
}
.reward_ruin_8 .rewards_img{
    width: 21px;
    margin-top: 11px;
    z-index: 2;
    position: relative;
}
.reward_ruin_9 .rewards_img{
    width: 21px;
    margin-top: 11px;
    z-index: 2;
    position: relative;
}
.log-separator{
    color: #610000;
    text-align: center;
}
.estate{
    display: flex;
    align-items: center;
    border-radius: 12px;
    margin-bottom: 20px;
}
.estate_img{
    width: 82px;
    height: 48px;
    display: flex;
    align-items: center;
    margin-right: 12px;
}
.bonus_pay{
    display: none;
}
.estate_img img{
    width: 100%;
}
.right_estate{
    width: 100%;
}
.estate_monitor { 
    padding-top: 10px;
}

.progress_box_estate { 
    margin-bottom: 10px; 
}

.bar-bg_estate { 
    background: #111; 
    height: 14px; 
    border-radius: 7px; 
    border: 1px solid #ffcc66; 
    position: relative; 
    overflow: hidden; 
}

.bar-fill_estate { 
    background: linear-gradient(90deg, #ffd700, #ff8c00); 
    width: 0%; 
    height: 100%; 
    transition: width 0.5s; 
}

.bar-text_estate { 
    position: absolute; 
    width: 100%; 
    text-align: center; 
    top: 0; 
    font-size: 10px; 
    font-weight: bold; 
    line-height: 14px; 
    color: #fff; 
}
/*Монах*/
    .sage-widget {
        text-align: center;
    }

    .sage-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

    .sage-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: url('https://via.placeholder.com/120/444455/d4af37?text=Мудрец') center/cover;
        border: 3px solid var(--accent-color);
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
        margin-bottom: 15px;
        transition: transform 0.3s ease;
    }

    .sage-widget:hover .sage-avatar {
        transform: scale(1.05);
    }

    .sage-title {
        margin: 0;
        font-size: 26px;
        color: var(--accent-color);
        text-transform: uppercase;
        letter-spacing: 2px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }

    .sage-dialogue {
        font-style: italic;
        color: var(--text-muted);
        margin-bottom: 25px;
        line-height: 1.6;
        min-height: 60px;
        background: rgba(0,0,0,0.2);
        padding: 15px;
        border-radius: 8px;
        border-left: 4px solid var(--accent-color);
    }

    /* Шкала прогресса и тултипы */
    .streak-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-top: 10px;
    }

    .streak-day {
        display: flex;
        flex-direction: column;
        align-items: center;
        opacity: 1;
        position: relative;
        cursor: help;
    }

    .streak-day.active, .streak-day.completed {
        opacity: 1;
    }

    .day-circle {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 2px solid var(--border-color);
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 14px;
        margin-bottom: 6px;
        background-color: var(--card-bg);
        transition: 0.3s ease;
        z-index: 2;
    }

    /* Линия между кружочками */
    .streak-day:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 17px;
        left: 26%;
        width: 100%;
        height: 2px;
        background-color: var(--border-color);
        z-index: 1;
    }

    .streak-day.completed .day-circle {
        background-color: var(--success-color);
        border-color: var(--success-color);
        color: #fff;
    }

    .streak-day.completed:not(:last-child)::after {
        background-color: var(--success-color);
    }

    .streak-day.active .day-circle {
        border-color: var(--accent-color);
        color: var(--accent-color);
        box-shadow: 0 0 15px var(--accent-color);
        animation: pulse-glow 2s infinite;
    }

    @keyframes pulse-glow {
        0% { box-shadow: 0 0 5px var(--accent-color); }
        50% { box-shadow: 0 0 20px var(--accent-color); }
        100% { box-shadow: 0 0 5px var(--accent-color); }
    }

    .day-label {
        font-weight: 600;
    }

    /* Стили для тултипов (подсказок) */
    .streak-day[data-tooltip]:hover::before {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 8px;
        padding: 6px 10px;
        background-color: #111;
        color: var(--accent-color);
        font-size: 12px;
        border-radius: 4px;
        white-space: nowrap;
        border: 1px solid var(--border-color);
        z-index: 10;
        pointer-events: none;
    }

    /* Карточки выбора */
    .choices-container {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 36px;
    }

    .choice-card {
    width: 136px;
    background: radial-gradient(circle at 30% 30%, #2a2a2a, #121212);
    border-radius: 14px;
    text-align: center;
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    }

    .choice-card:hover {
        border-color: var(--accent-color);
        transform: translateY(-8px);
        box-shadow: 0 10px 20px rgba(212, 175, 55, 0.15);
    }

    .choice-icon {
        margin-bottom: 12px;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
        width: 48px;
        margin: 0 auto;
        font-size: 36px;
    }
    .choice-icon img {
        width: 100%;
        margin-top: -15px;
    }

    .choice-text {
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    }

    /* Состояние после выбора */
    .choices-container.resolved .choice-card {
        pointer-events: none;
        opacity: 0.3;
        transform: scale(0.95);
    }

    .choices-container.resolved .choice-card.selected {
    opacity: 1;
    transform: scale(1.05);
    }

    .reward-reveal {
        display: none;
        margin-top: 14px;
        animation: slideUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    .timer-display {
        display: none;
        padding: 4px;
        border-radius: 6px;
    }
    
    .timer-display span {
        font-weight: bold;
        letter-spacing: 1px;
    }

    @keyframes slideUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    #sage-text{
        text-align: left;
    }
/*bonus-code*/
  ._bonus_code_title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #5a3c1e;
    margin-bottom: 10px;
  }

  ._bonus_code_subtitle {
    text-align: center;
    color: #333;
    font-size: 18px;
    margin-bottom: 25px;
  }

  ._bonus_code_divider {
    height: 1px;
    background: #ddd;
    margin: 20px 0;
  }

  ._bonus_code_input-wrapper {
    position: relative;
    width: 90%;
  }

  ._bonus_code_input-label {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #f5f0e6;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    z-index: 2;
  }

  ._bonus_code_input {
    width: 100%;
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid #ccc;
    font-size: 18px;
    background: #f7f7f7;
  }

  ._bonus_code_btn {
    display: block;
    margin: 25px auto;
    padding: 16px 40px;
    border-radius: 30px;
    background: linear-gradient(#ff8a4c, #e25a2b);
    color: white;
    font-size: 18px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  }

  .help {
    margin-top: 10px;
  }

  ._bonus_code_help-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
  }

  ._bonus_code_help-text {
    font-size: 16px;
    line-height: 1.6;
  }
  /*чертежи*/
  .ingredient-item{
    display: inline-block;
    margin-right: 5px;
  }
  /*ключи*/
  .keys_id{
    text-align: center;
  }
  .keys-radio{
    display: inline-block;
    width: 72px;
  }
  .keys-radio input[type="radio"]{
    display: none;
  }
  .imgss_keys{
    display: inline-block;
    max-width: 150px;
  }
  .imgss_keys img {
    width: 50px;
    height: 50px;
}
  .keys-radio input[type="radio"]:checked + .img-label_keys .imgss_keys img{
        border: 2px solid #007BFF;
    border-radius: 5px;
  }
.keys-radio .img-label_keys {
    display: inline-block;
    cursor: pointer;
}

.img-label_keys {
    vertical-align: middle;
}
.loot-info-box {
    margin-top: 8px;
    height: 164px;
    margin-bottom: 15px;
    border: 1px inset #ccc;
    padding: 10px;
    overflow-y: auto;
    text-align: left;
    margin-bottom: 15px;
}
.right_shans{
    float: right;
}
.wrapper_keys{
    display: inline-block;
    margin-right: 4px;
}
.keys-img{
    max-width: 42px;
    margin-top: 5px;
    display: inline-block;
}
.btn-images_keys{
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}
.keys-img img{
    width: 28px;
    height: 33px;
}
#not_show_keys{
    display: block;
}
/*зелья и свитки*/
/*#potion_fast_use{
    position: fixed;
    bottom: 205px;
    left: 48%;
    transform: translateX(200px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
}
#scrolls_fast_use{
    position: fixed;
    bottom: 154px;
    left: 48%;
    transform: translateX(200px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    z-index: 10; 
}
@media (max-width: 480px) {
    #potion_fast_use {
        right: 20px;
        left: auto;
        transform: none;
    }
    #scrolls_fast_use{
        right: 20px;
        left: auto;
        transform: none;
    }
}
.icon_right_menu{
    width: 25px;
    vertical-align: text-bottom;
}*/
/*форум*/
.editor-container {
    width: 100%;
}
.main-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #000001;
}
/* Тулбар */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 15px;
    top: 0;
    z-index: 100;
}
.group {
    display: flex;
    background: #fff;
    padding: 3px;
    border-radius: 12px;
    gap: 2px;
}

        .t-btn {
            width: 38px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            border-radius: 9px;
            cursor: pointer;
            color: #3a3a3c;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            font-weight: 600;
        }

        .t-btn:hover { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.1); color: var(--accent); }
        .t-btn.active { background: var(--accent); color: white; }

        /* Рабочая область */
.editable-area {
    display: block;
    padding: 4px 0 3px 3px;
    color: #000;
    margin: 2px 0 6px;
    border: 1px solid #D7D8C2;
    background: #FBFBF0;
    min-height: 200px;
}

        .editable-area:empty:before {
            content: attr(data-placeholder);
            color: var(--text-secondary);
        }

        /* Контент внутри */
        .h2_title { font-size: 20px; margin-bottom: 15px; }
        blockquote {
            border-left: 6px solid var(--accent);
            padding: 15px 25px;
            margin: 25px 0;
            background: #f0f7ff;
            border-radius: 8px;
            font-style: italic;
            line-height: 20px;
        }
        #editor img {
            max-width: 100%;
            width: 125px;
            border-radius: 16px;
            margin: 25px 0;
            display: block;
        }

        /* Хештеги и ссылки */
        .hashtag { color: var(--accent); font-weight: 700; }
        .topic-link { color: var(--accent); background: #eef6ff; padding: 3px 10px; border-radius: 8px; text-decoration: none; font-weight: 500; }

        /* Футер */
        .status-bar {
            justify-content: center;
        }

        .save-indicator {
            color: #34c759;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .btn-group { gap: 10px; }

        .btn {
            border: none;
            padding: 12px 28px;
            border-radius: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: 0.2s;
        }

        .btn-clear { background: #ff3b3015; color: #ff3b30; }
        .btn-clear:hover { background: #ff3b30; color: white; }

        .btn-primary {
            background: var(--accent);
            color: white;
            box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
        }
        .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }

        @media (max-width: 768px) {
            .editable-area { padding: 20px; font-size: 17px; }
            .toolbar { padding: 10px; }
        }
        /* Модальные окна */
.modal-overlay_forumes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay_forumes.active_equipment_forumes {
    opacity: 1;
    visibility: visible;
}

.modal-card_forumes {
    background: #1e1e2f;
    border-radius: 20px;
    max-width: 90%;
    width: 420px;
    padding: 24px;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.active_equipment_forumes .modal-card_forumes {
    transform: scale(1);
}

.modal-card_forumes h3 {
    margin: 0 0 16px 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #f0f0f0;
    text-align: center;
}

.modal-card_forumes p {
    color: #ccc;
    margin-bottom: 20px;
    text-align: center;
}

.modal-card_forumes input {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: #2a2a3a;
    border: 1px solid #3a3a4a;
    border-radius: 12px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: 0.2s;
    box-sizing: border-box;
}

.modal-card_forumes input:focus {
    border-color: #6c5ce7;
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.3);
}

.modal-buttons_forumes {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 8px;
}

.modal-buttons_forumes button {
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: 0.2s;
    font-size: 0.9rem;
}

.cancel-btn_forumes {
    background: #3a3a4a;
    color: #ddd;
}

.cancel-btn_forumes:hover {
    background: #4a4a5a;
    color: #fff;
}

.confirm-btn_forumes {
    background: #6c5ce7;
    color: white;
}

.confirm-btn_forumes:hover {
    background: #5a4ad7;
    transform: scale(1.02);
}

/* Адаптация для мобильных */
@media (max-width: 560px) {
    .modal-card_forumes {
        width: 85%;
        padding: 18px;
    }
    .modal-buttons_forumes button {
        padding: 8px 16px;
    }
}
/* Стили для ссылок внутри редактора */
.editable-area_forumes a.topic-link_forumes,
#editor a.topic-link_forumes,
.topic-link_forumes {
    color: #3b82f6 !important;
    font-weight: bold !important;
    text-decoration: underline;
    cursor: pointer;
}

/* Стили для хештегов внутри редактора */
.editable-area_forumes .hashtag_forumes,
#editor .hashtag_forumes,
.hashtag_forumes {
    color: #3b82f6 !important;
    font-weight: bold !important;
}

/* Дополнительно: сохранить цвет при посещении */
a.topic-link_forumes:visited {
    color: #3b82f6 !important;
}
.forum_create_forumes{

}
/* Шаг 2: форма заголовка и темы */
.step_forumes {
    display: block;
    width: 100%;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

.forum_create_forumes {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.forum_create_forumes label {
    margin-bottom: -8px;
}

.user_name_forumes,
#type-select {
    width: 92%;
    padding: 6px 11px;
    background: #f9f9fb;
    border: 1px solid var(--border, #e9ecef);
    transition: all 0.2s;
    outline: none;
    color: var(--text-main, #1c1c1e);
    font-family: inherit;
}

.user_name_forumes:focus,
#type-select:focus {
    border-color: var(--accent, #007aff);
    background: white;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.error-message_forumes {
    background: #ffe5e5;
    color: #ff3b30;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    margin: -6px 0 4px;
}

.forum_create_forumes .btn-primary {
    background: var(--accent, #007aff);
    color: white;
    border: none;
    padding: 14px 20px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: 0.2s;
    margin-top: 16px;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    width: 100%;
    justify-content: center;
}

.forum_create_forumes .btn-primary:hover {
    background: var(--accent-hover, #005fcb);
    transform: translateY(-1px);
}

/* Кнопка "Назад" если она есть */
.back_forum_forumes {
    background: #f2f2f7;
    border: none;
    padding: 12px 18px;
    border-radius: 30px;
    font-weight: 600;
    color: var(--accent, #007aff);
    cursor: pointer;
    width: fit-content;
    margin-bottom: 8px;
    transition: 0.2s;
}

.back_forum_forumes:hover {
    background: #e5e5ea;
}
.discounts_text{
    color: #027902;
}
/* Адаптация для мобильных */
@media (max-width: 768px) {
    .forum_create_forumes {
        padding: 12px;
    }
    .user_name_forumes,
    #type-select,
    .forum_create_forumes .btn-primary {
        padding: 6px 11px;
    }
}
.discription_forum_inside p img{
    max-width: 430px;
    width: 100%;
}

/*модальное окно зелья отдельно*/
/* затемнение фона */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    display: none;
    z-index: 999;
}

.modal-overlay.active {
    display: block;
}


/* кнопка закрытия */
.modal-close_equipment {
    position: absolute;
    top: 8px;
    right: 12px;

    background: transparent;
    border: none;

    font-size: 22px;
    font-weight: bold;

    cursor: pointer;
    color: #6D4A14;

    transition: transform .2s ease, color .2s ease;
}

.modal-close_equipment:hover {
    transform: scale(1.2);
}

/* список */
.target-list {
    max-height: 300px;
    overflow-y: auto;

    margin: 15px 0;
    padding: 5px;

    border-radius: 5px;
}

/* анимация */
@keyframes modalIn {
    from {
        transform: translate(-50%, -60%) scale(.5);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* просто для примера кнопки */
.potion_fast {
    margin: 10px;
    padding: 10px 15px;
    cursor: pointer;
}
/*Battle_PASS новый*/
.mobile-container {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

        /* --- HEADER --- */
        .header_battle_pass {
    height: 160px;
    background: url(banner/battle_pass.png) no-repeat center;
    background-size: cover;
    position: relative;
    z-index: 10;
    padding: 15px;
    border-bottom: 5px solid var(--gold);
    flex-shrink: 0;
}
.season-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    z-index: 2;
    padding: 10px 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    animation: bannerFloat 3s ease-in-out infinite;
    width: 120px;
    background: #00000066;
    position: absolute;
    top: 0;
}
.season-title{
    font-size: 22px;
    color: #fff;
    text-shadow: 2px 2px 0px #000;
    text-transform: uppercase;
}
.icon_gold_imper{
    width: 28px;
    vertical-align: text-bottom;
    padding-right: 2px;
}
.icon_imper_price{
    width: 15px;
    vertical-align: middle;
    padding-right: 2px;
}
.icon_country{
    width: 32px;
}
.season-timer{
    font-size: 16px;
    color: #fff;
    text-shadow: 1.5px 1.5px 0px #000;
}
.season-progress{
    background: var(--stat-bg);
    border-radius: 20px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    text-shadow: 1px 1px 0px #000;
    color: #fff;
    padding-left: 4px;
    padding-right: 4px;
}
.icon_battl{
    width: 30px;
    vertical-align: text-bottom;
    padding-right: 2px;
}
.season-progress #balls{
    display: contents;
}
        .pass-banner {
            width: 120px;
            background: linear-gradient(to bottom, #8c2df0, #4b1c8f);
            border: 3px solid var(--gold);
            border-top: none;
            border-radius: 0 0 10px 10px;
            position: absolute;
            top: 0;
            right: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 5px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.4);
            animation: bannerFloat 3s ease-in-out infinite;
        }

        @keyframes bannerFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
        .glow-purple {
            
        }
        

        /* --- TRACK --- */
        .track-container {
            flex-grow: 1;
            position: relative;
        }
        .track-container::-webkit-scrollbar { display: none; }

        .track-row {
            display: grid;
            grid-template-columns: 1fr 50px 1fr;
            height: 130px;
            position: relative;
            z-index: 2;
        }

        /* LEFT COLUMN (FREE) */
        .col-left {
            background: linear-gradient(to bottom, #1f68cf, #134c9c);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 30px;
            border-right: 2px solid rgba(0,0,0,0.2);
        }

        /* RIGHT COLUMN (PREMIUM) */
        .col-right {
            background: linear-gradient(to bottom, #b449ff, #6f21c2);
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-right: 30px;
            position: relative;
            border-left: 2px solid rgba(0,0,0,0.2);
        }

        /* CENTER LINE */
        .track-divider {
            background-color: #0a1f44;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .track-node {
            width: 34px;
            height: 34px;
            background: linear-gradient(135deg, #fcd116, #c6943c);
            border: 3px solid #3d2408;
            transform: rotate(45deg);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 5;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            animation: nodePulse 2s infinite;
        }

        @keyframes nodePulse {
            0%, 100% { transform: rotate(45deg) scale(1); }
            50% { transform: rotate(45deg) scale(1.1); }
        }

        .track-node span {
            transform: rotate(-45deg);
            font-size: 16px;
            color: white;
            text-shadow: 1px 1px 0 #000;
        }

        /* ITEMS */
        .item {
            width: 116px;
            height: 85px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s;
        }

        .item:hover {
            transform: scale(1.05);
        }

        .item img {
            max-width: 100%;
            max-height: 100%;
            filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
            transition: transform 0.2s;
            cursor: pointer;
        }

        .item img:active {
            transform: scale(0.9);
        }

        .glow-gold img {
            animation: goldGlow 2s infinite alternate;
        }

        .glow-purple img {
            animation: purpleGlow 2s infinite alternate;
        }

        .glow-legendary img {
            animation: legendaryGlow 2s infinite alternate;
        }

        @keyframes goldGlow {
            0% { filter: drop-shadow(0 0 10px rgba(252, 209, 22, 0.6)); }
            100% { filter: drop-shadow(0 0 20px rgba(252, 209, 22, 0.9)); }
        }

        @keyframes purpleGlow {
            0% { filter: drop-shadow(0 0 10px rgba(180, 73, 255, 0.6)); }
            100% { filter: drop-shadow(0 0 20px rgba(180, 73, 255, 0.9)); }
        }

        @keyframes legendaryGlow {
            0% { filter: drop-shadow(0 0 15px rgba(255, 120, 0, 0.7)); }
            100% { filter: drop-shadow(0 0 25px rgba(255, 120, 0, 1)); }
        }

        .locked-overlay {
            position: absolute;
            top: 15px;
            right: 30px;
            background: linear-gradient(to bottom, #ffe44b, #d99a00);
            padding: 2px 12px;
            border-radius: 4px;
            border: 1px solid #5a330b;
            font-size: 12px;
            z-index: 3;
            box-shadow: 0 3px 0 #5a330b;
            animation: lockShake 0.5s infinite alternate;
        }

        @keyframes lockShake {
            0% { transform: rotate(-5deg); }
            100% { transform: rotate(5deg); }
        }

        .item-count {
            position: absolute;
            bottom: 5px;
            right: 5px;
            background: #000;
            padding: 1px 5px;
            border-radius: 4px;
            color: #fff;
            font-weight: bold;
        }

        /* PARTICLE EFFECTS */
        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
        }

        .particle {
            position: absolute;
            background-color: currentColor;
            border-radius: 50%;
            pointer-events: none;
        }

        /* LEGENDARY ITEM STYLES */
        .legendary-badge {
            position: absolute;
            top: -10px;
            left: 23%;
            transform: translateX(-50%);
            background: linear-gradient(to bottom, #ff9d00, #ff5500);
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 10px;
            border: 1px solid #ffd700;
            box-shadow: 0 2px 0 #a05a00;
            z-index: 4;
            animation: badgePulse 1.5s infinite;
        }

        @keyframes badgePulse {
            0%, 100% { transform: translateX(-50%) scale(1); }
            50% { transform: translateX(-50%) scale(1.1); }
        }

        /* Backpack styles */
        .backpack {
            position: fixed;
            bottom: -100px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 100px;
            z-index: 100;
            opacity: 0;
            transition: all 0.5s ease;
        }

        .backpack img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
        }

        /* Flying reward styles */
        .flying-reward {
            position: fixed;
            width: 50px;
            height: 50px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            z-index: 99;
            pointer-events: none;
            transition: all 1s cubic-bezier(0.4, -0.3, 0.5, 1.3);
        }
/*прогресс батл пасса*/
.progress_battle_pass{
}
.bar_bg_battle_pass{
    background: #111;
    height: 8px;
    position: relative;
    overflow: hidden;
}
.bar_fill_pass{
    background: linear-gradient(90deg, #ffd700, #ff8c00);
    width: 58%;
    height: 100%;
    transition: width 0.5s;
}
.backpack-pulse {
  animation: backpackPulse 0.4s ease-out;
}
@keyframes backpackPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; filter: drop-shadow(0 0 8px gold); }
  100% { transform: scale(1); opacity: 1; }
}
/*конец нового Battle_pass*/
.icon_battle{
    width: 50px;
}

/*modalbattlepass*/
.wrappers_modals{
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: rgba(0,0,0,0.75);
    z-index: 9999;
    margin:0;
    color:white;
    font-family: 'Verdana', sans-serif;
}
.wrappers_modals.active_shop_buy {
    display: flex;
}
.wrappers_modals_bot{
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: rgba(0,0,0,0.75);
    z-index: 9999;
    margin:0;
    color:white;
    font-family: 'Verdana', sans-serif;
}
.wrappers_modals_chest{
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: rgba(0,0,0,0.75);
    z-index: 9999;
    margin:0;
    color:white;
    font-family: 'Verdana', sans-serif;
}
.wrappers_modals_chest.active_shop_buy {
    display: flex;
}
.wrappers_modals_imper{
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: rgba(0,0,0,0.75);
    z-index: 9999;
    margin:0;
    color:white;
    font-family: 'Verdana', sans-serif;
}
.wrappers_modals_bot.active_shop_buy {
    display: flex;
}
.wrappers_modals_bot.active_shop_buy {
    display: flex;
}
.wrappers_modals_imper.active_shop_buy{
    display: flex;
}
.chest_buyImperMonet{
    width: 100%;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    z-index: 3;
}
.buy-button_Bot{
    background: linear-gradient(180deg, #ffdb33 0%, #e6ac00 100%);
    border: none;
    border-bottom: 6px solid #997300;
    border-radius: 12px;
    width: 100%;
    padding: 10px;
    color: #4a3300;
    font-size: clamp(18px, 5vw, 24px);
    font-weight: bold;
    cursor: pointer;

}
.season-timer_bot{
    margin-top: 8px;
    font-size: clamp(9px, 2.5vw, 10px);
    color: #ccc;
    text-align: center;
}
/* ===== КОНТЕЙНЕР МОДАЛКИ ===== */
.modal-container_buyBattlePass {
    width:90%;
    max-width:380px;
    background:linear-gradient(180deg,#3d79b5 0%,#1e3a5f 100%);
    border:4px solid #555;
    border-radius:20px;
    position:relative;
    box-shadow:0 20px 40px rgba(0,0,0,0.8);
    overflow:hidden;
}
/* Header */
.modal-header_buyBattlePass {
    background:#ffcc00;
    padding:8px 12px;
    display:flex;
    align-items:center;
    width:fit-content;
    border-bottom-right-radius:20px;
}

.header-title_buyBattlePass {
    color:#4a3300;
    font-size:clamp(14px, 2vw, 18px);
    margin-left:8px;
}

/* Закрыть */
.close-btn_buyBattlePass {
    position:absolute;
    top:8px;
    right:8px;
    width:clamp(26px, 5vw, 30px);
    height:clamp(26px, 5vw, 30px);
    background:#ff4d4d;
    border:3px solid #fff;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:clamp(12px, 3vw, 16px);
}

/* КОРОЛЬ */
.king-image_buyBattlePass {
 position: absolute;
    top:6%;  
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: auto;
    pointer-events: none;
}

/* СЦЕНА */
.rewards-section_buyBattlePass {
    padding:15px;
    text-align:center;
}

.rewards-scene_buyBattlePass {
    position:relative;
    height:clamp(140px, 30vw, 180px);
    margin-bottom:10px;
}

/* Общие */
.reward_buyBattlePass {
    position:absolute;
    max-width:100%;
}

/* Центр */
.chest_buyBattlePass {
    width:45%;
    left:50%;
    top:20%;
    transform:translateX(-50%);
    z-index:3;
}

/* Монеты */
.coins_buyBattlePass {
    width:30%;
    left:50%;
    bottom:-10%;
    transform:translateX(-50%);
    z-index:4;
    display: none;
}

/* Лево */
.left_buyBattlePass {
    width:40%;
    left:-5%;
    top:25%;
}

/* Право */
.right_buyBattlePass {
    width:40%;
    right:-5%;
    top:25%;
}

/* Текст */
.promo-text_buyBattlePass {
    margin-bottom:10px;
    text-shadow:2px 2px 0 #000;
    padding-top: 38px;
}


/* Блок преимуществ */
.benefits-box_buyBattlePass {
    background:rgba(0,0,0,0.3);
    border-radius:15px;
    margin:10px;
    padding:12px;
}

.benefit-item_buyBattlePass {
    display:flex;
    align-items:center;
    margin-bottom:8px;
    font-size:clamp(10px, 2.5vw, 12px);
}

.benefit-icon_buyBattlePass {
    width:clamp(30px, 8vw, 40px);
    height:clamp(30px, 8vw, 40px);
    margin-right:8px;
    border-radius:6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon_modals{
    width: 17px;
    vertical-align: middle;
    padding-right: 2px;
    text-align: center;
    margin: 0 auto;
    display: block;
}
.icon_menu_top{
    width: 24px;
    vertical-align: text-bottom;
    padding-right: 2px;
}
/* Footer */
.modal-footer_buyBattlePass {
    padding:12px;
}

/* Кнопка */
.buy-button_buyBattlePass {
    background:linear-gradient(180deg,#ffdb33 0%,#e6ac00 100%);
    border:none;
    border-bottom:6px solid #997300;
    border-radius:12px;
    width:100%;
    padding:10px;
    color:#4a3300;
    font-size:clamp(18px, 5vw, 24px);
    font-weight:bold;
    cursor:pointer;
}

.buy-button_buyBattlePass:active {
    transform:translateY(3px);
    border-bottom-width:3px;
}

.season-timer_buyBattlePass {
    margin-top:8px;
    font-size:clamp(9px, 2.5vw, 10px);
    color:#ccc;
    text-align:center;
}
@media (min-width: 420px){
    .king-image_buyBattlePass{
        top: 8%;
    }
}
@media (min-width: 330px){
    .king-image_buyBattlePass{
        top: 6%;
    }
}
@media (min-width: 480px){
    .king-image_buyBattlePass{
        top: 8%;
    }
}
@media (min-width: 1920px){
    .king-image_buyBattlePass{
        top: 16%;
    }
}
/*catacomb*/
/* Заголовок */
.subtitle_catacomb {
    text-align: center;
    font-size: clamp(18px, 4vw, 26px);
    margin-bottom: 20px;
    color: #3a2a1a;
}

/* Контейнер — ВСЕГДА 3 колонки */
.cards_catacomb {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2vw, 25px);
    margin: 0 auto;
}


/* Скрываем radio */
input[type="radio"] {
    display: none;
}

/* Карточка */
.card_catacomb {
    width: 100%;
    background: #1c1c1c;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

/* Внутренняя рамка */
.card_catacomb::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    border: 1px solid #e6c16a;
    pointer-events: none;
}

/* Hover */
.card_catacomb:hover {
    transform: translateY(-4px) scale(1.02);
}

/* Выбор */
input[type="radio"]:checked + .card_catacomb {
    transform: scale(1.05);
}

/* Заголовок */
.card-header_catacomb {
    background: linear-gradient(#3b2a1a, #1a120c);
    color: #fff;
    text-align: center;
    padding: clamp(4px, 1vw, 8px);
    font-size: clamp(10px, 2vw, 16px);
    font-weight: bold;
}

/* Картинка — УМЕНЬШИЛ ВЫСОТУ */
.card_catacomb img {
    width: 100%;
    aspect-ratio: 3 / 2.8; /* было 3/4 — стало ниже */
    object-fit: cover;
}

/* Низ */
.card-footer_catacomb {
    background: linear-gradient(#2a1e14, #120c08);
    color: #f0d27a;
    text-align: center;
    padding: clamp(4px, 1vw, 8px);
    font-size: clamp(10px, 2vw, 16px);
    font-weight: bold;
}

/* Кнопка */
.submit-btn_catacomb {
    display: block;
    margin: 20px auto 0;
    padding: clamp(8px, 2vw, 14px) clamp(16px, 4vw, 28px);
    font-size: clamp(14px, 3vw, 18px);
    background: linear-gradient(#caa64b, #8b6a1e);
    border: none;
    border-radius: 10px;
    color: #2b1a0d;
    cursor: pointer;
    font-weight: bold;
}

/* Узкие экраны */
@media (max-width: 350px) {
    .cards_catacomb {
        gap: 5px;
    }
}
/*отряды в подземелье*/
.card_catacomb_enter{
    display: flex;
    gap: 7px;
}
.img_type_catacomb{
    width: 90px;
    height: 104px;
    background: #1c1c1c;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid #a67c2e;
    transition: all 0.25s ease;
    position: relative;
}
.img_type_catacomb img{
    width: 100%;
}
.name_catacomb{
    font-weight: normal;
}


/*зверь*/
.cards_beast {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2vw, 25px);
    margin: 0 auto;
}
/* Карточка */
.card_beast {
    width: 100%;
    background: #1c1c1c;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid #a67c2e;
    transition: all 0.25s ease;
    position: relative;
}

/* Внутренняя рамка */
.card_beast::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    border: 2px solid #e6c16a;
    pointer-events: none;
}

/* Hover */
.card_beast:hover {
    transform: translateY(-4px) scale(1.02);
}

/* Выбор */
input[type="radio"]:checked + .card_beast {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255,215,0,0.7);
    transform: scale(1.05);
}

/* Заголовок */
.card-header_beast {
    background: linear-gradient(#3b2a1a, #1a120c);
    color: #fff;
    text-align: center;
    padding: clamp(4px, 1vw, 8px);
    font-size: clamp(10px, 2vw, 16px);
    font-weight: bold;
}

/* Картинка — УМЕНЬШИЛ ВЫСОТУ */
.card_beast img {
    width: 100%;
    aspect-ratio: 3 / 3.8;
    object-fit: cover;
}

/* Низ */
.card-footer_beast {
    background: linear-gradient(#2a1e14, #120c08);
    color: #f0d27a;
    text-align: center;
    padding: clamp(4px, 1vw, 8px);
    font-size: clamp(10px, 2vw, 16px);
    font-weight: bold;
}

/* Кнопка */
.submit-btn_beast {
    display: block;
    margin: 20px auto 0;
    padding: clamp(8px, 2vw, 14px) clamp(16px, 4vw, 28px);
    font-size: clamp(14px, 3vw, 18px);
    background: linear-gradient(#caa64b, #8b6a1e);
    border: none;
    border-radius: 10px;
    color: #2b1a0d;
    cursor: pointer;
    font-weight: bold;
}

/* Узкие экраны */
@media (max-width: 350px) {
    .cards_beast {
        gap: 5px;
    }
}
/*отряды в подземелье*/
.card_beast_enter{
    display: flex;
    gap: 7px;
}
.img_type_beast{
    width: 90px;
    height: 104px;
    background: #1c1c1c;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid #a67c2e;
    transition: all 0.25s ease;
    position: relative;
}
.img_type_beast img{
    width: 100%;
}
.name_beast{
    font-weight: normal;
}
/*squad*/
#requast_catacomb{
    display: none;
}
#goblin_starts{

}
#goblin_end{
    display: none;
}
#exit_catacomb{

}
._new_chat_input-panel span{
    margin-top: 10px;
}
.close_choose{
    margin-top: 12px!important;
}
#contunie_starts{
    display: none;
}
#catacomb_sqard{
    display: none;
}
#attach_goblin{
    display: none;
}
#messageArea-goblin{
    height: 50px;
    overflow-y: auto;
}
.attach_goblin_does{
}
/*island*/
.icon_island{
    padding-right: 2px;
    width: 14px !important;
}
.how_mutch_swimming{
    margin-bottom: 18px;
}
/*Дракон прогресс бар*/
.drago_monitor{
    padding-top: 10px;
}
.progress_box_drago {
    margin-bottom: 10px;
}
.bar-bg_drago {
    background: #111;
    height: 20px;
    border-radius: 7px;
    border: 1px solid #ffcc66;
    position: relative;
    overflow: hidden;
}
.bar-fill_drago {
    background: linear-gradient(90deg, #b5626e, #ef0021);
    width: 0%;
    height: 100%;
    transition: width 0.5s;
}
.bar-text_drago {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0;
    font-size: 15px;
    font-weight: bold;
    line-height: 21px;
    color: #fff;
}
.stat_dragon{
    margin-top: 10px;
    margin-bottom: 10px;
}
.stat_dragon p{
    margin-top: 3px;
    margin-bottom: 3px;
}
.icon_drago{
    width: 16px;
    vertical-align: text-bottom;
    padding-right: 2px;
}
#avatar_dragon{
    display: none;
}
#work_drago{
    display: none;
}
#btn_drago{

}
#moderators_forums {
    display: none;
}

#moderators_forums.is-visible {
    display: block; 
}
/*старый чат*/
.header_chat {
    position: relative;
    z-index: 10;
    margin-bottom: 10px;
}
.header_chat .settings-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 22px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.header_chat .settings-btn:hover {
 color: var(--text-primary); 
 transform: translateY(-50%) rotate(90deg); 
}
/* Вкладки */
.tabs-container_olds {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    z-index: 9;
}

.tab_olds {
    padding: 8px 0px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    user-select: none;
    color: rgb(0 0 0 / 50%);
}
.tab_olds_1 {
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    user-select: none;
    color: rgb(0 0 0 / 50%);
}

.tab_olds:active_chat { transform: scale(0.95); }
.tab_olds.active_chat {
    color: #610000;
}
/*Новый чат*/
._new_chat_app-container {
    /* Фирменная палитра проекта */
    --bg-main: #181824;
    --bg-panel: rgba(34, 34, 51, 0.85);
    --bg-solid-panel: #222233;
    --bg-message: #2D2D44;
    --accent-primary: #8B5CF6;
    --accent-hover: #7C3AED;
    --accent-glow: rgba(139, 92, 246, 0.3);
    --text-primary: #F8F8F2;
    --text-secondary: #9BA1B0;
    --success: #10B981;
    --danger: #EF4444;
    --border-color: rgba(255, 255, 255, 0.08);
            
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Стили, которые раньше были в body */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
            
    width: 100%;
    max-width: 480px;
    height: 88vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
    overflow: hidden; /* Скрываем вылеты за края */
}

/* Применяем box-sizing только внутри нашего чата */
._new_chat_app-container * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* Кастомный скроллбар только для элементов внутри чата */
  ._new_chat_app-container ::-webkit-scrollbar { width: 6px; height: 6px; }
  ._new_chat_app-container ::-webkit-scrollbar-track { background: transparent; }
  ._new_chat_app-container ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
  ._new_chat_app-container ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

  /* Шапка с эффектом Glassmorphism */
  ._new_chat_header {
      background-color: var(--bg-panel);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 14px 16px;
      text-align: center;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      position: relative;
      z-index: 10;
  }

  ._new_chat_header ._new_chat_settings-btn {
      position: absolute;
      right: 50px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 22px;
      cursor: pointer;
      transition: var(--transition-fast);
  }
._new_chat_header ._new_chat_settings-btn:hover { 
    color: var(--text-primary);
    transform: translateY(-50%) rotate(90deg);
}
        /* Вкладки */
        ._new_chat_tabs-container {
            padding: 7px 14px;
            background-color: #222233;
            display: flex;
            gap: 8px;
            overflow-x: auto;
            scroll-behavior: smooth;
            z-index: 9;
        }

        ._new_chat_tab {
            padding: 8px 8px;
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            border: 1px solid transparent;
            transition: var(--transition-fast);
            position: relative;
            user-select: none;
        }

        ._new_chat_tab:active { transform: scale(0.95); }

        ._new_chat_tab._new_chat_active {
            border-bottom: 1px solid #8b51c1;
            color: var(--accent-primary);
        }

        /* Область чата */
        ._new_chat_chat-area {
            flex: 1;
            padding: 16px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        ._new_chat_date-divider {
            display: flex;
            align-items: center;
            text-align: center;
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 600;
            margin: 16px 0 8px;
            opacity: 0.7;
        }

        ._new_chat_date-divider::before,
        ._new_chat_date-divider::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid var(--border-color);
        }
        ._new_chat_date-divider:not(:empty)::before { margin-right: 1em; }
        ._new_chat_date-divider:not(:empty)::after { margin-left: 1em; }

        /* Системные сообщения */
        ._new_chat_system-message {
            background-color: rgba(255, 255, 255, 0.02);
            border-radius: var(--radius-md);
            padding: 8px 12px;
            text-align: center;
            font-size: 13px;
            color: var(--text-secondary);
            align-self: center;
            animation: _new_chat_fadeIn 0.5s ease-out;
        }
        ._new_chat_system-message span._new_chat_user { font-weight: 600; color: var(--text-primary); }
        ._new_chat_system-message span._new_chat_left { color: var(--danger); }
        ._new_chat_system-message span._new_chat_joined { color: var(--success); }

        /* Обычное сообщение */
        ._new_chat_message-box {
            display: flex;
            gap: 12px;
            align-items: flex-end;
            animation: _new_chat_slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            opacity: 0;
            transform-origin: bottom left;
        }

        ._new_chat_message-box:nth-child(2) { animation-delay: 0.1s; }
        ._new_chat_message-box:nth-child(3) { animation-delay: 0.2s; }

        ._new_chat_message-box._new_chat_self {
            flex-direction: row-reverse;
            transform-origin: bottom right;
        }
        ._new_chat_message-box._new_chat_self ._new_chat_message-content {
            background-color: var(--accent-primary);
            border-bottom-right-radius: 4px;
            border-bottom-left-radius: var(--radius-lg);
        }
        ._new_chat_message-box._new_chat_self ._new_chat_username { color: rgba(255,255,255,0.9); }
        ._new_chat_message-box._new_chat_self ._new_chat_time { color: rgba(255,255,255,0.6); }

        ._new_chat_avatar {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background-color: var(--bg-solid-panel);
            border: 1px solid var(--border-color);
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            transition: var(--transition-fast);
            cursor: pointer;
        }
        ._new_chat_avatar:active { transform: scale(0.9); }

        ._new_chat_message-content {
            background-color: var(--bg-message);
            padding: 12px 16px;
            border-radius: var(--radius-lg);
            border-bottom-left-radius: 4px;
            max-width: 85%;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            position: relative;
        }

        ._new_chat_message-content._new_chat_reward {
            background: linear-gradient(135deg, #2D2D44 0%, #3a2a50 100%);
            border: 1px solid rgba(139, 92, 246, 0.4);
            box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
        }

        ._new_chat_message-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 6px;
            gap: 12px;
        }

        ._new_chat_username { font-size: 14px; font-weight: 700; color: var(--accent-primary);text-decoration: none; }
        ._new_chat_time { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
        
        ._new_chat_text {
            font-size: 15px;
            line-height: 1.45;
            color: var(--text-primary);
            word-wrap: break-word;
        }

        ._new_chat_text-highlight { color: #FBBF24; font-weight: 700; text-shadow: 0 0 10px rgba(251, 191, 36, 0.3); }

        /* Панель ввода */
        ._new_chat_input-panel {
            background-color: var(--bg-panel);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 12px 16px 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-top: 1px solid var(--border-color);
            z-index: 10;
        }

        ._new_chat_btn-icon {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            transition: var(--transition-fast);
        }

        ._new_chat_btn-icon:hover { color: var(--text-primary); background-color: rgba(255,255,255,0.05); }
        ._new_chat_btn-icon:active { transform: scale(0.9); }

        ._new_chat_input-wrapper {
            flex: 1;
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: var(--radius-xl);
            display: flex;
            align-items: center;
            padding: 4px 8px 4px 16px;
            border: 1px solid var(--border-color);
            transition: var(--transition-fast);
        }

        ._new_chat_input-wrapper:focus-within {
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
            background-color: rgba(0, 0, 0, 0.4);
        }

        ._new_chat_input-field {
            flex: 1;
            background: none;
            border: none;
            color: var(--text-primary);
            font-size: 15px;
            padding: 10px 0;
            outline: none;
            width: 100%;
        }

        ._new_chat_input-field::placeholder { color: var(--text-secondary); }

        ._new_chat_btn-send {
            background-color: var(--accent-primary);
            color: white;
            border: none;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 18px;
            transition: var(--transition-fast);
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
        }

        ._new_chat_btn-send:hover { background-color: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6); }
        ._new_chat_btn-send:active { transform: scale(0.9) translateY(0); }

        /* ============================ */
        /* --- ВЫЕЗЖАЮЩАЯ ПАНЕЛЬ НАСТРОЕК --- */
        /* ============================ */
        
        ._new_chat_settings-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 15;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        ._new_chat_settings-overlay._new_chat_open {
            opacity: 1;
            pointer-events: auto;
        }

        ._new_chat_settings-panel {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 65%;
            max-width: 280px;
            background-color: var(--bg-panel);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-left: 1px solid var(--border-color);
            z-index: 20;
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            /* ИСПРАВЛЕНИЕ БАГА: прячем панель, чтобы она не вылезала при скролле табов */
            visibility: hidden;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
            box-shadow: -5px 0 25px rgba(0,0,0,0.4);
        }

        ._new_chat_settings-panel._new_chat_open {
            transform: translateX(0);
            visibility: visible;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
        }

        ._new_chat_settings-header {
            padding: 20px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-color);
        }

        ._new_chat_settings-header h3 {
            font-size: 16px;
            color: var(--text-primary);
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        ._new_chat_btn-close {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 20px;
            cursor: pointer;
            transition: var(--transition-fast);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
        }

        ._new_chat_btn-close:hover {
            color: var(--danger);
            background-color: rgba(239, 68, 68, 0.1);
        }

        ._new_chat_settings-menu {
            display: flex;
            flex-direction: column;
            padding: 12px 0;
            overflow-y: auto;
        }

        ._new_chat_menu-item {
            background: none;
            border: none;
            color: var(--text-primary);
            padding: 16px 20px;
            text-align: left;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition-fast);
            border-left: 3px solid transparent;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        ._new_chat_menu-item:hover {
            background-color: rgba(139, 92, 246, 0.1);
            border-left-color: var(--accent-primary);
            color: var(--accent-primary);
            padding-left: 24px;
        }

        ._new_chat_menu-item-icon {
            font-size: 18px;
            opacity: 0.8;
        }

        /* Кнопки действий внутри сообщений (Вступить / Подарить) */
        ._new_chat_btn-action {
            display: inline-block;
            background-color: var(--accent-primary);
            color: #fff;
            border: none;
            padding: 8px 16px;
            border-radius: var(--radius-md);
            margin-top: 10px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition-fast);
            text-align: center;
            width: 100%;
        }
        ._new_chat_btn-action:hover { background-color: var(--accent-hover); transform: translateY(-1px); }

        /* Иконка выбранной рекламы в инпуте */
        ._new_chat_ad-icon-display {
            display: none;
            font-size: 20px;
            margin-right: 8px;
        }

        /* Стили для Модальных Окон */
        ._new_chat_modal-overlay-custom {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.7);
            z-index: 100;
            display: none;
            align-items: center; justify-content: center;
            padding: 20px;
            transition: opacity 0.2s;
        }
        ._new_chat_modal-overlay-custom._new_chat_active {
            display: flex; opacity: 1;
        }
        ._new_chat_modal-box {
            background: var(--bg-solid-panel);
            width: 100%; max-width: 388px;
            border-radius: var(--radius-lg);
            padding: 20px;
            border: 1px solid var(--border-color);
            position: relative;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            animation: _new_chat_slideUp 0.3s;
            overflow-y: auto;
            max-height: 400px;
        }
._new_chat_modal-firend{
    position: absolute;
    top: 15px;
    right: 40px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 18px;
}   
.icon_friends{
    width: 50px;
    vertical-align: text-bottom;
}
._new_chat_close-ad-btn{
    color: #fff;
    text-decoration: underline;
}
._new_chat_copy-code-btn{
    display: inline-block;
    background-color: var(--accent-primary);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: center;
    width: 100%;
}
._new_chat_activate-code-btn{
    display: inline-block;
    background-color: var(--accent-primary);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: center;
    width: 100%;
}
        ._new_chat_modal-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 15px; }
        ._new_chat_modal-close-icon { position: absolute; top: 15px; right: 15px; color: var(--text-secondary); cursor: pointer; font-size: 18px; }
        
        ._new_chat_gifts-grid {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px;
        }
        ._new_chat_gift-item {
            aspect-ratio: 1;
            background: var(--bg-message);
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 22px; cursor: pointer; border: 2px solid transparent;
            transition: var(--transition-fast);
            margin-bottom: 6p;x
        }
.frame-container-podarok_new{
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--bg-message);
}
.frame-container-podarok_new p {
    margin: 0 auto;
}
._new_chat_gift-item img{
    width: 100%;
}
        }
        ._new_chat_gift-item img{
            width: 100%;
        }
        ._new_chat_gift-item._new_chat_selected {
            border-color: var(--accent-primary);
            background: rgba(139, 92, 246, 0.2);
            transform: scale(1.05);
        }
        ._new_chat_gift-section-title { font-size: 13px; color: var(--text-secondary); margin: 15px 0 10px; }

        /* Анимации */
        @keyframes _new_chat_slideUp {
            from { opacity: 0; transform: translateY(20px) scale(0.95); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes _new_chat_fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes _new_chat_pulse {
            0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
            70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
            100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
        }
.status{
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
}
._new_chat_open_full-btn{
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 22px;
    cursor: pointer;
    transition: var(--transition-fast);
}

    /* Стили для стикеров */
    .sticker-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px;
        max-height: 400px;
        overflow-y: auto;
        justify-content: center;
    }
    .sticker-item {
        width: 80px;
        height: 80px;
        cursor: pointer;
        border-radius: 6px;
        transition: transform 0.15s;
        object-fit: contain;
    }
    .sticker-item:hover {
        transform: scale(1.1);
    }
    ._new_chat_sticker {
        background: none !important;
        border: none !important;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 4px 0;
    }
    ._new_chat_sticker img {
        max-width: 150px;
        max-height: 150px;
        border-radius: 8px;
    }
    .sticker-search {
        padding: 8px;
    }
    .sticker-search input {
        width: 100%;
        padding: 8px;
        border-radius: 8px;
        border: 1px solid #ccc;
        background: #1e1e1e;
        color: #fff;
    }

    /* Кнопка скролла вниз */
    #scrollToBottomBtn {
        display: none;
        position: absolute;
        right: 20px;
        bottom: 105px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(0,0,0,0.7);
        color: white;
        border: none;
        font-size: 24px;
        cursor: pointer;
        z-index: 10;
    }
    #scrollToBottomBtn:hover {
        background: rgba(0,0,0,0.9);
    }

    /* Админская модалка */
    #adminModal {
        z-index: 200;
    }
    #adminModal ._new_chat_modal-box {
        max-height: 80vh;
        overflow-y: auto;
    }
    #adminModal ._new_chat_btn-action {
        margin: 5px 0;
        width: 100%;
    }
    #adminModal input, #adminModal select {
        width: 100%;
        padding: 10px;
        margin: 5px 0;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background: var(--bg-message);
        color: var(--text-primary);
        font-size: 14px;
        outline: none;
        box-sizing: border-box;
    }
    #adminModal select option {
        background: var(--bg-solid-panel);
        color: var(--text-primary);
    }
    #adminModal p {
        color: var(--text-primary);
        margin: 10px 0;
    }

    /* Контекстное меню */
    ._new_chat_context-menu {
        position: fixed;
        background: var(--bg-solid-panel, #1e1e1e);
        border: 1px solid var(--border-color, #333);
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.5);
        z-index: 10000;
        min-width: 180px;
        overflow: hidden;
        display: none;
        flex-direction: column;
    }
    ._new_chat_context-menu button {
        display: block;
        width: 100%;
        padding: 10px 15px;
        background: none;
        border: none;
        color: var(--text-primary, #fff);
        text-align: left;
        cursor: pointer;
        font-size: 13px;
        transition: background 0.2s;
    }
    ._new_chat_context-menu button:hover {
        background: rgba(255, 255, 255, 0.1);
    }
    ._new_chat_context-separator {
        height: 1px;
        background: var(--border-color, #444);
        margin: 4px 0;
    }
.online_chat{
    vertical-align: bottom;
}
#_new_chat_personalMessageInput{
    flex: 1;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    padding: 4px 8px 4px 16px;
    border: 1px solid var(--border-color);
    transition: var(--transition-fast);
    margin-top: 25px;
    margin-bottom: 25px;
    padding-top: 14px;
}
#_new_chat_banReason{
    flex: 1;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    padding: 4px 8px 4px 16px;
    border: 1px solid var(--border-color);
    transition: var(--transition-fast);
    margin-top: 10px;
    margin-bottom: 20px;
    padding-top: 14px;
    height: 50px;
}
#_new_chat_banTabs{
    margin-bottom: 26px;
}
.discript_ban{
    margin-left: 15px;
}
#_new_chat_banValue{
    width: 100px;
    text-align: center;
    background: #1b1b29;
    border-radius: 20px;
}
#_new_chat_muteReason{
   flex: 1;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    padding: 4px 8px 4px 16px;
    border: 1px solid var(--border-color);
    transition: var(--transition-fast);
    margin-top: 10px;
    margin-bottom: 20px;
    padding-top: 14px; 
    height: 50px;
}
#_new_chat_muteValue{
    width: 100px;
    text-align: center;
    background: #1b1b29;
    border-radius: 20px;
}
#_new_chat_muteTabs{
    margin-bottom: 26px;
}
.discript_mut{
    margin-left: 15px;
}
.btn-icon_stikers{
    width: 25px;
}
.btn-icon_stikers img{
    width: 100%;
}

/*старый чат*/
._old_chat_settings-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 15;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

._old_chat_settings-overlay._old_chat_open {
    opacity: 1;
    pointer-events: auto;
}

._old_chat_settings-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    max-width: 280px;
    background-color: var(--bg-panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid var(--border-color);
    z-index: 20;
    display: none;
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
    box-shadow: -5px 0 25px rgba(0,0,0,0.4);
}

._old_chat_settings-panel._old_chat_open {
    transform: translateX(0);
    visibility: visible;
    display: flex;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

._old_chat_settings-header {
    padding: 20px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

._old_chat_settings-header h3 {
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0.5px;
}

._old_chat_btn-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

._old_chat_btn-close:hover {
    color: var(--danger);
    background-color: rgba(239, 68, 68, 0.1);
}

._old_chat_settings-menu {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    overflow-y: auto;
}

._old_chat_menu-item {
    background: none;
    border: none;
    color: var(--text-primary);
    padding: 16px 20px;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    border-left: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 12px;
}

._old_chat_menu-item:hover {
    background-color: rgba(139, 92, 246, 0.1);
    border-left-color: var(--accent-primary);
    color: var(--accent-primary);
    padding-left: 24px;
}

._old_chat_menu-item-icon {
    font-size: 18px;
    opacity: 0.8;
}
._old_chat_modal-overlay-custom {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 100;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
    transition: opacity 0.2s;
}

._old_chat_modal-overlay-custom._old_chat_active {
    display: flex; opacity: 1;
}

._old_chat_modal-box {
    background: var(--bg-solid-panel);
    width: 100%; max-width: 388px;
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 1px solid var(--border-color);
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: _old_chat_slideUp 0.3s;
    overflow-y: auto;
    max-height: 400px;
}

._old_chat_modal-firend {
    position: absolute;
    top: 15px;
    right: 40px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 18px;
}

.icon_friends {
    width: 50px;
    vertical-align: text-bottom;
}

._old_chat_close-ad-btn {
    color: #fff;
    text-decoration: underline;
}

._old_chat_copy-code-btn,
._old_chat_activate-code-btn {
    display: inline-block;
    background-color: var(--accent-primary);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: center;
    width: 100%;
}

._old_chat_modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 15px;
}

._old_chat_modal-close-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 18px;
}

._old_chat_gifts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

._old_chat_gift-item {
    aspect-ratio: 1;
    background: var(--bg-message);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition-fast);
    margin-bottom: 6px;
}

.frame-container-podarok_new {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--bg-message);
}

.frame-container-podarok_new p {
    margin: 0 auto;
}

._old_chat_gift-item img {
    width: 100%;
}

._old_chat_gift-item._old_chat_selected {
    border-color: var(--accent-primary);
    background: rgba(139, 92, 246, 0.2);
    transform: scale(1.05);
}

._old_chat_gift-section-title {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 15px 0 10px;
}

/* Анимации */
@keyframes _old_chat_slideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes _old_chat_fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes _old_chat_pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/*создания обращения*/
.icon_appeal{
    width: 25px;
    vertical-align: text-bottom;
    padding-right: 2px;
}
._appeal-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    transition: opacity 0.3s ease;
}
._appeal-modal-overlay._appeal-visible{
    opacity: 1;
}
._appeal-modal-content {
    background-color: #F5F6E0;
    padding: 20px;
    width: 410px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(220, 190, 140, 0.5);
    text-align: center;
    position: relative;
}
._appeal-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

._appeal-modal-title {
    margin: 0;
    font-size: 22px;
    color: #5e2604;
    align-items: center;
    gap: 8px;
    text-shadow: 1px 1px 0px #fff;
}
._appeal-modal-title ._appeal-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
._appeal-close-btn {
    background: transparent;
    border: none;
    font-size: 28px;
    color: #8e6c43;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}
._appeal-close-btn:hover {
    color: #c52300;
}
._appeal-divider {
    border-top: 1px dashed #d5b991;
    margin: 15px 0;
}
._appeal-button-group,
._appeal-input-group {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
._appeal-game-btn {
    border: 1px solid #5a1100;
    padding: 6px 4px;
    flex: 1;
    background: #f4d7a1;
}
._appeal-game-btn:active {
    background: linear-gradient(to top, #f27c13, #c52300);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.7);
}
._appeal-toggle-btn:not(._appeal-active) {
    background: #f3f3f3;
    color: #5e2604;
    text-shadow: none;
    border-color: #a88452;
    box-shadow: inset 0 1px 0 #fff;
}
._appeal-toggle-btn:not(._appeal-active):hover {
    background: linear-gradient(to bottom, #fff8eb, #eddaaf);
}
._appeal-primary-btn {
    position: relative;
    font-size: 16px;
    padding: 10px 40px;
    flex: none;
    display: inline-block;
}
._appeal-primary-btn::before,
._appeal-primary-btn::after {
    content: '•';
    position: absolute;
    color: #ffdc73;
    font-size: 20px;
    top: 50%;
    transform: translateY(-50%);
    text-shadow: 1px 1px 0px #000;
}
._appeal-primary-btn::before { left: 15px; }
._appeal-primary-btn::after { right: 15px; }
._appeal-game-select,
._appeal-game-input {
    padding: 8px;
    background: #f3f3f3;
    border: 1px solid #bba37d;
    color: #5e2604;
    font-weight: bold;
    border-radius: 2px;
    outline: none;
}
._appeal-game-select {
    flex: 1;
    cursor: pointer;
}
._appeal-game-label {
    display: block;
    color: #5e2604;
    font-weight: bold;
    margin-bottom: 8px;
}
._appeal-slider-group {
    margin: 20px 0;
}
._appeal-game-slider {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}
._appeal-game-slider:focus {
    outline: none;
}
._appeal-game-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #d8c29d;
    border-radius: 4px;
    border: 1px solid #b09164;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
._appeal-game-slider::-webkit-slider-thumb {
    border: 1px solid #5a1100;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #f27c13, #c52300);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px;
    box-shadow: inset 0 1px 0 #ffa859, 0 1px 3px rgba(0,0,0,0.5);
}
._appeal-slider-value {
    margin-top: 10px;
    font-size: 22px;
    font-weight: bold;
    color: #591700;
    text-shadow: 1px 1px 0px #fff;
}
._appeal-glory-group {
    margin: 15px 0;
}
._appeal-glory-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
._appeal-small-input {
    width: 80px;
    text-align: center;
    font-size: 14px;
}
._appeal-quick-values {
    display: flex;
    gap: 5px;
}
._appeal-quick-btn {
    padding: 4px 10px;
    transition: background-color .3s;
    margin: 0 4px;
    background: linear-gradient(180deg, #FFDEA8 0%, #E6A35F 100%);
    color: #6D4A14;
    margin-top: 5px;
    display: inline-table;
}
._appeal-quick-btn:active {
    background: #d8c29d;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
._appeal-action-group {
    margin-top: 10px;
}
/*новый вид обращения рендер*/
._bro_appeal_mission-card {
    transition: all 0.2s ease;
}  
._bro_appeal_mission-card:last-child {
    border-bottom: none;
}   
._bro_appeal_mission-card:hover {
    background: rgba(0,0,0,0.02);
} 
._bro_appeal_mission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
} 
._bro_appeal_mission-title {
    display: flex;
    align-items: center;
    gap: 12px;
}  
._bro_appeal_mission-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}  
/*save_user*/
.gender-cards_save_user {
    display: inline-flex;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: nowrap;
}

.card-label_save_user {
    flex: 1;
    min-width: 0;
}

.card-label_save_user input[type="radio"] {
    display: none;
}

.card_save_user {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    width: 150px;
}

.card_save_user:hover {
    transform: translateY(-3px);
    border-color: #555;
}

.avatar_save_user {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.card_save_user h3 {
    margin: 15px 0 0 0;
    font-size: 16px;
    color: #aaaaaa;
    word-break: break-word;
}

.card-label_save_user input[type="radio"]:checked + .card_save_user h3 {
    color: #610000;
}

.submit-btn_save_user {
    margin-top: 30px;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #f1c40f;
    color: #121212;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-btn_save_user:hover {
    background-color: #d4ac0d;
}
/*поговорить с купцом*/
._mer_modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
        }

        ._mer_modal-content {
            background-color: #1e1e1e;
            border: 2px solid #555;
            border-radius: 12px;
            width: 100%;
            max-width: 420px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9);
            overflow: visible;
            animation: fadeIn 0.3s ease-out;
            position: relative;
        }

        ._mer_merchant-avatar-container {
            position: absolute;
            top: -60px;
            left: -40px;
            z-index: 1010;
        }

        ._mer_avatar-frame {
            width: 120px; 
            height: 120px;
            border-radius: 50%;
            background: #1e1e1e;
            border: 4px solid #f1c40f;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
            overflow: hidden; 
            display: flex;
            justify-content: center;
            align-items: center;
        }

        ._mer_avatar-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        @media (max-width: 500px) {
            ._mer_merchant-avatar-container {
                top: -50px;
                left: -10px;
            }
            ._mer_avatar-frame {
                width: 100px;
                height: 100px;
            }
            ._mer_dialog-header {
                padding-left: 117px !important;
            }
        }

        ._mer_dialog-header {
            background-color: #2a2a2a;
            padding: 15px 20px 15px 90px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #444;
            border-radius: 10px 10px 0 0;
        }

        ._mer_npc-name {
            font-size: 20px;
            font-weight: bold;
            color: #f1c40f;
        }

        ._mer_close-icon {
            font-size: 28px;
            color: #888;
            cursor: pointer;
        }

        ._mer_close-icon:hover {
            color: #ff4c4c;
        }

        ._mer_dialog-body {
            padding: 25px 20px;
        }

        ._mer_npc-text {
            font-size: 18px;
            line-height: 1.5;
            margin: 0;
            color: #e0e0e0;
            font-style: italic;
        }

        ._mer_dialog-choices {
            padding: 0 20px 20px 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        ._mer_choice-btn {
            background-color: #252525;
            border: 1px solid #444;
            color: #ccc;
            padding: 15px;
            text-align: left;
            font-size: 16px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        ._mer_choice-number {
            color: #f1c40f;
            font-weight: bold;
            margin-right: 10px;
        }

        ._mer_choice-btn:hover {
            background-color: #333;
            border-color: #f1c40f;
            color: #fff;
            transform: translateX(5px);
        }

        ._mer_exit-btn {
            margin-top: 10px;
            border-color: transparent;
        }

        ._mer_exit-btn ._mer_choice-number {
            color: #888;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
.center_avatar{
    width: 100px;
}

/*new_anketa*/
/* Главный контейнер (строго 480px) */
._anketa_profile-editor-container {

}

/* Внутренняя обертка для рамки */
._anketa_inner-wrapper {
}

/* --- ВЕРХНЯЯ СЕКЦИЯ --- */
._anketa_top-section {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

/* Аватар */
._anketa_avatar-box {
    width: 140px;
    height: 190px;
    position: relative;
    border: 3px solid #3e2723;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #d4af37;
    overflow: hidden;
    flex-shrink: 0;
}

._anketa_hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

._anketa_btn-change-avatar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(42, 27, 18, 0.85);
    color: #e6c27a;
    border: none;
    padding: 8px 0;
    font-size: 12px;
    cursor: pointer;
    border-top: 1px solid #d4af37;
    font-family: inherit;
    transition: background 0.2s;
}

._anketa_btn-change-avatar:hover {
    background: rgba(42, 27, 18, 0.95);
    color: #fff;
}

/* Правая часть с заголовком */
._anketa_basic-info {
    flex-grow: 1;
}

._anketa_form-title {
    color: #3e2723;
    font-size: 20px;
    text-align: center;
    margin-bottom: 5px;
    font-weight: normal;
}

._anketa_title-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #b89947;
    margin-bottom: 15px;
    font-size: 8px;
}

._anketa_title-separator span {
    height: 1px;
    width: 40px;
    background: #b89947;
}

/* --- ИНПУТЫ И ФОРМЫ --- */
._anketa_input-group {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

._anketa_input-group label {
    font-size: 13px;
    color: #5c3a21;
    width: 90px; 
    display: flex;
    align-items: center;
    gap: 8px;
}

._anketa_input-group label i {
    color: #8c6b4a;
    width: 14px;
    text-align: center;
}
.woomen_ava{
    display: none;
}
.man_ava{
    display: none;
}
._anketa_input-group input, 
._anketa_input-group select, 
._anketa_input-group textarea {
    flex-grow: 1;
    width: 95%;
    background: #fdfaf4;
    border: 1px solid #d8c3a5;
    border-radius: 4px;
    padding: 8px 10px;
    color: #3e2723;
    font-family: inherit;
    font-size: 13px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    outline: none;
}

._anketa_input-group input:focus, 
._anketa_input-group select:focus, 
._anketa_input-group textarea:focus {
    border-color: #b89947;
    box-shadow: 0 0 3px rgba(184, 153, 71, 0.5), inset 0 1px 3px rgba(0,0,0,0.05);
}

/* Кастомные Select */
._anketa_select-wrapper {
    position: relative;
    flex-grow: 1;
}

._anketa_select-wrapper::after {
    content: '\f078';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #3e2723;
    pointer-events: none;
    font-size: 10px;
}

._anketa_select-wrapper select {
    appearance: none;
    cursor: pointer;
}

/* Панели секций */
._anketa_form-panel {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid #e3d2b7;
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 15px;
    margin-top: 12px;
}

._anketa_horizontal label { width: 150px; }

/* Дата рождения */
._anketa_date-selects {
    display: flex;
    gap: 10px;
    flex-grow: 1;
}

/* Вертикальные группы */
._anketa_vertical {
    flex-direction: column;
    align-items: flex-start;
}

._anketa_vertical label {
    width: 100%;
    margin-bottom: 8px;
}

textarea {
    resize: vertical;
}

/* --- ЗАГРУЗКА ФАЙЛА --- */
._anketa_hint {
    font-size: 11px;
    color: #8c6b4a;
    font-style: italic;
    font-weight: normal;
}

._anketa_file-upload-box {
    width: 100%;
    border: 1px dashed #c0a880;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.4);
}

._anketa_btn-upload {
    background: #5c3a21;
    color: #e6c27a;
    border: 1px solid #3e2723;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    transition: 0.2s;
}

._anketa_btn-upload:hover {
    background: #4a2e1a;
}

._anketa_file-name {
    font-size: 13px;
    color: #5c3a21;
}

/* --- ПОДВАЛ --- */
._anketa_footer-section {
    margin-top: 20px;
}

._anketa_consent-box {
    display: flex;
    gap: 15px;
    align-items: center;
    font-size: 12px;
    color: #3e2723;
    margin-bottom: 20px;
    padding: 0 10px;
}

._anketa_shield-icon {
    font-size: 24px;
    color: #b89947;
}

._anketa_consent-box a {
    color: #8a1c1c;
    text-decoration: underline;
}

._anketa_save-action {
    display: flex;
    justify-content: center;
}

/* Кнопка "Сохранить" */
._anketa_btn-save {
    background: linear-gradient(to bottom, #8a1c1c, #5c0a0a);
    color: #fff;
    border: 2px solid #3e2723;
    box-shadow: 0 0 0 2px #d4af37, inset 0 2px 5px rgba(255,255,255,0.2), 0 4px 6px rgba(0,0,0,0.4);
    padding: 12px 40px;
    font-size: 18px;
    font-family: inherit;
    cursor: pointer;
    position: relative;
    border-radius: 4px;
    text-shadow: 1px 1px 2px #000;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.1s, box-shadow 0.1s;
}

._anketa_btn-save:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 2px #d4af37, inset 0 2px 5px rgba(0,0,0,0.5);
}

._anketa_decor-left, ._anketa_decor-right {
    color: #d4af37;
    font-size: 14px;
}  

/**/
#attach_users_detail{
    display: none;
}
#send_message_user{
    display: none;
}
#send_curses_hero{
    display: none;
}
#send_ui_hero{
    display: none;
}
#friend_sends{
    display: none;
}
#ignoeres{
    display: none;
}
#forget_user{
    display: none;
}
#luki_friend{
    display: none;
}
/*настройки*/
.setting-row_equip{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.setting-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #D6D6D6;
}
.setting_select-wrap{
    position:relative;
    flex-shrink:0;
}
.setting_select{
    height: 30px;
    padding: 0 29px 0 10px;
    background: #f3f3f3;
    font-size: 15px;
    font-weight: bold;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.setting_select-wrap::after{
    content: '⌄';
    position: absolute;
    right: 10px;
    top: 26%;
    transform: translateY(-55%);
    color: #222;
    font-size: 20px;
    pointer-events: none;
}

.setting_select:hover{
    border-color:#555;
}

@media(max-width:480px){
    .setting_row{
        flex-direction:column;
        align-items:flex-start;
    }
}
.settings-full-interfeice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #D6D6D6;
}
.arrow-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #313131;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.settings-container.active .arrow-icon {
    transform: rotate(180deg);
}
.settings-content {
    max-height: 0;
    transition: max-height 0.4s ease-out, padding 0.3s ease;
    display: none;
}
.settings-container.active .settings-content {
    max-height: 1000px; /* Достаточное значение для контента */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 7px;
    display: block;
}
.user_name_settings{
    height: 25px;
    max-width: 24%;
}
._text-slider-value{
    margin-top: 10px;
    font-weight: bold;
    text-align: center;
}
._text-game-label{
    display: block;
    margin-bottom: 8px;
}
.arrow-right {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #313131;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(-90deg);
}
.settings-container.active .arrow-right {
    transform: rotate(90deg);
}
#pin_add{
    margin-top: 5px;
    margin-bottom: 5px;
}

/*золота*/
/* =========================================================
   UNIVERSAL
========================================================= */

._many_cards_universal{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    width:100%;
}

._many_card_label{
    display:block;
    width:100%;
}

._many_radio_universal{
    display:none;
}

/* =========================================================
   CARD
========================================================= */

._many_card_universal{
    width:100%;
    background:#242424;
    border:1px solid #3A3A3A;
    border-radius:14px;
    overflow:hidden;
    position:relative;
    transition:.2s;
    box-sizing:border-box;
    background: #1c59b4;
}

._many_card_universal:hover{
    transform:translateY(-2px);
}

/* neutral selected */

._many_radio_universal:checked + ._many_card_universal{
    border-color:#7A7A7A;
    background:#2B2B2B;
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.04);
}

/* =========================================================
   HEADER / FOOTER
========================================================= */

._many_card_header_universal{
    background: #1957b1;
    color:#F1F1F1;
    text-align:center;
    padding:9px 6px;
    font-size:12px;
    font-weight:700;
    border-bottom:1px solid #3B3B3B;
}

._many_card_footer_universal{
    background:#2A2A2A;
    color:#BDBDBD;
    text-align:center;
    padding:8px 6px;
    font-size:11px;
    border-top:1px solid #363636;
}

/* =========================================================
   IMAGE
========================================================= */

._many_card_universal img{
    width:100%;
    height:90px;
    object-fit:contain;
    padding:8px;
}

/* =========================================================
   CONTENT
========================================================= */

._many_card_content{
    padding:12px;
}

._many_card_price{
    font-size:13px;
    font-weight:700;
    color:#E5E5E5;
    margin-bottom:10px;
    text-align:center;
}

/* =========================================================
   BUTTON
========================================================= */

._many_buy_btn{
    width:100%;
    height:38px;
    border:none;
    border-radius:10px;
    background:#3A3A3A;
    color:#FFFFFF;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

._many_buy_btn:hover{
    background:#4A4A4A;
}

/* =========================================================
   DAILY REWARDS
========================================================= */

._many_rewards_grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

._many_reward_content{
    padding:6px 8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:60px;
}

._many_reward_content img{
    width:36px;
    height:36px;
    object-fit:contain;
}

._many_reward_text{
    text-align:center;
    font-size:11px;
    color:#DADADA;
    line-height:1.3;
}

/* claimed */

._many_reward_claimed{
    opacity:.6;
}

._many_reward_claimed::after{
    content:'✓';
    position:absolute;
    top:6px;
    right:6px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#4C8B5C;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:700;
}

/* today */

._many_reward_today{

}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:480px){

    ._many_cards_universal{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    ._many_rewards_grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }

    ._many_card_header_universal{
        font-size:11px;
        padding:8px 4px;
    }

    ._many_card_footer_universal{
        font-size:10px;
    }

    ._many_reward_text{
        font-size:10px;
    }

    ._many_buy_btn{
        height:34px;
        font-size:12px;
    }
}

@media(max-width:340px){

    ._many_cards_universal{
        grid-template-columns:1fr;
    }

    ._many_rewards_grid{
        grid-template-columns:1fr;
    }
}
/* Контейнер пропуска */
._universal-bp-wrapper {
    width: 100%;
    max-width: 480px;
    height: 100vh;
    overflow-y: auto;
}
.background_gold{
    background-color: #0a1f44;
}
._universal-bp-track {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Строка уровня */
._universal-bp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 120px;
    position: relative;
    gap: 10px;
}

/* Колонки */
._universal-bp-col-left, ._universal-bp-col-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
    background: linear-gradient(to bottom, #1f68cf, #134c9c);
}

/* Предмет награды */
._universal-bp-item {
    width: 85px;
    height: 85px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

._universal-bp-item img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

/* Полученная награда */
._universal-bp-item.collected {
    opacity: 0.5;
    background: #E0E0E0;
}

/* Фиолетовое свечение для премиума */
._universal-bp-item.glow-purple {

}

/* Количество предметов */
._universal-bp-count {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: #5D4037;
    color: #FFD54F;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    border: 1px solid #FFD54F;
}

/* Бейдж редкости (Эпическое/Легендарное) */
._universal-bp-badge {
    position: absolute;
    top: -10px;
    font-size: 9px;
    background: #8D6E63;
    color: white;
    padding: 2px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Центральный узел (номер уровня) */
._universal-bp-divider {
    width: 50px;
    display: flex;
    justify-content: center;
    position: relative;
    height: 100%;
}

/* Линия соединения уровней */
._universal-bp-divider::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 100%;
    background: #D7CCC8;
    z-index: 1;
}

._universal-bp-node {
    width: 34px;
    height: 34px;
    background: #5D4037;
    border: 3px solid #FFD54F;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    z-index: 2;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/* Замок для заблокированных наград */
._universal-bp-locked {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    pointer-events: none;
}

/* Анимация частиц (CSS-only) */
._universal-bp-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #A349FF;
    border-radius: 50%;
    animation: floatBP 3s infinite linear;
    opacity: 0;
}

@keyframes floatBP {
    0% { transform: translateY(0); opacity: 0; }
    50% { opacity: 0.8; }
    100% { transform: translateY(-40px); opacity: 0; }
}

/*OLD_CHAT*/

._oldChats_overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:9999;
}

/* =========================================================
   MODAL
========================================================= */

._oldChats_modal{
    position:relative;
    width:100%;
    max-width:420px;
    background:#1a1b20;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #2d2f39;
    box-shadow:0 10px 40px rgba(0,0,0,.45);
}

/* =========================================================
   CLOSE
========================================================= */

._oldChats_close{
    position:absolute;
    top:14px;
    right:14px;
    width:34px;
    height:34px;
    border:none;
    border-radius:10px;
    background:#252733;
    color:#fff;
    cursor:pointer;
    font-size:16px;
    transition:.2s;
}

._oldChats_close:hover{
    background:#ff4d4d;
}

/* =========================================================
   HEADER
========================================================= */

._oldChats_header{
    padding:18px;
    text-align:center;
    font-size:20px;
    font-weight:700;
    border-bottom:1px solid #2d2f39;
}

/* =========================================================
   TABS
========================================================= */

._oldChats_tabs{
    display:flex;
    overflow-x:auto;
    gap:10px;
    padding:14px;
    scrollbar-width:thin;
    scrollbar-color:#5c6cff #1a1b20;
}

._oldChats_tabs::-webkit-scrollbar{
    height:6px;
}

._oldChats_tabs::-webkit-scrollbar-track{
    background:#1a1b20;
}

._oldChats_tabs::-webkit-scrollbar-thumb{
    background:#5c6cff;
    border-radius:20px;
}

._oldChats_tab{
    min-width:max-content;
    padding:10px 16px;
    border:none;
    border-radius:12px;
    background:#252733;
    color:#cfcfcf;
    cursor:pointer;
    transition:.2s;
    font-size:14px;
    font-weight:600;
}

._oldChats_tab.active{
    background:#5c6cff;
    color:#fff;
}

/* =========================================================
   CONTENT
========================================================= */

._oldChats_content{
    padding:18px;
}

._oldChats_section{
    display:none;
    animation:_oldChatsFade .2s ease;
}

._oldChats_section.active{
    display:block;
}

@keyframes _oldChatsFade{
    from{
        opacity:0;
        transform:translateY(5px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

._oldChats_label{
    display:block;
    margin-bottom:10px;
    font-size:14px;
    color:#cfcfcf;
}

._oldChats_rangeWrap{
    margin-bottom:24px;
}

._oldChats_range{
    width:100%;
    cursor:pointer;
    accent-color:#5c6cff;
}

._oldChats_value{
    margin-top:10px;
    color:#7d8cff;
    font-size:15px;
    font-weight:700;
}

/* =========================================================
   TEXTAREA
========================================================= */
#_oldChats_chatOverlay_Ban_Players{
    display: none;
}
#_oldChats_chatOverlay_Mut_Players{
    display: none;
}
._oldChats_textarea{
    width:92%;
    min-height:42px;
    max-height:96px;
    resize:none;
    overflow-y:auto;
    border:none;
    outline:none;
    padding:12px;
    border-radius:12px;
    background:#252733;
    color:#fff;
    font-size:14px;
    line-height:1.4;
}

/* =========================================================
   FOOTER
========================================================= */

._oldChats_footer{
    padding:18px;
    border-top:1px solid #2d2f39;
}

._oldChats_btn{
    width:100%;
    border:none;
    padding:14px;
    border-radius:14px;
    background:#5c6cff;
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

._oldChats_btn:hover{
    opacity:.9;
}
/*mail*/
#chat_clans{
    display: none;
}
#chat_brother{
    display: none;
}
._bot-container {
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    box-sizing: border-box;
}

._bot-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ===== СЕКЦИИ (Рамки под дерево/кожу) ===== */
._bot-section {
    background-color: #eaddc5; /* Чуть темнее основного фона */
    border: 1px solid #8b5a2b; /* Жесткая рамка */
    padding: 8px;
}

._bot-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #c4a47c; /* Шапка секции */
    border: 1px solid #734a21;
    border-bottom-width: 2px;
    padding: 6px 8px;
    margin: -8px -8px 8px -8px; /* Растягиваем шапку до краев секции */
    font-weight: bold;
    font-size: 15px;
    color: #3e1b04;
    text-transform: uppercase;
    margin-top: 4px;
}

/* ===== СТРОКИ И ЭЛЕМЕНТЫ УПРАВЛЕНИЯ ===== */
._bot-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dotted #a88a68; /* Классический точечный разделитель */
}

._bot-row:last-child {
    border-bottom: none;
}

._bot-label {
    font-weight: normal;
    cursor: pointer;
}

._bot-group {
    border: 1px solid #a88a68;
    background-color: #f0e6d6;
    padding: 8px;
    margin-top: 6px;
}

._bot-group-title {
    font-weight: bold;
    color: #5c3a21;
    border-bottom: 1px solid #a88a68;
    margin-bottom: 6px;
    padding-bottom: 4px;
    font-size: 13px;
}

._bot-flex-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

._bot-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== УВЕЛИЧЕННЫЕ ПОЛЯ ВВОДА ===== */
._bot-input-checkbox {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin: 0;
    cursor: pointer;
}

._bot-input-number, 
._bot-input-time, 
._bot-input-text, 
._bot-select {
    background-color: #ffffff;
    border: 1px inset #8b5a2b; /* Вдавленная олдскульная рамка */
    padding: 5px 6px; /* Большие удобные отступы */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
    box-sizing: border-box;
}

._bot-input-number {
    width: 75px;
}

._bot-input-time {
    width: 95px;
}

/* Базовое отображение гридов из инлайновых стилей HTML */
div[style*="grid-template-columns"] {
    display: grid;
}

/* ===== ТАБЛИЦЫ ===== */
._bot-table-wrap {
    margin-top: 8px;
    overflow-x: auto;
}

._bot-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #5c3a21;
}

._bot-table-th {
    background-color: #c4a47c;
    border: 1px solid #5c3a21;
    padding: 6px;
    font-size: 13px;
    color: #3e1b04;
    text-align: left;
    font-weight: bold;
}

._bot-table-td {
    border: 1px solid #8b5a2b;
    padding: 6px;
    background-color: #f4eadd;
    font-size: 13px;
}

._bot-table tr:nth-child(even) ._bot-table-td {
    background-color: #eaddc5;
}


/* Планшеты и узкие экраны: Катакомбы делятся на 2 колонки (3-й блок падает вниз) */
@media (max-width: 768px) {
    div._bot-grid[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Мобильные телефоны: Все сетки (Катакомбы и Плавание) выстраиваются в 1 колонку */
@media (max-width: 480px) {
    div._bot-grid[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/*gold*/
.shop-wrapper_shop_buy {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: #F5F6E0; /* Твой главный фон */
    color: #313131; /* Твой цвет текста */
}

.shop-wrapper_shop_buy *,
.shop-wrapper_shop_buy *::before,
.shop-wrapper_shop_buy *::after {
    box-sizing: inherit;
}

.container_shop_buy {
    max-width: 450px;
    margin: 0 auto;
    padding: 0 16px;
}

/* === ШАПКА === */
.header_shop_buy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
}

.logo_shop_buy {
    display: flex;
    align-items: center;
}

.logo-icon_shop_buy {
    font-size: 28px;
    margin-right: 12px;
}

.logo-text_shop_buy {
    font-size: 24px;
    font-weight: bold;
    background: linear-gradient(90deg, #d97706 0%, #be123c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.balance-badge_shop_buy {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-radius: 9999px;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #313131;
}

.balance-icon_shop_buy {
    margin-right: 6px;
}

/* === БАННЕР === */
.promo-banner_shop_buy {
    background-image: url("banner/123.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #ffffff; /* Фолбэк, если картинка не загрузится */
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.promo-bg-circle_shop_buy {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background-color: #facc15;
    border-radius: 50%;
    opacity: 0.3;
}

.promo-title_shop_buy {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 4px 0;
    position: relative;
    z-index: 2;
    color: #313131;
}

.promo-desc_shop_buy {
    font-size: 14px;
    margin: 0 0 12px 0;
    position: relative;
    z-index: 2;
    color: #4b5563;
}

.promo-timer_shop_buy {
    font-size: 12px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #313131;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    padding: 4px 12px;
    display: inline-block;
    position: relative;
    z-index: 2;
    font-weight: 600;
}

/* === КАТЕГОРИИ === */
.categories_shop_buy {
    display: flex;
    overflow-x: auto;
    padding-bottom: 16px;
    margin-bottom: 24px;
    scrollbar-width: none;
}
.categories_shop_buy::-webkit-scrollbar {
    display: none;
}

.category-btn_shop_buy {
    background-color: #ffffff;
    color: #313131;
    border: 1px solid #e5e7eb;
    padding: 8px 16px;
    border-radius: 9999px;
    margin-right: 8px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 16px;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.category-btn_shop_buy.active_shop_buy {
    background-color: #313131;
    color: #F5F6E0;
    border-color: #313131;
    font-weight: bold;
}

/* === СЕТКА ТОВАРОВ === */
.products-grid_shop_buy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.item-card_shop_buy {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #f3f4f6;
}

.item-card_shop_buy:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.discount-badge_shop_buy {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #ef4444;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 9999px;
    transform: rotate(15deg);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.item-icon_shop_buy {
    font-size: 40px;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
}

.item-title_shop_buy {
    font-weight: bold;
    text-align: center;
    margin: 0 0 4px 0;
    font-size: 16px;
    color: #313131;
}

.item-price_shop_buy {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    gap: 8px;
}

.price-old_shop_buy {
    color: #9ca3af;
    text-decoration: line-through;
    font-size: 14px;
}

.price-new_shop_buy {
    color: #d97706; /* Более темный оранжевый для читаемости на белом */
    font-weight: bold;
    font-size: 16px;
}

/* === КНОПКИ КАРТОЧЕК (адаптированы под твой стиль) === */
.give_reward{
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 8px 0;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    margin-top: auto;
    font-family: inherit;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.2s, opacity 0.2s;
}
.buy-btn_shop_buy {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 8px 0;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    margin-top: auto;
    font-family: inherit;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.2s, opacity 0.2s;
}
.buy-btn_shop_buy:hover {
    opacity: 0.9;
}

/* Фон кнопок изменен на твой фирменный темно-серый #313131 */
.btn-blue_shop_buy,
.btn-green_shop_buy,
.btn-pink_shop_buy,
.btn-yellow_shop_buy { 
    background: #313131; 
}

/* === БЛОК ПОПУЛЯРНОЕ === */
.section-title_shop_buy {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    color: #313131;
}

.section-title-icon_shop_buy {
    margin-right: 8px;
}

.premium-card_shop_buy {
    background: #ffffff;
    border: 2px solid #facc15;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.15);
}

.premium-bg_shop_buy {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, #fef08a 0%, #fecaca 100%);
    opacity: 0.3;
}

.premium-icon_shop_buy {
    font-size: 40px;
    margin-right: 16px;
    position: relative;
    z-index: 2;
}

.premium-info_shop_buy {
    position: relative;
    z-index: 2;
    flex-grow: 1;
    margin-left: 15px;
}

.premium-title_shop_buy {
    font-weight: bold;
    font-size: 18px;
    margin: 0 0 4px 0;
    color: #313131;
}

.premium-desc_shop_buy {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 8px 0;
}

.premium-action_shop_buy {
    display: flex;
    align-items: center;
}

.premium-price_shop_buy {
    color: #d97706;
    font-weight: bold;
    margin-right: 12px;
}

/* Оставляем яркой для привлечения внимания к покупке премиума */
.premium-btn_shop_buy {
    background: linear-gradient(90deg, #eab308 0%, #f97316 100%);
    border: none;
    border-radius: 9999px;
    padding: 6px 14px;
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-left: 10px;
}

/* === ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ === */
.horizontal-scroll_shop_buy {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
    margin-bottom: 24px;
    scrollbar-width: none;
}
.horizontal-scroll_shop_buy::-webkit-scrollbar { display: none; }

.horizontal-scroll_shop_buy .item-card_shop_buy {
    min-width: 180px;
}

/* === КНОПКА ПОПОЛНЕНИЯ ВНИЗУ (Яркая Акцентная) === */
.top-up-btn_shop_buy {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #eab308 0%, #f97316 100%);
    border: none;
    border-radius: 9999px;
    padding: 12px 10px;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.4);
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 50;
    font-family: inherit;
}

.top-up-icon_shop_buy { margin-right: 8px; }

/* === МОДАЛЬНЫЕ ОКНА === */
.modal-overlay_shop_buy {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(49, 49, 49, 0.6); /* Полупрозрачный темный фон для фокуса */
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    backdrop-filter: blur(3px); /* Легкое размытие заднего фона */
}

.modal-overlay_shop_buy.active_shop_buy {
    opacity: 1;
    pointer-events: auto;
}

.modal-content_shop_buy {
    background: #F5F6E0; /* Цвет модального окна под основной фон */
    border-radius: 16px;
    padding: 24px;
    width: 90%;
    max-width: 400px;
    position: relative;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
}

.modal-close-btn_shop_buy, .modal-back-btn_shop_buy {
    position: absolute;
    top: 16px;
    background: none;
    border: none;
    color: #6b7280;
    font-size: 20px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s;
}
.modal-close-btn_shop_buy:hover, .modal-back-btn_shop_buy:hover { color: #313131; }
.modal-close-btn_shop_buy { right: 16px; }
.modal-back-btn_shop_buy { left: 16px; }

.modal-title_shop_buy {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 24px 0;
    color: #313131;
}

.payment-option_shop_buy {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.payment-option_shop_buy.green_shop_buy {
    border-color: #22c55e;
    background: #f0fdf4;
}

.payment-option_shop_buy:hover { 
    transform: scale(1.02); 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-color: #3b82f6;
}

.payment-option_shop_buy.green_shop_buy:hover { border-color: #16a34a; }

.payment-option-icon_shop_buy {
    width: 44px; height: 44px;
    display: flex; justify-content: center; align-items: center;
    margin-right: 16px;
    font-size: 20px;
    font-weight: bold;
    color: #2563eb;
}
.payment-option_shop_buy.green_shop_buy .payment-option-icon_shop_buy { 
    background-color: #dcfce7;
    color: #16a34a; 
}

.payment-option-info_shop_buy { flex-grow: 1; }
.payment-option-title_shop_buy { font-weight: bold; margin: 0 0 4px 0; color: #313131; }
.payment-option-desc_shop_buy { font-size: 14px; color: #6b7280; margin: 0; }
.payment-option-arrow_shop_buy { margin-left: auto; color: #9ca3af; font-weight: bold; }

.exchange-rate_shop_buy {
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    margin: -16px 0 24px 0;
}

.input-wrapper_shop_buy {
    position: relative;
    margin-bottom: 8px;
}

.amount-input_shop_buy {
    width: 100%;
    background-color: #ffffff;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #313131;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
}
.amount-input_shop_buy:focus { border-color: #d97706; }

.currency-symbol-input_shop_buy {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: bold;
    color: #9ca3af;
}

.limits_shop_buy {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
}

.result-box_shop_buy {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.result-label_shop_buy { color: #4b5563; }
.result-value_shop_buy { color: #d97706; font-weight: bold; font-size: 20px; }

.bonus-btn_shop_buy {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #d97706;
    font-weight: bold;
    cursor: pointer;
    padding: 8px 0;
    font-size: 16px;
    font-family: inherit;
}
.bonus-arrow_shop_buy { transition: transform 0.3s; color: #d97706;}
.bonus-arrow_shop_buy.open_shop_buy { transform: rotate(180deg); }

.bonus-table_shop_buy {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.bonus-table_shop_buy.show_shop_buy { max-height: 300px; margin-top: 8px; margin-bottom: 16px;}

.bonus-table_shop_buy .table_shop_buy {
    width: 100%;
    border-collapse: collapse;
}
.bonus-table_shop_buy .td_shop_buy {
    padding: 10px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
    color: #4b5563;
}
.bonus-table_shop_buy .tr_shop_buy:last-child .td_shop_buy { border-bottom: none; }
.bonus-table_shop_buy .td_shop_buy:last-child { text-align: right; color: #d97706; font-weight: bold;}

/* Оставляем яркой и градиентной */
.pay-submit-btn_shop_buy {
    width: 100%;
    background: linear-gradient(90deg, #eab308 0%, #f97316 100%);
    border: none;
    border-radius: 8px;
    padding: 16px;
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    margin-top: 16px;
    font-family: inherit;
    box-shadow: 0 4px 6px rgba(249, 115, 22, 0.3);
    transition: opacity 0.2s, transform 0.2s;
}
.pay-submit-btn_shop_buy:active { transform: translateY(2px); }
.pay-submit-btn_shop_buy:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.success-content_shop_buy { text-align: center; }
.success-icon-big_shop_buy { font-size: 64px; padding-bottom: 34px; padding-top: 25px }
.success-title_shop_buy { font-size: 24px; font-weight: bold; margin: 0 0 8px 0; color: #313131; }
.success-desc_shop_buy { color: #6b7280; margin: 0 0 24px 0; }

/* Изменена под твой стиль: вместо зеленой стала темно-серой с легким осветлением при ховере */
.success-btn_shop_buy {
    width: 100%;
    background-color: #313131;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 16px;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 6px rgba(49, 49, 49, 0.3);
    transition: background-color 0.2s;
}
.success-btn_shop_buy:hover {
    background-color: #444444;
}

/* === АНИМАЦИИ === */
@keyframes pulse_shop_buy {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.pulse_shop_buy { animation: pulse_shop_buy 1.5s infinite; }

@keyframes float_shop_buy {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.float-anim_shop_buy { animation: float_shop_buy 3s ease-in-out infinite; }

@keyframes ping_shop_buy {
    0% { transform: scale(1); opacity: 1; }
    75%, 100% { transform: scale(1.2); opacity: 0; }
}
.animate-ping_shop_buy { animation: ping_shop_buy 0.5s cubic-bezier(0, 0, 0.2, 1); }

.icon_gold_buy{
    width: 30px;
}
.modal-content_shop_buy{
    max-height: 500px;
    overflow-y: auto;
}

/*gold_modal_success*/
        /* Кнопка открытия модального окна (префикс) */
        ._gold_buy_presentopen-modal-btn {
            background-color: #2563eb;
            color: white;
            font-weight: bold;
            padding: 12px 24px;
            border-radius: 9999px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        
        ._gold_buy_presentopen-modal-btn:hover {
            background-color: #1d4ed8;
            transform: scale(1.05);
        }
        
        /* Модальное окно */
        ._gold_buy_presentmodal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        
        ._gold_buy_presentmodal-overlay._gold_buy_presentactive {
            opacity: 1;
            pointer-events: all;
        }
        
        ._gold_buy_presentmodal-container {
            background-color: white;
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            position: relative;
            width: 100%;
            max-width: 420px;
            margin: 0 16px;
            max-height: 90vh;
        }
        
        ._gold_buy_presentmodal-content {
            padding: 24px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        /* Кнопка закрытия */
        ._gold_buy_presentclose-btn {
            position: absolute;
            top: 16px;
            right: 16px;
            color: #6b7280;
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            z-index: 20;
        }
        
        ._gold_buy_presentclose-btn:hover {
            color: #374151;
        }
        
        /* Анимации */
        @keyframes _gold_buy_presentGoldPulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.8; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        @keyframes _gold_buy_presentCoinFall {
            0% { transform: translateY(-100px) rotate(0deg); opacity: 0; }
            100% { transform: translateY(0) rotate(360deg); opacity: 1; }
        }
        
        ._gold_buy_presentgold-animation {
            animation: _gold_buy_presentGoldPulse 2s infinite;
        }
        
        ._gold_buy_presentcoin {
            position: absolute;
            background: radial-gradient(circle at 30% 30%, #FFD700, #D4AF37);
            border-radius: 50%;
            box-shadow: 0 0 10px #FFD700;
            animation: _gold_buy_presentCoinFall 1s ease-out forwards;
            z-index: 10;
        }
        
        ._gold_buy_presentconfetti {
            position: absolute;
            opacity: 0;
        }
        
        /* Стили содержимого модалки */
        ._gold_buy_presentsuccess-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(to bottom right, #f59e0b, #d97706);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 24px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        ._gold_buy_presentsuccess-icon img{
            width: 50px;
        }
        
        ._gold_buy_presentsuccess-icon i {
            color: white;
            font-size: 36px;
        }
        
        ._gold_buy_presentmodal-title {
            font-size: 24px;
            font-weight: bold;
            color: #1f2937;
            margin-bottom: 12px;
        }
        
        ._gold_buy_presentmodal-text {
            color: #6b7280;
            margin-bottom: 24px;
            line-height: 1.5;
        }
        
        ._gold_buy_presentgold-notification {
            background-color: #fef9c3;
            border-left: 4px solid #f59e0b;
            padding: 16px;
            margin-bottom: 24px;
            border-radius: 0 8px 8px 0;
            text-align: left;
            display: flex;
            align-items: center;
        }
        
        ._gold_buy_presentgold-icon {
            color: #d97706;
            font-size: 20px;
            margin-right: 12px;
        }
        
        ._gold_buy_presentgold-amount {
            font-weight: 600;
            color: #92400e;
        }
        
        ._gold_buy_presentgold-text {
            font-size: 14px;
            color: #b45309;
        }
        
        /* Кнопки */
        ._gold_buy_presentaction-buttons {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        ._gold_buy_presentshare-btn {
            background: linear-gradient(to right, #f59e0b, #d97706);
            color: white;
            font-weight: bold;
            padding: 12px 24px;
            border-radius: 9999px;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        ._gold_buy_presentshare-btn:hover {
            background: linear-gradient(to right, #d97706, #b45309);
            transform: scale(1.05);
        }
        
        ._gold_buy_presentcontinue-btn {
            background-color: #f3f4f6;
            color: #4b5563;
            font-weight: 500;
            padding: 12px 24px;
            border-radius: 9999px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        ._gold_buy_presentcontinue-btn:hover {
            background-color: #e5e7eb;
        }
        
        /* Декоративные элементы */
        ._gold_buy_presentmodal-top-border {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(to right, #fcd34d, #f59e0b, #fcd34d);
        }
        
        ._gold_buy_presentmodal-bottom-border {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(to right, transparent, #fcd34d, transparent);
        }
        
        /* Контейнер для анимаций */
        #_gold_buy_presentcoins-container {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            overflow: hidden;
        }
/*экипировка в базаре*/
/* Фон модалки подгоняем под игровую стилистику */
.cr-modal-theme .modal-content {
    background: linear-gradient(180deg, #4b6a8e 0%, #213550 100%) !important;
    border: 4px solid #a8c8ea !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6), inset 0 0 15px rgba(0,0,0,0.4) !important;
    color: #ffffff;
    font-family: 'Arial Black', Impact, sans-serif; /* Более жирный, игровой шрифт */
    padding: 20px;
}

/* Заголовок (Название предмета) */
h1.cr-modal-title {
    
    text-transform: uppercase;
    text-align: center;
    color: #ffde00;
    text-shadow: 2px 2px 0px #8a4800, 0px 4px 6px rgba(0,0,0,0.5);
    margin-bottom: 15px;
    letter-spacing: 1px;
}

/* Рамка иконки предмета как у карт редкости */
.cr-main-icon {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin: 0 auto 20px auto;
    display: block;
    background: radial-gradient(circle, #fff1a0, #d99100);
    border: 4px solid #ffcc00;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.5), inset 0 0 10px rgba(255,255,255,0.5);
}

/* Контейнер для статов */
.cr-stats-box {
    margin-bottom: 15px;
}

/* Строка характеристики (как в инфо о карте) */
.cr-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 5px;
    border-bottom: 1px solid #D6D6D6;
}
.cr-stat-row:last-child {
    border-bottom: none;
}

.cr-stat-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cr-stat-icon {
    width: 16px;
    height: 16px;
}

.cr-stat-name {
    
}

.cr-stat-val {
    
}

/* Зеленый цвет для баффов/апов */
.cr-green { color: #65ff00 !important; }
/* Желтый/золотой для пропусков и важных цифр */
.cr-yellow { color: #ffcc00 !important; }
/* Пурпурный для кристаллов */
.cr-purple { color: #d85fff !important; }

/* Описание абилок (для амулетов/ошейников) */
.cr-ability-desc {
}

/* Доп. инфо (Потрачено, Пропуски) */
.cr-extra-info {
    margin-bottom: 10px;
}

/* Дисплей цены */
.cr-price-display {
    display: flex;
    align-items: center;
    gap: 5px;
}
.cr-price-label {
}
.cr-price-value-wrap {
    display: flex;
    align-items: center;
}
.cr-price-value {
    
}
.cr-price-icon {
    width: 16px;
    height: 16px;
}
#ban_heroes{
    display: none;
}
#mut_heroes{
    display: none;
}
._accounts-modal-container {
    flex-grow: 1;
    background: #F5F6E0;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 8px;
    width: 100%;
    max-width: 460px;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    position: absolute;
    display: none;
    z-index: 50;
}
._accounts-account-card ._change_active{
    border:1px solid red;
}
._accounts-modal-title {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, #F4F5EE, #DCDED3);
    border: 2px solid #829399;
    border-radius: 8px 8px 12px 12px;
    padding: 4px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    white-space: nowrap;
}

    ._accounts-accounts-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      overflow-y: auto;
      padding-right: 8px;
      margin-bottom: 12px;
    }

    ._accounts-accounts-list::-webkit-scrollbar {
      width: 6px;
    }

    ._accounts-accounts-list::-webkit-scrollbar-track {
      background: #D9D6C4;
      border-radius: 4px;
    }

    ._accounts-accounts-list::-webkit-scrollbar-thumb {
      background: #9A9E96;
      border-radius: 4px;
    }

    ._accounts-account-card {
      display: flex;
      align-items: center;
      background: linear-gradient(to bottom, #FCFAEE, #F2EED6);
      border-radius: 4px;
      padding: 8px 12px;
      gap: 12px;
      position: relative;
      border-bottom: 2px solid #D1CEC0;
      box-shadow: 0 1px 0 #FFFFFF;
    }

    ._accounts-account-card:last-child {
      border-bottom: none;
      box-shadow: none;
    }

    ._accounts-account-card._accounts-active {
      background: linear-gradient(to bottom, #EBF5E1, #D8ECD0);
      border: 2px solid #94D883;
      border-radius: 8px;
      box-shadow:
        inset 0 0 10px rgba(148, 216, 131, 0.3),
        0 4px 10px rgba(148, 216, 131, 0.2);
    }

    ._accounts-avatar-wrapper {
      position: relative;
      width: 54px;
      height: 54px;
      flex-shrink: 0;
      border-radius: 50%;
      background: #C4C8C5;
      border: 3px solid #A2A9A6;
      box-shadow:
        inset 0 0 8px rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      overflow: hidden;
    }

    ._accounts-account-info {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    ._accounts-name-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    ._accounts-level-badge {
      background: linear-gradient(to bottom, #8C949A, #626A70);
      color: #FFF;
      font-family: sans-serif;
      font-size: 13px;
      font-weight: bold;
      padding: 2px 6px;
      border-radius: 6px;
      border: 1px solid #4A5156;
      box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }

    ._accounts-account-name {
      font-size: 14px;
      color: #2A2A2A;
      font-weight: bold;
    }

    ._accounts-active-check {
      color: #4CAF50;
      font-size: 16px;
      display: none;
    }

    ._accounts-account-card._accounts-active ._accounts-active-check {
      display: inline-block;
    }

    ._accounts-stats-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-family: sans-serif;
      font-size: 14px;
      color: #4A4A4A;
    }

    ._accounts-stat-item {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    ._accounts-stat-icon {
      font-size: 14px;
    }

    ._accounts-btn-close {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: linear-gradient(to bottom, #D25C54, #A63C36);
      border: 2px solid #8B9495;
      color: white;
      font-weight: bold;
      font-family: sans-serif;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: filter 0.2s;
    }

    ._accounts-btn-close:hover {
      filter: brightness(1.2);
    }

    ._accounts-btn-add {
      align-self: center;
      background: linear-gradient(to bottom, #A9B0AE, #848C8B);
      color: #FFFFFF;
      font-family: sans-serif;
      font-size: 14px;
      font-weight: bold;
      padding: 10px 24px;
      cursor: pointer;
      text-transform: uppercase;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        0 4px 6px rgba(0,0,0,0.2);
      text-shadow: 0 1px 1px rgba(0,0,0,0.5);
      transition: filter 0.2s, transform 0.1s;
      display: block;
      margin: 0 auto;
    }

    ._accounts-btn-add:hover {
      filter: brightness(1.1);
    }

    ._accounts-btn-add:active {
      transform: translateY(2px);
      box-shadow: 0 2px 3px rgba(0,0,0,0.2);
    }
/*евент_главная*/
.icon_players{
    width: 30px;
    vertical-align: text-bottom;
    padding-right: 2px;
}
  /* Главный контейнер */
  ._event_home_widget-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Тексты заголовков с адаптивным размером (от 12px до 18px) */
  ._event_home_title-main {
    color: #f7d98d;
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 2px 0;
    text-align: center;
  }

  ._event_home_title-sub {
    color: #b1c6c6;
    font-size: clamp(12px, 3.5vw, 14px);
    margin: 0 0 12px 0;
    text-align: center;
  }

  /* Обертка для самой полосы */
  ._event_home_progress-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
  }

  /* Сама дорожка прогресса */
  ._event_home_progress-track {
    flex-grow: 1;
    height: 20px;
    background-color: #0b2225;
    border: 1px solid #c79545; /* Золотая рамка */
    border-radius: 2px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    overflow: hidden; /* Чтобы заливка не вылезала за края */
  }

  /* Заливка прогресса (бирюзовый градиент) */
  ._event_home_progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #ff4500 0%, #ff7a00 40%, #ffbf30 100%);
  }

  /* Текст внутри прогресс-бара */
  ._event_home_progress-text {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-size: clamp(11px, 3.5vw, 13px);
    font-weight: 500;
    letter-spacing: 0.5px;
    /* Черная обводка текста для читаемости поверх любых цветов */
    text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;
  }

  /* Контейнер для нижних маркеров (5%, 10%, 15%) */
  ._event_home_markers-container {
    position: relative;
    width: 100%;
    height: 40px;
    margin-top: 4px;
  }

  /* Базовый маркер */
  ._event_home_marker {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Небольшая поправка для крайнего правого маркера, чтобы текст не уезжал за экран */
  ._event_home_marker._event_home_last {
    transform: translateX(calc(-50% - 5px));
  }

  /* Треугольник, указывающий вверх */
  ._event_home_triangle {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 7px solid #8e9b9b; /* Серый цвет по умолчанию */
    margin-bottom: 3px;
  }

  /* Текст под треугольником */
  ._event_home_marker-text {
    color: #8e9b9b;
    font-size: clamp(10px, 2.8vw, 13px); /* Резиновый размер шрифта */
    font-weight: bold;
    white-space: nowrap;
    text-align: center;
  }

  /* Состояние "Достигнуто" (Зеленый цвет для 5%) */
  ._event_home_marker._event_home_reached ._event_home_triangle {
    border-bottom-color: #61b34e;
  }
  ._event_home_marker._event_home_reached ._event_home_marker-text {
    color: #61b34e;
  }
  
  /* Точные позиции маркеров на шкале */
  ._event_home_marker-23 {display:none; }
  ._event_home_marker-46 {display:none; }
  ._event_home_marker-69 {display:none; }
  ._event_home_marker-92 {display:none; }

  /*закончилось евент главная*/
#epoha_vozrojdenie{
    display: none;
}
#epoha_menu_vozrojdenie{
    display: none;
}
#renaissance_1{
    display: none;
}
#renaissance_2{
    display: none;
}
#renaissance_3{
    display: none;
}
#renaissance_4{
    display: none;
}
#error_list_1{
    display: none;
}
#error_list_2{
    display: none;
}
#error_list_3{
    display: none;
}
#error_list_4{
    display: none;
}
#men{
    display: none;
}
#woomens{
    display: none;
}