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;
}
#header_mghero{
    display: none;
}
.players_wishes{
    margin-left: 10px;
}
.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;
}
#btn_shtraf_fine{
    display: none;
}
#cancelWar_detail{
    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%); 
}
.undead{
    display: none;
}
.undead_lords{
    display: none;
}
.stats_undead_start{
    display: none;
}
.undead_text_out{
    display: none;
}
.time_next_undead{
    display: none;
}
.shtraf_id_undead_lord{
    display: none;
}
.DoneTask{
    color: #1a9530;
}
.footer_share{
    display: none;
}
#_change_toggleBtn{
    display: none;
}
#log_outs{
    display: none;
}
#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;
}
.hr + .hr,
*:has(> .hr:last-child) + .hr{
    display: none;
}
.discript_events{
    color: #EEB6A8;
}
.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;
}
.page button.copy-link{
    color: #610000;
    font: inherit;
}
/* Тёмно-красный не читается на тёмном фоне норманнов: как обычная ссылка темы. */
html[data-theme="normans"] .page button.copy-link{
    color: var(--imperia-links, #a1c7f0);
}
.pagination_referal{
    text-align: center;
}
.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;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
}

.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 {
    text-align: center;
}
.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 {
    display: inline-block;
    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;
    /* До загрузки иконка уже квадратная: строка не подрастает, когда картинка пришла */
    aspect-ratio: auto 1 / 1;
    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;  
}
.condition_item {
    margin-left: 10px;
}
.condition-toggle {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
._ranking_war_not {
    background: #00B91E;
    clip-path: circle(50%);
    height: 14px;
    width: 14px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
}
._ranking_war_yes {
    background: #9C0900;
    clip-path: circle(50%);
    height: 14px;
    width: 14px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
}
.clan_extra_info_block {
    margin-left: 15px;
}
.right-button {
    display: inline-block;
}
.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;
}
/* Имя противника-компьютера: не ссылка, но цветом как ник игрока напротив */
.name-battle-foe{
    color: #610000;
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .name-battle-foe,
html[style*="--imperia-links"] .content .name-battle-foe{
    color: var(--imperia-links);
}
.tbody_item{
    text-align: center;
}
.avatar-img{
    width: 80px;
    max-height: 100%;
    height: 120px;
}
.battle-it{
    word-wrap: break-word;
    max-width: 110px;
}
/* Столбцы бойцов фиксированной ширины: имя и числа нового противника не сдвигают колонку иконок. */
/* Место под полосу прокрутки всегда занято: страница, ставшая выше или ниже экрана, не сдвигается вбок. */
html{scrollbar-gutter:stable;}
.avatar-duels table{table-layout:fixed;}
.avatar-duels th.name-battle{width:40%;overflow-wrap:anywhere;}
.avatar-duels th.name-battle:nth-child(2){width:20%;}
#raid .avatar-duels table{table-layout:auto;}
.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%;
}
.pagination_level a.not_pagination {
    text-decoration: none;
}
.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%;
}
/* ресурсы героя: картинка одной ширины, текст её не сжимает */
.resource-row .left{
    flex:0 0 72px;
}
/*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;
    margin-left: 5px;
    margin-right: 5px;
}
.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;
    margin-left: 5px;
    margin-right: 5px;
}
.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_account-item{
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
._kit_change_account-item img{
    -webkit-user-drag: none;
    pointer-events: none;
}
._kit_change_account-item.kit-dragging{
    position: relative;
    z-index: 5;
    opacity: .92;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    cursor: grabbing;
}
/* Пустая ячейка набора — серая, как в старой игре */
.armor_kit img.kit-empty-slot,
.amulet_kit img.kit-empty-slot{
    filter: grayscale(100%);
}
._kit_change_username-text{
    margin-bottom: 10px!important;
    text-align: left!important;
    display: inline-block;
}
.active_itemss{
    display: none;
}
/* Заголовок «Наборы» — кнопка во всю ширину, текст слева, как div в старой игре */
button.kit_array{
    display: block;
    width: 100%;
    text-align: left;
}
/* Есть активный набор — надпись видна (в старой игре её включал скрипт) */
.active_itemss.active_itemss_on{
    display: block;
}
.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;
    box-sizing: border-box;
    max-width: 480px;
    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{
    display: block;
    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: 500px;
    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;
}
/* Крестик всегда поверх содержимого окна, поле нажатия ~36px (сам значок на прежнем месте) */
.modal-content_equipment > .modal-close_equipment{
    z-index: 3;
    top: 0;
    right: 4px;
    min-width: 36px;
    min-height: 36px;
    padding: 4px 8px;
}


.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;
}
button.delete-btn{
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}
/*скрываем и показываем зверя в арене*/
.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, #continue, #continue_end {
    display: none;
}
.wrapper_effect{
    display: flex;
    justify-content: start;
    padding-top: 10px;
    padding-bottom: 10px;
}
.wrapper_effect button{
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
/* скрываем стандартный 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 img{
    filter: grayscale(100%);
}
.wrapper-equiment.kit-picked .btn-images{
    outline: 3px solid #d4a017;
    outline-offset: 2px;
    border-radius: 4px;
}
.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 > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.arena-notification .use-btn,
.arena-notification .close {
    flex: none;
}
.arena-notification .use-btn {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
}
.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;
    margin: 10px 0 12px;
}

.filter-row .filter-btn {
    margin: 6px 8px 6px 0;
    padding: 6px;
}

.market-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
}

.market-filter .filter-btn {
    margin: 0;
}

.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;
}

[data-page="events"] .filter-btn {
    margin: 5px 5px 5px 0;
}

.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;
}

/* Плашки истории кузницы: фон и рамка по теме, текст — цвет темы */
:root {
    --smith-chip-bg: #d9c7a1;
    --smith-chip-soft: #e8dcc0;
    --smith-chip-active: #f4d7a1;
    --smith-chip-line: #b39a6a;
    --smith-chip-text: #3a2a12;
}
html[data-theme="vikings"] {
    --smith-chip-bg: rgba(0, 0, 0, 0.22);
    --smith-chip-soft: rgba(0, 0, 0, 0.15);
    --smith-chip-active: rgba(247, 192, 121, 0.35);
    --smith-chip-line: rgba(247, 192, 121, 0.5);
    --smith-chip-text: #ffffff;
}
html[data-theme="heroes"] {
    --smith-chip-bg: #efe6b4;
    --smith-chip-soft: #f6f0c4;
    --smith-chip-active: #e6d394;
    --smith-chip-line: #c9b98a;
    --smith-chip-text: #361909;
}
html[data-theme="normans"] {
    --smith-chip-bg: rgba(161, 199, 240, 0.14);
    --smith-chip-soft: rgba(161, 199, 240, 0.08);
    --smith-chip-active: rgba(0, 126, 114, 0.55);
    --smith-chip-line: rgba(161, 199, 240, 0.35);
    --smith-chip-text: #ffffff;
}

.card-meta span{
    background:var(--smith-chip-bg);
    color:var(--smith-chip-text);
    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:var(--smith-chip-soft);
    color:var(--smith-chip-text);
    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;
}
.amulet_history + .amulet_history{
    margin-left: 4px;
}
/**/
.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;
    padding: 4px 6px;
    font: inherit;
    color: var(--smith-chip-text);
    background: var(--smith-chip-bg);
    border: 1px solid var(--smith-chip-line);
}

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

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

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

._blachmitch_fast_hidden{
display:none;
}

._blachmitch_fast_day{
    padding: 8px 3px;
    cursor: pointer;
    font: inherit;
    color: var(--smith-chip-text);
    background: var(--smith-chip-soft);
    border: 1px solid var(--smith-chip-line);
}

._blachmitch_fast_active{
    background: var(--smith-chip-active);
    font-weight: bold;
}

.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;
}
.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;
    border: none;
}

.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;
}
#logs_mine .log-entry{
    color: #313131;
    background: transparent;
}
/*награды в руинах*/
.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;
}
.estate-qty-label{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.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 .icon {
        width: 20px;
        height: 20px;
    }

    .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;
}
.upgrade-btn {
    background: linear-gradient(to bottom, #4ceb34, #28a815);
    border: 1px solid #fff;
    border-radius: 5px;
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 3px 0 #1a6d0d;
    margin-top: 5px;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.upgrade-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 #1a6d0d;
}
.upgrade-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #1a6d0d;
}
.upgrade-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255,255,255,0.1);
    transform: rotate(30deg);
    pointer-events: none;
    transition: all 0.5s;
}
.upgrade-btn:hover::after {
    left: 100%;
}
.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.is-open {
    display: flex;
}
.close-btn_buyBattlePass {
    color: #fff;
    font: inherit;
}
#track-wrapper {
    position: relative;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
#track-wrapper::-webkit-scrollbar {
    display: none;
}
/*gold*/
.wrappers_modals_imper_plus{
    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_imper_plus.active_shop_buy {
    display: flex;
}
.wrappers_modals_imper_premium{
    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_imper_premium.active_shop_buy {
    display: flex;
}
.wrappers_modals_imper_prime{
    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_imper_prime.active_shop_buy {
    display: flex;
}
.wrappers_modals_imper_gladiator{
    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_imper_gladiator.active_shop_buy {
    display: flex;
}
.wrappers_modals_imper_zolotya_jila{
    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_imper_zolotya_jila.active_shop_buy {
    display: flex;
}
.wrappers_modals_imper_verbovshik{
    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_imper_verbovshik.active_shop_buy {
    display: flex;
}
.wrappers_modals_imper_elit_vip{
    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_imper_elit_vip.active_shop_buy {
    display: flex;
}
.wrappers_modals_imper_gegemon_vip{
    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_imper_gegemon_vip.active_shop_buy {
    display: flex;
}
.wrappers_modals_rejim_attach{
    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_rejim_attach.active_shop_buy {
    display: flex;
}
.wrappers_modals_rejim_zashita{
    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_rejim_zashita.active_shop_buy {
    display: flex;
}
.wrappers_modals_rejim_turbo{
    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_rejim_turbo.active_shop_buy {
    display: flex;
}
/*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{

}
.fab-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    cursor: pointer;
}
.fab-overlay.active {
    opacity: 1;
    visibility: visible;
}
.fab-menu-container {
    position: fixed;
    top: 44%;
    transform: translateY(-50%);
    right: calc(50% - 240px + 16px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fab-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid #94713f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(148, 113, 63, 0.3);
    z-index: 101;
    color: #fff;
}
.fab-toggle img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.fab-menu-container.active .fab-toggle {
    background: #ef4444;
    border-color: #ef4444;
    transform: scale(0.9);
}
.fab-menu-container.active .fab-toggle img {
    transform: rotate(135deg);
}
.fab-item {
    position: absolute;
    right: 0;
    top: 0;
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(0, 0) scale(0.5);
    transform-origin: center right;
    transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, visibility 0.3s ease;
    z-index: 100;
}
.fab-menu-container.active .fab-item {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.fab-label {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.fab-item:hover .fab-label {
    color: #eab308;
}
.action-btn {
    width: 48px;
    height: 48px;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid #94713f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), inset 0 0 8px rgba(148, 113, 63, 0.2);
}
.action-btn img.wrapper_icons {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.fab-menu-container.active .fab-item.potion {
    transform: translate(-85px, -85px) scale(1);
}
.fab-menu-container.active .fab-item.scroll {
    transform: translate(-120px, 0) scale(1);
}
.fab-menu-container.active .fab-item.amulet {
    transform: translate(-85px, 85px) scale(1);
}
@media (max-width: 520px) {
    .fab-menu-container {
        right: 16px;
    }
    .fab-menu-container.active .fab-item.potion {
        transform: translate(-65px, -65px) scale(1);
    }
    .fab-menu-container.active .fab-item.scroll {
        transform: translate(-95px, 0) scale(1);
    }
    .fab-menu-container.active .fab-item.amulet {
        transform: translate(-65px, 65px) scale(1);
    }
}
#moderators_forums {
    display: none;
}

#moderators_forums.is-visible {
    display: block; 
}
/*старый чат*/
/* Опора для панели настроек: она должна открываться внутри страницы чата, а не у края окна. */
.page[data-page="chat"] {
    position: relative;
}
.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, rgba(255, 255, 255, 0.85));
    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, #313131);
    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, #313131);
    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 {
}
._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: 10px;
    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*/
/* Страница сохранения героя: как регистрация старой игры — шапка по центру, поля слева */
[data-page="save_user"] .save-lead { text-align: center; }
.save-form { text-align: left; }
.save-form label { display: block; margin-top: 8px; }
.save-form .check { margin: 2px 0 0; }
.save-form .wrapper-request { text-align: center; margin-top: 10px; }
.save-form .doxc { text-align: left; margin-top: 6px; }
.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_panel-label {
    padding-bottom: 10px;
    display: block;
}

._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 {
    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;
}


.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;
}

button.payment-option_shop_buy {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
}

.shop-wrapper_shop_buy .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.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;
        }
/*рулетка*/
    /* Карточка рулетки (стиль как у модалок и item-card_shop_buy) */
    ._rewardUseli_wrapper {
        width: 100%;
        max-width: 480px;
        margin: 20px auto;
        box-sizing: border-box;
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }

    /* Заголовок карточки */
    ._rewardUseli_title {
        text-align: center;
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: bold;
        color: #313131;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Окно самой рулетки */
    ._rewardUseli_window {
        position: relative;
        width: 100%;
        height: 140px;
        overflow: hidden;
        border-radius: 8px;
    }

    /* Центральная линия (селектор) */
    ._rewardUseli_selector-line {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 4px;
        background: #f97316;
        transform: translateX(-50%);
        z-index: 10;
        box-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
        border-radius: 2px;
    }

    /* Контейнер с двигающимися предметами */
    ._rewardUseli_items-track {
        display: flex;
        height: 100%;
        width: max-content;
        align-items: center;
        will-change: transform; 
    }

    /* Отдельный предмет (скин) */
    ._rewardUseli_item {
        width: 100px;
        height: 110px;
        margin: 0 5px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        border-bottom: 4px solid;
        font-size: 13px;
        font-weight: bold;
        color: #313131;
        position: relative;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    ._rewardUseli_item img {
        width: 50px;
        height: 50px;
        object-fit: contain;
        margin-bottom: 8px;
    }

    /* Цвета редкости */
    ._rewardUseli_blue { border-bottom-color: #3b82f6; }
    ._rewardUseli_purple { border-bottom-color: #8b5cf6; }
    ._rewardUseli_pink { border-bottom-color: #ec4899; }
    ._rewardUseli_red { border-bottom-color: #ef4444; }
    ._rewardUseli_gold { border-bottom-color: #facc15; }

    /* Выигрышный предмет светится */
    ._rewardUseli_item._rewardUseli_winner {
        box-shadow: 0 0 15px rgba(217, 119, 6, 0.4);
        transform: scale(1.05);
        z-index: 5;
        border-color: #d97706;
    }

    /* Кнопка "Крутить" */
    ._rewardUseli_spin-btn {
        display: block;
        background: linear-gradient(90deg, #eab308 0%, #f97316 100%);
        display: block;
        width: 100%;
        margin-top: 20px;
        padding: 16px;
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: opacity 0.2s, transform 0.2s;
        box-shadow: 0 4px 6px rgba(249, 115, 22, 0.3);
        font-family: inherit;
        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;
        }

    ._rewardUseli_spin-btn:hover {
        opacity: 0.9;
    }
    
    ._rewardUseli_spin-btn:active {
        transform: translateY(2px);
    }

    ._rewardUseli_spin-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    /* Текст результата (изначально скрыт, появляется с display: block) */
    ._rewardUseli_result {
        display: none;
        text-align: center;
        margin-top: 15px;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
    }
/*экипировка в базаре*/
/* Фон модалки подгоняем под игровую стилистику */
.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;
    max-height: 400px;
    overflow-y: auto;
    /* Без горизонтальной прокрутки: длинные строки переносятся. */
    overflow-x: hidden;
    /* Тонкая чёрная полоса прокрутки (Firefox). */
    scrollbar-width: thin;
    scrollbar-color: #000 transparent;
}
/* Тонкая чёрная полоса прокрутки (Chrome, Safari, Edge). */
.cr-stats-box::-webkit-scrollbar {
    width: 4px;
    height: 0;
}
.cr-stats-box::-webkit-scrollbar-track {
    background: transparent;
}
.cr-stats-box::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 2px;
}

/* Строка характеристики (как в инфо о карте) */
.cr-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    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;
    min-width: 0;
}

.cr-stat-icon {
    width: 16px;
    height: 16px;
}

.cr-stat-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cr-stat-val {
    flex-shrink: 0;
}

/* Зеленый цвет для баффов/апов */
.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 {
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
    }

    ._accounts-account-card img {
      -webkit-user-drag: none;
      pointer-events: none;
    }

    ._accounts-account-card._accounts-dragging {
      z-index: 5;
      opacity: 0.92;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
      cursor: grabbing;
    }

    ._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;
}
#pomoshnik_2{
    display: none;
}
/* ФОН МОДАЛЬНОГО ОКНА */
.clan-popup-shade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(5, 7, 15, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.clan-popup-shade.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ОКНО */
.clan-modal-window {
  background: #F5F6E0;
  border: 1px solid #282d42;
  border-radius: 16px;
  width: 100%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px 20px 20px 20px;
  position: relative;
  text-align: center;
  box-shadow:
    0 20px 40px rgba(0,0,0,.6),
    0 0 30px rgba(124,58,237,.15);
  transform: scale(.92);
  transition: transform .3s ease;
}

.clan-popup-shade.visible .clan-modal-window {
  transform: scale(1);
}

/* Скроллбар */
.clan-modal-window::-webkit-scrollbar {
  width: 6px;
}

.clan-modal-window::-webkit-scrollbar-track {
  background: #151824;
}

.clan-modal-window::-webkit-scrollbar-thumb {
  background: #2e354f;
  border-radius: 10px;
}

.clan-modal-window::-webkit-scrollbar-thumb:hover {
  background: #6366f1;
}

/* Закрытие */
.modal-close-icon {
  position: sticky;
  top: 0;
  float: right;
  margin-top: -16px;
  margin-right: -12px;
  width: 32px;
  height: 32px;
  background: #1e2235;
  border: 1px solid #2d334d;
  border-radius: 50%;
  color: #94a3b8;
  font-size: 18px;
  line-height: 30px;
  cursor: pointer;
  z-index: 10;
  transition: .2s;
}

.modal-close-icon:hover {
  background: #282e47;
  color: #fff;
}

/* Иконка */
.gift-icon-container {
  clear: both;
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  background: linear-gradient(135deg,#6366f1,#a855f7);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(168,85,247,.35);
}

.gift-image {
  width: 36px;
  height: 36px;
}

/* Текст */
.popup-heading {
  font-size: 22px;
  font-weight: 800;
  color: #610000;
  margin-bottom: 12px;
}

.popup-description {
  font-size: 14px;
  color: #313131;
  line-height: 1.6;
  margin-bottom: 22px;
  text-align: left;
}

.popup-description p {
  margin-bottom: 10px;
}

/* Форма */
.clan-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.subscriber-email {
  width: 100%;
  padding: 14px 16px;
  background: #1e2233;
  border: 1px solid #2e354f;
  border-radius: 12px;
  color: #f1f5f9;
  font-size: 14px;
  outline: none;
  transition: .2s;
}

.subscriber-email::placeholder {
  color: #64748b;
}

.subscriber-email:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,.2);
}

.get-rewards-button {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg,#6366f1,#9333ea);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(147,51,234,.35);
  transition: .2s;
}

.get-rewards-button:hover {
  background: linear-gradient(135deg,#4f46e5,#7e22ce);
}

.get-rewards-button:active {
  transform: scale(.98);
}

.privacy-notice {
  margin-top: 16px;
  font-size: 12px;
  color: #475569;
}
.who_newsletter{
    color: #610000;
}
._newsletter-modal-wrapper{
    position:relative;
    width:420px;
    filter:drop-shadow(0 20px 30px rgba(0,0,0,.8));
}

._newsletter-modal-container{
    background:#191b1e;
    border:4px solid #3c4249;
    border-radius:4px;
    box-shadow:
        inset 0 0 0 2px #0a0b0d,
        inset 0 0 10px rgba(0,0,0,.8),
        0 0 0 2px #101114,
        0 0 10px rgba(0,0,0,.9);
    padding:4px;
    position:relative;
    z-index:1;
}

._newsletter-info-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:linear-gradient(to bottom,#30343a,#1a1c1f);
    border:2px solid #000;
    padding:6px 10px;
    margin-bottom:4px;
    font-size:11px;
    color:#a49e92;
}

._newsletter-info-bar span{
    display:flex;
    align-items:center;
    gap:5px;
}

._newsletter-scroll-icon{
    width:14px;
    height:14px;
    display:inline-block;
    background:#d4b581;
    border:1px solid #333;
    border-radius:2px;
    position:relative;
}

._newsletter-scroll-icon::after{
    content:"";
    position:absolute;
    top:2px;
    left:2px;
    right:2px;
    height:1px;
    background:#5a4325;
    box-shadow:0 3px 0 #5a4325,0 6px 0 #5a4325;
}

._newsletter-modal-header{
    background:linear-gradient(to bottom,#2b1c15,#140d0a);
    border:2px solid #000;
    text-align:center;
    padding:12px;
    margin-bottom:4px;
    position:relative;
}

._newsletter-modal-header::before{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,.2) 2px,
        rgba(0,0,0,.2) 4px
    );
}

._newsletter-modal-title{
    margin:0;
    color:#dd8449;
    font-size:16px;
    font-weight:700;
    position:relative;
    z-index:2;
    text-shadow:
        1px 1px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000;
}

._newsletter-modal-content{
    background:#000;
    border:2px solid #000;
}

._newsletter-hero-image{
    width:100%;
    height:125px;
    background:url("banner_home/newsletter_1.webp") center/cover;
    border-bottom:2px solid #000;
    position:relative;
}

._newsletter-hero-image::after{
    content:"";
    position:absolute;
    inset:0;
    box-shadow:inset 0 0 20px rgba(0,0,0,.8);
}

._newsletter-text-area{
    background:linear-gradient(135deg,#e3cdad,#d1b894);
    padding:20px 10px 20px 20px;
    color:#1a1a1a;
    line-height:1.45;
}

._newsletter-text-scroll{
    max-height:340px;
    overflow-y:auto;
    padding-right:15px;
}

._newsletter-text-scroll p{
    margin:0 0 15px;
}

._newsletter-text-scroll::-webkit-scrollbar{
    width:6px;
}

._newsletter-text-scroll::-webkit-scrollbar-thumb{
    background:rgba(122,92,61,.8);
    border-radius:3px;
}

._newsletter-btn-close-wrapper{
    position:absolute;
    left:50%;
    bottom:-29px;
    transform:translateX(-50%);
    z-index:10;
}

._newsletter-btn-close{
    background:linear-gradient(to bottom,#3b424b,#1d2126);
    border:2px solid #000;
    padding:4px;
    cursor:pointer;
    clip-path:polygon(10% 0,90% 0,100% 30%,100% 70%,90% 100%,10% 100%,0 70%,0 30%);
}

._newsletter-btn-inner{
    background:radial-gradient(ellipse at center,#b44a28,#521c10);
    padding:8px 40px;
    clip-path:polygon(10% 0,90% 0,100% 30%,100% 70%,90% 100%,10% 100%,0 70%,0 30%);
}

._newsletter-btn-inner span{
    color:#fcebd2;
    font-size:18px;
    font-weight:bold;
}

._newsletter-mail-widget{
    position:absolute;
    right:-25px;
    bottom:20px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:linear-gradient(to bottom,#50565e,#1e2226);
    border:2px solid #000;
    display:flex;
    justify-content:center;
    align-items:center;
}

._newsletter-mail-widget::before{
    content:"";
    position:absolute;
    width:44px;
    height:44px;
    border-radius:50%;
    background:linear-gradient(135deg,#d3c0a5,#8a765c);
}

._newsletter-envelope-icon{
    width:30px;
    height:20px;
    background:#e3cdad;
    border:2px solid #3c2a1a;
    position:relative;
    z-index:2;
}

._newsletter-envelope-icon::before{
    content:"";
    position:absolute;
    width:15px;
    height:15px;
    top:0;
    left:-2px;
    border-right:2px solid #3c2a1a;
    border-bottom:2px solid #3c2a1a;
    transform:rotate(45deg);
    background:#f0dec2;
}

._newsletter-badge{
    position:absolute;
    top:-5px;
    right:-2px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#b30000;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:13px;
    font-weight:bold;
    border:2px solid #000;
    z-index:3;
}
.toggle-wishes-btn{
    color: #610000;
    font-weight: bold;
}
/* Вход и регистрация. Отдельного CSS нет: эти правила остаются в главном файле. */

#loading-overlay,
.loading-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 15, 20, 0.9);
  z-index: 10000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: sans-serif;
}

#loading-overlay.is-open,
.loading-overlay.is-open {
  display: flex;
}

.spinner {
  border: 6px solid rgba(255, 255, 255, 0.2);
  border-top: 6px solid #e2b036;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

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

.loading-text {
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  color: #e2b036;
}

.g-recaptcha {
  transform: scale(0.7);
  display: inline-block;
}

.themes_cards {
  text-align: center;
}

.card-themes {
  min-width: 0;
  display: inline-block;
  margin: 10px 3px 0;
  text-align: center;
}

.card_themes_information {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 100px;
}

.card_themes_information h3 {
  font-size: 14px;
}

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

.card-themes input[type="radio"]:checked + .card_themes_information h3 {
  color: green;
}

.gold-divider-svg {
  width: 88%;
  height: 4px;
  display: block;
  margin: 0 auto;
}

.user_name_error {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 4px;
  margin-top: 15px;
}

.theme-banner-hidden {
  display: none;
}

.forget-password {
  color: #610000;
}

.auth-modal-header {
  padding-bottom: 10px;
}

.auth-modal-copy {
  text-align: left;
  padding-bottom: 10px;
}

.auth-field-label {
  text-align: left;
  display: block;
}

.modal_shop .error {
  color: #d60000;
  font-size: 12px;
  display: block;
  text-align: left;
  min-height: 15px;
}

.asset-missing {
  display: none;
}

.locale-switcher {
  padding: 6px 8px 2px;
  text-align: center;
  line-height: 1.6;
}

.locale-label {
  display: block;
  color: #e7b34d;
  margin-bottom: 2px;
}

.locale-option {
  color: #a5531a;
  background: none;
  border: none;
  text-decoration: underline;
  font-size: smaller;
  font-family: inherit;
  margin: 0 5px 4px;
  padding: 0;
  display: inline;
}

.locale-option.is-active {
  color: #e7b34d;
  font-weight: bold;
  text-decoration: none;
}

.header-wordmark {
  margin: 0;
  padding: 2px 0 4px;
  color: #f0d36a;
  font-family: "Times New Roman", Times, serif;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #3a0900;
}

.place-card .left-img {
  min-width: 72px;
  min-height: 72px;
}

.shop-card .left-img {
  min-width: 72px;
  min-height: 72px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.shop-card .left-img img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.pagination button:focus-visible,
.shop-qty:focus-visible {
  outline: 2px solid #610000;
  outline-offset: 2px;
}

.pagination button:disabled {
  cursor: default;
}

.shop-qty {
  width: 50px;
  color: #04020d;
  text-align: center;
}

.shop-note {
  color: #940b01;
}

html[data-hide-banners] .img-banner {
  display: none;
}

html[data-hide-notes] .notifications_block {
  display: none;
}

html[style*="--imperia-bg"] .content {
  background: var(--imperia-bg);
}

html[style*="--imperia-text"] .content {
  color: var(--imperia-text);
}

/* Заголовки разделов: в темах Викинги/Герои/Норманны текст остаётся коричневым, как в старой игре */
html[style*="--imperia-names"]:not([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"]) .block_header_text,
html[style*="--imperia-names"]:not([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"]) .par-mid {
  color: var(--imperia-names);
}

html[style*="--imperia-titles"] h1,
html[style*="--imperia-titles"] .page h1 {
  color: var(--imperia-titles);
}

/* Цветные ники (свой — зелёный, системные, роли в чате) сохраняют свой цвет; :where — чтобы не поднять вес правила над цветом меню */
html[style*="--imperia-links"] .content a:not(:where(.green, .color_user_name_mess_2, .color_user_name_mess_3, .color_user_name_mess_4, .color_user_name_mess_5, .color_user_name_mess_6)) {
  color: var(--imperia-links);
}

html[style*="--imperia-menu"] ul.navigation li a,
html[style*="--imperia-menu"] ul.navigation li button {
  color: var(--imperia-menu);
}

html[style*="--imperia-menu-line"] ul.navigation li {
  border-bottom-color: var(--imperia-menu-line);
}

html[style*="--imperia-note-text"] .notifications_block {
  color: var(--imperia-note-text);
}

html[style*="--imperia-note-links"] .notifications_block a {
  color: var(--imperia-note-links);
}

html[style*="--imperia-win"] .drop_down_effects_creat_user strong,
html[style*="--imperia-win"] .drop_down_effects_dodge_user strong,
html[style*="--imperia-win"] .drop_down_effects_protect_user strong {
  color: var(--imperia-win);
}

html[style*="--imperia-loss"] .dmg-number,
html[style*="--imperia-loss"] .drop_down_effects_creat_hero strong,
html[style*="--imperia-loss"] .drop_down_effects_dodge_hero strong,
html[style*="--imperia-loss"] .drop_down_effects_protect_hero strong {
  color: var(--imperia-loss);
}

html[style*="--imperia-field"] .user_name,
html[style*="--imperia-field"] .setting_select {
  background: var(--imperia-field);
}

html[style*="--imperia-field-border"] .user_name,
html[style*="--imperia-field-border"] .setting_select {
  border-color: var(--imperia-field-border);
}

html[style*="--imperia-font-text"] .content {
  font-size: var(--imperia-font-text);
  line-height: 1.35;
}

html[style*="--imperia-font-title"] h1,
html[style*="--imperia-font-title"] .page h1 {
  font-size: var(--imperia-font-title);
}

html[style*="--imperia-font-notes"] .notifications_block {
  font-size: var(--imperia-font-notes);
}

html[style*="--imperia-font-top"] .info div.icons a {
  font-size: var(--imperia-font-top);
}

html[style*="--imperia-font-bottom"] ul.navigation li a,
html[style*="--imperia-font-bottom"] ul.navigation li button {
  font-size: var(--imperia-font-bottom);
}

.game-settings .setting-color-controls {
  margin-left: auto;
}

.game-settings .setting_select:focus-visible,
.game-settings .user_name_settings:focus-visible,
.game-settings .settings-slider input:focus-visible,
.game-settings .setting-action:focus-visible,
.game-settings .settings-full-interfeice:focus-visible,
.game-settings .checkbox-green:focus-within .checkbox-green-switch {
  outline: 2px solid #610000;
  outline-offset: 2px;
}

.game-settings .checkbox-green {
  flex: 0 0 auto;
}

.game-settings .checkbox-green input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.game-settings button.settings-full-interfeice {
  width: 100%;
  min-height: 0;
  padding: 4px 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.game-settings .settings-content {
  max-height: none;
}

.game-settings .settings-container:not(.active) .settings-content {
  display: none;
}

.game-settings .settings-panel {
  padding-top: 6px;
}

.game-settings .setting-color-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-settings .setting-color-controls input[type="color"] {
  width: 44px;
  height: 36px;
  padding: 2px;
  border: 1px solid #d7d8c2;
  background: #fbfbf0;
  cursor: pointer;
}

.game-settings .user_name_settings {
  width: 96px;
  max-width: 96px;
  height: 36px;
  margin: 0;
}

.game-settings .user_name_settings::placeholder {
  color: #9a9a9a;
}

.game-settings .settings-slider {
  padding: 10px 0 4px;
  text-align: left;
}

.game-settings .settings-slider label {
  display: block;
  margin-bottom: 6px;
}

.game-settings .settings-slider input[type="range"] {
  width: 100%;
  height: 32px;
  accent-color: #8e0400;
}

.game-settings .wrapper-request {
  flex-wrap: wrap;
}

.game-settings .setting-action {
  min-height: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.settings-dialog {
  max-height: 85dvh;
  overflow: auto;
  width: min(92vw, 400px);
}

.settings-curse-list {
  max-height: 60dvh;
  overflow: auto;
  text-align: left;
}

.settings-curse {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 6px 2px;
  border-bottom: 1px solid #d6d6d6;
  font: inherit;
  color: #313131;
  text-align: left;
  cursor: pointer;
}

.settings-curse img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 auto;
}

.settings-curse.is-selected {
  background: #efe6c2;
  font-weight: bold;
}

.settings-curse:focus-visible,
.modal-close_shop:focus-visible {
  outline: 2px solid #610000;
  outline-offset: 2px;
}

.hw-sky {
  margin: 0 0 8px;
  text-align: center;
}

.hw-res {
  width: 18px;
  height: 18px;
  vertical-align: text-bottom;
}

.hw-btn-candy {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

.hw .hw-hero {
  font-weight: 700;
  text-decoration: underline;
}

.hw .rigt,
.hw-help .rigt {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.hw .wrapper-request,
.hw-enter .wrapper-request {
  display: block;
  text-align: center;
}

.hw .wrapper-request .canvas_frame,
.hw-enter .wrapper-request .canvas_frame {
  display: inline-block;
  margin-left: 5px;
}

.hw-letter {
  display: inline-flex;
  width: 28px;
  height: 28px;
  margin-right: 4px;
  align-items: center;
  justify-content: center;
  border: 1px solid #e6c98a;
  border-radius: 50%;
  background: #5c3418;
  color: #f6d78a;
  font-weight: 700;
  vertical-align: middle;
}

.hw .left .hw-letter {
  width: 72px;
  height: 72px;
  margin: 0;
  font-size: 28px;
}

.hw-old {
  margin-right: 4px;
  color: #8a8070;
  text-decoration: line-through;
}

.hw-burn {
  margin: 6px 0;
  padding: 4px;
  border: 1px solid #e07020;
  box-shadow: 0 0 8px rgba(224, 90, 20, 0.45);
}

.hw-help h1 {
  margin: 8px 0;
  text-align: center;
}

.hw-help-lead {
  text-align: center;
}

.hw-help .left img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.hw-help-say {
  margin: 8px 0 14px;
  padding: 8px 10px;
  border-left: 3px solid #8d3418;
  text-align: left;
}

#raid .r-center { text-align: center; }
#raid .r-muted { opacity: 0.75; }
#raid .r-small { font-size: 11px; }
#raid .r-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#raid .r-wrap { display: flex; flex-wrap: wrap; gap: 4px; }
#raid .r-line { margin: 5px 0; text-align: left; }
#raid .r-timer { font-weight: bold; white-space: nowrap; }
#raid .r-icon { width: 18px; height: 18px; object-fit: cover; vertical-align: middle; }
#raid .r-hint { margin: 6px 0; padding: 6px 8px; border: 1px dashed #a67c2e; background: rgba(166, 124, 46, 0.10); }
#raid .r-hint p { margin: 2px 0; }
#raid ul.r-nav { margin: 6px -10px; }
#raid ul.r-nav li button[disabled] { opacity: 0.45; cursor: default; }
#raid ul.r-nav .r-nav-sub { display: block; padding: 3px 32px 0 28px; font-weight: normal; font-size: 11px; line-height: 14px; }
#raid ul.r-nav .r-nav-right { float: right; margin-right: 22px; font-weight: normal; font-size: 11px; }
#raid .r-route { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin-top: 8px; }
#raid .r-step { text-align: center; opacity: 0.4; }
#raid .r-step img { width: 26px; height: 26px; display: block; margin: 0 auto; filter: grayscale(1); }
#raid .r-step.r-past { opacity: 0.85; }
#raid .r-step.r-past img { filter: none; }
#raid .r-step.r-cur { opacity: 1; }
#raid .r-step.r-cur img { filter: none; transform: scale(1.2); }
#raid .r-route-text { text-align: center; margin: 4px 0; }
#raid .r-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 4px 0; }
#raid .r-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border: 1px solid rgba(166, 124, 46, 0.6); border-radius: 10px; font-size: 11px; }
#raid .r-chip img { width: 14px; height: 14px; }
#raid .r-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; }
#raid .r-role { display: flex; gap: 6px; align-items: center; width: 100%; padding: 6px; border: 1px dashed rgba(166, 124, 46, 0.7); color: inherit; font: inherit; text-align: left; background: none; cursor: pointer; }
#raid .r-role.r-on { border-style: solid; background: rgba(166, 124, 46, 0.18); }
#raid .r-role .r-frame { width: 38px; height: 38px; flex: 0 0 38px; }
#raid .r-role.r-dead { opacity: 0.4; cursor: default; }
#raid .r-frame { width: 46px; height: 46px; flex: 0 0 46px; border: 2px solid #a67c2e; border-radius: 8px; background: #1c1c1c; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#raid .r-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
#raid .r-bar { margin-top: 3px; height: 9px; }
#raid .bar-fill.hp-fill { background: linear-gradient(90deg, #ff3333, #aa0000); }
#raid .bar-fill.r-fill-gold { background: linear-gradient(90deg, #ffd700, #c08a00); }
#raid .bar-fill.r-fill-noise { background: linear-gradient(90deg, #ffb347, #cc3300); }
#raid .r-vault-state { padding: 8px; text-align: center; font-weight: bold; border: 2px solid #a67c2e; margin: 6px 0; }
#raid .r-vault-state.r-alert { border-color: #b30000; animation: raid-blink 0.8s step-end infinite; }
#raid .r-vault-state.r-gold { border-color: #d4a017; background: rgba(212, 160, 23, 0.2); }
@keyframes raid-blink { 50% { border-color: transparent; } }
#raid .r-wrap .filter-btn { margin: 0; padding: 3px 6px; font-size: 11px; display: inline-flex; align-items: center; gap: 3px; }
#raid .r-wrap .filter-btn img { width: 18px; height: 18px; }
#raid .avatar-duels table { width: auto; margin: 0 auto; border-collapse: collapse; }
#raid .avatar-duels td, #raid .avatar-duels th { padding: 1px 6px; }
#raid .avatar-duels th.name-battle { width: 110px; min-width: 96px; }
#raid .r-hp { position: relative; width: 96px; height: 16px; margin: 3px auto 0; background: #2a1a12; border: 1px solid #a67c2e; border-radius: 8px; overflow: hidden; }
#raid .r-hp-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #4fd04f, #1f8a1f); }
#raid .r-hp-fill.r-hp-mid { background: linear-gradient(180deg, #ffd24a, #c58a00); }
#raid .r-hp-fill.r-hp-low { background: linear-gradient(180deg, #ff5a4a, #a80000); }
#raid .r-hp span { position: relative; display: block; font-size: 10px; line-height: 16px; font-weight: bold; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
#raid .r-duel-img { width: 80px; height: 80px; object-fit: cover; border: 2px solid #a67c2e; border-radius: 8px; }
#raid .r-fight-timer { margin: 6px 0; text-align: center; }
#raid .r-skills { display: flex; justify-content: center; gap: 10px; margin: 8px 0 6px; }
#raid .r-skill { position: relative; width: 60px; height: 60px; padding: 0; border-radius: 8px; border: 2px solid #c9a24a; background: #2a170c; cursor: pointer; overflow: hidden; }
#raid .r-skill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#raid .r-skill-cost { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 0; background: rgba(0, 0, 0, 0.55); font-size: 10px; font-weight: bold; color: #fff; text-align: center; }
#raid .r-skill[disabled] { cursor: default; filter: grayscale(0.7); }
#raid img.r-ava { width: 22px; height: 22px; object-fit: cover; border-radius: 4px; border: 1px solid #a67c2e; vertical-align: middle; }
#raid img.r-ava.r-dead { opacity: 0.35; filter: grayscale(1); }
#raid .r-log { max-height: 180px; overflow-y: auto; font-size: 11px; line-height: 15px; padding: 4px 0; white-space: pre-wrap; }
#raid table.r-table { width: 100%; border-collapse: collapse; }
#raid table.r-table td { padding: 4px 2px; border-bottom: 1px solid rgba(166, 124, 46, 0.35); }
#raid_modal .desc { text-align: left; }
#raid_modal .desc p { margin: 5px 0; }
#raid .canvas_frame button[disabled] { opacity: 0.45; }

.account-exchange {
  --bg-color: #b85e26;
  --panel-bg: #9c4d1e;
  --border-color: #f0a53d;
  --text-color: #ffffff;
  --input-bg: #e6d3ba;
  --input-text: #3e220f;
  background: var(--bg-color);
  color: var(--text-color);
  width: 100%;
  box-sizing: border-box;
}
.account-exchange .content-wrapper {
  padding: 20px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  background: var(--bg-color);
  width: 100%;
}
.account-exchange .calc-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}
.account-exchange .panel {
  flex: 1;
  min-width: 280px;
  background: var(--bg-color);
  border: 4px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.6), inset 0 0 15px rgba(0,0,0,0.3);
  box-sizing: border-box;
}
.account-exchange h2 {
  text-align: center;
  margin-top: 0;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 10px;
  font-size: 1.4rem;
  color: #fff;
}
.account-exchange .section {
  background: var(--panel-bg);
  border: 2px solid #853e14;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
}
.account-exchange .section-title {
  margin: 0 0 10px;
  padding: 0;
  font-weight: bold;
  text-align: left;
  color: #ffd700;
  background: none;
}
.account-exchange .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 10px;
}
.account-exchange .warning-box {
  background: #7a1f1f;
  border: 2px solid #ff5555;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 15px;
  font-size: 0.9em;
  line-height: 1.4;
}
.account-exchange .bonus-box {
  background: #1e3d23;
  border: 2px solid #52c462;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 15px;
  font-size: 0.9em;
  line-height: 1.4;
}
.account-exchange .bonus-box ul { margin: 6px 0 8px 18px; padding: 0; text-align: left; list-style: none; }
.account-exchange .bonus-box li { margin-bottom: 4px; }
.account-exchange .ex-note { color: #ffd700; font-weight: bold; }
.account-exchange input[type="number"],
.account-exchange input[type="text"],
.account-exchange input[type="email"],
.account-exchange textarea {
  width: 180px;
  padding: 5px;
  border: 2px solid #6b3110;
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--input-text);
  font-weight: bold;
  box-sizing: border-box;
}
.account-exchange input[type="number"] { width: 120px; text-align: center; }
.account-exchange textarea {
  width: 100%;
  height: 80px;
  resize: vertical;
  font-weight: normal;
}
.account-exchange input:focus,
.account-exchange textarea:focus { border-color: #ffaa00; outline: none; }
.account-exchange .radio-group {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.account-exchange input[type="radio"] {
  display: inline-block;
  width: auto;
  accent-color: #ffd700;
}
.account-exchange .radio-group label,
.account-exchange .ex-check label,
.account-exchange .ex-agree {
  cursor: pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}
.account-exchange .amulets-grid,
.account-exchange .collars-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.account-exchange .ex-prop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.account-exchange .item-row { display: flex; align-items: center; gap: 5px; font-size: 0.85em; }
.account-exchange .ex-gear {
  justify-content: space-between;
  width: 100%;
  background: rgba(255,255,255,0.05);
  padding: 5px;
  border-radius: 4px;
  border: 1px solid rgba(240,165,61,0.3);
}
.account-exchange .ex-gear-name,
.account-exchange .ex-presets { display: flex; align-items: center; gap: 5px; }
.account-exchange .lvl-input { width: 50px !important; padding: 3px !important; text-align: center; }
.account-exchange .lvl-btn {
  background: #6b3110;
  color: #ffd700;
  border: 1px solid #f0a53d;
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  font-weight: bold;
}
.account-exchange .result-val { font-weight: bold; color: #55ff55; }
.account-exchange .result-val.capped { color: #ffff55; }
.account-exchange .submit-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: linear-gradient(to bottom, #ffaa00, #b85e26);
  border: 2px solid #ffd700;
  border-radius: 6px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  margin-top: 15px;
}
.account-exchange .full-toggle-label {
  display: inline-block;
  margin-bottom: 10px;
  color: #ffd700;
  font-weight: bold;
  cursor: pointer;
  background: rgba(0,0,0,0.2);
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px dashed var(--border-color);
}
.account-exchange .ex-details {
  margin-top: 10px;
  border-left: 2px dashed var(--border-color);
  padding-left: 10px;
}
.account-exchange .ex-preview { display: flex; flex-direction: column; justify-content: space-between; }
.account-exchange .ex-lead { text-align: center; font-size: 0.9em; margin-bottom: 15px; color: #ffd700; }
.account-exchange .ex-extra { margin: 10px 0 5px; font-size: 0.85em; color: #ffd700; }
.account-exchange .ex-lines { font-size: 0.9em; line-height: 1.6; }
.account-exchange .ex-rule { border-bottom: 1px dashed #f0a53d; margin: 10px 0; }
.account-exchange .ex-agree { align-items: flex-start; font-size: 0.85em; margin: 15px 0; font-weight: normal; }
.account-exchange .ex-agree input { width: auto; margin-top: 3px; }
@media (max-width: 480px) {
  .account-exchange .content-wrapper { padding: 10px; }
  .account-exchange .panel { padding: 15px; min-width: 100%; }
  .account-exchange .row { flex-direction: column; align-items: stretch; }
  .account-exchange input[type="number"],
  .account-exchange input[type="text"],
  .account-exchange input[type="email"],
  .account-exchange textarea { width: 100% !important; }
}

/* Сверка со старым проектом (design/style_vs50.css): исходные значения общих правил.
   Посёлок (/village, /shop, /market) уже сверен и оставлен на прежних значениях — блок ниже. */
.img-icon-header {
    max-width: 22px;
    max-height: 22px;
}
.wrapper-request {
    display: flex;
    margin-bottom: 0px;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
/* Кнопки карточки лавки: «Подарить себе» уходит на новую строку, если не помещается */
.wrapper-request.shop-actions {
    flex-wrap: wrap;
}
.canvas_frame {
    margin-left: 0;
    margin-right: 0;
    display: block;
}
.content[data-zone="village"] .wrapper-request {
    display: block;
    text-align: center;
}
.content[data-zone="village"] .canvas_frame {
    display: inline-block;
}

/* Вложения и ответы в чатах */
.chat-voice-on { outline: 2px solid #c9302c; }
.chat-reply-name { display: block; font-size: 12px; font-weight: bold; }
.chat-reply-preview { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
.chat-reply-quote { display: block; cursor: pointer; border-left: 3px solid #8b5a2b; background: rgba(0, 0, 0, 0.03); padding: 2px 6px; margin: 2px 0; }
/* Высота задана заранее: пока картинки сообщений грузятся, список не растёт и экран не дёргается */
.chat-image { display: block; height: 160px; width: auto; max-width: 220px; object-fit: contain; margin: 4px 0; }
.chat-image-open { display: block; padding: 0; background: none; border: none; cursor: zoom-in; }
.chat-sticker { display: inline-block; height: 120px; width: auto; max-width: 160px; object-fit: contain; vertical-align: middle; }

/* Счёт схватки отрядов в налёте (raid_style.php старой игры) */
#raid .r-score { display: flex; gap: 10px; margin: 6px 0; }
#raid .r-score-side { flex: 1; }
#raid .r-score-side p { margin: 1px 0; }
#raid .r-score-side b { font-weight: bold; color: inherit; }
#raid .r-score-title { font-size: 14px; margin-bottom: 3px !important; }

/* Обмен аккаунта: отступы блоков формы клана и братства как в change_account.php */
.account-exchange .ex-rule-wide { margin: 15px 0; }
.account-exchange .ex-details .section-title { margin-top: 15px; }
.account-exchange .ex-details .amulets-grid,
.account-exchange .ex-details .collars-grid { margin-bottom: 15px; }

/* Арена: значки статуса противника (battle-equal.php) */
.event-hero-btn{background:none;border:0;padding:0;cursor:pointer;}
.event-hero-icon{width:26px;vertical-align:text-bottom;padding-right:2px;}
.event-hero-row{min-height:26px;}

/* Магазин золота: значки на кнопках покупки и картинка в окне сундука как в gold.php */
.buy-button_buyBattlePass .icon,
.buy-button_Bot .icon { vertical-align: inherit; }
.wrappers_modals_chest .chest_buyImperMonet { top: 12%; width: 44%; }

/* Анимированный профиль (стили из templates/user/user_detail.php) */
.page.vip-anim-2 { position: relative; overflow-x: hidden; }
.full_result_avatar {
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden; 
    border-radius: 10px;
    width: 100%;
}
.full_result_avatar[class*="vip-anim-"] {
    min-height: 236px; 
    display: flex;
    align-items: flex-start;
}
.full_result_avatar[class*="vip-anim-"] .img_avatars {
    margin-left: 10px;
}
.vip-neon-sign { display: none; position: absolute; right: 29px; top: 50%; transform: translateY(-50%); font-family: 'Impact', sans-serif; font-size: 22px; text-shadow: 0 0 15px rgba(255, 0, 255, 0.4); z-index: 1; pointer-events: none; }
.full_result_avatar.vip-anim-1 .vip-neon-sign { display: block; }
.full_result_avatar.vip-anim-1 .avatar_container {
    transform-origin: center; 
    transform-style: preserve-3d;
    animation: avatarSlapSpin 6s infinite;
}
.slap-effect { display: none; position: absolute; left: 130px; top: 50px; font-size: 60px; z-index: 30; }
.full_result_avatar.vip-anim-1 .slap-effect { display: block; animation: slapBoom 6s infinite; }
.css-guy { display: none; position: absolute; bottom: 25px; width: 40px; height: 100px; z-index: 20; }
.full_result_avatar.vip-anim-1 .css-guy { display: block; animation: guyMove 6s infinite linear; }
.cg-head { width: 26px; height: 26px; background: #f1c27d; border: 2px solid #222; border-radius: 50%; position: absolute; top: 0; left: 7px; z-index: 3; }
.viking-helmet { position: absolute; top: -6px; left: -3px; width: 28px; height: 14px; background: #7f8c8d; border: 2px solid #222; border-radius: 14px 14px 0 0; z-index: 4; }
.viking-helmet::before, .viking-helmet::after { content: ''; position: absolute; bottom: 2px; width: 6px; height: 14px; background: #f5f5dc; border: 2px solid #222; border-radius: 50% 50% 0 0; }
.viking-helmet::before { left: -6px; transform: rotate(-35deg); }
.viking-helmet::after { right: -6px; transform: rotate(35deg); }
.viking-beard { position: absolute; bottom: -6px; left: 2px; width: 18px; height: 14px; background: #a04000; border-radius: 0 0 10px 10px; border: 1px solid #222; z-index: 4; }
.cg-body { width: 16px; height: 35px; background: #5c4033; border: 2px solid #222; position: absolute; top: 26px; left: 12px; border-radius: 6px; z-index: 2; background-image: linear-gradient(to bottom, transparent 45%, #111 45%, #111 55%, transparent 55%); }
.cg-limb { width: 8px; height: 35px; border: 2px solid #222; position: absolute; border-radius: 4px; transform-origin: 50% 10%; }
.cg-arm { background: #f1c27d; top: 28px; left: 16px; z-index: 3; }
.cg-arm-left { background: #d0a361; z-index: 1; }
.cg-leg { background: #3b2f2f; top: 58px; left: 16px; z-index: 1; }
.cg-leg-left { background: #221b1b; z-index: 0; }
.full_result_avatar.vip-anim-1 .cg-leg-left { animation: walkLeft 6s infinite linear; }
.full_result_avatar.vip-anim-1 .cg-leg-right { animation: walkRight 6s infinite linear; }
.full_result_avatar.vip-anim-1 .cg-arm-left { animation: walkRight 6s infinite linear; }
.full_result_avatar.vip-anim-1 .cg-arm-right { animation: armSlap 6s infinite linear; }
@keyframes guyMove { 0% { left: 100%; transform: rotateY(0deg); } 35%, 55% { left: 160px; transform: rotateY(0deg); } 60% { left: 160px; transform: rotateY(180deg); } 100% { left: 100%; transform: rotateY(180deg); } }
@keyframes walkLeft { 0%, 10%, 20%, 30%, 65%, 75%, 85%, 95% { transform: rotate(30deg); } 5%, 15%, 25%, 70%, 80%, 90% { transform: rotate(-30deg); } 35%, 60%, 100% { transform: rotate(0deg); } }
@keyframes walkRight { 0%, 10%, 20%, 30%, 65%, 75%, 85%, 95% { transform: rotate(-30deg); } 5%, 15%, 25%, 70%, 80%, 90% { transform: rotate(30deg); } 35%, 60%, 100% { transform: rotate(0deg); } }
@keyframes armSlap { 0%, 10%, 20%, 30%, 65%, 75%, 85%, 95% { transform: rotate(-30deg); } 5%, 15%, 25%, 70%, 80%, 90% { transform: rotate(30deg); } 35%, 55%, 60%, 100% { transform: rotate(0deg); } 40%, 48% { transform: rotate(-130deg); } 50% { transform: rotate(80deg); } }
@keyframes avatarSlapSpin { 0%, 49.9% { transform: rotateY(0deg) scale(1); filter: brightness(1); } 50% { transform: rotateY(-90deg) scale(0.9) translateX(-15px); filter: brightness(1.5) drop-shadow(0 0 15px red); } 51.5% { transform: rotateY(-360deg) scale(1) translateX(0); filter: brightness(1); } 53% { transform: rotateY(-720deg); } 53.1%, 100% { transform: rotateY(0deg); } }
@keyframes slapBoom { 0%, 49% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1.5) rotate(15deg); } 53% { opacity: 0; transform: scale(2.5) rotate(-10deg); } 100% { opacity: 0; } }
.goblin-scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; display: none; overflow: hidden; }
.page.vip-anim-2 .goblin-scene { display: block; }
.goblin-actor { position: absolute; width: 75px; height: 90px; animation: goblinPosition 22s linear forwards; will-change: left, bottom, transform; }
.goblin-inner { width: 100%; height: 100%; animation: goblinWalkWobble 22s forwards; transform-origin: bottom center; }
@keyframes goblinPosition { 
    0%, 3%, 12% { left: 100%; bottom: 100px; transform: scaleX(-1); } 
    6%, 10% { left: calc(100% - 40px); bottom: 100px; transform: scaleX(-1); } 
    13%, 22% { left: -80px; bottom: 100px; transform: scaleX(1); } 
    16%, 20% { left: -30px; bottom: 100px; transform: scaleX(1); } 
    24% { left: -80px; bottom: -5px; transform: scaleX(1); } 
    28%, 32% { left: 60px; bottom: -5px; transform: scaleX(1); } 
    34%, 36% { left: 50px; bottom: -5px; transform: scaleX(1); } 
    40%, 42% { left: 65px; bottom: -5px; transform: scaleX(1); } 
    46%, 48% { left: 80px; bottom: -5px; transform: scaleX(1); } 
    52%, 54% { left: 95px; bottom: -5px; transform: scaleX(1); } 
    58%, 62% { left: 110px; bottom: -5px; transform: scaleX(1); } 
    
    68%, 99% { left: 150%; bottom: -5px; transform: scaleX(1); visibility: visible; } 
    100% { left: 150%; bottom: -5px; transform: scaleX(1); visibility: hidden; } 
}
@keyframes goblinWalkWobble { 0%, 22%, 30%, 60% { transform: rotate(0deg); } 24%, 26%, 28%, 62%, 64%, 66% { transform: rotate(5deg); } 25%, 27%, 29%, 63%, 65%, 67% { transform: rotate(-5deg); } }
@keyframes goblinEyes { 0%, 5%, 63%, 100% { transform: translateX(0); } 7%, 9% { transform: translateX(-4px); } 17%, 19% { transform: translateX(4px); } 28%, 62% { transform: translate(3px, 3px); } }
.goblin-pupils { animation: goblinEyes 22s forwards; }
.goblin-arm-action { transform-origin: 70px 55px; animation: goblinArm 22s linear forwards; }
@keyframes goblinArm { 0%, 27%, 33%, 57%, 100% { transform: rotate(0deg); } 28%, 30%, 32% { transform: rotate(-45deg); } 29%, 31% { transform: rotate(20deg); } 36%, 42%, 48%, 54% { transform: rotate(10deg); } 41%, 47%, 53%, 55% { transform: rotate(-30deg); } }
.page.vip-anim-2 .glave_heroes { animation: hideOriginalGlave 22s forwards; }
@keyframes hideOriginalGlave { 0%, 29%, 96%, 100% { visibility: visible; } 30%, 95% { visibility: hidden; } }
.page.vip-anim-2 .glave_heroes::after { 
    content: '1 000 000'; position: absolute; left: 80px; bottom: 13px; color: inherit; font-weight: inherit; text-shadow: inherit; white-space: nowrap; visibility: hidden; clip-path: inset(0 100% 0 0); animation: typeMillion 22s linear forwards; 
}
@keyframes typeMillion { 
    0%, 34% { visibility: hidden; clip-path: inset(0 100% 0 0); } 
    35% { visibility: visible; clip-path: inset(0 100% 0 0); } 
    36%, 41% { clip-path: inset(0 80% 0 0); } 
    42%, 47% { clip-path: inset(0 60% 0 0); } 
    48%, 53% { clip-path: inset(0 30% 0 0); } 
    54%, 95% { visibility: visible; clip-path: inset(0 0% 0 0); } 
    96%, 100% { visibility: hidden; clip-path: inset(0 0% 0 0); } 
}
.ambient-sparks { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.full_result_avatar.vip-anim-3 .ambient-sparks { display: block; }
.spark { position: absolute; width: 4px; height: 4px; background: #ffcc00; border-radius: 50%; box-shadow: 0 0 10px #ff0000, 0 0 5px #ffaa00; opacity: 0; }
.s1 { left: 10%; bottom: -10px; animation: floatUp 3s infinite ease-in; }
.s2 { left: 25%; bottom: -10px; animation: floatUp 2.5s infinite ease-in 1s; }
.s3 { left: 45%; bottom: -10px; animation: floatUp 4s infinite ease-in 0.5s; }
.s4 { left: 60%; bottom: -10px; animation: floatUp 3.5s infinite ease-in 2s; }
.s5 { left: 75%; bottom: -10px; animation: floatUp 2.8s infinite ease-in 1.5s; }
.s6 { left: 90%; bottom: -10px; animation: floatUp 3.2s infinite ease-in 0.2s; }
.s7 { left: 35%; bottom: -10px; animation: floatUp 2.2s infinite ease-in 0.8s; }
@keyframes floatUp { 0% { transform: translateY(0) scale(1); opacity: 0; } 20% { opacity: 1; transform: translateY(-30px) scale(1.2) translateX(5px); } 80% { opacity: 1; transform: translateY(-150px) scale(0.8) translateX(-5px); } 100% { transform: translateY(-220px) scale(0.5); opacity: 0; } }
.vip-sword-arena { display: none; flex-grow: 1; height: 236px; position: relative; z-index: 20; }
.full_result_avatar.vip-anim-3 .vip-sword-arena { display: block; }
.epic-sword { position: absolute; bottom: 25%; left: 50%; width: 60px; margin-left: -30px; height: auto; max-height: 140px; object-fit: contain; transform-origin: bottom center; z-index: 30; }
.sword-left { animation: battleSwordLeft 5s infinite; }
.sword-right { animation: battleSwordRight 5s infinite; }
.clash-sparks { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); font-size: 70px; z-index: 40; opacity: 0; pointer-events: none; animation: battleSparks 5s infinite; }
@keyframes battleSwordLeft { 0%, 85%, 100% { transform: translate(-80px, 50px) rotate(-70deg); opacity: 0; } 10% { transform: translate(-50px, 20px) rotate(-45deg); opacity: 1; } 15%, 35%, 80% { transform: translate(-10px, 0) rotate(35deg); opacity: 1; } 25% { transform: translate(-40px, 10px) rotate(-15deg); } }
@keyframes battleSwordRight { 0%, 85%, 100% { transform: translate(80px, 50px) rotate(70deg); opacity: 0; } 10% { transform: translate(50px, 20px) rotate(45deg); opacity: 1; } 15%, 35%, 80% { transform: translate(10px, 0) rotate(-35deg); opacity: 1; } 25% { transform: translate(40px, 10px) rotate(15deg); } }
@keyframes battleSparks { 0%, 14%, 20%, 34%, 40%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.8) rotate(45deg); } }
@keyframes battleText { 0%, 35% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 45% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: brightness(1); } 82%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); filter: brightness(2) blur(5px); } }
.ash-container { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.full_result_avatar.vip-anim-4 .ash-container { display: block; }
.ash { position: absolute; background: rgba(180, 180, 180, 0.6); border-radius: 50%; filter: blur(2px); opacity: 0; }
.a1 { width: 10px; height: 10px; left: 10%; bottom: -20px; animation: ashDrift 4s infinite linear; }
.a2 { width: 25px; height: 25px; left: 30%; bottom: -30px; animation: ashDrift 6s infinite linear 1s; background: rgba(100,100,100,0.5); filter: blur(5px); }
.a3 { width: 8px; height: 8px; left: 50%; bottom: -10px; animation: ashDrift 3.5s infinite linear 2s; }
.a4 { width: 35px; height: 35px; left: 70%; bottom: -40px; animation: ashDrift 7s infinite linear 0.5s; background: rgba(80,80,80,0.4); filter: blur(6px); }
.a5 { width: 12px; height: 12px; left: 85%; bottom: -15px; animation: ashDrift 5s infinite linear 1.5s; }
.a6 { width: 18px; height: 18px; left: 40%; bottom: -20px; animation: ashDrift 4.5s infinite linear 0.2s; filter: blur(3px); }
@keyframes ashDrift { 0% { transform: translateY(0) translateX(0) scale(1) rotate(0deg); opacity: 0; } 20% { opacity: 0.8; } 80% { opacity: 0.6; } 100% { transform: translateY(-250px) translateX(40px) scale(2) rotate(180deg); opacity: 0; } }
.beast-arena { display: none; flex-grow: 1; position: relative; height: 236px; z-index: 20; }
.full_result_avatar.vip-anim-4 .beast-arena { display: block; }
.beast-paw { position: absolute; top: -60px; right: -80px; width: 220px; height: auto; z-index: 50; opacity: 0; pointer-events: none; animation: pawStrike 6s infinite cubic-bezier(0.25, 0.1, 0.25, 1); }
.full_result_avatar.vip-anim-4 .avatar_container { animation: avatarStagger 6s infinite; }
.slash-marks { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; overflow: hidden; border-radius: 5px; display: none; }
.full_result_avatar.vip-anim-4 .slash-marks { display: block; }
.cut { position: absolute; width: 10px; height: 140%; background: #4a0000; box-shadow: 0 0 15px #ff0000, inset 0 0 4px #000; top: -20%; opacity: 0; transform-origin: top center; animation: fleshCut 6s infinite; }
.c1 { left: 30%; transform: rotate(35deg); }
.c2 { left: 50%; transform: rotate(35deg); }
.c3 { left: 70%; transform: rotate(35deg); }
@keyframes pawStrike { 0%, 46% { transform: translate(0, 0) scale(1.3); opacity: 0; } 48% { transform: translate(-30px, -10px) scale(1.2); opacity: 1; } 49.5% { transform: translate(-450px, 300px) scale(1); opacity: 1; } 51%, 100% { transform: translate(-600px, 400px) scale(0.9); opacity: 0; } }
@keyframes fleshCut { 0%, 49.3% { opacity: 0; transform: rotate(35deg) scaleY(0); } 49.6% { opacity: 1; transform: rotate(35deg) scaleY(0.6); background: #ff3333; box-shadow: 0 0 30px #ff0000; } 50.5% { opacity: 1; transform: rotate(35deg) scaleY(1); background: #4a0000; box-shadow: 0 0 15px #ff0000, inset 0 0 4px #000; } 55% { opacity: 0.9; transform: rotate(35deg) scaleY(1); } 85% { opacity: 0.6; transform: rotate(35deg) scaleY(1); } 95%, 100% { opacity: 0; transform: rotate(35deg) scaleY(1); } }
@keyframes avatarStagger { 0%, 49.3% { transform: translate(0, 0) skewY(0deg) scale(1); filter: brightness(1); } 49.5% { transform: translate(-15px, 20px) skewY(-10deg) scale(1.05); filter: brightness(0.4) sepia(1) hue-rotate(-50deg) saturate(8); } 52% { transform: translate(10px, -10px) skewY(5deg); filter: brightness(0.7); } 55% { transform: translate(0, 0) skewY(0deg); filter: brightness(0.85); } 85% { filter: brightness(0.85); } 95%, 100% { filter: brightness(1); } }
.full_result_avatar.vip-anim-5 { animation: masterShake 6s infinite; }
@keyframes masterShake { 0%, 34.9% { transform: translate(0, 0); } 35% { transform: translate(-15px, 15px) rotate(-2deg); box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.5); } 37% { transform: translate(15px, -15px) rotate(2deg); } 39% { transform: translate(-10px, 10px) rotate(-1deg); } 41% { transform: translate(10px, -10px) rotate(1deg); } 43%, 100% { transform: translate(0, 0); box-shadow: inset 0 0 40px rgba(255, 0, 0, 0.1); } }
.fire-embers { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.full_result_avatar.vip-anim-5 .fire-embers { display: block; }
.ember { position: absolute; border-radius: 50%; opacity: 0; filter: blur(1px); }
.ember.hot { background: #ff5722; box-shadow: 0 0 8px #ff5722, 0 0 15px #ff9800; }
.ember.ash { background: rgba(100, 100, 100, 0.6); box-shadow: none; filter: blur(2px); }
.e1 { width: 5px; height: 5px; left: 70%; bottom: -10px; animation: emberFly 3s infinite ease-in; }
.e2 { width: 8px; height: 8px; left: 85%; bottom: -20px; animation: emberFly 4s infinite ease-in 1s; }
.e3 { width: 4px; height: 4px; left: 60%; bottom: -5px; animation: emberFly 2.5s infinite ease-in 0.5s; }
.e4 { width: 6px; height: 6px; left: 95%; bottom: -30px; animation: emberFly 5s infinite ease-in 2s; }
.e5 { width: 15px; height: 15px; left: 80%; bottom: -20px; animation: emberFly 4.5s infinite ease-in 1.5s; }
.e6 { width: 3px; height: 3px; left: 50%; bottom: -10px; animation: emberFly 3.5s infinite ease-in 0.8s; }
.e7 { width: 5px; height: 5px; left: 20%; bottom: -15px; animation: emberFly 4s infinite ease-in 0.3s; }
.e8 { width: 12px; height: 12px; left: 40%; bottom: -25px; animation: emberFly 6s infinite ease-in 1.2s; }
.e9 { width: 4px; height: 4px; left: 75%; bottom: -10px; animation: emberFly 3.2s infinite ease-in 2.5s; }
@keyframes emberFly { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; } 20% { opacity: 1; } 50% { transform: translateY(-120px) translateX(-15px) scale(1.2); opacity: 0.8; } 100% { transform: translateY(-260px) translateX(-30px) scale(0.5); opacity: 0; } }
.danger-target { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border: 4px dashed #ff0000; border-radius: 50%; z-index: 50; pointer-events: none; box-shadow: 0 0 15px #ff0000, inset 0 0 15px #ff0000; }
.danger-target::before, .danger-target::after { content: ''; position: absolute; background: #ff0000; box-shadow: 0 0 5px #ff0000; }
.danger-target::before { top: 50%; left: -20px; right: -20px; height: 2px; margin-top: -1px; }
.danger-target::after { left: 50%; top: -20px; bottom: -20px; width: 2px; margin-left: -1px; }
.full_result_avatar.vip-anim-5 .danger-target { display: block; animation: targetLock 6s infinite; }
.massive-anvil { display: none; position: absolute; left: 50%; margin-left: -70px; top: -300px; width: 140px; z-index: 100; pointer-events: none; }
.full_result_avatar.vip-anim-5 .massive-anvil { display: block; animation: anvilDrop 6s infinite; }
.anvil-top { height: 20px; background: #666; border-radius: 10px 10px 0 0; border-bottom: 3px solid #333; }
.anvil-body { background: linear-gradient(90deg, #444 0%, #777 50%, #444 100%); height: 80px; margin: 0 15px; color: #fff; font-family: 'Impact', sans-serif; font-size: 24px; line-height: 1.1; text-align: center; padding-top: 15px; border-left: 3px solid #333; border-right: 3px solid #333; box-shadow: inset 0 -15px 20px rgba(0,0,0,0.6); text-shadow: 2px 2px 0 #000; }
.anvil-base { height: 30px; background: #555; clip-path: polygon(15% 0, 85% 0, 100% 100%, 0% 100%); border-top: 3px solid #222; box-shadow: 0 10px 15px rgba(0,0,0,0.8); }
.shmyak-text { display: none; position: absolute; top: 30%; left: 50%; font-family: 'Arial Black', sans-serif; font-size: 45px; font-weight: 900; color: #ffeb3b; -webkit-text-stroke: 2px #d32f2f; text-shadow: 4px 4px 0px #000; z-index: 120; pointer-events: none; white-space: nowrap; }
.full_result_avatar.vip-anim-5 .shmyak-text { display: block; animation: shmyakPop 6s infinite; }
.avatar-soul { display: none; position: absolute; bottom: 0; left: 50%; font-size: 55px; z-index: 101; pointer-events: none; filter: drop-shadow(0 0 10px rgba(255,255,255,0.8)); }
.full_result_avatar.vip-anim-5 .avatar-soul { display: block; animation: soulRise 6s infinite; }
@keyframes targetLock { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2); } 5% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(45deg); } 10%, 20%, 30% { opacity: 0; } 15%, 25% { opacity: 1; } 32% { opacity: 1; background: rgba(255,0,0,0.4); transform: translate(-50%, -50%) scale(0.9) rotate(45deg); } 34.5%, 100% { opacity: 0; } }
@keyframes anvilDrop { 0%, 33% { transform: translateY(0); opacity: 0; } 34% { opacity: 1; } 35% { transform: translateY(380px); opacity: 1; } 36%, 70% { transform: translateY(380px); opacity: 1; } 72% { transform: translateY(0); opacity: 1; } 73%, 100% { transform: translateY(0); opacity: 0; } }
.full_result_avatar.vip-anim-5 .avatar_container img { transform-origin: bottom center; animation: avatarAccordion 6s infinite; }
@keyframes avatarAccordion { 0%, 34.5% { transform: scale(1, 1); filter: brightness(1); } 35% { transform: scale(1.6, 0.05); filter: brightness(0.3); } 36%, 70% { transform: scale(1.5, 0.1); filter: brightness(0.4); } 72% { transform: scale(0.7, 1.4); filter: brightness(1); } 75% { transform: scale(1.2, 0.8); } 78% { transform: scale(0.95, 1.1); } 81%, 100% { transform: scale(1, 1); } }
@keyframes shmyakPop { 0%, 34.9% { transform: translate(-50%, -50%) rotate(-15deg) scale(0); opacity: 0; } 35% { transform: translate(-50%, -50%) rotate(-15deg) scale(1.4); opacity: 1; } 40% { transform: translate(-50%, -50%) rotate(-15deg) scale(1); opacity: 1; } 45%, 100% { transform: translate(-50%, -50%) rotate(-15deg) scale(0); opacity: 0; } }
@keyframes soulRise { 0%, 35% { opacity: 0; bottom: 0; transform: translateX(-50%) scale(0.5); } 40% { opacity: 0.9; bottom: 40px; transform: translateX(-50%) scale(1); } 65% { opacity: 0; bottom: 250px; transform: translateX(-80%) scale(1.5) rotate(-20deg); } 100% { opacity: 0; } }
.vip-coins-scene { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.full_result_avatar.vip-anim-6 .vip-coins-scene { display: block; }
.falling-coin { position: absolute; width: 25px; height: 25px; top: -40px; animation: coinDrop linear infinite; filter: drop-shadow(0 4px 5px rgba(0,0,0,0.6)); }
.vip-coins-scene .c1 { left: 15%; animation-duration: 3s; animation-delay: 0s; }
.vip-coins-scene .c2 { left: 35%; animation-duration: 4.2s; animation-delay: 1.5s; width: 30px; height: 30px; }
.vip-coins-scene .c3 { left: 55%; animation-duration: 3.5s; animation-delay: 0.5s; }
.vip-coins-scene .c4 { left: 75%; animation-duration: 4.8s; animation-delay: 2s; width: 20px; height: 20px; }
.vip-coins-scene .c5 { left: 90%; animation-duration: 3.8s; animation-delay: 1s; }
@keyframes coinDrop { 0% { transform: translateY(0) rotateY(0deg) rotateZ(0deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(300px) rotateY(360deg) rotateZ(180deg); opacity: 0; } }
.vip-goblin-scene { display: none; position: absolute; bottom: -20px; left: 50%; width: 100px; height: 155px; margin-left: -50px; z-index: 105; pointer-events: none; filter: drop-shadow(0 0 10px rgba(0,0,0,0.8)); }
.full_result_avatar.vip-anim-6 .vip-goblin-scene { display: block; animation: goblinPeekBottom 10s infinite ease-in-out; }
@keyframes goblinPeekBottom { 0%, 10%, 85%, 100% { transform: translateY(110px); } 25%, 75% { transform: translateY(15px); } }
.full_result_avatar.vip-anim-6 .svg-goblin .goblin-hand-l { animation: rubHandL 0.25s infinite alternate ease-in-out; }
.full_result_avatar.vip-anim-6 .svg-goblin .goblin-hand-r { animation: rubHandR 0.25s infinite alternate ease-in-out; }
@keyframes rubHandL { 0% { transform: translate(-2px, -2px); } 100% { transform: translate(2px, 2px); } }
@keyframes rubHandR { 0% { transform: translate(2px, -2px); } 100% { transform: translate(-2px, 2px); } }
.full_result_avatar.vip-anim-6 .svg-goblin .goblin-coin-hand { animation: coinShine 1s infinite alternate; }
@keyframes coinShine { 0% { filter: drop-shadow(0 0 2px #ffca28) brightness(1); } 100% { filter: drop-shadow(0 0 8px #ffee58) brightness(1.4); } }
.goblin-speech { position: absolute; bottom: 106px; left: 50%; transform: translateX(-50%); background: #ffecb3; color: #3e2723; border: 2px solid #ffb300; padding: 4px 8px; border-radius: 8px; font-family: 'Arial Black', sans-serif; font-size: 11px; font-weight: 900; white-space: nowrap; opacity: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.5); animation: goblinSpeakBottom 10s infinite; }
.goblin-speech::after { content: ''; position: absolute; bottom: -6px; left: 50%; margin-left: -6px; border-width: 6px 6px 0; border-style: solid; border-color: #ffb300 transparent transparent transparent; }
@keyframes goblinSpeakBottom { 0%, 30%, 75%, 100% { opacity: 0; transform: translateX(-50%) scale(0.5) translateY(10px); } 35%, 70% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); } }
.lava-floor { position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; background: linear-gradient(to top, #ff2a00, #ff7a00, transparent); box-shadow: 0px 0px 20px 5px rgba(255, 60, 0, 0.7); z-index: 1; animation: lavaPulse 2s infinite alternate ease-in-out; pointer-events: none; display: none; }
.full_result_avatar.vip-anim-7 .lava-floor { display: block; }
@keyframes lavaPulse { 0% { opacity: 0.8; height: 25px; } 100% { opacity: 1; height: 35px; box-shadow: 0px 0px 30px 10px rgba(255, 60, 0, 0.9); } }
#smoke_container { position: absolute; top:0; left:0; width:100%; height:100%; z-index:2; pointer-events: none; display: none; overflow: hidden;}
.full_result_avatar.vip-anim-7 #smoke_container { display: block; }
.smoke-particle { position: absolute; bottom: -20px; background: radial-gradient(circle, rgba(120, 120, 120, 0.5) 0%, rgba(100, 100, 100, 0) 70%); border-radius: 50%; opacity: 0; animation: smokeRise linear infinite; }
@keyframes smokeRise { 0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 0.6; } 50% { opacity: 0.3; } 100% { transform: translateY(-250px) scale(3) rotate(90deg); opacity: 0; } }
.wasted-message { position: absolute; top: 40%; left: 50%; width: 100%; line-height: 30px; transform: translate(-50%, -50%); color: #ff3333; font-family: 'Arial Black', sans-serif; font-size: 26px; font-weight: 900; text-align: center; text-transform: uppercase; text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 0 20px #ff0000; opacity: 0; z-index: 20; pointer-events: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; will-change: transform, opacity; animation: showWasted 15s infinite; display: none; }
.full_result_avatar.vip-anim-7 .wasted-message { display: block; }
@keyframes showWasted { 0%, 25% { opacity: 0; transform: translate(-50%, -40%) scale(0.8); } 27%, 45% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 48%, 100% { opacity: 0; transform: translate(-50%, -55%) scale(1.05); } }
.cinema-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; display: none; }
.full_result_avatar.vip-anim-7 .cinema-wrapper { display: block; }
.demon-actor { position: absolute; width: 90px; height: 110px; bottom: 10px; animation: demonPosition 15s infinite; will-change: left, opacity; }
.demon-inner { width: 100%; height: 100%; transform-origin: bottom center; transform: translateZ(0); animation: demonDie 15s infinite; will-change: transform, filter; }
@keyframes demonPosition { 0% { left: 100%; opacity: 1; } 20%, 50% { left: calc(50% - 25px); opacity: 1; } 51%, 100% { left: calc(50% - 25px); opacity: 0; } }
@keyframes demonDie { 0%, 25% { transform: rotate(0deg) translateZ(0); filter: grayscale(0) brightness(1); } 26%, 50% { transform: rotate(-90deg) translateY(20px) translateZ(0); filter: grayscale(1) brightness(0.5); } 51%, 100% { transform: rotate(0deg) translateZ(0); filter: grayscale(0) brightness(1); } }
.full_result_avatar.vip-anim-7 .leg-l-group { transform-origin: 44px 80px; animation: legSwingL 15s infinite; }
.full_result_avatar.vip-anim-7 .leg-r-group { transform-origin: 61px 80px; animation: legSwingR 15s infinite; }
.full_result_avatar.vip-anim-7 .arm-r-group { transform-origin: 66px 55px; animation: armRSwing 15s infinite; }
.full_result_avatar.vip-anim-7 .arm-l-group { transform-origin: 36px 55px; animation: armLSwing 15s infinite; }
.full_result_avatar.vip-anim-7 .demon-eyes { animation: eyesMove 15s infinite; }
.full_result_avatar.vip-anim-7 .beer-prop { animation: beerShow 15s infinite; }
@keyframes legSwingL { 0%, 100% { transform: rotate(0deg); } 2%, 6%, 10%, 14%, 18% { transform: rotate(25deg); } 4%, 8%, 12%, 16%, 20% { transform: rotate(-25deg); } 21%, 100% { transform: rotate(0deg); } }
@keyframes legSwingR { 0%, 100% { transform: rotate(0deg); } 2%, 6%, 10%, 14%, 18% { transform: rotate(-25deg); } 4%, 8%, 12%, 16%, 20% { transform: rotate(25deg); } 21%, 100% { transform: rotate(0deg); } }
@keyframes armLSwing { 0%, 100% { transform: rotate(0deg); } 2%, 6%, 10%, 14%, 18% { transform: rotate(-15deg); } 4%, 8%, 12%, 16%, 20% { transform: rotate(15deg); } 21% { transform: rotate(0deg); } 22%, 23% { transform: rotate(100deg); } 24%, 25% { transform: rotate(120deg); } 26%, 100% { transform: rotate(0deg); } }
@keyframes armRSwing { 0%, 100% { transform: rotate(0deg); } 2%, 6%, 10%, 14%, 18% { transform: rotate(15deg); } 4%, 8%, 12%, 16%, 20% { transform: rotate(-15deg); } 21%, 100% { transform: rotate(0deg); } }
@keyframes eyesMove { 0%, 20% { transform: translateX(0); } 21%, 23% { transform: translateX(5px); } 24%, 25% { transform: translateX(-5px); } 26%, 100% { transform: translate(0, -3px); } }
@keyframes beerShow { 0%, 21.9% { opacity: 0; } 22%, 25% { opacity: 1; } 25.1%, 100% { opacity: 0; } }

/* Форум: страницы списков тем и картинки поста как в forum_item_*.js и forum_inside.js */
.pagination_forum { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.discription_forum_inside img,
.discription_forum_inside video { max-width: 430px; width: 100%; }

/* Голосовой чат войны */

.chat-system-line { text-align: center; border-top: 1px solid rgba(139, 90, 43, 0.4); border-bottom: 1px solid rgba(139, 90, 43, 0.4); padding: 6px 4px; margin: 6px 0; }
.chat-system-line strong { color: #8b1a1a; }

.daily-reward { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.daily-reward-item { display: inline-flex; gap: 3px; align-items: center; }
.daily-event { border-left: 3px solid #b8860b; }
.offer-desc { font-size: 12px; margin: 2px 0; text-align: center; }
.offer-filter { margin-bottom: 12px; flex-wrap: wrap; }

.gift-name { font-size: 11px; line-height: 1.1; text-align: center; margin: 2px 0 0; word-break: break-word; }

.daily-reward img { width: 18px; height: 18px; object-fit: contain; }

.trade-bid { text-align: left; }
.trade-bid .wrapper-request { text-align: center; }

/* Каменоломня: поле 5×5, крестовина, кирки, события */
.quarry-field {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: min(100%, 300px);
  aspect-ratio: 1;
  margin: 8px auto;
  background: #3d2418;
  border: 2px solid #24150c;
}
.quarry-cell { position: relative; }
.quarry-sprite { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.quarry-miner { position: absolute; inset: 4%; transition: transform 0.15s; }
.quarry-pad {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(2, 52px);
  justify-content: center;
  margin: 14px auto 10px;
}
.quarry-key {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  background: linear-gradient(#5a3a26, #3b2416);
  border: 2px solid #24150c;
  box-shadow: inset 2px 2px 0 #7a5236, inset -2px -2px 0 #24150c;
  cursor: pointer;
}
.quarry-key:active { transform: translateY(1px); }
.quarry-key img { width: 100%; height: auto; display: block; }
.quarry-key-up { grid-column: 2; grid-row: 1; }
.quarry-key-left { grid-column: 1; grid-row: 2; }
.quarry-key-down { grid-column: 2; grid-row: 2; }
.quarry-key-right { grid-column: 3; grid-row: 2; }
.quarry-key-up img { transform: rotate(90deg); }
.quarry-key-right img { transform: rotate(180deg); }
.quarry-key-down img { transform: rotate(-90deg); }
.quarry-equipped { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.quarry-slot {
  flex: none;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 3px solid #c9a227;
  border-radius: 4px;
  box-shadow: 0 0 0 2px #3a2a12;
}
.quarry-slot img { width: 100%; height: 100%; display: block; }
.quarry-available { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 10px; }
.quarry-count {
  position: relative;
  display: block;
  width: 40px;
  margin: -8px auto 0;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background: #3d6f8e;
  border: 2px solid #c9a227;
  border-radius: 3px;
}
.quarry-events { max-height: 160px; overflow-y: auto; padding: 4px 10px; }
.quarry-events p { margin: 4px 0; }

/* События дня: кремовые карточки с золотой рамкой в стиле игры */
/* Цвета «Событий дня» по темам: Империя — кремовые карточки, остальные — под фон своей темы */
.daily {
  --card-top: #fffaf0; --card-bottom: #f6e8c6; --card-line: #d6b16a;
  --card-shadow: 0 1px 3px rgba(101, 73, 27, 0.25), inset 0 1px 0 #fff;
  --cell-top: #fff6dc; --cell-bottom: #f1dcaa; --cell-soft: rgba(255, 255, 255, 0.55);
  --chest-top: #ffeebd; --chest-bottom: #ecd08a; --chest-shadow: inset 0 1px 0 #fff8e0;
  --card-title: #610000; --card-title2: #8b1a1a; --card-muted: #65491b; --card-hint: #8a7650;
  --accent: #c9a227; --accent-glow: rgba(201, 162, 39, 0.85); --good: #2e7d32;
  --bar-bg: #e2cfa0; --bar-top: #f3c74a; --bar-text: #3a2a12;
  --badge-bg: #8b1a1a; --badge-text: #fff3c4;
}
html[data-theme="vikings"] .daily {
  --card-top: rgba(0, 0, 0, 0.12); --card-bottom: rgba(0, 0, 0, 0.2); --card-line: rgba(247, 192, 121, 0.45);
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  --cell-top: rgba(0, 0, 0, 0.1); --cell-bottom: rgba(0, 0, 0, 0.18); --cell-soft: rgba(0, 0, 0, 0.12);
  --chest-top: rgba(247, 192, 121, 0.25); --chest-bottom: rgba(122, 43, 13, 0.35); --chest-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --card-title: #f7c079; --card-title2: #f7c079; --card-muted: #FFCA9A; --card-hint: #FFCA9A;
  --accent: #f7c079; --accent-glow: rgba(247, 192, 121, 0.8); --good: #ADCE49;
  --bar-bg: rgba(0, 0, 0, 0.25); --bar-top: #ffd99a; --bar-text: #ffffff; --bar-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  --badge-bg: #7F1414; --badge-text: #f7c079;
  color: #ffffff;
}
html[data-theme="heroes"] .daily {
  --card-top: #fffff0; --card-bottom: #f6f0c4; --card-line: #c9b98a;
  --card-shadow: 0 1px 3px rgba(54, 25, 9, 0.18), inset 0 1px 0 #fff;
  --cell-top: #fffde6; --cell-bottom: #efe6b4; --cell-soft: rgba(255, 255, 255, 0.6);
  --chest-top: #fbefc0; --chest-bottom: #e6d394; --chest-shadow: inset 0 1px 0 #fffbe6;
  --card-title: #660010; --card-title2: #660010; --card-muted: #827646; --card-hint: #827646;
  --accent: #c15b2a; --accent-glow: rgba(193, 91, 42, 0.6); --good: #379228;
  --bar-bg: #e9dfb0; --bar-top: #e8925c; --bar-text: #361909;
  --badge-bg: #660010; --badge-text: #FFFEC8;
  color: #361909;
}
html[data-theme="normans"] .daily {
  --card-top: rgba(161, 199, 240, 0.08); --card-bottom: rgba(161, 199, 240, 0.03); --card-line: rgba(161, 199, 240, 0.3);
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  --cell-top: rgba(161, 199, 240, 0.1); --cell-bottom: rgba(161, 199, 240, 0.04); --cell-soft: rgba(161, 199, 240, 0.08);
  --chest-top: rgba(0, 126, 114, 0.35); --chest-bottom: rgba(0, 126, 114, 0.15); --chest-shadow: inset 0 1px 0 rgba(161, 199, 240, 0.2);
  --card-title: #a1c7f0; --card-title2: #a1c7f0; --card-muted: #cdcdcd; --card-hint: #9fb3c6;
  --accent: #007e72; --accent-glow: rgba(0, 200, 180, 0.6); --good: #32cd32;
  --bar-bg: rgba(0, 0, 0, 0.35); --bar-top: #19b3a4; --bar-text: #ffffff; --bar-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  --badge-bg: #007e72; --badge-text: #ffffff;
  color: #ffffff;
}
/* Блоки — общие .border > .wrap (как тренировка и лавка), ниже только вложенные сетки */
.daily .left { flex: 0 0 72px; }
.daily .left img { height: 72px; object-fit: contain; }
.daily .right-title p { margin: 2px 0; }
.daily .right-title .bold a { color: inherit; }
.daily-time { color: var(--card-muted); }
.daily-time-live { color: var(--good); font-weight: bold; }
.daily-done { text-align: center; margin: 8px 0 0; }
.daily-hint { color: var(--card-hint); font-size: 12px; margin: 2px 0 0; }
.daily-pct { color: var(--good); }


.daily-streak { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 6px; }
.daily-day {
  position: relative;
  grid-column: span 3;
  padding: 6px 4px;
  text-align: center;
  border: 1px dashed #D6D6D6;
}
.daily-day:nth-child(n + 5) { grid-column: span 4; }
.daily-day-title { margin: 0 0 4px; font-weight: bold; color: var(--card-title2); }
.daily-day .daily-reward { justify-content: center; }
.daily-day.is-today { border: 1px solid var(--accent); }
.daily-day.is-done { opacity: 0.6; }
.daily-day-check {
  position: absolute;
  top: -6px;
  right: -4px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  color: #fff;
  background: var(--good);
  border-radius: 50%;
}

.daily-chests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.daily-chest {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 8px;
  background: none;
  border: 1px dashed #D6D6D6;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.daily-chest:disabled { cursor: default; }
.daily-chest:not(:disabled):active { transform: translateY(1px); }
.daily-chest.picked { border: 1px solid var(--accent); }
.daily-chest-img { width: 56px; height: 56px; object-fit: contain; }
.daily-chest-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  font-weight: bold;
  color: var(--badge-text);
  background: var(--badge-bg);
  border: 1px solid var(--accent);
  border-radius: 50%;
}


.daily-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 0 0;
  border-top: 1px dashed #D6D6D6;
}
.daily-row.is-done { opacity: 0.65; }
.daily-row-main { flex: 1; min-width: 0; }
.daily-row-main p { margin: 1px 0; }
.daily-row-title { font-weight: bold; color: var(--card-title2); }
.daily-row-title a { color: var(--card-title2); }
.daily-row-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 45%; }
.daily-row-side .daily-reward { justify-content: flex-end; }
.daily-row-icon { flex: none; width: 40px; height: 40px; object-fit: contain; }
.daily-row-final .daily-row-title { color: inherit; }
.daily-row .wrapper-request { margin: 0; }
.daily-bar { position: relative; height: 16px; margin-top: 4px; overflow: hidden; background: var(--bar-bg); border: 1px solid var(--card-line); border-radius: 8px; }
.daily-bar-fill { position: absolute; inset: 0; transform-origin: left center; background: linear-gradient(var(--bar-top), var(--accent)); }
.daily-bar-text { position: relative; display: block; font-size: 11px; line-height: 16px; text-align: center; color: var(--bar-text); text-shadow: var(--bar-shadow, none); }

.daily-note { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.daily-note-icon { flex: none; width: 28px; height: 28px; object-fit: contain; }

/* Новый чат: тёмная панель с золотой рамкой внутри контейнера игры */
.nchat {
  --nchat-bg: #0f0c19;
  --nchat-card: #181427;
  --nchat-head: #120e21;
  --nchat-gold: #d4af37;
  --nchat-gold-soft: rgba(212, 175, 55, 0.35);
  --nchat-text: #e5e7eb;
  --nchat-muted: #a8a29e;
  /* Панель настроек та же, что в старом чате, в тёмно-золотых тонах */
  --bg-panel: rgba(24, 20, 39, 0.96);
  --text-primary: #f3e5ab;
  --text-secondary: #a8a29e;
  --border-color: rgba(212, 175, 55, 0.35);
  --accent-primary: #d4af37;
  --danger: #ef4444;
  --transition-fast: 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--nchat-text);
  background: radial-gradient(circle at 50% 0%, #1a142e 0%, var(--nchat-bg) 70%);
}
.nchat-full {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-width: 0;
  border-radius: 0;
  /* Затемнение по бокам: чат на весь экран остаётся шириной контейнера игры. */
  box-shadow: 0 0 0 100vmax rgba(8, 6, 15, 0.92);
}
.nchat-head { position: relative; padding: 10px 12px 0; background: var(--nchat-head); border-bottom: 1px solid var(--nchat-gold-soft); }
.nchat-bar { position: relative; display: flex; align-items: center; gap: 8px; }
.nchat-online { display: inline-flex; align-items: center; gap: 6px; min-width: 48px; font-weight: bold; color: #4ade80; }
.nchat-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.nchat .nchat-title {
  flex: 1;
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  letter-spacing: 2px;
  text-align: center;
  color: var(--nchat-gold);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}
.nchat-actions { display: flex; gap: 4px; min-width: 48px; justify-content: flex-end; }
.nchat-icon { padding: 2px 4px; font-size: 18px; line-height: 1; color: var(--nchat-gold); background: none; border: none; cursor: pointer; opacity: 0.8; }
.nchat-icon:hover { opacity: 1; }
.nchat-lead { margin: 4px 0 6px; font-size: 12px; font-style: italic; text-align: center; color: rgba(212, 175, 55, 0.75); }
.nchat-tabs { display: flex; margin-top: 4px; }
.nchat-tab {
  flex: 1;
  padding: 6px 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: bold;
  color: rgba(212, 175, 55, 0.5);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.nchat-tab:hover { color: var(--nchat-gold); }
.nchat-tab.is-active { color: var(--nchat-gold); border-bottom-color: #c026d3; }

.nchat-feed {
  height: 440px;
  overflow-y: auto;
  padding: 10px;
  background: rgba(11, 9, 20, 0.9);
  scrollbar-color: #4a3b6e var(--nchat-bg);
}
/* На весь экран: шапка и лента забирают всё место, строка ввода всегда видна внизу. */
.nchat-full .nchat-swipe { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nchat-full .nchat-feed { flex: 1; min-height: 0; height: auto; }
.nchat-full .nchat-compose { flex: none; }
.nchat-feed #conutinie_chat { display: block; margin: 0 auto 8px; color: var(--nchat-gold); background: none; border: 1px solid var(--nchat-gold-soft); border-radius: 6px; padding: 4px 10px; }
.nchat-empty, .nchat-error { text-align: center; color: var(--nchat-muted); }
.nchat-error { color: #f87171; }
.nchat-swipe,
.nchat-swipe .nchat-feed,
.nchat-swipe .nchat-msg { touch-action: pan-y; }
.nchat-nick {
  position: absolute;
  z-index: 25;
  width: 220px;
  padding: 4px 0;
  background: var(--nchat-card);
  border: 1px solid var(--nchat-gold);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}
.nchat-nick-title { margin: 0; padding: 6px 12px 4px; font-family: Georgia, "Times New Roman", serif; font-weight: bold; color: var(--nchat-gold); border-bottom: 1px solid var(--nchat-gold-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nchat-nick-item { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 38px; margin: 0; padding: 8px 12px; text-align: left; color: var(--nchat-text); background: none; border: none; cursor: pointer; }
.nchat-nick-item:hover:not(:disabled):not(.is-static) { color: var(--nchat-gold); background: rgba(212, 175, 55, 0.12); }
.nchat-nick-item:disabled { opacity: 0.6; cursor: default; }
.nchat-nick-item.is-static { color: #4ade80; cursor: default; }
.nchat-nick-icon { flex: none; display: inline-flex; width: 20px; height: 20px; }
.nchat-nick-icon img { width: 100%; height: 100%; object-fit: contain; }
.nchat-nick-item.is-wait { color: var(--nchat-muted); cursor: default; }
.nchat-nick-item.is-danger { color: #f87171; }
.nchat-msg { margin-bottom: 12px; padding: 2px 4px; border-radius: 8px; transition: background-color 0.3s; }
.nchat-msg.is-flash { background-color: rgba(212, 175, 55, 0.18); }
.nchat-quote {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 6px;
  padding: 4px 8px;
  text-align: left;
  color: inherit;
  background: rgba(212, 175, 55, 0.1);
  border: none;
  border-left: 3px solid var(--nchat-gold);
  border-radius: 4px;
  cursor: pointer;
}
.nchat-quote-name { font-size: 12px; font-weight: bold; color: var(--nchat-gold); }
.nchat-quote-text, .nchat-reply-text { font-size: 12px; color: var(--nchat-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nchat-reply { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nchat-reply-icon { flex: none; font-size: 20px; color: var(--nchat-gold); }
.nchat-reply-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 4px 8px;
  text-align: left;
  color: inherit;
  background: var(--nchat-card);
  border: none;
  border-left: 3px solid var(--nchat-gold);
  border-radius: 4px;
  cursor: pointer;
}
.nchat-reply-name { font-size: 12px; font-weight: bold; color: var(--nchat-gold); }
.nchat-reply-close { flex: none; width: 30px; height: 30px; font-size: 18px; color: var(--nchat-gold); background: none; border: none; cursor: pointer; }
.nchat-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.nchat-sex { font-size: 12px; color: #60a5fa; }
.nchat-sex.is-female { color: #f472b6; }
.nchat-name { padding: 0; font-family: Georgia, "Times New Roman", serif; font-weight: bold; color: #f59e0b; background: none; border: none; cursor: pointer; }
.nchat-name:hover { text-decoration: underline; }
.nchat-name.is-me { color: #4ade80; }
.nchat-name.is-staff { color: #ef4444; }
.nchat-name.is-bonus { color: #22c55e; text-shadow: 0 0 6px rgba(34, 197, 94, 0.55); }
.nchat-bubble.is-bonus { color: #22c55e; border-color: rgba(34, 197, 94, 0.45); }
.nchat-sep { color: var(--nchat-muted); }
.nchat-meta .time { font-size: 11px; color: rgba(251, 191, 36, 0.7); }
.nchat-bubble {
  padding: 8px 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  background: var(--nchat-card);
  border: 1px solid var(--nchat-gold-soft);
  border-radius: 8px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35);
}
.nchat-bubble .me_ask { color: #fbbf24; font-weight: bold; }
.nchat-bubble .img-smile { vertical-align: middle; }
.nchat-system { margin: 8px 0; padding: 6px; text-align: center; color: var(--nchat-gold); border-top: 1px solid var(--nchat-gold-soft); border-bottom: 1px solid var(--nchat-gold-soft); }
.nchat-picture { display: block; max-width: 300px; padding: 4px; background: var(--nchat-card); border: 2px solid rgba(212, 175, 55, 0.4); border-radius: 8px; cursor: zoom-in; }
.nchat-picture img { display: block; width: 100%; height: auto; border-radius: 4px; }
.nchat-sticker { display: block; height: 120px; width: auto; max-width: 140px; object-fit: contain; }
.nchat-voice {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 320px;
  padding: 8px 10px;
  background: var(--nchat-card);
  border: 1px solid var(--nchat-gold-soft);
  border-radius: 8px;
}
.nchat-play {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 2px;
  line-height: 1;
  width: 32px;
  height: 32px;
  font-size: 12px;
  color: #fff;
  background: #d97706;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.nchat-play:hover { background: #f59e0b; }
.nchat-voice-main { flex: 1; min-width: 0; }
.nchat-voice-time { display: flex; justify-content: space-between; margin-bottom: 4px; font-family: monospace; font-size: 11px; color: var(--nchat-muted); }
.nchat-voice-track { position: relative; height: 8px; overflow: hidden; background: var(--nchat-bg); border: 1px solid rgba(120, 113, 108, 0.5); border-radius: 4px; cursor: pointer; }
.nchat-voice-fill { position: absolute; inset: 0; transform-origin: left center; background: linear-gradient(90deg, #f59e0b, #fcd34d); }

.nchat-compose { padding: 10px 12px; background: var(--nchat-head); border-top: 1px solid var(--nchat-gold-soft); }
.nchat-compose #prints { min-height: 16px; font-size: 11px; color: var(--nchat-muted); }
.nchat-bar-input { display: flex; align-items: center; gap: 8px; }
.nchat-field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  background: var(--nchat-card);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 22px;
}
.nchat-field:focus-within { border-color: var(--nchat-gold); }
.nchat-ghost { flex: none; width: 34px; height: 34px; font-size: 20px; line-height: 1; color: var(--nchat-gold); background: none; border: none; border-radius: 50%; cursor: pointer; opacity: 0.85; }
.nchat-ghost:hover { opacity: 1; background: rgba(212, 175, 55, 0.1); }
.nchat-ghost:disabled { opacity: 0.4; cursor: default; }
.nchat .nchat-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  height: 34px;
  min-height: 34px;
  max-height: 120px;
  padding: 7px 4px;
  font: inherit;
  line-height: 20px;
  color: var(--nchat-text);
  background: none;
  border: none;
  resize: none;
}
.nchat .nchat-input:focus { outline: none; }
.nchat-round {
  flex: none;
  width: 44px;
  height: 44px;
  font-size: 18px;
  line-height: 1;
  color: #1c1917;
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
  border: 1px solid #fcd34d;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.4);
  cursor: pointer;
}
.nchat-round:hover { background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%); }
.nchat-round:active { transform: scale(0.95); }
.nchat-round:disabled { opacity: 0.6; cursor: default; }
.nchat-round.is-recording { color: #fff; background: #dc2626; border-color: #fca5a5; animation: nchat-pulse 1s ease-in-out infinite; }
@keyframes nchat-pulse { 50% { opacity: 0.7; } }
.nchat-attach-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 5;
  min-width: 170px;
  padding: 4px 0;
  background: var(--nchat-card);
  border: 1px solid var(--nchat-gold);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
.nchat-attach-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; color: var(--nchat-text); text-align: left; background: none; border: none; cursor: pointer; }
.nchat-attach-item:hover { background: rgba(212, 175, 55, 0.12); color: var(--nchat-gold); }
.nchat-viewer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.9);
}
.nchat-viewer img { max-width: 100%; max-height: 90%; border: 2px solid #f59e0b; border-radius: 6px; }
.nchat-viewer-close { position: absolute; top: 10px; right: 16px; font-size: 28px; color: #fbbf24; background: none; border: none; cursor: pointer; }
.nchat-locked { margin: 0; padding: 40px 16px; text-align: center; color: var(--nchat-muted); background: rgba(11, 9, 20, 0.9); }
.nchat ._old_chat_settings-panel { z-index: 30; }
.nchat-hint { margin: 0 0 6px; padding: 6px 8px; font-size: 12px; color: var(--nchat-gold); background: rgba(212, 175, 55, 0.08); border: 1px dashed var(--nchat-gold-soft); border-radius: 6px; }
.nchat-hint-close { margin-left: 4px; font-weight: bold; color: #f87171; background: none; border: none; cursor: pointer; }
.nchat-extra { margin-top: 6px; }

/* Выбор подарков для просьбы в чате: картинки без подписей, выбранные подсвечены */
.gift-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.gift-pick-tile { position: relative; display: block; border: 2px solid transparent; border-radius: 6px; }
.gift-pick-tile.is-picked { border-color: #2e7d32; box-shadow: 0 0 6px rgba(46, 125, 50, 0.7); }
.gift-pick-check {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: #2e7d32;
  border-radius: 50%;
}

/* Окно «Обращения» в чате братства */
.appeal-chat .target-list { text-align: left; }
.appeal-chat .luck_left { margin: 0 0 6px; padding-bottom: 8px; border-bottom: 1px dashed #d6c49a; }
.appeal-chat-row { padding: 8px 0; border-bottom: 1px dashed #d6c49a; }
.appeal-chat-row .wrapper-request { text-align: center; }
.appeal-chat-name { font-weight: bold; color: #610000; }
.appeal-chat-row p { margin: 2px 0; }
.appeal-chat-row sup { font-size: 10px; }
.appeal-chat-create { margin-top: 12px; }

._appeal-toggle-btn { white-space: nowrap; }

/* Фильтр и сортировка воинов братства, как в старой игре */
.brother-filter { margin: 6px 0 10px; }
.brother-filter-periods { padding-bottom: 8px; margin-bottom: 8px; color: #610000; border-bottom: 1px dashed #d6c49a; }
.brother-filter-period { padding: 0; font: inherit; font-weight: bold; color: #610000; background: none; border: none; cursor: pointer; }
.brother-filter-period:hover { text-decoration: underline; }
.brother-filter-period.is-active { color: #313131; text-decoration: underline; }
.brother-filter-label { display: block; margin-bottom: 6px; }
.brother-filter-selects { display: flex; gap: 6px; }
.brother-filter-select {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 2px 6px;
  font: inherit;
  color: #313131;
  background-color: #fffbe6;
  border: 1px solid #b9a77a;
  border-radius: 3px;
}

/* «Ждут удачу» во вкладке братства нового чата: строка над лентой в тёмно-золотых тонах */
.nchat-luck { flex: none; max-height: 240px; overflow-y: auto; color: var(--nchat-text); background: var(--nchat-head); border-bottom: 1px solid var(--nchat-gold-soft); }
.nchat-luck .navigation { margin: 0; padding: 0; list-style: none; }
.nchat-luck .navigation button { width: 100%; padding: 6px 12px; text-align: left; color: var(--nchat-gold); background: none; border: none; cursor: pointer; font-weight: bold; }
.nchat-luck .page { padding: 0 8px; background: none; }
.nchat-luck .border { margin: 6px 0; padding: 8px; color: var(--nchat-text); background: var(--nchat-card); border: 1px solid var(--nchat-gold-soft); border-radius: 8px; }
.nchat .nchat-luck a, .nchat .nchat-luck .toggle-wishes-btn { color: var(--nchat-gold); }
.nchat .nchat-luck .navigation li, .nchat .nchat-luck .navigation button { background: none; }
.nchat .nchat-luck .navigation button span, .nchat .nchat-luck .body-navigation, .nchat .nchat-luck .parameter_info { color: var(--nchat-gold); }
.nchat-luck .toggle-wishes-btn { background: none; border: none; padding: 0; cursor: pointer; }
.nchat-luck .date_event { color: var(--nchat-muted); }
.nchat .nchat-luck .page .border p a { color: var(--nchat-gold); }

/* Окна внутри нового чата: кремовый фон игры, поэтому текст тёмный, а не светлый цвет чата */
.nchat .modal-content_equipment,
.nchat .modal-content_shop,
.nchat ._appeal-modal-content,
.nchat .emoji-modal-content { color: #313131; }

/* Окно бана и мута: тёмное, как в старом чате; заголовок и текст светлые */
.ban-dialog ._oldChats_modal { color: #e5e7eb; text-align: left; }
.ban-dialog ._oldChats_header { padding-right: 56px; padding-left: 56px; color: #e5e7eb; }
.ban-dialog ._oldChats_textarea { box-sizing: border-box; width: 100%; font-family: inherit; }
.ban-dialog ._oldChats_textarea::placeholder { color: #7b7f8e; }
.ban-dialog ._oldChats_btn:disabled { opacity: 0.6; cursor: default; }
.ban-dialog-error { margin: 8px 0 0; color: #ff6b6b; }
.ban-rules { margin-top: 12px; border-radius: 12px; background: #252733; }
.ban-rules summary { padding: 10px 12px; cursor: pointer; color: #7d8cff; font-weight: 700; }
.ban-rules-list { max-height: 240px; overflow-y: auto; padding: 0 12px 12px; }
.ban-rules-group { margin: 10px 0 4px; color: #e5e7eb; font-weight: 700; }
.ban-rules-block { margin: 8px 0 4px; color: #cfcfcf; }
.ban-rules-item { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; color: #cfcfcf; cursor: pointer; }
.ban-rules-item input { margin-top: 2px; flex: none; accent-color: #5c6cff; }

/* Описание вещи в окне экипировки — по левому краю */
.gear-desc{
    text-align: left;
}

/* Окно выбора получателя подарка / проклятия: строки игроков как кнопки, текст по левому краю */
.send-target .user_name{
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
}
.send-target-head{
    text-align: left;
    margin: 4px 0;
}
.send-target-list{
    text-align: left;
    max-height: 380px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.send-target-row{
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.send-target-row:disabled{
    opacity: 0.6;
    cursor: default;
}
.send-target-name,
.send-target-note{
    display: block;
}

/* Описание сундука и пакета в окне — по левому краю */
.box_discriptions{
    text-align: left;
}

/* Чат рейда в посёлке: «Отправить» и смайлы в один ряд, как в чате подземелья */
.content[data-zone="village"] .r-chat .wrapper-request{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

/* Меню аккаунтов по темам */
html[data-theme="vikings"] ._accounts-account-card._accounts-active {
  background: rgba(0, 0, 0, 0.28);
  border: 2px solid #f7c079;
  box-shadow: inset 0 0 10px rgba(247, 192, 121, 0.25), 0 4px 10px rgba(0, 0, 0, 0.2);
}
html[data-theme="vikings"] ._accounts-account-name { color: #f7c079; }
html[data-theme="vikings"] ._accounts-stats-row { color: #ffffff; }
html[data-theme="heroes"] ._accounts-account-card._accounts-active {
  background: rgba(55, 146, 40, 0.12);
  border: 2px solid #379228;
  box-shadow: inset 0 0 10px rgba(55, 146, 40, 0.15), 0 4px 10px rgba(54, 25, 9, 0.12);
}
html[data-theme="heroes"] ._accounts-account-name { color: #660010; }
html[data-theme="heroes"] ._accounts-stats-row { color: #361909; }
html[data-theme="normans"] ._accounts-account-card {
  background: rgba(161, 199, 240, 0.07);
  border: 1px solid rgba(161, 199, 240, 0.2);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
html[data-theme="normans"] ._accounts-account-card._accounts-active {
  background: rgba(0, 126, 114, 0.3);
  border: 2px solid #19b3a4;
  box-shadow: inset 0 0 10px rgba(0, 200, 180, 0.2), 0 4px 10px rgba(0, 0, 0, 0.35);
}
html[data-theme="normans"] ._accounts-account-name { color: #a1c7f0; }
html[data-theme="normans"] ._accounts-stats-row { color: #ffffff; }
html[data-theme="normans"] ._accounts-level-badge { background: #007e72; border-color: #19b3a4; color: #ffffff; }
html[data-theme="normans"] ._accounts-btn-add { background: #007e72; color: #ffffff; }
/* Уровень аккаунта в настройках: тёмно-красный не виден на тёмном фоне. Только там — в списках игроков
   уровень остаётся тёмно-красным, как в старой игре. */
html[data-theme="normans"] .setting-row sup { color: #a1c7f0; }

/* ===== Обучение: друид-наставник и подсветка (features/tutorial) ===== */
/* Цвета по темам — как у «Событий дня»: Империя — кремовая карточка, остальные — под фон своей темы */
.tutorial-layer {
  --tut-top: #fffaf0; --tut-bottom: #f6e8c6; --tut-line: #d6b16a;
  --tut-shadow: 0 6px 24px rgba(40, 22, 0, 0.35), inset 0 1px 0 #fff;
  --tut-title: #610000; --tut-text: #313131; --tut-muted: #65491b;
  --tut-accent: #c9a227; --tut-glow: rgba(201, 162, 39, 0.85);
  --tut-bar-bg: #e2cfa0; --tut-bar-top: #f3c74a; --tut-bar-bottom: #c9a227;
  --tut-dim: rgba(24, 12, 0, 0.62);
}
html[data-theme="vikings"] .tutorial-layer {
  --tut-top: var(--imperia-bg, #c15b2a); --tut-bottom: var(--imperia-bg, #c15b2a); --tut-line: rgba(247, 192, 121, 0.6);
  --tut-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 999px rgba(0, 0, 0, 0.14);
  --tut-title: var(--imperia-links, #f7c079); --tut-text: var(--imperia-text, #ffffff); --tut-muted: var(--imperia-note-text, #FFCA9A);
  --tut-accent: #f7c079; --tut-glow: rgba(247, 192, 121, 0.8);
  --tut-bar-bg: rgba(0, 0, 0, 0.25); --tut-bar-top: #ffd99a; --tut-bar-bottom: #f7c079;
  --tut-dim: rgba(20, 6, 0, 0.66);
}
html[data-theme="heroes"] .tutorial-layer {
  --tut-top: #fffff0; --tut-bottom: var(--imperia-bg, #FFFEC8); --tut-line: #c9b98a;
  --tut-shadow: 0 6px 24px rgba(54, 25, 9, 0.3), inset 0 1px 0 #fff;
  --tut-title: var(--imperia-links, #660010); --tut-text: var(--imperia-text, #361909); --tut-muted: #827646;
  --tut-accent: #c15b2a; --tut-glow: rgba(193, 91, 42, 0.7);
  --tut-bar-bg: #e9dfb0; --tut-bar-top: #f0a878; --tut-bar-bottom: #c15b2a;
  --tut-dim: rgba(30, 12, 4, 0.6);
}
html[data-theme="normans"] .tutorial-layer {
  --tut-top: #13303f; --tut-bottom: var(--imperia-bg, #0B1C26); --tut-line: rgba(161, 199, 240, 0.4);
  --tut-shadow: 0 6px 28px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(161, 199, 240, 0.15);
  --tut-title: var(--imperia-names, #a1c7f0); --tut-text: var(--imperia-text, #ffffff); --tut-muted: #9fb3c6;
  --tut-accent: #19b3a4; --tut-glow: rgba(0, 200, 180, 0.7);
  --tut-bar-bg: rgba(0, 0, 0, 0.4); --tut-bar-top: #3fd6c6; --tut-bar-bottom: #007e72;
  --tut-dim: rgba(0, 6, 12, 0.7);
}

.tutorial-layer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}
.tutorial-dim,
.tutorial-block {
  position: fixed;
  pointer-events: auto;
}
.tutorial-dim {
  inset: 0;
  background: var(--tut-dim);
  animation: tutorial-fade 0.25s ease both;
}
/* Затемнение — четыре блока вокруг выреза (огромная тень не рисуется на телефонах с плотным экраном) */
.tutorial-block {
  background: var(--tut-dim);
}
.tutorial-block-dim {
  inset: 0;
  animation: tutorial-fade 0.25s ease both;
}
.tutorial-block-cover {
  background: transparent;
}
.tutorial-hole {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 3px var(--tut-accent), 0 0 18px 4px var(--tut-glow);
  pointer-events: none;
  animation: tutorial-fade 0.3s ease both;
}
.tutorial-hole::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid var(--tut-accent);
  border-radius: 16px;
  opacity: 0;
  animation: tutorial-pulse 1.6s ease-out infinite;
}
.tutorial-hole-click::after {
  border-width: 3px;
}

.tutorial-panel {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  /* Не шире игрового поля (480px), иначе окно вылезает за края игры */
  width: min(480px, calc(100% - 16px));
  box-sizing: border-box;
  padding: 12px 14px 8px;
  background: linear-gradient(var(--tut-top), var(--tut-bottom));
  border: 1px solid var(--tut-line);
  border-radius: 14px;
  box-shadow: var(--tut-shadow);
  color: var(--tut-text);
  pointer-events: auto;
  text-align: left;
}
.tutorial-panel-bottom {
  bottom: max(12px, env(safe-area-inset-bottom));
}
.tutorial-panel-top {
  top: 12px;
}
.tutorial-panel-center {
  top: 50%;
  transform: translateY(-50%);
}
.tutorial-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: tutorial-rise 0.3s ease both;
}
.tutorial-mentor {
  flex: 0 0 auto;
  width: 84px;
  height: 108px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--tut-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  background: var(--tut-bar-bg);
}
.tutorial-druid {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.tutorial-bubble {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--tut-line);
}
html:is([data-theme="vikings"], [data-theme="normans"]) .tutorial-bubble {
  background: rgba(0, 0, 0, 0.18);
}
.tutorial-bubble::before {
  content: "";
  position: absolute;
  top: 18px;
  left: -7px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-left: 1px solid var(--tut-line);
  border-bottom: 1px solid var(--tut-line);
  transform: rotate(45deg);
}
.tutorial-lesson {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.02em;
  color: var(--tut-muted);
}
.tutorial-say {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--tut-text);
  overflow-wrap: anywhere;
}
.tutorial-hint {
  margin: 6px 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--tut-muted);
}
.tutorial-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 2px;
}
.tutorial-count {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: bold;
  color: var(--tut-title);
}
.tutorial-bar {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--tut-bar-bg);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
.tutorial-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--tut-bar-top), var(--tut-bar-bottom));
  transform-origin: left center;
  transition: transform 0.3s ease;
}
.tutorial-panel .tutorial-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tutorial-actions .canvas_frame {
  display: inline-block;
  padding: 6px 0;
}
.tutorial-actions .brush_path {
  min-height: 40px;
  min-width: 110px;
}
.tutorial-actions .brush_path:disabled {
  opacity: 0.5;
}
.tutorial-skip {
  display: block;
  margin: 0 auto;
  min-height: 40px;
  padding: 6px 12px;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--tut-muted);
  text-decoration: underline;
  cursor: pointer;
}
.tutorial-skip:hover,
.tutorial-skip:focus-visible {
  color: var(--tut-title);
}
.tutorial-panel :focus-visible {
  outline: 2px solid var(--tut-accent);
  outline-offset: 2px;
}
.modal_equipment.tutorial-confirm {
  z-index: 10010;
  pointer-events: auto;
}

@keyframes tutorial-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes tutorial-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes tutorial-pulse {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}

@media (max-width: 599px) {
  .tutorial-panel {
    width: calc(100% - 16px);
    padding: 10px 10px 6px;
  }
  .tutorial-panel-center {
    top: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    transform: none;
  }
  .tutorial-panel-bottom {
    bottom: max(8px, env(safe-area-inset-bottom));
  }
  .tutorial-panel-top {
    top: 8px;
  }
  .tutorial-mentor {
    width: 60px;
    height: 78px;
  }
  .tutorial-say {
    font-size: 14px;
  }
  .tutorial-actions .brush_path {
    min-width: 96px;
    min-height: 44px;
  }
  .tutorial-skip {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-dim,
  .tutorial-hole,
  .tutorial-card {
    animation: none;
  }
  .tutorial-hole::after {
    animation: none;
    opacity: 0.6;
  }
  .tutorial-bar-fill {
    transition: none;
  }
}
/* Палец-указатель: куда нажать (символ, без картинок) */
.tutorial-finger {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  pointer-events: none;
}
.tutorial-finger-icon {
  display: block;
  font-size: 34px;
  line-height: 40px;
  text-align: center;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 6px var(--tut-glow));
}
.tutorial-finger-down {
  animation: tutorial-tap-down 0.9s ease-in-out infinite;
}
.tutorial-finger-up {
  animation: tutorial-tap-up 0.9s ease-in-out infinite;
}
@keyframes tutorial-tap-down {
  0%, 100% { transform: translateY(-6px); }
  50% { transform: translateY(2px); }
}
@keyframes tutorial-tap-up {
  0%, 100% { transform: translateY(6px); }
  50% { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-finger-down,
  .tutorial-finger-up {
    animation: none;
  }
}
/* Учебный режим: плашка «всё понарошку» и подсказки друида по действиям игрока */
.tutorial-practice-note {
  padding: 6px 8px;
  border: 1px dashed currentColor;
  border-radius: 8px;
  font-weight: bold;
}
.tutorial-note {
  margin: 8px 0 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(46, 125, 50, 0.14);
  border-left: 3px solid #2e7d32;
  font-size: 13px;
  line-height: 1.35;
  color: var(--tut-text);
}
.tutorial-note-bad {
  background: rgba(178, 34, 34, 0.14);
  border-left-color: #b22222;
}
/* Учебная песочница: плашка «всё понарошку» поверх настоящих экранов игры */
.tutorial-sandbox-flag {
  position: fixed;
  top: max(4px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  max-width: calc(100% - 16px);
  box-sizing: border-box;
  padding: 3px 12px;
  border-radius: 12px;
  background: #2e7d32;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
/* ===== Обучение: конец ===== */

/* ===== Золото: модальные окна (помощник, режимы, оплата, подарки) — во всю ширину, но не шире 450px ===== */
.modal-container_buyBattlePass.gold-modal,
.modal-content_shop_buy.gold-modal,
.modal-content_shop.gold-modal {
    width: 100%;
    max-width: 450px;
    box-sizing: border-box;
}

/* ===== Чат братства: закреплённая заявка на подарки вверху ленты ===== */
.gift-request { border-left: 3px solid #b8860b; }

/* ===== Экран загрузки игры: фон, логотип на языке игры, совет, полоса и этап (вход, «Начать игру», перезагрузка) ===== */
/* По ширине игры (до 480px) по центру; по бокам — тёмное поле, страница под загрузкой не видна. */
#loading-overlay.game-loader {
    left: 0;
    right: 0;
    width: auto;
    max-width: 480px;
    margin: 0 auto;
    justify-content: space-between;
    padding: max(24px, 5vh) 16px max(24px, 4vh);
    box-sizing: border-box;
    overflow: hidden;
    background: #1a0d06 url("/banner/loader_tall.jpg") center / cover no-repeat;
    box-shadow: 0 0 0 100vmax #120a05;
}
/* Затемнение сверху под логотип и снизу под текст и полосу. */
#loading-overlay.game-loader::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.85) 100%);
    pointer-events: none;
}
.game-loader-top,
.game-loader-bottom {
    position: relative;
    width: 100%;
    text-align: center;
}
.game-loader-logo {
    display: block;
    width: min(92%, 640px);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.85));
}
.game-loader-slogan {
    margin: 10px 0 0;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 2px #000;
}
.game-loader-bottom {
    max-width: 680px;
    margin: 0 auto;
}
.game-loader-tip {
    min-height: 2.6em;
    margin: 0 0 12px;
    color: #fff;
    font-size: 16px;
    line-height: 1.3;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 2px #000;
    animation: game-loader-tip 0.5s ease-out;
}
.game-loader-bar {
    position: relative;
    height: 26px;
    border: 2px solid #c79a3c;
    border-radius: 14px;
    background: rgba(20, 12, 6, 0.85);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.game-loader-fill {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    transform-origin: left center;
    background: linear-gradient(180deg, #ffc35a 0%, #f39a1e 55%, #d97a08 100%);
}
.game-loader-percent {
    position: relative;
    display: block;
    line-height: 22px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.game-loader-step {
    margin: 10px 0 0;
    color: #e6dccb;
    font-size: 15px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
}
.game-loader-step::after {
    content: "…";
}
#loading-overlay.game-loader.is-leaving {
    animation: game-loader-out 0.45s ease-in 0.25s forwards;
}
@keyframes game-loader-out { to { opacity: 0; } }
@keyframes game-loader-tip { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .game-loader-tip, #loading-overlay.game-loader.is-leaving { animation: none; }
}

/* ===== Темы оформления: начало (сгенерировано из старого setting_int.js) ===== */
/* Общие цвета темы (кроме «Империи»: у неё свои цвета в правилах выше) */
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .content {
  background: var(--imperia-bg);
  color: var(--imperia-text);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .bold {
  color: var(--imperia-names);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .page h1 {
  color: var(--imperia-titles);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) a {
  color: var(--imperia-links);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ul.navigation li a,
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ul.navigation li button {
  color: var(--imperia-menu);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ul.navigation li {
  border-bottom: 1px solid var(--imperia-menu-line);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .cr-stat-row {
  border-bottom: 1px solid var(--imperia-menu-line);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) td span {
  color: var(--imperia-note-text);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .repeat_event {
  color: var(--imperia-note-text);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ._change_modal-content {
  background: var(--imperia-bg);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ._change_modal-title {
  color: var(--imperia-names);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ._change_form-group label {
  color: var(--imperia-text);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ._change_close-btn {
  color: var(--imperia-text);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ._accounts-account-name {
  color: var(--imperia-menu);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ._accounts-stat-item {
  color: var(--imperia-text);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ._accounts-modal-container {
  background: var(--imperia-bg);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ._change_account-modal {
  background: var(--imperia-bg);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .battle-it span {
  color: var(--imperia-text);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .numer_kits {
  color: var(--imperia-text);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .bold_item {
  color: var(--imperia-names);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ._change_account-modal {
  background: var(--imperia-bg);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .bold {
  color: var(--imperia-titles);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ._change_status {
  color: var(--imperia-menu);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ._change_username-text {
  color: var(--imperia-menu);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .sup {
  color: var(--imperia-menu);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ._change_info-bottom {
  color: var(--imperia-menu);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ._change_add-account-btn {
  color: var(--imperia-menu);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ._change_add-account-btn ._change_plus {
  color: var(--imperia-menu);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .repeat {
  color: var(--imperia-note-links);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .green {
  color: var(--imperia-win);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .log-gain {
  color: var(--imperia-win);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .red {
  color: var(--imperia-loss);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .drop_down_effects_dodge_hero strong {
  color: var(--imperia-loss);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .drop_down_effects_dodge_user strong {
  color: var(--imperia-win);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .user_name {
  border: 1px solid var(--imperia-field-border);
  background: var(--imperia-field);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .title_push {
  color: var(--imperia-note-links);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .discript_push {
  color: var(--imperia-note-links);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .time_push {
  color: var(--imperia-note-links);
}
/* Все таймеры в шапке (скидки, караван, нежить, лорд, драконы, остров, катакомбы, поход) — одного цвета с time_push.
   Классы перечислены явно: иначе вложенные таймеры перекрашивает общее «td span» темы. */
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) :is(.discript_events, .ostalos_translete, .timer_caravan, .timer_sels, .time_undead, .time_lord, .time_dragons, .time_swimming, .time_catacomb) {
  color: var(--imperia-note-links);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .settings-full-interfeice {
  border-bottom: 1px solid var(--imperia-menu-line);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .modal-content_equipment {
  background: var(--imperia-bg);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .setting-row {
  border-bottom: 1px solid var(--imperia-menu-line);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .dmg-number {
  color: var(--imperia-loss);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .drop_down_effects_creat_hero strong {
  color: var(--imperia-loss);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .border {
  border: dashed var(--imperia-menu-line);
  border-left: none;
  border-right: none;
  border-width: 1px;
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .modal-content_shop {
  background: var(--imperia-bg);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) h1 {
  color: var(--imperia-names);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .modal-close_shop {
  color: var(--imperia-text);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .log-separator {
  color: var(--imperia-names);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .modal-content {
  background: var(--imperia-bg);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .modal-close_equipment {
  color: var(--imperia-text);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .frame-container-ambfora_4 p {
  color: var(--imperia-text);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .tab_olds.active_chat {
  color: var(--imperia-names);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .tab_olds_1.active_chat {
  color: var(--imperia-names);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .exchange-rate_shop_buy {
  color: var(--imperia-text);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .header_chat .settings-btn {
  color: var(--imperia-text);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) ._anketa_shield-icon {
  color: var(--imperia-text);
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .brush_path::before,
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .brush_path::after {
  content: none;
}
/* Викинги */
:where(html:is([data-theme="vikings"])) .filter_text {
  color:#fff;
}
:where(html:is([data-theme="vikings"])) blockquote {
  background: #000000;
}
:where(html:is([data-theme="vikings"])) .vip-sword-text {
  color:#ffffff!important;
}
:where(html:is([data-theme="vikings"])) ._accounts-level-badge {
  background: rgba(122, 43, 13, 0.65);
  color: #f7c079;
  font-family: sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid rgba(247, 192, 121, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
:where(html:is([data-theme="vikings"])) ._accounts-btn-close {
  background: rgba(210, 92, 84, 0.25);
  color: #ffffff;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
}
:where(html:is([data-theme="vikings"])) ._accounts-btn-add {
  align-self: center;
  display: block;
  margin: 0 auto;
  background: #f7c079;
  color: #2a1b14;
  border: none;
  border-radius: 6px;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  padding: 12px 26px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 14px rgba(247, 192, 121, 0.3);
  text-shadow: none;
  transition: background-color;
}
:where(html:is([data-theme="vikings"])) ._accounts-account-card {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  gap: 12px;
  position: relative;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
:where(html:is([data-theme="vikings"])) .DoneTask {
  color: #23cb41;
}
:where(html:is([data-theme="vikings"])) .discounts_text {
  color: #23cb41;
}
:where(html:is([data-theme="vikings"])) .brush_path {
  display: inline-block;
  text-decoration: none;
  border: none;
  background: none;
  padding-left: 0px;
  padding-right: 0px;
}
:where(html:is([data-theme="vikings"])) .color_user_name_mess_3 {
  color: #23cb41;
}
:where(html:is([data-theme="vikings"])) .me_ask {
  color: #23cb41;
}
:where(html:is([data-theme="vikings"])) .pigment_pool {
  overflow: hidden;
  display: inline-block;
  min-width: 97px;
  max-width: 377px;
  height: 28px;
  background: none;
}
:where(html:is([data-theme="vikings"])) .left_stroke_edge {
  float: left;
  width: 40px;
  height: 100%;
  background-image: url(/design/newbutton/wikeng-button-big-left.png);
  background-repeat: no-repeat;
  background-size: 40px 100%;
}
:where(html:is([data-theme="vikings"])) .center_mix_flow {
  float: left;
  background-image: url(/design/newbutton/wikeng-button-big-midle.png);
  background-repeat: repeat-x;
  background-position: center;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-size: 100% 100%;
}
:where(html:is([data-theme="vikings"])) .glyph_field {
  flex: 1;
  text-align: center;
  color: #65491b;
  font-size: small;
  white-space: nowrap;
  margin: 0;
}
:where(html:is([data-theme="vikings"])) .mid_layer_inscription {
  margin: 0;
  padding-top: 0;
  color: #fff;
  margin-top: -2px;
}
:where(html:is([data-theme="vikings"])) .right_texture_edge {
  float: right;
  width: 43px;
  height: 100%;
  background-image: url(/design/newbutton/wikeng-button-big-right.png);
  background-repeat: no-repeat;
  background-size: 37px 100%;
}
:where(html:is([data-theme="vikings"])) .active_sell_item .icon_menu {
  background: #00000036;
}
:where(html:is([data-theme="vikings"])) .switcher label {
  background: #9E4F2B;
}
:where(html:is([data-theme="vikings"])) .switcher input:checked + label {
  background: #5F2E1A;
}
:where(html:is([data-theme="vikings"])) .filter-btn {
  background: #9E4F2B;
}
:where(html:is([data-theme="vikings"])) .filter-btn.active {
  background: #5F2E1A;
}
:where(html:is([data-theme="vikings"])) ._kit_change_account-item {
  background: #9E4F2B;
}
:where(html:is([data-theme="vikings"])) ._kit_change_account-item._kit_change_active {
  background: #5F2E1A;
}
:where(html:is([data-theme="vikings"])) ._kit_change_username-text {
  color:#ffffff!important;
}
:where(html:is([data-theme="vikings"])) ._change_account-item {
  background: #9E4F2B;
}
:where(html:is([data-theme="vikings"])) ._change_account-item._change_active {
  background: #5F2E1A;
}
:where(html:is([data-theme="vikings"])) ._change_add-account-btn {
  background: #9E4F2B;
}
:where(html:is([data-theme="vikings"])) .switcher {
  border: none;
  border-radius: none;
}
:where(html:is([data-theme="vikings"])) .shop-wrapper_shop_buy {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: #c15b2a;
  color: #ffffff;
}
:where(html:is([data-theme="vikings"])) .shop-wrapper_shop_buy *,
:where(html:is([data-theme="vikings"])) .shop-wrapper_shop_buy *::before,
:where(html:is([data-theme="vikings"])) .shop-wrapper_shop_buy *::after {
  box-sizing: inherit;
}
:where(html:is([data-theme="vikings"])) .container_shop_buy {
  max-width: 450px;
  margin: 0 auto;
  padding: 0 16px;
}
:where(html:is([data-theme="vikings"])) .header_shop_buy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
}
:where(html:is([data-theme="vikings"])) .logo_shop_buy {
  display: flex;
  align-items: center;
}
:where(html:is([data-theme="vikings"])) .logo-icon_shop_buy {
  font-size: 28px;
  margin-right: 12px;
}
:where(html:is([data-theme="vikings"])) .logo-text_shop_buy {
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(90deg, #ffffff 0%, #facc15 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}
:where(html:is([data-theme="vikings"])) .balance-badge_shop_buy {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 9999px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #ffffff;
}
:where(html:is([data-theme="vikings"])) .balance-icon_shop_buy {
  margin-right: 6px;
}
:where(html:is([data-theme="vikings"])) .promo-banner_shop_buy {
  background-image: url("/banner/123.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
:where(html:is([data-theme="vikings"])) .promo-bg-circle_shop_buy {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  background-color: #facc15;
  border-radius: 50%;
  opacity: 0.2;
}
:where(html:is([data-theme="vikings"])) .promo-title_shop_buy {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 4px 0;
  position: relative;
  z-index: 2;
  color: #ffffff;
}
:where(html:is([data-theme="vikings"])) .promo-desc_shop_buy {
  font-size: 14px;
  margin: 0 0 12px 0;
  position: relative;
  z-index: 2;
  color: rgba(255, 255, 255, 0.8);
}
:where(html:is([data-theme="vikings"])) .promo-timer_shop_buy {
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  padding: 4px 12px;
  display: inline-block;
  position: relative;
  z-index: 2;
  font-weight: 600;
}
:where(html:is([data-theme="vikings"])) .categories_shop_buy {
  display: flex;
  overflow-x: auto;
  padding-bottom: 16px;
  margin-bottom: 24px;
  scrollbar-width: none;
}
:where(html:is([data-theme="vikings"])) .categories_shop_buy::-webkit-scrollbar {
  display: none;
}
:where(html:is([data-theme="vikings"])) .category-btn_shop_buy {
  background-color: rgba(0, 0, 0, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  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;
}
:where(html:is([data-theme="vikings"])) .category-btn_shop_buy.active_shop_buy {
  background-color: #ffffff;
  color: #c15b2a;
  border-color: #ffffff;
  font-weight: bold;
}
:where(html:is([data-theme="vikings"])) .products-grid_shop_buy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
:where(html:is([data-theme="vikings"])) .item-card_shop_buy {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
:where(html:is([data-theme="vikings"])) .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);
}
:where(html:is([data-theme="vikings"])) .item-icon_shop_buy {
  font-size: 40px;
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
}
:where(html:is([data-theme="vikings"])) .item-title_shop_buy {
  font-weight: bold;
  text-align: center;
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #ffffff;
}
:where(html:is([data-theme="vikings"])) .item-price_shop_buy {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}
:where(html:is([data-theme="vikings"])) .price-old_shop_buy {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
  font-size: 14px;
}
:where(html:is([data-theme="vikings"])) .price-new_shop_buy {
  color: #facc15;
  font-weight: bold;
  font-size: 16px;
}
:where(html:is([data-theme="vikings"])) .give_reward {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 8px 0;
  color: #c15b2a;
  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;
  background: #ffffff;
}
:where(html:is([data-theme="vikings"])) .buy-btn_shop_buy {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 8px 0;
  color: #c15b2a;
  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;
}
:where(html:is([data-theme="vikings"])) .buy-btn_shop_buy:hover {
  opacity: 0.9;
}
:where(html:is([data-theme="vikings"])) .btn-blue_shop_buy,
:where(html:is([data-theme="vikings"])) .btn-green_shop_buy,
:where(html:is([data-theme="vikings"])) .btn-pink_shop_buy,
:where(html:is([data-theme="vikings"])) .btn-yellow_shop_buy {
  background: #ffffff;
}
:where(html:is([data-theme="vikings"])) .section-title_shop_buy {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  color: #ffffff;
}
:where(html:is([data-theme="vikings"])) .section-title-icon_shop_buy {
  margin-right: 8px;
}
:where(html:is([data-theme="vikings"])) .premium-card_shop_buy {
  background: rgba(0, 0, 0, 0.2);
  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);
}
:where(html:is([data-theme="vikings"])) .premium-bg_shop_buy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(254, 240, 138, 0.1) 0%, rgba(254, 202, 202, 0.1) 100%);
}
:where(html:is([data-theme="vikings"])) .premium-icon_shop_buy {
  font-size: 40px;
  margin-right: 16px;
  position: relative;
  z-index: 2;
}
:where(html:is([data-theme="vikings"])) .premium-info_shop_buy {
  position: relative;
  z-index: 2;
  flex-grow: 1;
  margin-left: 15px;
}
:where(html:is([data-theme="vikings"])) .premium-title_shop_buy {
  font-weight: bold;
  font-size: 18px;
  margin: 0 0 4px 0;
  color: #ffffff;
}
:where(html:is([data-theme="vikings"])) .premium-desc_shop_buy {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 8px 0;
}
:where(html:is([data-theme="vikings"])) .premium-action_shop_buy {
  display: flex;
  align-items: center;
}
:where(html:is([data-theme="vikings"])) .premium-price_shop_buy {
  color: #facc15;
  font-weight: bold;
  margin-right: 12px;
}
:where(html:is([data-theme="vikings"])) .premium-btn_shop_buy {
  background: #ffffff;
  color: #c15b2a;
  border: none;
  border-radius: 9999px;
  padding: 6px 14px;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
:where(html:is([data-theme="vikings"])) .horizontal-scroll_shop_buy {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 16px;
  margin-bottom: 24px;
  scrollbar-width: none;
}
:where(html:is([data-theme="vikings"])) .horizontal-scroll_shop_buy::-webkit-scrollbar {
  display: none;
}
:where(html:is([data-theme="vikings"])) .horizontal-scroll_shop_buy .item-card_shop_buy {
  min-width: 180px;
}
:where(html:is([data-theme="vikings"])) .top-up-btn_shop_buy {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #c15b2a;
  border: none;
  border-radius: 9999px;
  padding: 12px 24px;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 50;
  font-family: inherit;
}
:where(html:is([data-theme="vikings"])) .top-up-icon_shop_buy {
  margin-right: 8px;
}
:where(html:is([data-theme="vikings"])) .modal-overlay_shop_buy {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(5px);
}
:where(html:is([data-theme="vikings"])) .modal-overlay_shop_buy.active_shop_buy {
  opacity: 1;
  pointer-events: auto;
}
:where(html:is([data-theme="vikings"])) .modal-content_shop_buy {
  background: #c15b2a;
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
:where(html:is([data-theme="vikings"])) .modal-close-btn_shop_buy,
:where(html:is([data-theme="vikings"])) .modal-back-btn_shop_buy {
  position: absolute;
  top: 16px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s;
}
:where(html:is([data-theme="vikings"])) .modal-close-btn_shop_buy:hover,
:where(html:is([data-theme="vikings"])) .modal-back-btn_shop_buy:hover {
  color: #ffffff;
}
:where(html:is([data-theme="vikings"])) .modal-close-btn_shop_buy {
  right: 16px;
}
:where(html:is([data-theme="vikings"])) .modal-back-btn_shop_buy {
  left: 16px;
}
:where(html:is([data-theme="vikings"])) .modal-title_shop_buy {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin: 0 0 24px 0;
  color: #ffffff;
}
:where(html:is([data-theme="vikings"])) .payment-option_shop_buy {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  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;
}
:where(html:is([data-theme="vikings"])) .payment-option_shop_buy.green_shop_buy {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}
:where(html:is([data-theme="vikings"])) .payment-option_shop_buy:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  border-color: #ffffff;
}
:where(html:is([data-theme="vikings"])) .payment-option_shop_buy.green_shop_buy:hover {
  border-color: #4ade80;
}
:where(html:is([data-theme="vikings"])) .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: #ffffff;
}
:where(html:is([data-theme="vikings"])) .payment-option_shop_buy.green_shop_buy .payment-option-icon_shop_buy {
  background-color: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}
:where(html:is([data-theme="vikings"])) .payment-option-info_shop_buy {
  flex-grow: 1;
}
:where(html:is([data-theme="vikings"])) .payment-option-title_shop_buy {
  font-weight: bold;
  margin: 0 0 4px 0;
  color: #ffffff;
}
:where(html:is([data-theme="vikings"])) .payment-option-desc_shop_buy {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
:where(html:is([data-theme="vikings"])) .payment-option-arrow_shop_buy {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.4);
  font-weight: bold;
}
:where(html:is([data-theme="vikings"])) .exchange-rate_shop_buy {
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin: -16px 0 24px 0;
}
:where(html:is([data-theme="vikings"])) .input-wrapper_shop_buy {
  position: relative;
  margin-bottom: 8px;
}
:where(html:is([data-theme="vikings"])) .amount-input_shop_buy {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}
:where(html:is([data-theme="vikings"])) .amount-input_shop_buy:focus {
  border-color: #facc15;
}
:where(html:is([data-theme="vikings"])) .currency-symbol-input_shop_buy {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.5);
}
:where(html:is([data-theme="vikings"])) .limits_shop_buy {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 24px;
}
:where(html:is([data-theme="vikings"])) .result-box_shop_buy {
  background-color: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
:where(html:is([data-theme="vikings"])) .result-label_shop_buy {
  color: rgba(255, 255, 255, 0.8);
}
:where(html:is([data-theme="vikings"])) .result-value_shop_buy {
  color: #facc15;
  font-weight: bold;
  font-size: 20px;
}
:where(html:is([data-theme="vikings"])) .bonus-btn_shop_buy {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #facc15;
  font-weight: bold;
  cursor: pointer;
  padding: 8px 0;
  font-size: 16px;
  font-family: inherit;
}
:where(html:is([data-theme="vikings"])) .bonus-arrow_shop_buy {
  transition: transform 0.3s;
  color: #facc15;
}
:where(html:is([data-theme="vikings"])) .bonus-arrow_shop_buy.open_shop_buy {
  transform: rotate(180deg);
}
:where(html:is([data-theme="vikings"])) .bonus-table_shop_buy {
  background-color: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
:where(html:is([data-theme="vikings"])) .bonus-table_shop_buy.show_shop_buy {
  max-height: 300px;
  margin-top: 8px;
  margin-bottom: 16px;
}
:where(html:is([data-theme="vikings"])) .bonus-table_shop_buy .table_shop_buy {
  width: 100%;
  border-collapse: collapse;
}
:where(html:is([data-theme="vikings"])) .bonus-table_shop_buy .td_shop_buy {
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  color: #ffffff;
}
:where(html:is([data-theme="vikings"])) .bonus-table_shop_buy .tr_shop_buy:last-child .td_shop_buy {
  border-bottom: none;
}
:where(html:is([data-theme="vikings"])) .bonus-table_shop_buy .td_shop_buy:last-child {
  text-align: right;
  color: #facc15;
  font-weight: bold;
}
:where(html:is([data-theme="vikings"])) .pay-submit-btn_shop_buy {
  width: 100%;
  background: #ffffff;
  color: #c15b2a;
  border: none;
  border-radius: 8px;
  padding: 16px;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  margin-top: 16px;
  font-family: inherit;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s, transform 0.2s;
}
:where(html:is([data-theme="vikings"])) .pay-submit-btn_shop_buy:active {
  transform: translateY(2px);
}
:where(html:is([data-theme="vikings"])) .pay-submit-btn_shop_buy:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
:where(html:is([data-theme="vikings"])) .success-content_shop_buy {
  text-align: center;
}
:where(html:is([data-theme="vikings"])) .success-icon-big_shop_buy {
  font-size: 64px;
  margin-bottom: 16px;
}
:where(html:is([data-theme="vikings"])) .success-title_shop_buy {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 8px 0;
  color: #ffffff;
}
:where(html:is([data-theme="vikings"])) .success-desc_shop_buy {
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 24px 0;
}
:where(html:is([data-theme="vikings"])) .success-btn_shop_buy {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 16px;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.2s;
}
:where(html:is([data-theme="vikings"])) .success-btn_shop_buy:hover {
  background-color: rgba(0, 0, 0, 0.3);
}
@keyframes pulse_shop_buy_vikings {
                    0%, 100% { transform: scale(1); }
                    50% { transform: scale(1.05); }
}
:where(html:is([data-theme="vikings"])) .pulse_shop_buy {
  animation: pulse_shop_buy_vikings 1.5s infinite;
}
@keyframes float_shop_buy_vikings {
                    0%, 100% { transform: translateY(0); }
                    50% { transform: translateY(-10px); }
}
:where(html:is([data-theme="vikings"])) .float-anim_shop_buy {
  animation: float_shop_buy_vikings 3s ease-in-out infinite;
}
@keyframes ping_shop_buy_vikings {
                    0% { transform: scale(1); opacity: 1; }
                    75%, 100% { transform: scale(1.2); opacity: 0; }
}
:where(html:is([data-theme="vikings"])) .animate-ping_shop_buy {
  animation: ping_shop_buy_vikings 0.5s cubic-bezier(0, 0, 0.2, 1);
}
:where(html:is([data-theme="vikings"])) .icon_gold_buy {
  width: 50px;
}
:where(html:is([data-theme="vikings"])) ._gold_buy_presentmodal-container {
  background-color: #c15b2a;
}
:where(html:is([data-theme="vikings"])) ._gold_buy_presentmodal-title {
  color:#fff;
}
:where(html:is([data-theme="vikings"])) ._gold_buy_presentmodal-text {
  color:#fff;
}
:where(html:is([data-theme="vikings"])) ._gold_buy_presentclose-btn {
  color:#fff;
}
:where(html:is([data-theme="vikings"])) .tab_olds_1 {
  color: rgba(255, 255, 255, 0.45);
}
:where(html:is([data-theme="vikings"])) .tab_olds {
  color: rgba(255, 255, 255, 0.45);
}
:where(html:is([data-theme="vikings"])) ._anketa_hint {
  color: #00000094;
}
/* Герои */
:where(html:is([data-theme="heroes"])) .logo {
  width:145px;
}
:where(html:is([data-theme="heroes"])) .footer {
  background-color: #490000 !important;
  background: none;
}
:where(html:is([data-theme="heroes"])) #header_classic {
  display:none;
}
:where(html:is([data-theme="heroes"])) #header_mghero {
  display:block;
  text-align: center;
  background: url(/design/logo/logoback.png) repeat-x scroll 0 0 #560105;
}
:where(html:is([data-theme="heroes"])) .info div.notifications_block {
  padding-left: 7px;
  background-color: #490000 !important;
  text-align: left;
  color: #EFA250;
  display: block;
  padding-bottom: 5px !important;
  margin: 0;
  background:none;
}
:where(html:is([data-theme="heroes"])) .info div.icons div.body {
  background-color: #490000 !important;
  color: #EFA250;
  background:none;
}
:where(html:is([data-theme="heroes"])) #header_hr_hr {
  display:none;
}
:where(html:is([data-theme="heroes"])) .vip-sword-text {
  color:#313131!important;
}
:where(html:is([data-theme="heroes"])) ._accounts-account-card {
  display: flex;
  align-items: center;
  position: relative;
  padding: 10px 14px;
  gap: 12px;
  background: rgba(247, 192, 121, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(247, 192, 121, 0.45);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(92, 85, 53, 0.12);
  color: #4a3b2c;
  text-shadow: none;
}
:where(html:is([data-theme="heroes"])) ._accounts-btn-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(247, 192, 121, 0.3);
  color: #4a3b2c;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid rgba(247, 192, 121, 0.6);
  box-shadow: 0 2px 6px rgba(92, 85, 53, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
}
:where(html:is([data-theme="heroes"])) ._accounts-level-badge {
  background: rgba(247, 192, 121, 0.3);
  color: #4a3b2c;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid rgba(247, 192, 121, 0.6);
  box-shadow: 0 2px 6px rgba(92, 85, 53, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
}
:where(html:is([data-theme="heroes"])) ._accounts-btn-add {
  color: #4a3b2c;
  border: 1px solid rgba(247, 192, 121, 0.6);
  border-radius: 6px;
  background: rgba(247, 192, 121, 0.15);
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  padding: 11px 26px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(92, 85, 53, 0.15);
  text-shadow: none;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}
:where(html:is([data-theme="heroes"])) .DoneTask {
  color: #1a9530;
}
:where(html:is([data-theme="heroes"])) .discounts_text {
  color: #1a9530;
}
:where(html:is([data-theme="heroes"])) .color_user_name_mess_3 {
  color: #1a9530;
}
:where(html:is([data-theme="heroes"])) .me_ask {
  color: #1a9530;
}
:where(html:is([data-theme="heroes"])) .tab_olds_1 {
  color: rgb(0 0 0 / 50%);
}
:where(html:is([data-theme="heroes"])) .tab_olds {
  color: rgb(0 0 0 / 50%);
}
:where(html:is([data-theme="heroes"])) .brush_path {
  display: inline-block;
  text-decoration: none;
  border: none;
  background: none;
  padding-left: 0px;
  padding-right: 0px;
}
:where(html:is([data-theme="heroes"])) .pigment_pool {
  overflow: hidden;
  display: inline-block;
  min-width: 97px;
  max-width: 377px;
  height: 28px;
  background: none;
}
:where(html:is([data-theme="heroes"])) .left_stroke_edge {
  float: left;
  width: 40px;
  height: 100%;
  background-image: url(/design/newbutton/hero-button-big-left.png);
  background-repeat: no-repeat;
  background-size: 40px 100%;
}
:where(html:is([data-theme="heroes"])) .center_mix_flow {
  float: left;
  background-image: url(/design/newbutton/hero-button-big-midle.png);
  background-repeat: repeat-x;
  background-position: center;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-size: 100% 100%;
}
:where(html:is([data-theme="heroes"])) .glyph_field {
  flex: 1;
  text-align: center;
  color: #65491b;
  font-size: small;
  white-space: nowrap;
  margin: 0;
}
:where(html:is([data-theme="heroes"])) .mid_layer_inscription {
  margin: 0;
  padding-top: 0;
  color: #fff;
  margin-top: -2px;
}
:where(html:is([data-theme="heroes"])) .right_texture_edge {
  float: right;
  width: 43px;
  height: 100%;
  background-image: url(/design/newbutton/hero-button-big-right.png);
  background-repeat: no-repeat;
  background-size: 37px 100%;
}
:where(html:is([data-theme="heroes"])) ._bot-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:where(html:is([data-theme="heroes"])) .shop-wrapper_shop_buy {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: #FFFEC8;
  color: #361909;
}
:where(html:is([data-theme="heroes"])) .shop-wrapper_shop_buy *,
:where(html:is([data-theme="heroes"])) .shop-wrapper_shop_buy *::before,
:where(html:is([data-theme="heroes"])) .shop-wrapper_shop_buy *::after {
  box-sizing: inherit;
}
:where(html:is([data-theme="heroes"])) .container_shop_buy {
  max-width: 450px;
  margin: 0 auto;
  padding: 0 16px;
}
:where(html:is([data-theme="heroes"])) .header_shop_buy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
}
:where(html:is([data-theme="heroes"])) .logo_shop_buy {
  display: flex;
  align-items: center;
}
:where(html:is([data-theme="heroes"])) .logo-icon_shop_buy {
  font-size: 28px;
  margin-right: 12px;
}
:where(html:is([data-theme="heroes"])) .logo-text_shop_buy {
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(90deg, #361909 0%, #c15b2a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}
:where(html:is([data-theme="heroes"])) .balance-badge_shop_buy {
  background-color: rgba(54, 25, 9, 0.06);
  border: 1px solid rgba(54, 25, 9, 0.15);
  box-shadow: 0 2px 4px rgba(54, 25, 9, 0.05);
  border-radius: 9999px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #361909;
}
:where(html:is([data-theme="heroes"])) .balance-icon_shop_buy {
  margin-right: 6px;
}
:where(html:is([data-theme="heroes"])) .promo-banner_shop_buy {
  background-image: url("/banner/123.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(54, 25, 9, 0.05);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(54, 25, 9, 0.1);
  box-shadow: 0 4px 6px rgba(54, 25, 9, 0.05);
}
:where(html:is([data-theme="heroes"])) .promo-bg-circle_shop_buy {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  background-color: #c15b2a;
  border-radius: 50%;
  opacity: 0.15;
}
:where(html:is([data-theme="heroes"])) .promo-title_shop_buy {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 4px 0;
  position: relative;
  z-index: 2;
  color: #361909;
}
:where(html:is([data-theme="heroes"])) .promo-desc_shop_buy {
  font-size: 14px;
  margin: 0 0 12px 0;
  position: relative;
  z-index: 2;
  color: rgba(54, 25, 9, 0.8);
}
:where(html:is([data-theme="heroes"])) .promo-timer_shop_buy {
  font-size: 12px;
  background-color: #361909;
  color: #FFFEC8;
  border: 1px solid rgba(54, 25, 9, 0.2);
  border-radius: 9999px;
  padding: 4px 12px;
  display: inline-block;
  position: relative;
  z-index: 2;
  font-weight: 600;
}
:where(html:is([data-theme="heroes"])) .categories_shop_buy {
  display: flex;
  overflow-x: auto;
  padding-bottom: 16px;
  margin-bottom: 24px;
  scrollbar-width: none;
}
:where(html:is([data-theme="heroes"])) .categories_shop_buy::-webkit-scrollbar {
  display: none;
}
:where(html:is([data-theme="heroes"])) .category-btn_shop_buy {
  background-color: rgba(54, 25, 9, 0.05);
  color: #361909;
  border: 1px solid rgba(54, 25, 9, 0.15);
  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(54, 25, 9, 0.02);
  transition: all 0.2s;
}
:where(html:is([data-theme="heroes"])) .category-btn_shop_buy.active_shop_buy {
  background-color: #361909;
  color: #FFFEC8;
  border-color: #361909;
  font-weight: bold;
}
:where(html:is([data-theme="heroes"])) .products-grid_shop_buy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
:where(html:is([data-theme="heroes"])) .item-card_shop_buy {
  background: rgba(54, 25, 9, 0.04);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  box-shadow: 0 2px 8px rgba(54, 25, 9, 0.04);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(54, 25, 9, 0.08);
}
:where(html:is([data-theme="heroes"])) .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.2);
}
:where(html:is([data-theme="heroes"])) .item-icon_shop_buy {
  font-size: 40px;
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
}
:where(html:is([data-theme="heroes"])) .item-title_shop_buy {
  font-weight: bold;
  text-align: center;
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #361909;
}
:where(html:is([data-theme="heroes"])) .item-price_shop_buy {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}
:where(html:is([data-theme="heroes"])) .price-old_shop_buy {
  color: rgba(54, 25, 9, 0.4);
  text-decoration: line-through;
  font-size: 14px;
}
:where(html:is([data-theme="heroes"])) .price-new_shop_buy {
  color: #c15b2a;
  font-weight: bold;
  font-size: 16px;
}
:where(html:is([data-theme="heroes"])) .give_reward {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 8px 0;
  color: #FFFEC8;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
  margin-top: auto;
  font-family: inherit;
  box-shadow: 0 2px 4px rgba(54, 25, 9, 0.1);
  transition: background 0.2s, opacity 0.2s;
  background: #361909;
}
:where(html:is([data-theme="heroes"])) .buy-btn_shop_buy {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 8px 0;
  color: #FFFEC8;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
  margin-top: auto;
  font-family: inherit;
  box-shadow: 0 2px 4px rgba(54, 25, 9, 0.1);
  transition: background 0.2s, opacity 0.2s;
}
:where(html:is([data-theme="heroes"])) .buy-btn_shop_buy:hover {
  opacity: 0.9;
}
:where(html:is([data-theme="heroes"])) .btn-blue_shop_buy,
:where(html:is([data-theme="heroes"])) .btn-green_shop_buy,
:where(html:is([data-theme="heroes"])) .btn-pink_shop_buy,
:where(html:is([data-theme="heroes"])) .btn-yellow_shop_buy {
  background: #361909;
}
:where(html:is([data-theme="heroes"])) .section-title_shop_buy {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  color: #361909;
}
:where(html:is([data-theme="heroes"])) .section-title-icon_shop_buy {
  margin-right: 8px;
}
:where(html:is([data-theme="heroes"])) .premium-card_shop_buy {
  background: rgba(54, 25, 9, 0.04);
  border: 2px solid #c15b2a;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(193, 91, 42, 0.1);
}
:where(html:is([data-theme="heroes"])) .premium-bg_shop_buy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(193, 91, 42, 0.05) 0%, rgba(54, 25, 9, 0.02) 100%);
}
:where(html:is([data-theme="heroes"])) .premium-icon_shop_buy {
  font-size: 40px;
  margin-right: 16px;
  position: relative;
  z-index: 2;
}
:where(html:is([data-theme="heroes"])) .premium-info_shop_buy {
  position: relative;
  z-index: 2;
  flex-grow: 1;
  margin-left: 15px;
}
:where(html:is([data-theme="heroes"])) .premium-title_shop_buy {
  font-weight: bold;
  font-size: 18px;
  margin: 0 0 4px 0;
  color: #361909;
}
:where(html:is([data-theme="heroes"])) .premium-desc_shop_buy {
  font-size: 14px;
  color: rgba(54, 25, 9, 0.7);
  margin: 0 0 8px 0;
}
:where(html:is([data-theme="heroes"])) .premium-action_shop_buy {
  display: flex;
  align-items: center;
}
:where(html:is([data-theme="heroes"])) .premium-price_shop_buy {
  color: #c15b2a;
  font-weight: bold;
  margin-right: 12px;
}
:where(html:is([data-theme="heroes"])) .premium-btn_shop_buy {
  background: #361909;
  color: #FFFEC8;
  border: none;
  border-radius: 9999px;
  padding: 6px 14px;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 4px rgba(54, 25, 9, 0.15);
}
:where(html:is([data-theme="heroes"])) .horizontal-scroll_shop_buy {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 16px;
  margin-bottom: 24px;
  scrollbar-width: none;
}
:where(html:is([data-theme="heroes"])) .horizontal-scroll_shop_buy::-webkit-scrollbar {
  display: none;
}
:where(html:is([data-theme="heroes"])) .horizontal-scroll_shop_buy .item-card_shop_buy {
  min-width: 180px;
}
:where(html:is([data-theme="heroes"])) .top-up-btn_shop_buy {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #361909;
  color: #FFFEC8;
  border: none;
  border-radius: 9999px;
  padding: 12px 24px;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 10px 20px rgba(54, 25, 9, 0.3);
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 50;
  font-family: inherit;
}
:where(html:is([data-theme="heroes"])) .top-up-icon_shop_buy {
  margin-right: 8px;
}
:where(html:is([data-theme="heroes"])) .modal-overlay_shop_buy {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(54, 25, 9, 0.4);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(5px);
}
:where(html:is([data-theme="heroes"])) .modal-overlay_shop_buy.active_shop_buy {
  opacity: 1;
  pointer-events: auto;
}
:where(html:is([data-theme="heroes"])) .modal-content_shop_buy {
  background: #FFFEC8;
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 20px 25px -5px rgba(54, 25, 9, 0.15);
  border: 1px solid rgba(54, 25, 9, 0.15);
}
:where(html:is([data-theme="heroes"])) .modal-close-btn_shop_buy,
:where(html:is([data-theme="heroes"])) .modal-back-btn_shop_buy {
  position: absolute;
  top: 16px;
  background: none;
  border: none;
  color: rgba(54, 25, 9, 0.5);
  font-size: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s;
}
:where(html:is([data-theme="heroes"])) .modal-close-btn_shop_buy:hover,
:where(html:is([data-theme="heroes"])) .modal-back-btn_shop_buy:hover {
  color: #361909;
}
:where(html:is([data-theme="heroes"])) .modal-close-btn_shop_buy {
  right: 16px;
}
:where(html:is([data-theme="heroes"])) .modal-back-btn_shop_buy {
  left: 16px;
}
:where(html:is([data-theme="heroes"])) .modal-title_shop_buy {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin: 0 0 24px 0;
  color: #361909;
}
:where(html:is([data-theme="heroes"])) .payment-option_shop_buy {
  background: rgba(54, 25, 9, 0.04);
  border: 1px solid rgba(54, 25, 9, 0.1);
  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;
}
:where(html:is([data-theme="heroes"])) .payment-option_shop_buy.green_shop_buy {
  border-color: #16a34a;
  background: rgba(22, 163, 74, 0.06);
}
:where(html:is([data-theme="heroes"])) .payment-option_shop_buy:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 6px rgba(54, 25, 9, 0.08);
  border-color: #361909;
}
:where(html:is([data-theme="heroes"])) .payment-option_shop_buy.green_shop_buy:hover {
  border-color: #15803d;
}
:where(html:is([data-theme="heroes"])) .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: #361909;
}
:where(html:is([data-theme="heroes"])) .payment-option_shop_buy.green_shop_buy .payment-option-icon_shop_buy {
  background-color: rgba(22, 163, 74, 0.15);
  color: #16a34a;
}
:where(html:is([data-theme="heroes"])) .payment-option-info_shop_buy {
  flex-grow: 1;
}
:where(html:is([data-theme="heroes"])) .payment-option-title_shop_buy {
  font-weight: bold;
  margin: 0 0 4px 0;
  color: #361909;
}
:where(html:is([data-theme="heroes"])) .payment-option-desc_shop_buy {
  font-size: 14px;
  color: rgba(54, 25, 9, 0.6);
  margin: 0;
}
:where(html:is([data-theme="heroes"])) .payment-option-arrow_shop_buy {
  margin-left: auto;
  color: rgba(54, 25, 9, 0.4);
  font-weight: bold;
}
:where(html:is([data-theme="heroes"])) .exchange-rate_shop_buy {
  text-align: center;
  font-size: 14px;
  color: rgba(54, 25, 9, 0.6);
  margin: -16px 0 24px 0;
}
:where(html:is([data-theme="heroes"])) .input-wrapper_shop_buy {
  position: relative;
  margin-bottom: 8px;
}
:where(html:is([data-theme="heroes"])) .amount-input_shop_buy {
  width: 100%;
  background-color: rgba(54, 25, 9, 0.04);
  border: 2px solid rgba(54, 25, 9, 0.15);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #361909;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}
:where(html:is([data-theme="heroes"])) .amount-input_shop_buy:focus {
  border-color: #c15b2a;
}
:where(html:is([data-theme="heroes"])) .currency-symbol-input_shop_buy {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: bold;
  color: rgba(54, 25, 9, 0.4);
}
:where(html:is([data-theme="heroes"])) .limits_shop_buy {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: rgba(54, 25, 9, 0.6);
  margin-bottom: 24px;
}
:where(html:is([data-theme="heroes"])) .result-box_shop_buy {
  background-color: rgba(54, 25, 9, 0.04);
  border: 1px solid rgba(54, 25, 9, 0.1);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
:where(html:is([data-theme="heroes"])) .result-label_shop_buy {
  color: rgba(54, 25, 9, 0.7);
}
:where(html:is([data-theme="heroes"])) .result-value_shop_buy {
  color: #c15b2a;
  font-weight: bold;
  font-size: 20px;
}
:where(html:is([data-theme="heroes"])) .bonus-btn_shop_buy {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #c15b2a;
  font-weight: bold;
  cursor: pointer;
  padding: 8px 0;
  font-size: 16px;
  font-family: inherit;
}
:where(html:is([data-theme="heroes"])) .bonus-arrow_shop_buy {
  transition: transform 0.3s;
  color: #c15b2a;
}
:where(html:is([data-theme="heroes"])) .bonus-arrow_shop_buy.open_shop_buy {
  transform: rotate(180deg);
}
:where(html:is([data-theme="heroes"])) .bonus-table_shop_buy {
  background-color: rgba(54, 25, 9, 0.04);
  border: 1px solid rgba(54, 25, 9, 0.1);
  border-radius: 8px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
:where(html:is([data-theme="heroes"])) .bonus-table_shop_buy.show_shop_buy {
  max-height: 300px;
  margin-top: 8px;
  margin-bottom: 16px;
}
:where(html:is([data-theme="heroes"])) .bonus-table_shop_buy .table_shop_buy {
  width: 100%;
  border-collapse: collapse;
}
:where(html:is([data-theme="heroes"])) .bonus-table_shop_buy .td_shop_buy {
  padding: 10px;
  border-bottom: 1px solid rgba(54, 25, 9, 0.08);
  font-size: 14px;
  color: #361909;
}
:where(html:is([data-theme="heroes"])) .bonus-table_shop_buy .tr_shop_buy:last-child .td_shop_buy {
  border-bottom: none;
}
:where(html:is([data-theme="heroes"])) .bonus-table_shop_buy .td_shop_buy:last-child {
  text-align: right;
  color: #c15b2a;
  font-weight: bold;
}
:where(html:is([data-theme="heroes"])) .pay-submit-btn_shop_buy {
  width: 100%;
  background: #361909;
  color: #FFFEC8;
  border: none;
  border-radius: 8px;
  padding: 16px;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  margin-top: 16px;
  font-family: inherit;
  box-shadow: 0 4px 6px rgba(54, 25, 9, 0.15);
  transition: opacity 0.2s, transform 0.2s;
}
:where(html:is([data-theme="heroes"])) .pay-submit-btn_shop_buy:active {
  transform: translateY(2px);
}
:where(html:is([data-theme="heroes"])) .pay-submit-btn_shop_buy:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
:where(html:is([data-theme="heroes"])) .success-content_shop_buy {
  text-align: center;
}
:where(html:is([data-theme="heroes"])) .success-icon-big_shop_buy {
  font-size: 64px;
  margin-bottom: 16px;
}
:where(html:is([data-theme="heroes"])) .success-title_shop_buy {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 8px 0;
  color: #361909;
}
:where(html:is([data-theme="heroes"])) .success-desc_shop_buy {
  color: rgba(54, 25, 9, 0.7);
  margin: 0 0 24px 0;
}
:where(html:is([data-theme="heroes"])) .success-btn_shop_buy {
  width: 100%;
  background-color: rgba(54, 25, 9, 0.05);
  color: #361909;
  border: 1px solid rgba(54, 25, 9, 0.2);
  border-radius: 8px;
  padding: 16px;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.2s;
}
:where(html:is([data-theme="heroes"])) .success-btn_shop_buy:hover {
  background-color: rgba(54, 25, 9, 0.09);
}
@keyframes pulse_shop_buy_heroes {
                    0%, 100% { transform: scale(1); }
                    50% { transform: scale(1.05); }
}
:where(html:is([data-theme="heroes"])) .pulse_shop_buy {
  animation: pulse_shop_buy_heroes 1.5s infinite;
}
@keyframes float_shop_buy_heroes {
                    0%, 100% { transform: translateY(0); }
                    50% { transform: translateY(-10px); }
}
:where(html:is([data-theme="heroes"])) .float-anim_shop_buy {
  animation: float_shop_buy_heroes 3s ease-in-out infinite;
}
@keyframes ping_shop_buy_heroes {
                    0% { transform: scale(1); opacity: 1; }
                    75%, 100% { transform: scale(1.2); opacity: 0; }
}
:where(html:is([data-theme="heroes"])) .animate-ping_shop_buy {
  animation: ping_shop_buy_heroes 0.5s cubic-bezier(0, 0, 0.2, 1);
}
:where(html:is([data-theme="heroes"])) .icon_gold_buy {
  width: 50px;
}
/* Норманны */
:where(html:is([data-theme="normans"])) .toggle-wishes-btn {
  color:#a1c7f0;
}
:where(html:is([data-theme="normans"])) .user_name_effect {
  color: #65491b;
}
:where(html:is([data-theme="normans"])) .heroes_name_effect {
  color: #65491b;
}
:where(html:is([data-theme="normans"])) .vip-sword-text {
  color:#ffffff!important;
}
:where(html:is([data-theme="normans"])) .filter_text {
  color:#fff;
}
:where(html:is([data-theme="normans"])) blockquote {
  background: #000000;
}
:where(html:is([data-theme="normans"])) ._accounts-account-card {
  display: flex;
  align-items: center;
  position: relative;
  padding: 10px 14px;
  gap: 12px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: #ffffff;
  text-shadow: none;
}
:where(html:is([data-theme="normans"])) ._accounts-btn-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  font-weight: bold;
  font-family: sans-serif;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s;
}
:where(html:is([data-theme="normans"])) ._accounts-level-badge {
  display: flex;
  align-items: center;
  position: relative;
  gap: 12px;
  background: rgba(5, 14, 20, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #ffffff;
  text-shadow: none;
}
:where(html:is([data-theme="normans"])) ._accounts-btn-add {
  align-self: center;
  display: block;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  padding: 11px 26px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  text-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s;
}
:where(html:is([data-theme="normans"])) .DoneTask {
  color: #1a9530;
}
:where(html:is([data-theme="normans"])) .discounts_text {
  color: #1a9530;
}
:where(html:is([data-theme="normans"])) .color_user_name_mess_3 {
  color: #1a9530;
}
:where(html:is([data-theme="normans"])) .me_ask {
  color: #1a9530;
}
:where(html:is([data-theme="normans"])) .brush_path {
  display: inline-block;
  text-decoration: none;
  border: none;
  background: none;
  padding-left: 0px;
  padding-right: 0px;
}
:where(html:is([data-theme="normans"])) .pigment_pool {
  overflow: hidden;
  display: inline-block;
  min-width: 97px;
  max-width: 377px;
  height: 28px;
  background: none;
}
:where(html:is([data-theme="normans"])) .left_stroke_edge {
  float: left;
  width: 40px;
  height: 100%;
  background-image: url(/design/newbutton/normans-button-big-left.png);
  background-repeat: no-repeat;
  background-size: 40px 100%;
}
:where(html:is([data-theme="normans"])) .center_mix_flow {
  float: left;
  background-image: url(/design/newbutton/normans-button-big-midle.png);
  background-repeat: repeat-x;
  background-position: center;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-size: 100% 100%;
}
:where(html:is([data-theme="normans"])) .glyph_field {
  flex: 1;
  text-align: center;
  color: #65491b;
  font-size: small;
  white-space: nowrap;
  margin: 0;
}
:where(html:is([data-theme="normans"])) .mid_layer_inscription {
  margin: 0;
  padding-top: 0;
  color: #fff;
  margin-top: -2px;
}
:where(html:is([data-theme="normans"])) .right_texture_edge {
  float: right;
  width: 43px;
  height: 100%;
  background-image: url(/design/newbutton/normans-button-big-right.png);
  background-repeat: no-repeat;
  background-size: 37px 100%;
}
:where(html:is([data-theme="normans"])) .footer {
  background: #0B1C26;
  box-shadow: inset 0 0 15px #000;
  color: #fff;
}
:where(html:is([data-theme="normans"])) .editable-area {
  background: #0B1C26;
  box-shadow: inset 0 0 15px #000;
  color:#ffffff;
}
:where(html:is([data-theme="normans"])) .toolbar {
  background: #0B1C26;
  box-shadow: inset 0 0 15px #000;
  color:#ffffff;
}
:where(html:is([data-theme="normans"])) .main-card {
  background: #0B1C26;
  box-shadow: inset 0 0 15px #000;
  color:#ffffff;
  border:none;
}
:where(html:is([data-theme="normans"])) .status-bar {
  background: #0B1C26;
  box-shadow: inset 0 0 15px #000;
  color:#ffffff;
}
:where(html:is([data-theme="normans"])) .t-btn {
  color: #6f6f6f;
}
:where(html:is([data-theme="normans"])) .footer a {
  color: #fff;
}
:where(html:is([data-theme="normans"])) .hr {
  background-color: #382d22;
  background-repeat: repeat-x;
  background-position: 0 -4px;
}
:where(html:is([data-theme="normans"])) .notifications_block {
  background: #0B1C26;
  box-shadow: inset 0 0 15px #000;
}
:where(html:is([data-theme="normans"])) .progress-bar-task {
  border: 1px solid #818181;
}
:where(html:is([data-theme="normans"])) .track {
  border: 1px solid #818181;
}
:where(html:is([data-theme="normans"])) .btn-menu {
  color: #a1c7f0;
}
:where(html:is([data-theme="normans"])) .border button.active {
  color: #ffffff;
}
:where(html:is([data-theme="normans"])) ._anketa_input-group label {
  color: #a1c7f0;
}
:where(html:is([data-theme="normans"])) ._anketa_form-panel {
  background: rgb(0 0 0 / 30%);
  border: 1px solid #000000;
  border-radius: 6px;
  padding: 12px 15px;
  margin-bottom: 15px;
  margin-top: 12px;
}
:where(html:is([data-theme="normans"])) .info div.notifications_block {
  background: #0B1C26;
  box-shadow: inset 0 0 15px #000;
}
:where(html:is([data-theme="normans"])) ul.navigation span.body-navigation {
  background-image: url(/img_design/arrow_right_normans.png);
}
:where(html:is([data-theme="normans"])) .header {
  background: #0B1C26;
  box-shadow: inset 0 0 15px #000;
}
:where(html:is([data-theme="normans"])) .info div.icons div.body {
  background: #0B1C26;
  box-shadow: inset 0 0 15px #000;
}
:where(html:is([data-theme="normans"])) div.block_header_left {
  background-image: url(/img_design/left-ban__normans.png);
  background-repeat: repeat-y;
  background-size: 15px;
  margin-left: -12px;
}
:where(html:is([data-theme="normans"])) div.block_header_right {
  background-image: url(/img_design/right-ban__normans.png);
  background-repeat: repeat-y;
  background-size: 15px;
  background-position: 100% 0;
  margin-right: -12px;
}
:where(html:is([data-theme="normans"])) div.block_header_center {
  background: url(/img_design/midle-ban_normans.png) repeat-x scroll 0 0 transparent;
  max-width: 100%;
  margin-left: 10px;
  margin-right: 10px;
}
/* Светло-голубые ссылки норманнов не видны на светлой ленте заголовка в эффектах боя. */
html[data-theme="normans"] .effects-owner a {
  color: #007e72;
}
:where(html:is([data-theme="normans"])) .info div.icons a {
  color: #cdcdcd;
}
:where(html:is([data-theme="normans"])) .switcher label {
  background: #12303A;
}
:where(html:is([data-theme="normans"])) .switcher input:checked + label {
  background: #007e72;
}
:where(html:is([data-theme="normans"])) .filter-btn {
  background: #12303A;
}
:where(html:is([data-theme="normans"])) .filter-btn.active {
  background: #007e72;
}
:where(html:is([data-theme="normans"])) ._kit_change_username-text {
  color:#ffffff!important;
}
:where(html:is([data-theme="normans"])) ._kit_change_account-item {
  background: #12303A;
}
:where(html:is([data-theme="normans"])) ._kit_change_account-item._kit_change_active {
  background: #007e72;
}
:where(html:is([data-theme="normans"])) ._change_account-item {
  background: #12303A;
}
:where(html:is([data-theme="normans"])) ._change_account-item._change_active {
  background: #007e72;
}
:where(html:is([data-theme="normans"])) ._change_add-account-btn {
  background: #12303A;
}
:where(html:is([data-theme="normans"])) .switcher {
  border: none;
  border-radius: none;
}
:where(html:is([data-theme="normans"])) .dmg-number {
  color: #cd5c5c;
}
:where(html:is([data-theme="normans"])) .not_active_friends {
  color: #ffffff;
  background: url(/design/newbutton/pagination2.png) repeat scroll 0 0;
}
:where(html:is([data-theme="normans"])) .active_firends {
  color: #ffffff;
  background: url(/design/newbutton/pagination1.png) repeat scroll 0 0;
}
:where(html:is([data-theme="normans"])) .not_potion {
  color: #ffffff;
  background: url(/design/newbutton/pagination2.png) repeat scroll 0 0;
}
:where(html:is([data-theme="normans"])) .active_potion {
  color: #ffffff;
  background: url(/design/newbutton/pagination1.png) repeat scroll 0 0;
}
:where(html:is([data-theme="normans"])) .qty-btn_shop {
  color: #ffffff;
  background: url(/design/newbutton/pagination2.png) repeat scroll 0 0;
}
:where(html:is([data-theme="normans"])) .qty-btn_shop.active_shop {
  color: #ffffff;
  background: url(/design/newbutton/pagination1.png) repeat scroll 0 0;
}
:where(html:is([data-theme="normans"])) .not_pagination {
  color: #ffffff;
  background: url(/design/newbutton/pagination2.png) repeat scroll 0 0;
}
:where(html:is([data-theme="normans"])) .shop-wrapper_shop_buy {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: #0B1C26;
  color: #ffffff;
}
:where(html:is([data-theme="normans"])) .shop-wrapper_shop_buy *,
:where(html:is([data-theme="normans"])) .shop-wrapper_shop_buy *::before,
:where(html:is([data-theme="normans"])) .shop-wrapper_shop_buy *::after {
  box-sizing: inherit;
}
:where(html:is([data-theme="normans"])) .container_shop_buy {
  max-width: 450px;
  margin: 0 auto;
  padding: 0 16px;
}
:where(html:is([data-theme="normans"])) .header_shop_buy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
}
:where(html:is([data-theme="normans"])) .logo_shop_buy {
  display: flex;
  align-items: center;
}
:where(html:is([data-theme="normans"])) .logo-icon_shop_buy {
  font-size: 28px;
  margin-right: 12px;
}
:where(html:is([data-theme="normans"])) .logo-text_shop_buy {
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(90deg, #ffffff 0%, #38BDF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}
:where(html:is([data-theme="normans"])) .balance-badge_shop_buy {
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-radius: 9999px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #ffffff;
}
:where(html:is([data-theme="normans"])) .balance-icon_shop_buy {
  margin-right: 6px;
  color: #38BDF8;
}
:where(html:is([data-theme="normans"])) .promo-banner_shop_buy {
  background-image: url("/banner/123.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
:where(html:is([data-theme="normans"])) .promo-bg-circle_shop_buy {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  background-color: #38BDF8;
  border-radius: 50%;
  opacity: 0.15;
}
:where(html:is([data-theme="normans"])) .promo-title_shop_buy {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 4px 0;
  position: relative;
  z-index: 2;
  color: #ffffff;
}
:where(html:is([data-theme="normans"])) .promo-desc_shop_buy {
  font-size: 14px;
  margin: 0 0 12px 0;
  position: relative;
  z-index: 2;
  color: rgba(255, 255, 255, 0.75);
}
:where(html:is([data-theme="normans"])) .promo-timer_shop_buy {
  font-size: 12px;
  background-color: rgba(11, 28, 38, 0.8);
  color: #38BDF8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 9999px;
  padding: 4px 12px;
  display: inline-block;
  position: relative;
  z-index: 2;
  font-weight: 600;
}
:where(html:is([data-theme="normans"])) .categories_shop_buy {
  display: flex;
  overflow-x: auto;
  padding-bottom: 16px;
  margin-bottom: 24px;
  scrollbar-width: none;
}
:where(html:is([data-theme="normans"])) .categories_shop_buy::-webkit-scrollbar {
  display: none;
}
:where(html:is([data-theme="normans"])) .category-btn_shop_buy {
  background-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 9999px;
  margin-right: 8px;
  white-space: nowrap;
  cursor: pointer;
  font-size: 16px;
  font-family: inherit;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}
:where(html:is([data-theme="normans"])) .category-btn_shop_buy:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
:where(html:is([data-theme="normans"])) .category-btn_shop_buy.active_shop_buy {
  background-color: #ffffff;
  color: #0B1C26;
  border-color: #ffffff;
  font-weight: bold;
}
:where(html:is([data-theme="normans"])) .products-grid_shop_buy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
:where(html:is([data-theme="normans"])) .item-card_shop_buy {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
:where(html:is([data-theme="normans"])) .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 4px 8px rgba(239, 68, 68, 0.3);
}
:where(html:is([data-theme="normans"])) .item-icon_shop_buy {
  font-size: 40px;
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
}
:where(html:is([data-theme="normans"])) .item-title_shop_buy {
  font-weight: bold;
  text-align: center;
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #ffffff;
}
:where(html:is([data-theme="normans"])) .item-price_shop_buy {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}
:where(html:is([data-theme="normans"])) .price-old_shop_buy {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
  font-size: 14px;
}
:where(html:is([data-theme="normans"])) .price-new_shop_buy {
  color: #38BDF8;
  font-weight: bold;
  font-size: 16px;
}
:where(html:is([data-theme="normans"])) .give_reward {
  background: #ffffff;
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 8px 0;
  color: #0B1C26;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
  margin-top: auto;
  font-family: inherit;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: background 0.2s, opacity 0.2s, transform 0.1s;
}
:where(html:is([data-theme="normans"])) .buy-btn_shop_buy {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 8px 0;
  color: #0B1C26;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
  margin-top: auto;
  font-family: inherit;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: background 0.2s, opacity 0.2s, transform 0.1s;
}
:where(html:is([data-theme="normans"])) .buy-btn_shop_buy:hover {
  opacity: 0.95;
  background: #f3f4f6;
}
:where(html:is([data-theme="normans"])) .buy-btn_shop_buy:active {
  transform: scale(0.98);
}
:where(html:is([data-theme="normans"])) .btn-blue_shop_buy,
:where(html:is([data-theme="normans"])) .btn-green_shop_buy,
:where(html:is([data-theme="normans"])) .btn-pink_shop_buy,
:where(html:is([data-theme="normans"])) .btn-yellow_shop_buy {
  background: #ffffff;
}
:where(html:is([data-theme="normans"])) .section-title_shop_buy {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  color: #ffffff;
}
:where(html:is([data-theme="normans"])) .section-title-icon_shop_buy {
  margin-right: 8px;
  color: #38BDF8;
}
:where(html:is([data-theme="normans"])) .premium-card_shop_buy {
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid #38BDF8;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.15);
}
:where(html:is([data-theme="normans"])) .premium-bg_shop_buy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.07) 0%, rgba(37, 99, 235, 0.07) 100%);
}
:where(html:is([data-theme="normans"])) .premium-icon_shop_buy {
  font-size: 40px;
  margin-right: 16px;
  position: relative;
  z-index: 2;
}
:where(html:is([data-theme="normans"])) .premium-info_shop_buy {
  position: relative;
  z-index: 2;
  flex-grow: 1;
  margin-left: 15px;
}
:where(html:is([data-theme="normans"])) .premium-title_shop_buy {
  font-weight: bold;
  font-size: 18px;
  margin: 0 0 4px 0;
  color: #ffffff;
}
:where(html:is([data-theme="normans"])) .premium-desc_shop_buy {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 8px 0;
}
:where(html:is([data-theme="normans"])) .premium-action_shop_buy {
  display: flex;
  align-items: center;
}
:where(html:is([data-theme="normans"])) .premium-price_shop_buy {
  color: #38BDF8;
  font-weight: bold;
  margin-right: 12px;
}
:where(html:is([data-theme="normans"])) .premium-btn_shop_buy {
  background: #ffffff;
  color: #0B1C26;
  border: none;
  border-radius: 9999px;
  padding: 6px 14px;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: background 0.2s;
}
:where(html:is([data-theme="normans"])) .premium-btn_shop_buy:hover {
  background: #f3f4f6;
}
:where(html:is([data-theme="normans"])) .horizontal-scroll_shop_buy {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 16px;
  margin-bottom: 24px;
  scrollbar-width: none;
}
:where(html:is([data-theme="normans"])) .horizontal-scroll_shop_buy::-webkit-scrollbar {
  display: none;
}
:where(html:is([data-theme="normans"])) .horizontal-scroll_shop_buy .item-card_shop_buy {
  min-width: 180px;
}
:where(html:is([data-theme="normans"])) .top-up-btn_shop_buy {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #0B1C26;
  border: none;
  border-radius: 9999px;
  padding: 12px 24px;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 50;
  font-family: inherit;
  transition: transform 0.2s, background 0.2s;
}
:where(html:is([data-theme="normans"])) .top-up-btn_shop_buy:hover {
  background: #f3f4f6;
  transform: translateX(-50%) translateY(-2px);
}
:where(html:is([data-theme="normans"])) .top-up-btn_shop_buy:active {
  transform: translateX(-50%) translateY(0);
}
:where(html:is([data-theme="normans"])) .top-up-icon_shop_buy {
  margin-right: 8px;
  color: #2563EB;
}
:where(html:is([data-theme="normans"])) .modal-overlay_shop_buy {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(5, 12, 17, 0.85);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(6px);
}
:where(html:is([data-theme="normans"])) .modal-overlay_shop_buy.active_shop_buy {
  opacity: 1;
  pointer-events: auto;
}
:where(html:is([data-theme="normans"])) .modal-content_shop_buy {
  background: #0B1C26;
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
:where(html:is([data-theme="normans"])) .modal-close-btn_shop_buy,
:where(html:is([data-theme="normans"])) .modal-back-btn_shop_buy {
  position: absolute;
  top: 16px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s;
}
:where(html:is([data-theme="normans"])) .modal-close-btn_shop_buy:hover,
:where(html:is([data-theme="normans"])) .modal-back-btn_shop_buy:hover {
  color: #ffffff;
}
:where(html:is([data-theme="normans"])) .modal-close-btn_shop_buy {
  right: 16px;
}
:where(html:is([data-theme="normans"])) .modal-back-btn_shop_buy {
  left: 16px;
}
:where(html:is([data-theme="normans"])) .modal-title_shop_buy {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin: 0 0 24px 0;
  color: #ffffff;
}
:where(html:is([data-theme="normans"])) .payment-option_shop_buy {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  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, background 0.2s;
}
:where(html:is([data-theme="normans"])) .payment-option_shop_buy.green_shop_buy {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.06);
}
:where(html:is([data-theme="normans"])) .payment-option_shop_buy:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}
:where(html:is([data-theme="normans"])) .payment-option_shop_buy.green_shop_buy:hover {
  border-color: #4ade80;
  background: rgba(34, 197, 94, 0.15);
}
:where(html:is([data-theme="normans"])) .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: #ffffff;
}
:where(html:is([data-theme="normans"])) .payment-option_shop_buy.green_shop_buy .payment-option-icon_shop_buy {
  background-color: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}
:where(html:is([data-theme="normans"])) .payment-option-info_shop_buy {
  flex-grow: 1;
}
:where(html:is([data-theme="normans"])) .payment-option-title_shop_buy {
  font-weight: bold;
  margin: 0 0 4px 0;
  color: #ffffff;
}
:where(html:is([data-theme="normans"])) .payment-option-desc_shop_buy {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}
:where(html:is([data-theme="normans"])) .payment-option-arrow_shop_buy {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.3);
  font-weight: bold;
}
:where(html:is([data-theme="normans"])) .exchange-rate_shop_buy {
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: -16px 0 24px 0;
}
:where(html:is([data-theme="normans"])) .input-wrapper_shop_buy {
  position: relative;
  margin-bottom: 8px;
}
:where(html:is([data-theme="normans"])) .amount-input_shop_buy {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}
:where(html:is([data-theme="normans"])) .amount-input_shop_buy:focus {
  border-color: #38BDF8;
}
:where(html:is([data-theme="normans"])) .currency-symbol-input_shop_buy {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.4);
}
:where(html:is([data-theme="normans"])) .limits_shop_buy {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 24px;
}
:where(html:is([data-theme="normans"])) .result-box_shop_buy {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
:where(html:is([data-theme="normans"])) .result-label_shop_buy {
  color: rgba(255, 255, 255, 0.7);
}
:where(html:is([data-theme="normans"])) .result-value_shop_buy {
  color: #38BDF8;
  font-weight: bold;
  font-size: 20px;
}
:where(html:is([data-theme="normans"])) .bonus-btn_shop_buy {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #38BDF8;
  font-weight: bold;
  cursor: pointer;
  padding: 8px 0;
  font-size: 16px;
  font-family: inherit;
}
:where(html:is([data-theme="normans"])) .bonus-arrow_shop_buy {
  transition: transform 0.3s;
  color: #38BDF8;
}
:where(html:is([data-theme="normans"])) .bonus-arrow_shop_buy.open_shop_buy {
  transform: rotate(180deg);
}
:where(html:is([data-theme="normans"])) .bonus-table_shop_buy {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
:where(html:is([data-theme="normans"])) .bonus-table_shop_buy.show_shop_buy {
  max-height: 300px;
  margin-top: 8px;
  margin-bottom: 16px;
}
:where(html:is([data-theme="normans"])) .bonus-table_shop_buy .table_shop_buy {
  width: 100%;
  border-collapse: collapse;
}
:where(html:is([data-theme="normans"])) .bonus-table_shop_buy .td_shop_buy {
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14px;
  color: #ffffff;
}
:where(html:is([data-theme="normans"])) .bonus-table_shop_buy .tr_shop_buy:last-child .td_shop_buy {
  border-bottom: none;
}
:where(html:is([data-theme="normans"])) .bonus-table_shop_buy .td_shop_buy:last-child {
  text-align: right;
  color: #38BDF8;
  font-weight: bold;
}
:where(html:is([data-theme="normans"])) .pay-submit-btn_shop_buy {
  width: 100%;
  background: #ffffff;
  color: #0B1C26;
  border: none;
  border-radius: 8px;
  padding: 16px;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  margin-top: 16px;
  font-family: inherit;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  transition: opacity 0.2s, transform 0.2s, background 0.2s;
}
:where(html:is([data-theme="normans"])) .pay-submit-btn_shop_buy:hover {
  background: #f3f4f6;
}
:where(html:is([data-theme="normans"])) .pay-submit-btn_shop_buy:active {
  transform: translateY(2px);
}
:where(html:is([data-theme="normans"])) .pay-submit-btn_shop_buy:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
:where(html:is([data-theme="normans"])) .success-content_shop_buy {
  text-align: center;
}
:where(html:is([data-theme="normans"])) .success-icon-big_shop_buy {
  font-size: 64px;
  margin-bottom: 16px;
  color: #4ade80;
}
:where(html:is([data-theme="normans"])) .success-title_shop_buy {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 8px 0;
  color: #ffffff;
}
:where(html:is([data-theme="normans"])) .success-desc_shop_buy {
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 24px 0;
}
:where(html:is([data-theme="normans"])) .success-btn_shop_buy {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 16px;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.2s, border-color 0.2s;
}
:where(html:is([data-theme="normans"])) .success-btn_shop_buy:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}
@keyframes pulse_shop_buy_normans {
                    0%, 100% { transform: scale(1); }
                    50% { transform: scale(1.03); }
}
:where(html:is([data-theme="normans"])) .pulse_shop_buy {
  animation: pulse_shop_buy_normans 1.5s infinite;
}
@keyframes float_shop_buy_normans {
                    0%, 100% { transform: translateY(0); }
                    50% { transform: translateY(-6px); }
}
:where(html:is([data-theme="normans"])) .float-anim_shop_buy {
  animation: float_shop_buy_normans 3s ease-in-out infinite;
}
@keyframes ping_shop_buy_normans {
                    0% { transform: scale(1); opacity: 1; }
                    75%, 100% { transform: scale(1.15); opacity: 0; }
}
:where(html:is([data-theme="normans"])) .animate-ping_shop_buy {
  animation: ping_shop_buy_normans 0.5s cubic-bezier(0, 0, 0.2, 1);
}
:where(html:is([data-theme="normans"])) .icon_gold_buy {
  width: 50px;
}
:where(html:is([data-theme="normans"])) ._gold_buy_presentmodal-container {
  background-color: #0B1C26;
}
:where(html:is([data-theme="normans"])) ._gold_buy_presentmodal-title {
  color: #007e72;
}
:where(html:is([data-theme="normans"])) ._gold_buy_presentmodal-text {
  color:#fff;
}
:where(html:is([data-theme="normans"])) .tab_olds_1 {
  color: rgba(255, 255, 255, 0.45);
}
:where(html:is([data-theme="normans"])) .tab_olds {
  color: rgba(255, 255, 255, 0.45);
}
:where(html:is([data-theme="normans"])) ._anketa_consent-box a {
  color: #a1c7f0;
}
:where(html:is([data-theme="normans"])) ._anketa_consent-box {
  color: #ffffff;
}
/* ===== Темы оформления: конец ===== */

/* Ответы загадки в «Событиях дня»: в ряд, не помещаются — переносятся на следующую строку */
.daily .daily-answers {
    flex-wrap: wrap;
}

/* Строка отправки в чате: Отправить, смайлик, камера, стикеры, микрофон — в одну линию,
   на узком экране лишние кнопки переносятся на следующую строку */
.chat-send-row {
    flex-wrap: wrap;
}
.chat-round .circular-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.chat-round .circular-btn svg {
    width: 15px;
    height: 15px;
    margin-top: 0;
}
.chat-round .circular-btn:disabled {
    opacity: 0.6;
}
/* Камера, стикеры и микрофон — картинки в стиле смайлика (одинаковые во всех темах), без круга */
.chat-send-row .chat-round {
    width: 26px;
    height: 26px;
    background: none;
}
.chat-send-row .chat-round .circular-btn img {
    width: 26px;
    height: 26px;
    border-radius: 0;
    object-fit: contain;
    /* Яркие картинки приводим к одному спокойному бронзовому тону, как у рамок игры */
    filter: grayscale(1) sepia(1) saturate(1.7) hue-rotate(-12deg) brightness(0.92) contrast(1.15);
}
.chat-send-row .chat-voice-on {
    outline: none;
    animation: chat-voice-pulse 1s ease-in-out infinite;
}
@keyframes chat-voice-pulse {
    50% { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .chat-send-row .chat-voice-on { animation: none; }
}

/* Голосовой чат клана: круглая кнопка под сумкой войны (.fab-menu-container) и панель участников.
   Кнопка в том же стиле, что сумка; панель — цвета окон игры и выбранной темы. */
.voice-fab {
    position: fixed;
    top: calc(44% + 30px);
    right: calc(50% - 240px + 16px);
    z-index: 99;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #94713f;
    background: rgba(30, 41, 59, 0.9);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(148, 113, 63, 0.3);
    color: #f7d58b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.voice-fab svg { fill: currentColor; }
.voice-fab-on {
    border-color: #6fbf4a;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(111, 191, 74, 0.35), 0 4px 15px rgba(0, 0, 0, 0.5);
}
.voice-fab-muted { color: #ff9a8a; }
.voice-fab-wait { animation: voiceWait 1.2s ease-in-out infinite; }
@keyframes voiceWait {
    50% { opacity: 0.55; }
}
.voice-fab-count {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    padding: 1px 4px;
    border-radius: 9px;
    border: 1px solid #fff3c4;
    background: #2e7d32;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    line-height: 14px;
}
.voice-pop-shade {
    position: fixed;
    inset: 0;
    z-index: 9998;
}
.voice-pop {
    position: fixed;
    top: calc(44% + 50px);
    right: calc(50% - 240px + 66px);
    transform: translateY(-50%);
    box-sizing: border-box;
    width: 240px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 8px 12px 10px;
    border: 1px solid #94713f;
    border-radius: 12px;
    background: #F5F6E0;
    color: #313131;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    text-align: left;
}
:where(html:is([data-theme="vikings"], [data-theme="heroes"], [data-theme="normans"])) .voice-pop {
    background: var(--imperia-bg);
    color: var(--imperia-text);
}
.voice-pop-close {
    position: absolute;
    top: 2px;
    right: 8px;
    border: none;
    background: none;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.voice-pop-title {
    margin: 2px 22px 6px 0;
    font-weight: bold;
    font-size: 14px;
}
.voice-pop-status { margin: 0 0 6px; }
.voice-members {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}
.voice-member {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(148, 113, 63, 0.45);
}
.voice-member-mic {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: #2e7d32;
    fill: #ffffff;
}
.voice-member-muted .voice-member-mic { background: #8b1a1a; }
.voice-pop-tools {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 4px;
}
.voice-tool {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #94713f;
    background: radial-gradient(50% 50% at 50% 50%, #3E080A 0%, #8B2023 71.5%, #9C2227 100%);
    fill: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.voice-tool-off { opacity: 0.55; }
.voice-tool:disabled { cursor: default; opacity: 0.4; }
@media (max-width: 520px) {
    .voice-fab { right: 16px; }
    /* Узкий экран: панель целиком помещается между левым краем и кнопкой. */
    .voice-pop {
        right: 64px;
        width: calc(100vw - 80px);
        max-width: 240px;
    }
}

/* Место под экран, пока догружается его код: подвал остаётся за краем экрана и не дёргается */
.screen-wait {
    min-height: 100vh;
}

/* Пока после входа собираются строки уведомлений, блок скрыт (правило .info div.notifications_block ставит display: block) */
.info div.notifications_block[hidden] {
    display: none;
}

/* ===== Размеры картинок заранее: место под картинку занято до её загрузки, и экран не дёргается.
   aspect-ratio «auto X / Y» действует, пока картинка не пришла; после загрузки — её настоящие пропорции. ===== */
.logo { aspect-ratio: auto 581 / 121; height: auto; }
:where(html:is([data-theme="heroes"])) .logo { aspect-ratio: auto 165 / 24; }
.img-banner img { aspect-ratio: auto 720 / 257; height: auto; }
/* Иконки меню: квадрат 22px во всех меню, как на главной; картинка вписана */
.img-icon-header { width: 22px; height: 22px; vertical-align: middle; }
.img-icon-header .icon_sprite { width: 100%; height: 100%; object-fit: contain; }
/* Иконки шапки */
.img_icon_header { width: 16px; height: 16px; vertical-align: middle; }
.img_icon_header .icon_sprite { width: 100%; height: 100%; object-fit: contain; }
/* Картинки в карточках (лавка, зверинец, ресурсы) и аватары над шкалой здоровья */
.left-img img,
.left img,
.img-banner-avatar img,
.clan_banner img { aspect-ratio: auto 1 / 1; height: auto; }
/* Смайлики в чатах */
.img-smile { min-height: 23px; }

/* Поддержка: отметка «прочитано» под своим сообщением */
.support-read{ display: block; margin: -2px 0 2px 18px; font-size: 0.75em; opacity: 0.7; }

/* Аватары в списках (Зал славы, воины войны): место под картинку есть до её загрузки, карточки не растут.
   Герои — портрет 3:4, кланы и братства — знамя 8:7; картинка другой пропорции вписывается без обрезки. */
.left-img-avatar img.avatar-hero,
.left-img-avatar img.avatar-flag {
    display: block;
    height: auto;
    object-fit: contain;
}
.left-img-avatar img.avatar-hero { aspect-ratio: 3 / 4; }
.left-img-avatar img.avatar-flag { aspect-ratio: 8 / 7; }
/* Баннер Зала славы 720×263: место точно под картинку, без сдвига на 2px после загрузки */
.img-banner img.banner-hall { aspect-ratio: 720 / 263; }

/* Знак GIPHY в окне стикеров: обязателен для ключа API, чёрная плашка для светлого фона */
.giphy-attribution{
    flex-basis: 100%;
    margin: 4px 0 0;
    text-align: center;
    line-height: 0;
}
.giphy-attribution img{
    width: 160px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 641 / 136;
}

/* Режимы в «Золоте»: карточка открывает окно режима, окно — как покупка помощника */
.mode-card-open{
    display: block;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.mode-card-image{
    width: 72px;
    height: 72px;
    object-fit: contain;
}
.mode-gift-card-btn{
    margin-top: 6px;
}
.mode-modal{
    max-height: 92vh;
    overflow-y: auto;
}
.mode-modal-scene{
    display: flex;
    justify-content: center;
    align-items: center;
}
.mode-modal-image{
    width: clamp(120px, 34vw, 160px);
    height: clamp(120px, 34vw, 160px);
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}
.mode-modal .promo-text_buyBattlePass{
    padding: 0 12px;
    text-align: center;
}
.mode-modal .benefit-icon_buyBattlePass .icon_modals{
    width: clamp(24px, 7vw, 32px);
    height: clamp(24px, 7vw, 32px);
    object-fit: contain;
    padding: 0;
}
.mode-modal-includes{
    margin: 10px 0 6px;
    font-weight: bold;
    font-size: clamp(11px, 2.8vw, 13px);
}
.mode-modal-active{
    color: #8fe388;
    font-weight: bold;
}
.mode-gift-btn{
    margin-top: 8px;
    background: linear-gradient(180deg, #6fa8dc 0%, #3d79b5 100%);
    border-bottom-color: #1e3a5f;
    color: #fff;
    font-size: clamp(14px, 4vw, 18px);
}

/* Логотип классической шапки: львы 20×24 по бокам, надпись 135×19, просвет 6px; шапка 41px (9 + 24 + 8). */
.header:has(> a > .header-logo) {
    padding-top: 9px;
    padding-bottom: 8px;
}
.header-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 24px;
    vertical-align: top;
}
.header-logo-lion {
    display: block;
    width: 20px;
    height: 24px;
    object-fit: contain;
}
.header-logo-title {
    display: block;
    width: auto;
    height: 19px;
    aspect-ratio: 448 / 63;
}
/* Надпись своя для каждого языка: высота общая, ширина по пропорциям картинки (место занято ещё до загрузки). */
.header-logo-title_en { aspect-ratio: 326 / 63; }
.header-logo-title_uk { aspect-ratio: 349 / 63; }
.header-logo-title_uz { aspect-ratio: 384 / 63; }
.header-logo-title_tr { aspect-ratio: 470 / 63; }
.header-logo-title_de { aspect-ratio: 407 / 63; }
.header-logo-title_es { aspect-ratio: 335 / 63; }
.header-logo-title_zh { aspect-ratio: 124 / 63; }
/* Тема «Герои»: тот же логотип в шапке 145×21 (размер прежнего логотипа), львы 15×18, надпись 105×15, просвет 5px. */
#header_mghero a {
    display: inline-block;
    vertical-align: top;
}
#header_mghero .header-logo {
    gap: 5px;
    height: 21px;
}
#header_mghero .header-logo-lion {
    width: 15px;
    height: 18px;
}
#header_mghero .header-logo-title {
    height: 15px;
}

/* Голосовое в старых чатах: плашка в цветах темы игры (как плашки кузницы), кнопка — акцент темы */
:root {
    --chat-voice-accent: #8b5a2b;
    --chat-voice-accent-hover: #a46c36;
    --chat-voice-fill: linear-gradient(90deg, #b8862f, #e6c36a);
}
html[data-theme="vikings"] {
    --chat-voice-accent: #c9853a;
    --chat-voice-accent-hover: #e09a4b;
    --chat-voice-fill: linear-gradient(90deg, #c9853a, #f7c079);
}
html[data-theme="heroes"] {
    --chat-voice-accent: #7a4a1c;
    --chat-voice-accent-hover: #93602c;
    --chat-voice-fill: linear-gradient(90deg, #9a6b2f, #d9b45a);
}
html[data-theme="normans"] {
    --chat-voice-accent: #007e72;
    --chat-voice-accent-hover: #00998a;
    --chat-voice-fill: linear-gradient(90deg, #007e72, #a1c7f0);
}
.chat-voice {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 280px;
    margin: 4px 0;
    padding: 6px 10px;
    box-sizing: border-box;
    color: var(--smith-chip-text);
    background: var(--smith-chip-bg);
    border: 1px solid var(--smith-chip-line);
    border-radius: 8px;
}
.chat-play {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0 0 0 2px;
    font-size: 11px;
    line-height: 1;
    color: #fff;
    background: var(--chat-voice-accent);
    border: 2px solid var(--smith-chip-line);
    border-radius: 50%;
    cursor: pointer;
}
/* ▶ визуально тяжелее слева — сдвиг на 2px; у паузы ❚❚ сдвига нет */
.chat-play-on, .nchat-play-on { padding-left: 0; }
.chat-play:hover { background: var(--chat-voice-accent-hover); }
.chat-play:focus-visible { outline: 2px solid var(--smith-chip-line); outline-offset: 2px; }
.chat-voice-main { flex: 1; min-width: 0; }
.chat-voice-time {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}
.chat-voice-track {
    position: relative;
    height: 8px;
    overflow: hidden;
    background: var(--smith-chip-soft);
    border: 1px solid var(--smith-chip-line);
    border-radius: 4px;
    cursor: pointer;
}
.chat-voice-fill {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    background: var(--chat-voice-fill);
}
/* Плеер голосового собран из span (строка старого чата лежит в <p>): полоса — блок с высотой */
.chat-voice-main, .nchat-voice-main, .chat-voice-track, .nchat-voice-track { display: block; }

/* Игра на площадке (GamePush): страница не тянется и не прокручивает страницу площадки вокруг фрейма,
   нет горизонтальной прокрутки и увеличения двойным касанием. Класс ставит src/shared/platform/platform.ts. */
html.gp-platform,
html.gp-platform body {
    overscroll-behavior: none;
    overflow-x: hidden;
}
html.gp-platform body {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Крестик удаления сообщения у модераторов и админа: без фона, цвет текста темы, при наведении — акцент темы */
.remove-item {
    padding: 0 2px;
    font-size: 11px;
    line-height: 1;
    color: var(--smith-chip-text);
    background: none;
    border: none;
    cursor: pointer;
    vertical-align: middle;
}
.remove-item:hover { color: var(--chat-voice-accent-hover); }
.remove-item:focus-visible { outline: 1px solid var(--smith-chip-line); outline-offset: 1px; }

/* Анкета обмена — отдельная страница на всю ширину, как в старой версии */
body.exchange-wide {
  max-width: none !important;
  background: #2c1a0f;
}
.exchange-site {
  max-width: 1100px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: normal;
}
.exchange-site .warning-box,
.exchange-site .bonus-box { text-align: left; }
.exchange-site-head {
  text-align: center;
  padding: 9px 0 8px;
  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%);
}