/*
 * Основные стили игры.
 *
 * Навигация: разделы пронумерованы ниже; поиск по номеру или названию.
 * Свойства: переменные → позиционирование → геометрия → текст → оформление
 * → взаимодействие → анимации. Внутри групп порядок объявлений сохранён.
 * Порядок селекторов и медиазапросов сохраняет исходный каскад.
 * Повторные селекторы с разными значениями могут быть переопределениями.
 * Префиксы браузеров и запасные значения оставлены для совместимости.
 *
 * 01. Основные параметры страницы
 * 02. Состояние загрузки и доступность
 * 03. Шапка и заголовок
 * 04. Панель смайлов
 * 05. Рамки и цветные контейнеры
 * 06. Сезонные фоны главной страницы
 * 07. Эффекты урона, перемещения и навыков
 * 08. Базовые элементы и цвета
 * 09. Мобильное меню
 * 10. Поля ввода и индикаторы прогресса
 * 11. Размеры изображений и боевые портреты
 * 12. Вспомогательные размеры
 * 13. Ранги клана и промоблоки
 * 14. Модальные окна и всплывающие эффекты
 * 15. Походы и выбор раздела
 * 16. Основная область, таблицы и оформление профиля
 * 17. Ссылки и цветные кнопки
 * 18. Анимация загрузки: куб
 * 19. Иконки характеристик, навыков и предметов
 * 20. Кнопки арены
 * 21. Цвета текста, выравнивание и вспомогательные классы
 * 22. Декоративные заголовки и информация о питомце
 * 23. Полосы прогресса и формы входа
 * 24. Анимации и элементы интерфейса
 * 25. Опыт и сообщения
 * 26. Карточки персонажей и снаряжения
 * 27. Навигация и дополнительные размеры
 * 28. Анимации и фоны локаций
 * 29. Инструменты, улучшение и создание предметов
 * 30. Анимации кнопок и декоративные эффекты
 * 31. Меню, рамки редкости и навыков
 * 32. Общие компоненты и типографика
 * 33. Дополнительные отступы
 * 34. Сообщения чата и почты
 * 35. Результат улучшения и итоговые стили предметов
 * 36. Итоговые стили меню и полей ввода
 * 37. Вспомогательные отступы: итоговые значения
 * 38. Кнопки и интерактивные состояния
 * 39. Уведомления и предупреждения
 * 40. Подсветка врагов и привилегии
 * 41. Декоративные анимации
 * 42. Ползунок аукциона и платёжные наборы
 * 43. Сетка кнопок
 * 44. Интерфейс чата
 * 45. Полосы прокрутки и выбор цвета
 * 46. Журнал боя
 * 47. Левое меню
 * 48. Эмблемы рангов кампании
 * 49. Фоны обликов и состояние боя
 * 50. Банк: меню, предложения и покупка
 * 51. Колесо наград
 * 52. Эффекты попаданий
 * 53. Магазин обликов и компактное меню
 * 54. Сезонный пропуск и задания
 */

/* 01. Основные параметры страницы
   ==================================================================== */

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 11px;
    color: #ffffff;
    background-color: #000000;
    background: url(/img/header10.png?iv=1793203788-2105762) no-repeat 50% 0% #000 fixed;
}

@media (max-width: 500px) {
    html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-size: 11px;
        color: #ffffff;
        background: #000000;
    }
}

body {
    display: block;
    margin: 0px;
    min-height: 100%;
}

@media (max-width: 450px) {
    body {
        display: block;
        margin: 0px;
        min-height: 100%;
        background: #000000;
    }
}

/* 02. Состояние загрузки и доступность
   ==================================================================== */

:root {
    --loading-delay: 3s;
    /* задержка показа */
    --loading-fade: .2s;
    /* длительность появления */
}

/* контент “тухнет” только после задержки */

body.loading .main-content {
    animation: dg-dim 0s var(--loading-delay) forwards;
}

@keyframes dg-dim {
    to {
        opacity: .4;
        filter: blur(1px);
        pointer-events: none;
        /* блокируем клики только после задержки */
        user-select: none;
    }
}

/* полупрозрачная подложка — тоже только после задержки */

body.loading::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    z-index: 9998;
    /* появится после задержки и плавно проявится */
    animation: dg-overlay var(--loading-fade) ease var(--loading-delay) forwards;
}

@keyframes dg-overlay {
    0% {
        opacity: 0;
        visibility: visible;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

/* спиннер по центру — появится после задержки и начнёт крутиться */

body.loading::after {
    content: "";
    position: fixed;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
    /* 1) появление после задержки  2) кручение (тоже после задержки) */
    animation: dg-spinner-in var(--loading-fade) ease var(--loading-delay) forwards,
    dg-spin .8s linear infinite;
    animation-delay: var(--loading-delay), var(--loading-delay);
}

@keyframes dg-spinner-in {
    from {
        opacity: 0;
        visibility: visible;
    }

    to {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes dg-spin {
    to {
        transform: rotate(360deg);
    }
}

/* уважение к reduce motion */

@media (prefers-reduced-motion: reduce) {
    body.loading .main-content {
        filter: none;
    }

    body.loading::after {
        animation: dg-spinner-in .01s linear var(--loading-delay) forwards;
    }
}

/* 03. Шапка и заголовок
   ==================================================================== */

.header {
    /*padding-top: 3px;*/
    background-image: linear-gradient(to right, #0a1219 15%, #091a2b 30%, #091b2c 50%, #091a2b 70%, #0a1219 85%);
    /*padding-left: 5px;*/
    padding-right: 1px;
    padding-bottom: 2px;
    font-size: 11px;
}

.wrapper {
    font-size: 11px;
}

.wrapper_null {
    padding: 5px 10px;
    color: #ffffff;
    font-size: 12px;
    text-shadow: 1px 1px 0 black;
    text-align: left;
}

h1 {
    padding-left: 50px;
    padding-right: 50px;
    font-family: Times New Roman;
    font-size: 22px;
    color: #d6b885;
    text-align: center;
    font-weight: 100;
    line-height: 23px;
}

/* 04. Панель смайлов
   ==================================================================== */

.emoji-btn {
    border: none;
    padding: 3px;
    margin: 0;
    font-size: 16px;
    line-height: 1;
    background: none;
    cursor: pointer;
    appearance: none;
}

/* Смайлы */

#emoji-panel {
    display: none;
    border: 1px solid #13192f;
    width: 100%;
    text-align: center;
}

.emoji-btn:hover {
    background: #ddd;
}

#toggle-emoji-panel {
    margin-left: 5px;
    font-size: 20px;
    cursor: pointer;
}

#message {
    width: 300px;
    height: 80px;
}

/* 05. Рамки и цветные контейнеры
   ==================================================================== */

.border {
    border: 1px solid #13192f;
    border-radius: 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.border-bc-brown {
    border: 1px solid #54402f;
    border-radius: 7px;
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    background-color: rgba(22,16,12, .6);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .5);
}

.border-bc-grey {
    border: 1px solid #343b47;
    border-radius: 7px;
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    background-color: rgba(9,13,19, .6);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .5);
    margin: 8px;
}

.border-bc-green {
    border: 1px solid #36533b;
    border-radius: 7px;
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    background-color: rgba(8,19,13, .6);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .5);
    margin: 8px;
}

.border-bc-blue {
    border: 1px solid #30435f;
    border-radius: 7px;
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    background-color: rgba(4,12,24, .6);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .5);
    margin: 8px;
}

.border-bc-purple {
    border: 1px solid #503863;
    border-radius: 7px;
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    background-color: rgba(18,10,28, .6);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .5);
    margin: 8px;
}

.border-bc-orange {
    border: 1px solid #65452e;
    border-radius: 7px;
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    background-color: rgba(24,15,9, .6);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .5);
    margin: 8px;
}

.border-bc-red {
    border: 1px solid #603737;
    border-radius: 7px;
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    background-color: rgba(24,9,12, .6);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .5);
    margin: 8px;
}

.border-r15-blue {
    border-radius: 15px;
    box-shadow: 0 0 0 1px #13192f, 0 0 30px #2f4585;
}

/* 06. Сезонные фоны главной страницы
   ==================================================================== */

.index_menu_new_year {
    width: 100%;
    height: auto;
    min-height: 800px;
    background-image: url(/images/index_main_new_year.png?iv=1793203771-455677);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: black;
    background-size: contain;
}

.index_menu_classic {
    width: 100%;
    height: auto;
    min-height: 800px;
    background-image: url(/images/index_main.png?iv=1793203771-368416);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: black;
    background-size: contain;
}

.index_menu_ny2026 {
    width: 100%;
    height: auto;
    min-height: 800px;
    background-image: url(/images/index_main_new_year2026.png?iv=1793203771-506020);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: black;
    background-size: contain;
}

.index_main_spring {
    width: 100%;
    height: auto;
    min-height: 800px;
    background-image: url(/images/index_main_spring.png?iv=1793203771-625559);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: black;
    background-size: contain;
}

.index_main_dark {
    width: 100%;
    height: auto;
    min-height: 800px;
    background-image: url(/images/index_main_dark.png?iv=1793203771-607821);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: black;
    background-size: contain;
}

.index_menu_welcome {
    width: 100%;
    height: auto;
    min-height: 800px;
    background-image: url(/images/index_login.png?iv=1793203771-2043338);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: black;
    background-size: contain;
}

/* NEW DIS */

/* 07. Эффекты урона, перемещения и навыков
   ==================================================================== */

@keyframes damage-float {
    0% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0;
        transform: translate(var(--offset-x, 0px), -60px);
    }
}

#damage {
    --offset-x: 0px;
    position: relative;
    z-index: 1000;
    display: inline-block;
    font-weight: bold;
    pointer-events: none;
    animation: damage-float 1.9s ease-out forwards;
}

@keyframes damage-float-me {
    0% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0;
        transform: translate(var(--offset-x, 0px), -90px);
    }
}

#damage_to_me {
    --offset-x: 0px;
    position: relative;
    z-index: 1000;
    display: inline-block;
    font-weight: bold;
    pointer-events: none;
    animation: damage-float-me 3s ease-out forwards;
}

@keyframes damage-float-pet {
    0% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0.5;
        transform: translate(var(--offset-x, 0px), -90px);
    }
}

#damage_to_pet {
    --offset-x: 0px;
    position: relative;
    z-index: 1000;
    display: inline-block;
    font-weight: bold;
    pointer-events: none;
    animation: damage-float-pet 3s ease-out forwards;
}

.track-container {
    position: relative;
    width: 100%;
    height: 100px;
    margin-top: 10px;
    overflow: hidden;
    /* добавить */
}

.footprint {
    position: absolute;
    width: 34px;
    height: 42px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* <-- ключевое */
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    animation: walk 2s ease-in-out forwards;
}

@keyframes walk {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(30px) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1) translateY(0) rotate(3deg);
    }

    100% {
        opacity: 0;
        transform: scale(1.2) translateY(-30px) rotate(-3deg);
    }
}

.timer-text {
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    color: #d0cfc1;
    text-shadow: 0 0 5px #000;
}

.fwb {
    font-weight: bold;
}

/* Animations */

.skill-button {
    display: inline-block;
    border-radius: 12px;
    transition: box-shadow 0.2s ease-out;
    /* Для эффекта glow лучше иметь светлый фон или тень */
}

@keyframes flash-skill {
    0% {
        box-shadow: 0 0 0px rgba(255,255,255,0);
    }

    50% {
        box-shadow: 0 0 15px 6px rgba(255,255,180,0.9);
    }

    100% {
        box-shadow: 0 0 0px rgba(255,255,255,0);
    }
}

.skill-button.flash {
    animation: flash-skill 0.6s ease-out;
}

/* 08. Базовые элементы и цвета
   ==================================================================== */

.center {
    text-align: center;
}

ul,li {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1 {
    padding: 2px 0;
    font-size: 120%;
    font-weight: bold;
    color: #FFFFFF;
}

h2 {
    padding: 2px 0;
    font-size: 110%;
    font-weight: bold;
    color: #FFFFFF;
}

em {
    font-style: normal;
}

div.main {
    border: 1px solid #27383b;
    padding: 0px;
    border-radius: 0px;
    background: rgb(36, 36, 40);
}

span.gold {
    color: #F2C234;
}

div.gold {
    color: #F2C234;
}

.gold {
    color: #F2C234;
}

span.almaz {
    color: #1689DC;
}

span.grey {
    color: grey;
}

span.green {
    color: #F2C234;
}

span.blue {
    color: #1689DC;
}

span.violet {
    color: violet;
}

span.orange {
    color: orange;
}

span.lime {
    color: lime;
}

.white {
    color: white;
}

img {
    vertical-align: middle;
    font-size: 12px;
}

hr {
    height: 3px;
    width: 100%;
    background: url(/img/delta2.png?iv=1793203787-2410) center no-repeat;
    border: 0px;
}

a {
    text-decoration: none;
    color: #fff;
}

a:hover {
    color: #55a0fd;
}

a.link {
    display: block;
    color: #55a0fd;
}

form {
    padding: 0;
    margin: 0;
}

table {
    width: 100%;
    /*border-collapse:collapse;*/
}

span {
    text-decoration: none;
}

/*Стили кнопки*/

/* 09. Мобильное меню
   ==================================================================== */

.hamburger {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border: 1px solid #2d4991;
    padding: 5px;
    border-radius: 8px;
    background: #101930;
    cursor: pointer;
}

.btn__hamb {
    position: relative;
    display: block;
    width: 100%;
    height: 2px;
    background: #2d4991;
    cursor: pointer;
}

.btn__hamb div {
    width: 100%;
    height: 100%;
}

.btn__hamb:before, .btn__hamb:after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2d4991;
    content: "";
}

.btn__hamb:before {
    top: -8px;
}

.btn__hamb:after {
    top: 8px;
}

/*Стили мобильного меню*/

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: none;
    height: 100%;
    width: 100%;
}

@media (max-width: 1199px) {
    .mobile-menu {
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .mobile-menu {
        width: 25%;
    }
}

/*получпрозрачный фон*/

.mobile-menu .mm__bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.8);
}

@media (min-width: 1200px) {
    .mobile-menu .mm__bg {
        display: none;
    }
}

/*Контейнер мобильного меню, именно он выезжает слева*/

.mobile-menu .mm__wrapper {
    position: relative;
    z-index: 200;
    overflow-y: auto;
    width: 60%;
    max-width: 350px;
    height: 100%;
    visibility: hidden;
    background-image: url(/img/background/n_mag.png?iv=1793203792-231601);
    background-repeat: no-repeat;
    background-color: #000;
    touch-action: auto;
    -ms-touch-action: auto;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

@media (min-width: 768px) {
    .mobile-menu .mm__wrapper {
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .mobile-menu .mm__wrapper {
        width: 100%;
    }
}

/*Стили логотипа в меню (опционально)*/

.mobile-menu .h__logo {
    padding-left: 40px;
    margin-left: 20px;
    margin-top: 15px;
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    line-height: 1.25;
}

/* Активное состояние меню */

.mobile-menu.active .mm__wrapper {
    visibility: visible;
    transform: translateX(0);
}

/*Стили крестика закрытия меню*/

.mm__header .close-btn {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 15px;
    margin-top: 15px;
}

.close-btn {
    position: relative;
    width: 20px;
    height: 20px;
    cursor: pointer;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close-btn:before {
    left: 8px;
    top: 0;
    width: 2px;
    height: 18px;
}

.close-btn:after {
    top: 8px;
    left: 0;
    height: 2px;
    width: 18px;
}

.close-btn:before, .close-btn:after {
    position: absolute;
    background: #000;
    content: "";
}

.close-btn--red:before, .close-btn--red:after {
    background: #000000;
}

/* 10. Поля ввода и индикаторы прогресса
   ==================================================================== */

.input-container {
    position: relative;
    width: 300px;
}

@keyframes shake {
    10%, 90% {
        transform: translateX(-0.5px);
    }

    20%, 80% {
        transform: translateX(1px);
    }

    30%, 50%, 70% {
        transform: translateX(-2px);
    }

    40%, 60% {
        transform: translateX(2px);
    }
}

.anim_shake {
    animation: shake 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) both;
}

.container-green {
    width: 99%;
    border-radius: 20px 20px;
    border: 2px solid #031e0a;
    color: #BEBEBE;
    text-shadow: 1px 1px 1px black;
    background-color: #ddd;
    background-color: #0b1a22;
}

.progress-bar-green {
    height: 15px;
    border-radius: 20px 20px;
    line-height: 15px;
    color: white;
    font-size: 11px;
    color: #d0cfc1;
    background-image: linear-gradient(to right, #030a04 15%, #0b230e 30%, #0b230e 50%, #1f4b24 70%, #23612a 85%);
}

.container-blue {
    width: 99%;
    border-radius: 20px 20px;
    border: 1px solid #25344b;
    text-shadow: 1px 1px 1px black;
    background-color: #0b1a22;
}

.progress-bar-blue {
    min-width: 25%;
    height: 15px;
    border-radius: 20px 20px;
    line-height: 15px;
    font-size: 11px;
    color: #d0cfc1;
    background-image: linear-gradient(to right, #03050a 15%, #0b1223 30%, #0b1523 50%, #19335f 70%, #12247d 85%);
}

.container-orange {
    width: 99%;
    border-radius: 20px 20px;
    border: 1px solid #954204;
    text-shadow: 1px 1px 1px black;
    background-color: #180c03;
}

.progress-bar-orange {
    min-width: 25%;
    height: 15px;
    border-radius: 20px 20px;
    line-height: 15px;
    font-size: 11px;
    color: #d0cfc1;
    background-image: linear-gradient(to right, #180c03 15%, #211004 30%, #391a04 50%, #431f05 70%, #954204 85%);
}

.progress-bar-purple {
    min-width: 25%;
    height: 15px;
    border-radius: 20px 20px;
    line-height: 15px;
    font-size: 11px;
    color: #d0cfc1;
    background-image: linear-gradient(to right, #070016 15%, #110039 30%, #260c63 50%, #1e0e47 70%, #391e7a 85%);
}

.container-purple {
    width: 99%;
    border-radius: 20px 20px;
    border: 1px solid #391e7a;
    text-shadow: 1px 1px 1px black;
    background-color: #0e012d7a;
}

.container-red {
    width: 99%;
    border-radius: 20px 20px;
    border: 1px solid #410f0f;
    text-shadow: 1px 1px 1px black;
    background-color: #100b22c7;
}

.progress-bar-red {
    min-width: 25%;
    height: 15px;
    border-radius: 20px 20px;
    line-height: 15px;
    font-size: 11px;
    color: #a1a1a1;
    background-image: linear-gradient(to right, #0e0000 15%, #330000 30%, #390000 50%, #430000 70%, #430000 85%);
}

/* 11. Размеры изображений и боевые портреты
   ==================================================================== */

.w32px {
    width: 32px;
    height: 32px;
}

.w64 {
    width: 64px;
    height: 64px;
    min-height: 64px;
    min-width: 64px;
}

.w80 {
    width: 80px;
    height: 80px;
    min-height: 80px;
    min-width: 80px;
}

.wh70 {
    width: 70px;
    height: 70px;
    min-height: 70px;
    min-width: 70px;
}

.wh80 {
    width: 80px;
    height: 80px;
    min-height: 80px;
    min-width: 80px;
}

.wh150px {
    width: 150px;
    height: 150px;
}

.h40 {
    height: 40px;
}

.h54 {
    height: 54px;
    min-height: 54px;
    min-width: 54px;
}

.h44 {
    height: 44px;
}

.h64 {
    height: 64px;
    min-height: 64px;
    min-width: 64px;
}

.wh32{
    height: 32px;
    width:32px;
    min-height:32px;
    min-width:32px;
}

/* Battle */

.enemy-fon {
    width: 120px;
    min-width: 120px;
    min-height: 120px;
    max-width: 120px;
    max-height: 120px;
    box-shadow: 0 0 0 1px #790909, 0 0 13px #fb0606;
    background: #000000cf;
}

.enemy-fon-80 {
    width: 80px;
    min-width: 80px;
    min-height: 80px;
    box-shadow: 0 0 0 2px #790909, 0 0 13px #fb0606;
    background: #0000006e;
}

.enemy-fon-80_green {
    width: 80px;
    min-width: 80px;
    min-height: 80px;
    background: radial-gradient(ellipse at left,#313131 0%,#000 100%);
    box-shadow: 0 0 0 1px #0f7909, 0 0 13px #06fb0ec7;
    background: #f0f8ff00;
}

.enemy-fon-80_grey {
    width: 80px;
    min-width: 80px;
    min-height: 80px;
    background: radial-gradient(ellipse at left,#313131 0%,#000 100%);
    box-shadow: 0 0 0 1px #696969, 0 0 13px #7f7f7fc7;
    background: #f0f8ff00;
}

.profile-fon {
    width: 120px;
    min-width: 120px;
    min-height: 120px;
    max-width: 120px;
    max-height: 120px;
    box-shadow: 0 0 0 1px #4461c9, 0 0 13px #4461c9;
    background: #00000099;
}

.profile-fon-80 {
    width: 80px;
    min-width: 80px;
    min-height: 80px;
    background: radial-gradient(ellipse at left,#313131 0%,#000 100%);
    box-shadow: 0 0 0 1px #094579, 0 0 13px #064dfb;
    background: #f0f8ff00;
}

.mini-skill {
    border-radius: 10px 10px;
    border: 1px solid #4461c9b3;
}

.mini-skill-5 {
    border-radius: 10px 10px;
    border: 1px solid #c94444b3;
}

.mini-skill-1 {
    border-radius: 10px 10px;
    border: 1px solid #55c9448f;
}

.mini-skill-0 {
    border-radius: 10px 10px;
    border: 1px solid #4461c9b3;
}

.text-yel-l {color: #FDFF2F}

.pab-l0-t0 {
    position: absolute;
    left: 0;
    top: 0
}

.pab-l0-b0 {
    position: absolute;
    left: 0;
    bottom: 0
}

.img35 {
    display: block;
    width: 45px;
    height: 45px;
    text-align: right;
    font-size: 0;
    background-repeat: no-repeat;
}

.img35 .inf {
    display: inline-block;
    margin: 1px;
    padding: 2px 3px;
    color: white;
    font-size: x-small;
    font-weight: bold;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: rgba(0,0,0,0.5);
}

.brd35 {
    display: inline-block;
    width: 45px;
    height: 45px;
    padding: 1px;
    text-decoration: none !important;
    font-size: 0;
    background-size: 100%;
}
/* Width */

/* 12. Вспомогательные размеры
   ==================================================================== */

.w0 {
    width: 0%;
}

.w2 {
    width: 2%;
}

.w5 {
    width: 5%;
}

.w10 {
    width: 10%;
}

.w15 {
    width: 15%;
}

.w20 {
    width: 20%;
}

.w23 {
    width: 23%;
}

.w24 {
    width: 24%;
}

.w30 {
    width: 30%;
}

.w32 {
    width: 32%;
}

.w35 {
    width: 35%;
}

.w40 {
    width: 40%;
}

.w45 {
    width: 45%;
}

.w48 {
    width: 48%;
}

.w49 {
    width: 49%;
}

.w50 {
    width: 50%;
}

.w60 {
    width: 60%;
}

.w70 {
    width: 70%;
}

.w80 {
    width: 80%;
}

.w85 {
    width: 85%;
}

.w90 {
    width: 90%;
}

.w95 {
    width: 95%;
}

.w96 {
    width: 96%;
}

.w97 {
    width: 97%;
}

.w100 {
    width: 100%;
}

.w40px {
    width: 40px;
}

.w45px {
    width: 45px;
}

.w50px {
    width: 50px;
}

.h30px {
    height: 30px;
}

/* 2023 */

/* CLAN RANK */

/* 13. Ранги клана и промоблоки
   ==================================================================== */

.clan-rank {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
}

.clan-rank img {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 32px;
    height: 32px;
    opacity: 0.8;
    transform: translate(-50%, -55%);
}

.clan-rank span {
    position: relative;
    z-index: 2;
    bottom: -11px;
    font-size: 10px;
    text-shadow: 0 1px 0 #000, 0 0 4px #000, 0 0 8px #000;
}

/* index promo */

.promo-text {
    position: relative;
    top: -62px;
    height: 0px;
    text-align: center;
    white-space: nowrap;
}

.promo_inner_content {
    position: relative;
    height: 100%;
}

.promo-link {
    top: 20px;
    position: relative;
    color: #d9dbe3;
    font-size: 18px;
    font-family: Munchkin;
}

.col-xs-12 {
    width: 100%;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.sale_inner_content {
    position: relative;
    /* height: 54px; */
    /* max-width: 460px; */
    /* border-radius: 10px; */
    /* margin-left: 5px; */
    /* margin-right: 5px; */
    border-radius: 15px;
    border: 1px solid #2e405b;
    max-height: 62px;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 5px;
    box-shadow: 0 0 0 0px #1f1e7ae8, 0 0 10px #254575;
}

.sale_inner_img {
    width: 100%;
    border-radius: 15px;
    background-position: top;
    background-repeat: no-repeat;
}

.sale_inner_img_1 {
    width: 100%;
    border-radius: 15px;
    height: auto;
    min-height: 62px;
    background-image: url(/img/action_1.png?iv=1793203787-66326);
    background-position: top;
    background-repeat: no-repeat;
}
.sale_inner_img_2 {
    width: 100%;
    border-radius: 15px;
    height: auto;
    min-height: 62px;
    background-image: url(/img/action_2.png?iv=1793203787-60176);
    background-position: top;
    background-repeat: no-repeat;
}
.sale_inner_img_3 {
    width: 100%;
    border-radius: 15px;
    height: auto;
    min-height: 62px;
    background-image: url(/img/action_3.png?iv=1793203787-60913);
    background-position: top;
    background-repeat: no-repeat;
}
.sale_inner_img_4 {
    width: 100%;
    border-radius: 15px;
    height: auto;
    min-height: 62px;
    background-image: url(/img/action_4.png?iv=1793203787-60088);
    background-position: top;
    background-repeat: no-repeat;
}
.sale_inner_img_5 {
    width: 100%;
    border-radius: 15px;
    height: auto;
    min-height: 62px;
    background-image: url(/img/action_5.png?iv=1793203787-60318);
    background-position: top;
    background-repeat: no-repeat;
}
.sale_inner_img_6 {
    width: 100%;
    border-radius: 15px;
    height: auto;
    min-height: 62px;
    background-image: url(/img/action_6.png?iv=1793203787-61021);
    background-position: top;
    background-repeat: no-repeat;
}
.sale_inner_img_7 {
    width: 100%;
    border-radius: 15px;
    height: auto;
    min-height: 62px;
    background-image: url(/img/action_7.png?iv=1793203787-59024);
    background-position: top;
    background-repeat: no-repeat;
}
.sale_inner_img_8 {
    width: 100%;
    border-radius: 15px;
    height: auto;
    min-height: 62px;
    background-image: url(/img/action_8.png?iv=1793203787-62677);
    background-position: top;
    background-repeat: no-repeat;
}
.sale_inner_img_9 {
    width: 100%;
    border-radius: 15px;
    height: auto;
    min-height: 62px;
    background-image: url(/img/action_9.png?iv=1793203787-55087);
    background-position: top;
    background-repeat: no-repeat;
}
.sale_inner_img_10 {
    width: 100%;
    border-radius: 15px;
    height: auto;
    min-height: 62px;
    background-image: url(/img/action_10.png?iv=1793203787-63379);
    background-position: top;
    background-repeat: no-repeat;
}

.sale-text {
    position: relative;
    /*left: 5%;*/
    height: 100%;
    top: -68px;
    text-align: center;
    white-space: nowrap;
}

.sale-link {
    top: 21px;
    position: relative;
    padding-right: 10px;
    color: #d0d5ff;
    font-size: 18px;
    font-family: Munchkin;
    text-align: right;
}

.sale-link2 {
    top: 22px;
    position: relative;
    padding-right: 10px;
    color: #9aa6bdc7;
    text-align: right;
    font-size: 10px;
}

.sale-arrow, .sale-plus {
    position: absolute;
    right: 1%;
    top: 2px;
}

/* item push */

/* Стили всплывающего окна по-умолчанию */

/* 14. Модальные окна и всплывающие эффекты
   ==================================================================== */

.modal {
    position: fixed;
    /* фиксированное положение */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    /* фон */
    z-index: 1050;
    opacity: 0;
    /* по умолчанию модальное окно прозрачно */
    -webkit-transition: opacity 200ms ease-in;
    -moz-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in;
    /* анимация перехода */
    pointer-events: none;
    /* элемент невидим для событий мыши */
    margin: 0;
    padding: 0;
}

/* При отображении модального окно */

.modal:target {
    opacity: 1;
    /* делаем окно видимым */
    pointer-events: auto;
    /* элемент видим для событий мыши */
    overflow-y: auto;
    /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}

/* ширина модального окна и его отступы от экрана */

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}

@media (min-width: 400px) {
    .modal-dialog {
        max-width: 410px;
        margin: 30px auto;
        border: 1px solid #020c29;
        box-shadow: 0 0 0 1px #172c7900, 0 0 13px #142783;
    }
}

/* Стили для блока с контентом окна */

.modal-content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: .3rem;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    outline: 0;
    background-image: linear-gradient(to right, #04060a 15%, #090e1b 30%, #121b34 50%, #090e1b 70%, #04060a 85%);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
}

@media (min-width: 400px) {
    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
        box-shadow: 0 5px 15px rgba(0,0,0,.5);
    }
}

/* Стили заголовка окна */

.modal-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 5px;
    -webkit-box-align: center;
    -webkit-box-pack: justify;
}

.modal-title {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
}

/* Стили кнопки "х" ("Закрыть")  */

.close {
    float: right;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    text-decoration: none;
    opacity: .5;
}

/* Стили для закрывающей кнопки в фокусе или наведении */

.close:focus, .close:hover {
    color: #000;
    text-decoration: none;
    opacity: .75;
    cursor: pointer;
}

/* Стили блока основного содержимого окна */

.modal-body {
    position: relative;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding-left: 5px;
    padding-right: 5px;
    overflow: auto;
    -webkit-box-flex: 1;
}

/* push */

.popupnew {
    position: absolute;
    z-index: 11000;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background: rgba(0,0,0,.75);
}

.dungpush {
    -webkit-animation: 1.8s infinite dungpush;
    animation: 1.8s infinite dungpush;
}

@keyframes dungpush {
    100%,50% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }
}

.anim_root {
    -webkit-animation: 1.8s linear infinite anim_root;
    animation: 1.8s linear infinite anim_root;
}

@-webkit-keyframes anim_root {
    50% {
        -webkit-filter: drop-shadow(0px 0px 1px #000);
        filter: drop-shadow(0px 0px 1px #000);
    }
}

@keyframes anim_root {
    50% {
        -webkit-filter: drop-shadow(0px 0px 1px #000);
        filter: drop-shadow(0px 0px 1px #000);
    }
}

/* Hike */

/* 15. Походы и выбор раздела
   ==================================================================== */

.hike-reward {
    position: absolute;
    right: 0;
    z-index: 10;
    padding: 3px 4px;
    max-width: 100%;
    border-radius: 0px 15px 0px 10px;
    width: max-content;
    white-space: nowrap;
    text-align: right;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.58);
}

.hike-border-green {
    border-radius: 15px;
    border: 1px solid #1c530cbf;
    min-width: 100px;
    box-shadow: 0 0 0 0px #499d3200, 0 0 30px #539f3e8a;
}

.hike-border-green:hover {
    transform: scale(1.1);
    transition: all 0.2s ease-in-out;
}

.hike-border-blue {
    border-radius: 15px;
    border: 1px solid #1a4593b8;
    min-width: 100px;
    box-shadow: 0 0 0 0px #499d3200, 0 0 30px #384bd58a;
}

.hike-border-blue:hover {
    transform: scale(1.1);
    transition: all 0.2s ease-in-out;
}

.button-hike-blue {
    padding: 5px 0px 5px 3px;
    min-height: 30px;
    border-radius: 0px 0px 15px 15px;
    border-top: 1px solid #1147a9b5;
    color: #b4c9cf;
    font-size: 12px;
    background-image: linear-gradient(to right, #051333b5 15%, #0c296bb5 30%, #043eabb5 50%, #0c296bb5 70%, #051333b5 85%);
}

.button-hike-green {
    padding: 5px 0px 5px 3px;
    min-height: 30px;
    border-radius: 0px 0px 15px 15px;
    border-top: 1px solid #1c530cd6;
    color: #b4c9cf;
    font-size: 12px;
    background-image: linear-gradient(to right, #1033066e 15%, #10330694 30%, #1c530c9e 50%, #10330694 70%, #1033066e 85%);
}

.hike-img {
    border-radius: 15px 15px 0px 0px;
    min-height: 100px;
    min-width: 100px;
    width: 100%;
}

.button-new-timer:hover {
    color: #98ddf1;
    background-image: linear-gradient(to right, #080b1c 15%, #151e3f 30%, #273879 50%, #151e3f 70%, #080b1c 85%);
}

.main_left_select {
    width: 20px;
    background-image: url(/images/main_left_select.png?iv=1793203772-1611);
    background-size: cover;
}

/* NEW VERSION 2022 */

/* 16. Основная область, таблицы и оформление профиля
   ==================================================================== */

.main-content {
    min-width: 240px;
    max-width: 430px;
    margin: 0 auto;
    font-family: Verdana;
    font-size: 11px;
    background-color: #000000;
}

.foot-content {
    min-width: 240px;
    max-width: 430px;
    margin: 0 auto;
    font-family: Verdana;
    font-size: 11px;
    background-color: #000000;
}

table {
    display: table;
    border-collapse: unset;
    box-sizing: border-box;
    border-spacing: 2px;
    border-color: grey;
    text-indent: unset;
    white-space: unset;
    line-height: unset;
    font-weight: unset;
    font-size: inherit;
    font-style: inherit;
    font-size: 11px;
    color: -internal-quirk-inherit;
    text-align: start;
    font-variant: unset;
}

table[border] {
    border: 1px solid #13192f;
}

table[border] th, table[border] td {
    border: 1px solid #0d111e;
}

.backgrey-l {
    background-color: #0000008a;
}

.backten10 {
    background-color: #00000025;
}

.backten20 {
    background-color: #00000050;
}

.backten35 {
    background-color: #00000070;
}

.backten50 {
    background-color: #00000082;
}

.backten80 {
    background-color: #00000080;
}

.backten90 {
    background-color: #000000a1;
}

.backten92 {
    background-color: #000000c4;
}

.backten95 {
    background-color: #000000e6;
}

.backred50 {
    background-color: #2300007d;
}

.overmay-back-blue {
    background-color: #000000;
    background-image: linear-gradient(to right, #000104 15%, #030407 30%, #080c17 50%, #030407 70%, #000104 85%);
}

.overmay-back-black {
    background-color: #000000;
    background-image: linear-gradient(to right, #000000 15%, #000000 30%, #000000 50%, #000000 70%, #000000 85%);
}

.round {
    border-radius: 120px;
    box-shadow: 0 0 0 1px black, 0 0 13px #333;
}

/* user skin */

.user-skin-1 {
    box-shadow: 0 0 0 1px #194367, 0 0 10px #4d73ce;
}

.user-skin-2 {
    box-shadow: 0 0 0 1px #194367, 0 0 10px #4d73ce;
}

.user-skin-3 {
    box-shadow: 0 0 0 1px #541895, 0 0 10px #541895;
}

.user-skin-4 {
    box-shadow: 0 0 0 1px #8b652c, 0 0 10px #b1520f;
}

.user-skin-5 {
    box-shadow: 0 0 0 1px #601010, 0 0 10px #a91515;
}

.user-skin-1-full {
    box-shadow: 0 0 0 1px #194367, 0 0 30px #4d73ce;
}

.user-skin-2-full {
    box-shadow: 0 0 0 1px #194367, 0 0 30px #4d73ce;
}

.user-skin-3-full {
    box-shadow: 0 0 0 1px #541895, 0 0 30px #541895;
}

.user-skin-4-full {
    box-shadow: 0 0 0 1px #8b652c, 0 0 30px #b1520f;
}

.user-skin-5-full {
    box-shadow: 0 0 0 1px #601010, 0 0 30px #a91515;
}

/* 17. Ссылки и цветные кнопки
   ==================================================================== */

a:link {
    color: #d0cfc1;
}

a:visited {
    color: #d0cfc1;
}

a:active {
    color: #d0cfc1;
}

a:hover {
    color: #e3e3e0;
}

/* Широкие текстовые кнопки */

.button-green-97,
.button-green-48,
.button-blue-48,
.button-blue-77,
.button-blue-97,
.button-purple-48,
.button-purple-97,
.button-orange-97,
.button-gold-48,
.button-gold-97,
.button-red-48,
.button-red-97,
.button-grey-48,
.button-grey-97 {
    display: inline-block;
    box-sizing: border-box;
    padding: 7px 5px;
    margin: 2px auto auto;
    border: 1px solid;
    border-radius: 5px;
    color: #d0cfc1;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    transition: border-color .15s, background-color .15s;
}

.button-green-97,
.button-blue-97,
.button-purple-97,
.button-orange-97,
.button-gold-97,
.button-red-97,
.button-grey-97 {
    width: 97%;
}

.button-green-48,
.button-blue-48,
.button-purple-48,
.button-gold-48,
.button-red-48,
.button-grey-48 {
    width: 48%;
}

.button-blue-77 {
    width: 77%;
}

.button-blue-48,
.button-blue-77,
.button-blue-97 {
    border-color: #30435f;
    background: #050d19;
}

.button-blue-48:hover,
.button-blue-77:hover,
.button-blue-97:hover {
    border-color: #607d9f;
    background: #101f34;
    color: #d0cfc1;
}

.button-blue-48:focus-visible,
.button-blue-77:focus-visible,
.button-blue-97:focus-visible {
    outline: 2px solid #93afd4;
    outline-offset: 2px;
}

.button-purple-48,
.button-purple-97 {
    border-color: #607d9f;
    background: #101f34;
    color: #d0cfc1;
}

.button-purple-48:hover,
.button-purple-97:hover {
    border-color: #607d9f;
    background: #101f34;
    color: #d0cfc1;
}

.button-purple-48:focus-visible,
.button-purple-97:focus-visible {
    outline: 2px solid #b797d5;
    outline-offset: 2px;
}

.button-green-97,
.button-green-48 {
    border-color: #36533b;
    background: #0b190f;
}

.button-green-97:hover,
.button-green-48:hover {
    border-color: #638368;
    background: #183021;
    color: #d0cfc1;
}

.button-green-97:focus-visible,
.button-green-48:focus-visible {
    outline: 2px solid #92b99a;
    outline-offset: 2px;
}

.button-orange-97 {
    border-color: #65452e;
    background: #20140b;
}

.button-orange-97:hover {
    border-color: #a1774d;
    background: #352316;
    color: #d0cfc1;
}

.button-orange-97:focus-visible {
    outline: 2px solid #d5ac7e;
    outline-offset: 2px;
}

.button-gold-48,
.button-gold-97 {
    border-color: #655a35;
    background: #1e1a0d;
}

.button-gold-48:hover,
.button-gold-97:hover {
    border-color: #a0935a;
    background: #322b16;
    color: #d0cfc1;
}

.button-gold-48:focus-visible,
.button-gold-97:focus-visible {
    outline: 2px solid #d4c58c;
    outline-offset: 2px;
}

.button-red-48,
.button-red-97 {
    border-color: #603737;
    background: #200d10;
}

.button-red-48:hover,
.button-red-97:hover {
    border-color: #996060;
    background: #37191e;
    color: #d0cfc1;
}

.button-red-48:focus-visible,
.button-red-97:focus-visible {
    outline: 2px solid #cf9699;
    outline-offset: 2px;
}

.button-grey-48,
.button-grey-97 {
    border-color: #34363c;
    background: #111215;
    color: #999ca4;
}

.button-grey-48:hover,
.button-grey-97:hover {
    border-color: #4b4e56;
    background: #1b1d22;
    color: #999ca4;
}

.button-grey-48:focus-visible,
.button-grey-97:focus-visible {
    outline: 2px solid #747780;
    outline-offset: 2px;
}

.button-mini-blue {
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 2px auto auto;
    border-radius: 5px;
    border: 1px solid #1a2c6e;
    display: inline-block;
    padding-left: 3px;
    padding-right: 3px;
    text-shadow: 1px 1px 2px black, 0 0 1em #000;
    text-align: center;
    color: #ffffff;
    font-size: 12px;
    background-image: radial-gradient(#17265d, #000000);
}

.button-mini-blue:hover {
    border: 1px solid #1a2c6e;
    color: #d0cfc1;
    background-image: radial-gradient(#233575, #000000);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    transform: scale(1.02);
}

.button-mini-purple {
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 2px auto auto;
    border-radius: 5px;
    border: 1px solid #391e7a;
    display: inline-block;
    padding-left: 3px;
    padding-right: 3px;
    text-shadow: 1px 1px 2px black, 0 0 1em #000;
    text-align: center;
    color: #ffffff;
    font-size: 12px;
    background-image: radial-gradient(#2f1d5b, #000000);
}

.button-mini-purple:hover {
    border: 1px solid #391e7a;
    color: #d0cfc1;
    background-image: radial-gradient(#4d338b, #000000);
    box-shadow: 0 0 10px rgb(93 0 255 / 50%);
    transform: scale(1.02);
}

.shop-hover {
    box-shadow: 0 0 3px rgb(94 29 173);
    background-image: linear-gradient(to right, #0b061a 15%, #1d1043 30%, #2f1a6e 50%, #1d1043 70%, #0b061a 85%);
}

.shop-hover:hover {
    box-shadow: 0 0 3px rgb(94 29 173);
    background-image: linear-gradient(to right, #0b061a 15%, #1d1043 30%, #2f1a6e 50%, #1d1043 70%, #0b061a 85%);
}

/* LOADING — полная замена старого блока */

/* 18. Анимация загрузки: куб
   ==================================================================== */

.cssload-thecube {
    position: relative;
    width: 34px;
    height: 34px;
    margin: 0 auto;
    margin-top: 22px;
    transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
}

.cssload-thecube .cssload-cube {
    position: relative;
    transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
}

.cssload-thecube .cssload-cube {
    position: relative;
    float: left;
    width: 50%;
    height: 50%;
    transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
}

.cssload-thecube .cssload-cube:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(175,81,206);
    content: "";
    animation: cssload-fold-thecube 2.4s infinite linear both;
    -o-animation: cssload-fold-thecube 2.4s infinite linear both;
    -ms-animation: cssload-fold-thecube 2.4s infinite linear both;
    -webkit-animation: cssload-fold-thecube 2.4s infinite linear both;
    -moz-animation: cssload-fold-thecube 2.4s infinite linear both;
    transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
}

.cssload-thecube .cssload-c2 {
    transform: scale(1.1) rotateZ(90deg);
    -o-transform: scale(1.1) rotateZ(90deg);
    -ms-transform: scale(1.1) rotateZ(90deg);
    -webkit-transform: scale(1.1) rotateZ(90deg);
    -moz-transform: scale(1.1) rotateZ(90deg);
}

.cssload-thecube .cssload-c3 {
    transform: scale(1.1) rotateZ(180deg);
    -o-transform: scale(1.1) rotateZ(180deg);
    -ms-transform: scale(1.1) rotateZ(180deg);
    -webkit-transform: scale(1.1) rotateZ(180deg);
    -moz-transform: scale(1.1) rotateZ(180deg);
}

.cssload-thecube .cssload-c4 {
    transform: scale(1.1) rotateZ(270deg);
    -o-transform: scale(1.1) rotateZ(270deg);
    -ms-transform: scale(1.1) rotateZ(270deg);
    -webkit-transform: scale(1.1) rotateZ(270deg);
    -moz-transform: scale(1.1) rotateZ(270deg);
}

.cssload-thecube .cssload-c2:before {
    animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    -ms-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
}

.cssload-thecube .cssload-c3:before {
    animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    -ms-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
}

.cssload-thecube .cssload-c4:before {
    animation-delay: 0.9s;
    -o-animation-delay: 0.9s;
    -ms-animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
}

@keyframes cssload-fold-thecube {
    0%, 10% {
        opacity: 0;
        transform: perspective(63px) rotateX(-180deg);
    }

    25%,
                  75% {
        opacity: 1;
        transform: perspective(63px) rotateX(0deg);
    }

    90%,
                  100% {
        opacity: 0;
        transform: perspective(63px) rotateY(180deg);
    }
}

@-o-keyframes cssload-fold-thecube {
    0%, 10% {
        opacity: 0;
        -o-transform: perspective(63px) rotateX(-180deg);
    }

    25%,
                  75% {
        opacity: 1;
        -o-transform: perspective(63px) rotateX(0deg);
    }

    90%,
                  100% {
        opacity: 0;
        -o-transform: perspective(63px) rotateY(180deg);
    }
}

@-ms-keyframes cssload-fold-thecube {
    0%, 10% {
        opacity: 0;
        -ms-transform: perspective(63px) rotateX(-180deg);
    }

    25%,
                  75% {
        opacity: 1;
        -ms-transform: perspective(63px) rotateX(0deg);
    }

    90%,
                  100% {
        opacity: 0;
        -ms-transform: perspective(63px) rotateY(180deg);
    }
}

@-webkit-keyframes cssload-fold-thecube {
    0%, 10% {
        opacity: 0;
        -webkit-transform: perspective(63px) rotateX(-180deg);
    }

    25%,
                  75% {
        opacity: 1;
        -webkit-transform: perspective(63px) rotateX(0deg);
    }

    90%,
                  100% {
        opacity: 0;
        -webkit-transform: perspective(63px) rotateY(180deg);
    }
}

@-moz-keyframes cssload-fold-thecube {
    0%, 10% {
        opacity: 0;
        -moz-transform: perspective(63px) rotateX(-180deg);
    }

    25%,
                  75% {
        opacity: 1;
        -moz-transform: perspective(63px) rotateX(0deg);
    }

    90%,
                  100% {
        opacity: 0;
        -moz-transform: perspective(63px) rotateY(180deg);
    }
}

/* 19. Иконки характеристик, навыков и предметов
   ==================================================================== */

.user_stat_arena {
    background-image: url(/icons/user_stat/arena.png);
    background-size: cover;
}

.user_stat_dungeon {
    background-image: url(/icons/user_stat/dungeon.png);
    background-size: cover;
}

.user_stat_quest {
    background-image: url(/icons/user_stat/quest.png);
    background-size: cover;
}

.user_stat_walk {
    background-image: url(/icons/user_stat/walk.png);
    background-size: cover;
}

.skill-1-1 {
    background-image: url(/images/skills/1spell_health.png);
    background-size: cover;
}

.skill-2-1 {
    background-image: url(/images/skills/1double_attack.png);
    background-size: cover;
}

.skill-3-1 {
    background-image: url(/images/skills/1spell_defence.png);
    background-size: cover;
}

.skill-1-2 {
    background-image: url(/images/skills/2spell_health.png);
    background-size: cover;
}

.skill-2-2 {
    background-image: url(/images/skills/2double_attack.png);
    background-size: cover;
}

.skill-3-2 {
    background-image: url(/images/skills/2spell_defence.png);
    background-size: cover;
}

.skill-1-3 {
    background-image: url(/images/skills/3spell_health.png);
    background-size: cover;
}

.skill-2-3 {
    background-image: url(/images/skills/3double_attack.png);
    background-size: cover;
}

.skill-3-3 {
    background-image: url(/images/skills/3spell_defence.png);
    background-size: cover;
}

.clan_town1 {
    background-image: url(/icons/main/town_health.png);
    background-size: cover;
}

.clan_town2 {
    background-image: url(/icons/main/town_str.png);
    background-size: cover;
}

.clan_town3 {
    background-image: url(/icons/main/town_def.png);
    background-size: cover;
}

.skill-pass-hp {
    background-image: url(/icons/skill/health.png?iv=1793203870-9470);
    background-size: cover;
}

.skill-pass-str {
    background-image: url(/icons/skill/strong.png?iv=1793203871-21627);
    background-size: cover;
}

.skill-pass-def {
    background-image: url(/icons/skill/def.png?iv=1793203870-11618);
    background-size: cover;
}

.skill-pass-crit {
    background-image: url(/icons/skill/critical.png?iv=1793203870-20842);
    background-size: cover;
}

.skill-pass-dodge {
    background-image: url(/icons/skill/dodge.png?iv=1793203870-9525);
    background-size: cover;
}

.skill-pass-accuracy {
    background-image: url(/icons/skill/accuracy.png?iv=1793203870-24041);
    background-size: cover;
}

.skill-pass-trav {
    background-image: url(/icons/forest/skill_forest.jpg);
    background-size: cover;
}

.coll-item-1 {
    background-image: url(/icons/collection/1.png?iv=1793203811-12413);
    background-size: cover;
}

.coll-item-2 {
    background-image: url(/icons/collection/2.png?iv=1793203811-10652);
    background-size: cover;
}

.coll-item-3 {
    background-image: url(/icons/collection/3.png?iv=1793203811-11230);
    background-size: cover;
}

.coll-item-4 {
    background-image: url(/icons/collection/4.png?iv=1793203811-10905);
    background-size: cover;
}

.coll-item-5 {
    background-image: url(/icons/collection/5.png?iv=1793203811-10724);
    background-size: cover;
}

.coll-item-6 {
    background-image: url(/icons/collection/6.png?iv=1793203811-9705);
    background-size: cover;
}

.coll-item-7 {
    background-image: url(/icons/collection/7.png?iv=1793203811-12470);
    background-size: cover;
}

.coll-item-8 {
    background-image: url(/icons/collection/8.png?iv=1793203811-12613);
    background-size: cover;
}

.coll-item-9 {
    background-image: url(/icons/collection/9.png?iv=1793203811-11513);
    background-size: cover;
}

.coll-item-10 {
    background-image: url(/icons/collection/10.png?iv=1793203811-11306);
    background-size: cover;
}

.coll-item-11 {
    background-image: url(/icons/collection/11.png?iv=1793203811-11669);
    background-size: cover;
}

.coll-item-12 {
    background-image: url(/icons/collection/12.png?iv=1793203811-11496);
    background-size: cover;
}

.coll-item-13 {
    background-image: url(/icons/collection/13.png?iv=1793203811-11519);
    background-size: cover;
}

.coll-item-14 {
    background-image: url(/icons/collection/14.png?iv=1793203811-10251);
    background-size: cover;
}

.coll-item-15 {
    background-image: url(/icons/collection/15.png?iv=1793203811-11065);
    background-size: cover;
}

.coll-item-16 {
    background-image: url(/icons/collection/16.png?iv=1793203811-11353);
    background-size: cover;
}

.coll-item-17 {
    background-image: url(/icons/collection/17.png?iv=1793203811-10405);
    background-size: cover;
}

.coll-item-18 {
    background-image: url(/icons/collection/18.png?iv=1793203811-8985);
    background-size: cover;
}

.coll-item-19 {
    background-image: url(/icons/collection/19.png?iv=1793203811-10214);
    background-size: cover;
}

.coll-item-20 {
    background-image: url(/icons/collection/20.png?iv=1793203811-9275);
    background-size: cover;
}

.icon-elic {
    background-image: url(/icons/potion/health_small.png?iv=1793203867-14166);
    background-size: cover;
}

.icon-elic2 {
    background-image: url(/icons/potion/health_medium.png?iv=1793203867-14156);
    background-size: cover;
}

.icon-elic3 {
    background-image: url(/icons/potion/health_big.png?iv=1793203867-14213);
    background-size: cover;
}

.icon-elic4 {
    background-image: url(/icons/potion/health_great.png?iv=1793203867-13883);
    background-size: cover;
}

.icon-elic5 {
    background-image: url(/icons/potion/potion_hp_5.png?iv=1793203867-13756);
    background-size: cover;
}

.icon-elic6 {
    background-image: url(/icons/potion/potion_hp_6.png?iv=1793203867-13531);
    background-size: cover;
}

.icon-elic60 {
    background-image: url(/icons/potion/potion_hp_60k.png?iv=1793203867-9279);
    background-size: cover;
}

.icon-elic80 {
    background-image: url(/icons/potion/potion_hp_80k.png?iv=1793203867-9515);
    background-size: cover;
}

.icon-elic100 {
    background-image: url(/icons/potion/potion_hp_100k.png?iv=1793203867-9065);
    background-size: cover;
}

.icon-elic_str {
    background-image: url(/icons/potion/t4re5h.png?iv=1793203868-8611);
    background-size: cover;
}

.icon-elic_def {
    background-image: url(/icons/potion/t4re5y.png?iv=1793203868-8930);
    background-size: cover;
}

.icon-elic_energy25 {
    background-image: url(/icons/potion/potion_energy_25.png?iv=1793203867-9655);
    background-size: cover;
}

.icon-elic_energy50 {
    background-image: url(/icons/potion/potion_energy_50.png?iv=1793203867-9906);
    background-size: cover;
}

.icon-elic_pet_bonus {
    background-image: url(/icons/potion/pet_exp.png?iv=1793203867-8981);
    background-size: cover;
}

.icon-str-1 {
    background-image: url(/icons/potion/t4re5h.png?iv=1793203868-8611);
    background-size: cover;
}

.icon-def-1 {
    background-image: url(/icons/potion/t4re5y.png?iv=1793203868-8930);
    background-size: cover;
}

.icon-meat {
    background-image: url(/icons/items/meat.png?iv=1793203829-9774);
    background-size: cover;
}

.icon-chest1 {
    background-image: url(/icons/chest/chest1.png);
    background-size: cover;
}

.icon-chest2 {
    background-image: url(/icons/chest/chest2.png);
    background-size: cover;
}

.icon-chest3 {
    background-image: url(/icons/chest/chest3.png);
    background-size: cover;
}

.icon-chest4 {
    background-image: url(/icons/chest/chest4.png);
    background-size: cover;
}

.icon-chest5 {
    background-image: url(/icons/chest/chest5.png);
    background-size: cover;
}

.icon-almaz {
    background-image: url(/icons/almaz.png);
    background-size: cover;
}

.ametist {
    background-image: url(/icons/ametist.png?iv=1793279679-2707);
    background-size: cover;
}

.icon-gold {
    background-image: url(/icons/money.png);
    background-size: cover;
}

.icon-exp {
    background-image: url(/icons/quest60.png);
    background-size: cover;
}

.icon-kill {
    background-image: url(/icons/13.png);
    background-size: cover;
}

.icon-chest {
    background-image: url(/icons/chest/3.png?iv=1793203809-11562);
    background-size: cover;
}

.icon-pohod {
    background-image: url(/icons/west.png);
    background-size: cover;
}

.build-1 {
    background-image: url(/icons/clan/building/rwegdf.png);
    background-size: cover;
}

.build-2 {
    background-image: url(/icons/clan/building/t1erghtss.png);
    background-size: cover;
}

.build-3 {
    background-image: url(/icons/clan/building/htrsegwffdg.png);
    background-size: cover;
}

.build-4 {
    background-image: url(/icons/clan/building/32regdfs.png);
    background-size: cover;
}

.build-5 {
    background-image: url(/icons/clan/building/tgrewas.png);
    background-size: cover;
}

.build-6 {
    background-image: url(/icons/clan/building/egrwfsd.png);
    background-size: cover;
}

.build-7 {
    background-image: url(/icons/clan/building/rgevwas.png);
    background-size: cover;
}

.build-8 {
    background-image: url(/icons/clan/building/egwrdzfc.png);
    background-size: cover;
}

.t-s {
    text-shadow: 1px 1px 2px black, 0 0 1em #000;
}

.round5 {
    border-radius: 5px;
    box-shadow: 0 0 0 1px black, 0 0 13px #333;
}

.br50 {
    border-radius: 50px;
    border: 1px solid #2b4d8e;
}

.brb4 {border-radius: 0 0 15px 15px;}

.button-small:hover {
    border: 1px solid #0e3977;
    color: #F8F8B0;
    background: url("/img/button-hover.png?iv=1793203787-188");
}

/* ARENA */

/* 20. Кнопки арены
   ==================================================================== */

.border-arena-img {
    border-radius: 5px;
    border: 1px solid #192f61;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom: 0px;
}

.border-arena-img:hover {
    box-shadow: 0 0 0 0px #1d35ad, 0 0 30px #1d41ad96;
}

.button-arena {
    border: 1px solid #193261;
    border-radius: 5px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    display: block;
    padding: 5px 0px 5px 3px;
    height: 18px;
    color: #a7b4e5;
    font-size: 14px;
    background-image: linear-gradient(to top, #041f3780 10%, #04183780 25%, #151c4fdb 50%, #04063780 75%, #040d3780 100%);
}

.button-arena:hover, .button:hover {
    border: 1px solid #1d3d7b;
    color: #a7b4e5;
}

.count-tl, .count-tr, .count-bl, .count-br, .count-br2 {
    text-align: center;
    vertical-align: top;
    height: 15px;
    padding-left: 2px;
    padding-right: 2px;
    border-radius:  0  4px  0px 6px;
    background-color: rgba(3, 3, 3, 0.54);
    color: #C3C3C3;
    font-size: 12px;
}
.count-tl {position: absolute;    top: 0;    left: 0;}
.count-tr {position: absolute;    top: 0;    right: 0;}
.count-bl {position: absolute;    bottom: 0;    left: 0 ;border-radius:  0  5px  0px 0px;}
.count-br {position: absolute;    bottom: 0;    right: 0;}
.count-br2 {position: absolute;    bottom: 0;    right: 0;;border-radius:  5px 0px  0px 0px;}

/* 21. Цвета текста, выравнивание и вспомогательные классы
   ==================================================================== */

.text-gold {
    color: #F2C234;
}

.text-silver-l {
    color: #D0CFC1;
}

.text-blue-l {
    color: #c5c5e3;
}

.text-shop {
    color: #9cc7ed;
}

.text-0 {
    color: #a7bacf;
}

.text-1 {
    color: #02bc18;
}

.text-2 {
    color: #3c8be3;
}

.text-3 {
    color: #af51ce;
}

.text-4 {
    color: #d85d01;
}

.text-5 {
    color: #b71717;
}

.text-6 {
    color: #33e7b5;
}

.text-9 {
    color: #b1adec;
}

.text-10 {
    color: #f6e5b3;
}

.text-almaz {
    color: #579ae6;
}

.text-grey-l {
    color: #C2C2C2;
}

.text-brown {
    color: #ceb29d;
}

.text-dark-brown {
    color: #9f8571;
}

.text-dark {
    color: #a9a9a9;
}

.nav i[class*=icon-], .nav i[class*=icon2-] {
    margin-left: 5px;
    margin-right: 1px;
}

.box-m-c {
    display: table;
    width: 100%;
    vertical-align: middle;
    text-align: center;
}

.block-t-c {
    display: table-cell;
    vertical-align: top;
    text-align: center;
}

.fz7 {
    font-size: 7px;
}

.fz8 {
    font-size: 8px;
}

.fz9 {
    font-size: 9px;
}

.fz10 {
    font-size: 10px;
}

.fz11 {
    font-size: 11px;
}

.fz12 {
    font-size: 12px;
}

.fz13 {
    font-size: 13px;
}

.fz14 {
    font-size: 14px;
}

.fz15 {
    font-size: 15px;
}

.fz16 {
    font-size: 16px;
}

.fz17 {
    font-size: 17px;
}

.fz18 {
    font-size: 18px;
}

.fz19 {
    font-size: 19px;
}

.fz20 {
    font-size: 20px;
}

.fz25 {
    font-size: 25px;
}

.fz30 {
    font-size: 30px;
}

.p4 {
    padding: 4px;
}

.ptb6 {
    padding-top: 6px;
    padding-bottom: 6px;
}

.ptb7 {
    padding-top: 7px;
    padding-bottom: 7px;
}

.ptb10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.pt1 {
    padding-top: 1px;
}

.pb0 {
    padding-bottom: 0;
}

.p0 {
    padding: 0;
}

.pr18 {
    padding-right: 18px;
}

.mr90 {
    margin-right: 84px;
}

.ml-2 {
    margin-left: -2px;
}

.mt-1 {
    margin-top: -1px;
}

.mt-2 {
    margin-top: -4px;
}

.mt-3 {
    margin-top: -3px;
}

.mt0 {
    margin-top: 0;
}

.mt-10 {
    margin-top: -10px;
}

.mt30 {
    margin-top: 30px;
}

.mt40 {
    margin-top: 40px;
}

.mt50 {
    margin-top: 50px;
}

.w100pc {
    width: 100%;
}

.w54 {
    width: 54px;
}

.w45 {
    width: 45px;
}

.h100pc {
    height: 100%
}

.back-no-r {
    background-repeat: no-repeat;
    background-position: center;
}

/* Старые разделители больше не отображаются */
.delta,
.delta2 {
    display: none !important;
}

.hr_grey {
    height: 3px;
    width: 100%;
    background: url(/img/hr_grey.png?iv=1793203788-2338) center no-repeat;
}


/* TITLE */

/* 22. Декоративные заголовки и информация о питомце
   ==================================================================== */

.title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
    padding: 5px;
    font-size: 13px;
    text-align: center;
    color: #ceb29d;
    text-transform: uppercase;
}

.title::before,
  .title::after {
    width: 17px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #ceb29d;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: '';
}

.title::before {
    background-image: url('/images/title_l.png?iv=1793203772-2182');
}

.title::after {
    background-image: url('/images/title_r.png?iv=1793203772-2191');
}

.title_blue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
    padding: 5px;
    font-size: 13px;
    text-align: center;
    color: #b3b6c5;
    text-transform: uppercase;
}

.title_blue::before,
  .title_blue::after {
    width: 17px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #ceb29d;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: '';
}

.title_blue::before {
    background-image: url('/images/title_blue_l.png?iv=1793203772-2395');
}

.title_blue::after {
    background-image: url('/images/title_blue_r.png?iv=1793203772-2413');
}

.pet-info {
    display: flex;
    gap: 12px;
}

.pet-left,
.pet-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    font-size: 10px;
}



/* На телефоне */

@media (max-width:370px) {
    .pet-info {
        flex-direction: column;
    }

    .pet-left,
    .pet-right {
        align-items: center;
        font-size: 12px;
    }
}

/* 23. Полосы прогресса и формы входа
   ==================================================================== */

.progress-1 {
    position: relative;
    width: 97%;
    height: 20px;
    border-radius: 2px;
    border: 1px solid #572390;
    background-color: #344d61;
}

.progress-1 .fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #0a6da6;
}

.prg-bar-96 {
    width: 97%;
    height: 4px;
    border-radius: 2px;
    background-color: #344d61;
}

a {
    text-decoration: none;
}

.text-area {
    border: 0;
    border-radius: 3px;
    border-top: 1px solid #572390;
    border-bottom: 1px solid #B6BAC2;
    margin: 0;
    padding: 3px;
    height: 20px;
    color: #000;
    background-color: #A7AEB2;
    resize: none;
}

.text-area-2 {
    border: 0;
    border-radius: 3px;
    border-top: 1px solid #445594;
    border-bottom: 1px solid #B6BAC2;
    margin: 0;
    padding: 3px 3px 3px 5px;
    height: 26px;
    color: #000;
    font-size: 14px;
    background-color: #a7b9e3;
    opacity: .82;
}

.text-area-login {
    border: 0;
    border-radius: 5px;
    border-top: 1px solid #dccc04d9;
    border-bottom: 1px solid #a49800d9;
    border-left: 1px solid #dccc04d9;
    border-right: 1px solid #dccc04d9;
    margin: 0;
    padding: 5px 5px 5px 5px;
    height: 20px;
    color: #2f2f2f;
    font-size: 14px;
    background-color: #d8e4f2;
    opacity: .92;
}

.button-login {
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 2px auto auto;
    border-radius: 5px;
    border: 1px solid #dccc04d9;
    color: #f8dc00;
    text-shadow: 0 0 black;
    font-size: 15px;
    text-shadow: unset;
    background-image: linear-gradient(to right, #958800f7 15%, #998b00a3 30%, #efdb00a3 50%, #998b00a3 70%, #978a02f7 85%);
}

.button-login:hover {
    border-radius: 5px;
    border: 1px solid #ffec02d9;
    background-image: linear-gradient(to right, #ab9c00f7 15%, #cab803a3 30%, #ffea01a3 50%, #cab803a3 70%, #ab9c00f7 85%);
    transform: scale(1.02);
}

.index-cloud {
    height: auto;
    background: url(/images/cloud.png?iv=1793203771-179824) 0 0px / 200% repeat-x;
    animation: keyFramesCloudNew 80s forwards linear infinite;
}
.index-cloud-dark {
    height: auto;
    background: url(/images/cloud-dark.png?iv=1793203771-445212) 0 0px / 200% repeat-x;
    animation: keyFramesCloudNew 80s forwards linear infinite;
}

/* 24. Анимации и элементы интерфейса
   ==================================================================== */

@keyframes keyFramesCloudNew {
    0% {
        background-position-x: -500%, 0;
    }

    100% {
        background-position-x: 0%, 0;
    }
}

.ptb5 {
    padding: 5px 0;
}

.ptb3 {
    padding: 3px 0;
}

.chat-block-container .item,
.ban-history .log {
    display: table;
    width: 100%;
    padding: 5px 0;
    border-bottom: 1px solid #24557A;
    text-shadow: none;
    background-color: #080b1a;
}

.chat-block-container .item:nth-child(even),
.ban-history .log:nth-child(even),

.mauto {
    margin: auto;
}

.vat {
    vertical-align: top;
}

.vam {
    vertical-align: middle;
}

.vab {
    vertical-align: bottom;
}

.br5-empty {
    border-radius: 5px;
    border: 1px;
}

.op1 {
    opacity: 1;
}

.op09 {
    opacity: .9;
}

.op04 {
    opacity: .4;
}

.tal {
    text-align: left;
}

.blocks {
    display: table;
    width: 100%;
    text-align: center;
}

.blocks-l {
    display: table;
    text-align: left;
}

.blocks-l-l {
    display: table-cell;
    vertical-align: middle;
    width: 64px;
    text-align: left;
}

.blocks-l-b {
    display: table-cell;
    vertical-align: bottom;
    text-align: left;
}

.blocks-l-r {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

.blocks-m-c {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.blocks-l-t {
    display: table-cell;
    vertical-align: top;
    text-align: left;
}

.blocks-l-m {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}

.blocks-c-t {
    display: table-cell;
    vertical-align: top;
    text-align: center;
}

.blocks-c-b {
    display: table-cell;
    vertical-align: sub;
    text-align: center;
}

.a-none {
    text-decoration: none;
}

.targets_back A:link {
    text-decoration: none;
}

.targets_back .target-holder {
    overflow-x: hidden;
    width: 80%;
    margin: 0 auto;
}

.targets_back .target-holder .target-row {
    display: table;
    height: 80px;
}

.targets_back .target-holder .target-row .cell {
    display: table-cell;
}

.pull-left {
    display: inline-block;
    float: left;
}

.pull-right {
    display: inline-block;
    float: right;
}

.text-pull-left {
    text-align: left;
}

.text-pull-right {
    text-align: right !important;
}

.text-pull-center {
    text-align: center;
}

img {
    vertical-align: middle;
    border: 0;
}

.tac {
    text-align: center;
}

.dtc {
    display: table-caption;
}

.display-block {
    display: block !important;
}

/* PROGRESS BAR EXP */

/* 25. Опыт и сообщения
   ==================================================================== */

.progress-bar {
    margin-left: 3px;
    width: 100%;
    height: 6px;
}

.progress-bar .progress {
    height: 3px;
}

.progress-bar .progress {
    float: left;
}

.progress-bar.exp {
    height: 4px;
    margin-left: 0;
    border-radius: 2px;
    background-color: #202020;
}

.progress-bar.exp .progress {
    background: rgb(15 73 103);
    border-radius: 2px;
}

.pr {
    position: relative;
}

.tab-switcher {
    display: table;
    width: 100%;
}

.tab-switcher .tab {
    display: table-cell;
    border-top: 1px solid #13192f;
    border-right: 0.5px solid #13192f;
    border-left: 0.5px solid #13192f;
    padding-top: 8px;
    padding-bottom: 9px;
    color: #848691;
    text-align: center;
    font-size: 13px;
    background: #090e1b;
}

.tab-switcher .tab:hover {
    border-top: 1px solid #1a213b;
    border-right: 0.5px solid #1a213b;
    border-left: 0.5px solid #1a213b;
    color: #8f9097;
    background: #0d1325;
}

.tab-switcher .tab.active {
    border: 1px solid #13161c;
    border-bottom: 0;
    color: #c1c3d0;
    font-size: 13px;
    background-image: linear-gradient(to bottom, #0c173f5c 15%, #1422555c 30%, #1220537a 50%, #1a2c6e99 70%, #1a2c6ed1 85%);
}

.tab-switcher-black {
    display: table;
    table-layout: auto;
    width: calc(100% - 16px);
    border-spacing: 0;
    border: 1px solid #30435f;
    border-radius: 0px 0px 7px 7px;
    background: rgba(4, 12, 24, .72);
    box-sizing: border-box;
    margin-left: 8px;
    margin-right: 8px;
}

.tab-switcher-black .tab {
    display: table-cell;
    vertical-align: middle;
    padding: 10px 6px;
    width: 20%;
    color: #9db5d3;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    overflow-wrap: anywhere;
    transition: color .15s, background-color .15s;
}

.tab-switcher-black .tab:first-child {
    text-align: left;
    border-radius: 0 0 0 6px;
}

.tab-switcher-black .tab:last-child {
    text-align: right;
    border-radius: 0 0 6px 0;
}

.tab-switcher-black .tab:hover {
    color: #d4e1f2;
    background-color: rgba(33, 54, 82, .35);
}

.tab-switcher-black .tab.active,
.tab-switcher-black .tab.active:hover {
    width: 60%;
    text-align: center;
    color: #c5d5ec;
    font: 13px/18px Georgia, "Times New Roman", serif;
    text-transform: uppercase;
    background: none;
}

.tab-switcher-black a.tab:focus-visible {
    outline: 2px solid #93afd4;
    outline-offset: -2px;
}

.tab-switcher-clan {
    display: table;
    width: 100%;
}

.tab-switcher-clan .tab {
    display: table-cell;
    border-top: 1px solid #1c083c;
    border-bottom: 1px solid #1c083c;
    border-right: 1px solid #1c083c;
    padding-top: 8px;
    padding-bottom: 9px;
    color: #b4b6cb;
    text-align: center;
    font-size: 13px;
    background: #0f0520;
}

.tab-switcher-clan .tab.active {
    border: 1px solid #0b3409;
    border-bottom: 0;
    color: #a2a8ed;
    font-size: 13px;
    background: url(/img/tg-clan.png?iv=1793203788-1964) repeat-x;
}

.border-clan {
    border: 1px solid #0f0520;
}

/* Клан чат */

.tab-switcher-clanchat {
    display: table;
    width: 100%;
}

.tab-switcher-clanchat .tab {
    display: table-cell;
    border-top: 1px solid #072206;
    border-bottom: 1px solid #072206;
    border-right: 1px solid #072206;
    padding-top: 8px;
    padding-bottom: 9px;
    color: #b4b6cb;
    text-align: center;
    font-size: 13px;
    background: #051804;
}

.tab-switcher-clanchat .tab.active {
    border: 1px solid #1c083c;
    border-bottom: 0;
    color: #dddddd;
    font-size: 13px;
    background: url(/img/tg-clanchat.png?iv=1793203788-3139) repeat-x;
}

.border-clanchat {
    border: 1px solid #0f0520;
}

.pa {
    position: absolute;
}

.vatop {
    vertical-align: top;
}

/* 26. Карточки персонажей и снаряжения
   ==================================================================== */

.hero-item-img {
    border-radius: 10px;
    width: 54px;
}

.hero-item-smith-64 {
    position: absolute;
    bottom: -15px;
    left: 37px;
    height: 13px;
    border-radius: 0px 7px 0px 3px;
    padding-left: 3px;
    padding-right: 3px;
    min-width: 23px;
    font-size: 11px;
    text-align: right;
    background-color: #000000c2;
}
.hero-item-smith-128 {
    position: absolute;
    bottom: -15px;
    left: 101px;
    height: 13px;
    border-radius: 0px 7px 0px 3px;
    padding-left: 3px;
    padding-right: 3px;
    min-width: 23px;
    font-size: 11px;
    text-align: right;
    background-color: #000000c2;
}

.hero-item-rang-64 {
    position: absolute;
    bottom: -15px;
    left: 2px;
    height: 13px;
    border-radius: 7px 0px 3px 0px;
    padding-left: 3px;
    padding-right: 3px;
    min-width: 8px;
    font-size: 11px;
    text-align: left;
    background-color: #000000c2;
}
.hero-item-rang-128 {
    position: absolute;
    bottom: -15px;
    left: 2px;
    height: 13px;
    border-radius: 7px 0px 3px 0px;
    padding-left: 3px;
    padding-right: 3px;
    min-width: 8px;
    font-size: 11px;
    text-align: left;
    background-color: #000000c2;
}

.hero-item-stats {
    position: absolute;
    width: 54px;
    height: 13px;
    /* padding-top: 1px; */
    padding-bottom: 4px;
    bottom: -59px;
    left: 2px;
    border-radius: 0px 0px 30px 60px;
    background: rgba(0, 0, 0, 0.55);
}

.hero-item-stats-54 {
    position: absolute;
    bottom: -56px;
    left: 2px;
    width: 54px;
    height: 9px;
    padding-bottom: 5px;
    border-radius: 0px 0px 10px 10px;
    background: rgb(0 0 0 / 66%);
    font-size: 10px;
}

.hero-item-stats-64 {
    position: absolute;
    bottom: -66px;
    left: 2px;
    width: 64px;
    height: 13px;
    padding-bottom: 4px;
    border-radius: 0px 0px 8px 8px;
    background: rgb(0 0 0 / 66%);
}

.hero-item-stats-80 {
    position: absolute;
    bottom: -82px;
    left: 9px;
    width: 66px;
    height: 13px;
    padding-bottom: 4px;
    border-radius: 7px 7px 7px 7px;
    background: rgb(0 0 0 / 57%);
}

.hero-item-stats-100 {
    position: absolute;
    bottom: -102px;
    left: 2px;
    width: 100px;
    height: 14px;
    padding-bottom: 2px;
    border-radius: 0px 0px 10px 20px;
    background: rgb(0 0 0 / 66%);
}
.hero-item-stats-128 {
    position: absolute;
    bottom: -130px;
    left: 2px;
    width: 128px;
    height: 13px;
    padding-bottom: 4px;
    border-radius: 0px 0px 8px 8px;
    background: rgb(0 0 0 / 66%);
}
.hero-item-stats-54-no-back {
    position: absolute;
    bottom: -68px;
    left: 0px;
    width: 58px;
    height: 22px;
    padding-bottom: 4px;
    border-radius: 0px 0px 30px 60px;
}

.hero-item-stats-64-no-back {
    position: absolute;
    bottom: -68px;
    left: 0px;
    width: 68px;
    height: 13px;
    padding-bottom: 4px;
    border-radius: 0px 0px 30px 60px;
}

.hero-item-stats-64-hunter {
    position: absolute;
    bottom: -124px;
    left: 15px;
    width: 124px;
    height: 15px;
    padding-bottom: 4px;
    border-radius: 0px 0px 30px 60px;
    background: rgb(0 0 0 / 66%);
}

.hero-item-stats-profile {
    position: absolute;
    bottom: 8px;
    left: 9px;
    width: 149px;
    height: 16px;
    padding-bottom: 4px;
    border-radius: 0px 0px 13px 13px;
    font-size: 11px;
    color: #b6b6b6;
    background: rgb(0 0 0 / 44%);
}

.hero-item-stats-profile-b {
    position: absolute;
    bottom: 8px;
    left: 64px;
    width: 43px;
    height: 15px;
    padding-bottom: 4px;
    border-radius: 13px 13px 13px 13px;
    font-size: 15px;
    background: rgb(0 0 0 / 47%);
}

.hero-item-stats-battle {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 134px;
    height: 16px;
    padding-bottom: 4px;
    border-radius: 0px 0px 13px 13px;
    font-size: 11px;
    color: #bcbcbc;
    background: rgb(0 0 0 / 32%);
}

.hero-item-stats-enemy-brd {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 134px;
    height: 16px;
    padding-bottom: 4px;
    border-radius: 0px 0px 13px 13px;
    font-size: 11px;
    color: #bcbcbc;
    background: rgb(0 0 0 / 15%);
}

.enemy-box-name-brd {
    position: absolute;
    bottom: 116px;
    left: 11px;
    width: 134px;
    height: 16px;
    padding-bottom: 4px;
    border-radius: 0px 0px 13px 13px;
    font-size: 11px;
    color: #bcbcbc;
}

.hero-item {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 45px;
    border-radius: 10px;
    margin-top: 4px;
    opacity: .9;
}

.hero-item:hover {
    border: 1px solid #888826;
    opacity: 1;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 15px;
}

.hero-img-user {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 5px;
    overflow: hidden;
}

.hero-img-user::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    content: '';
    pointer-events: none;
}

.hero-frame {
    position: relative;
    width: 150px;
    height: 150px;
    overflow: visible;
    border-radius: 15px;
    background: #000000;
    scale: 0.9;
}

.hero-frame::after {
    content: "";
    position: absolute;
    /* Рамка больше контейнера */
    width: 265px;
    height: 265px;
    left: 52%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: var(--border-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 100;
}

.border_3_01 {
    --border-image: url('/img/border/border_3_01.png?iv=1793203793-107076');
}

.border_5_01 {
    --border-image: url('/img/border/border_5_01.png?iv=1793203793-79838');
}

.border_fire {
    --border-image: url('/img/border/border_fire.png?iv=1793203793-91535');
}

.border_hell {
    --border-image: url('/img/border/border_hell.png?iv=1793203793-78884');
}

.border_ice {
    --border-image: url('/img/border/border_ice.png?iv=1793203793-115722');
}

.border_plant {
    --border-image: url('/img/border/border_plant.png?iv=1793203793-118197');
}

.border_sky {
    --border-image: url('/img/border/border_sky.png?iv=1793203793-131640');
}

.border_undead {
    --border-image: url('/img/border/border_undead.png?iv=1793203794-132856');
}

.dark_01 {
    --border-image: url('/img/border/dark_01.png?iv=1793203794-104813');
}

.dark_02 {
    --border-image: url('/img/border/dark_02.png?iv=1793203794-94818');
}

.dark_03 {
    --border-image: url('/img/border/dark_03.png?iv=1793203794-104893');
}

.dark_04 {
    --border-image: url('/img/border/dark_04.png?iv=1793203794-93682');
}

.dark_05 {
    --border-image: url('/img/border/dark_05.png?iv=1793203794-107086');
}

.dark_06 {
    --border-image: url('/img/border/dark_06.png?iv=1793203794-88047');
}

.dark_07 {
    --border-image: url('/img/border/dark_07.png?iv=1793203794-96482');
}

.dark_08 {
    --border-image: url('/img/border/dark_08.png?iv=1793203794-102982');
}

.dark_09 {
    --border-image: url('/img/border/dark_09.png?iv=1793203794-103763');
}

.dark_10 {
    --border-image: url('/img/border/dark_10.png?iv=1793203794-94477');
}

.dark_11 {
    --border-image: url('/img/border/dark_11.png?iv=1793203794-103284');
}

.dark_12 {
    --border-image: url('/img/border/dark_12.png?iv=1793203794-120820');
}

.dark_13 {
    --border-image: url('/img/border/dark_13.png?iv=1793203794-113691');
}

.dark_14 {
    --border-image: url('/img/border/dark_14.png?iv=1793203794-104820');
}

.dark_15 {
    --border-image: url('/img/border/dark_15.png');
}

.summer_01 {
    --border-image: url('/img/border/summer_01.png?iv=1793203794-111633');
}

.summer_02 {
    --border-image: url('/img/border/summer_02.png?iv=1793203794-135391');
}

.summer_03 {
    --border-image: url('/img/border/summer_03.png?iv=1793203794-108318');
}

.summer_04 {
    --border-image: url('/img/border/summer_04.png?iv=1793203794-102561');
}

.summer_05 {
    --border-image: url('/img/border/summer_05.png?iv=1793203794-87104');
}

.summer_06 {
    --border-image: url('/img/border/summer_06.png?iv=1793203795-101983');
}

.summer_07 {
    --border-image: url('/img/border/summer_07.png?iv=1793203795-61826');
}

.war_01 {
    --border-image: url('/img/border/war_01.png?iv=1793203795-73192');
}

.war_02 {
    --border-image: url('/img/border/war_02.png?iv=1793203795-83682');
}

.war_03 {
    --border-image: url('/img/border/war_03.png');
}

.rich_01 {
    --border-image: url('/img/border/rich_01.png?iv=1793203794-45396');
}

.rich_02 {
    --border-image: url('/img/border/rich_02.png?iv=1793203794-75567');
}

.rich_03 {
    --border-image: url('/img/border/rich_03.png?iv=1793203794-82829');
}

.rich_04 {
    --border-image: url('/img/border/rich_04.png?iv=1793203794-88398');
}

.rich_05 {
    --border-image: url('/img/border/rich_05.png?iv=1793203794-78016');
}

.dung_1_mob {
    --border-image: url('/img/border/dung_1_mob.png?iv=1793203794-66474');
}

.dung_2_mob {
    --border-image: url('/img/border/dung_2_mob.png?iv=1793203794-89133');
}

.dung_3_mob {
    --border-image: url('/img/border/dung_3_mob.png?iv=1793203794-81709');
}

.dung_4_mob {
    --border-image: url('/img/border/dung_4_mob.png?iv=1793203794-59322');
}

.dung_5_mob {
    --border-image: url('/img/border/dung_5_mob.png?iv=1793203794-87786');
}

.dung_6_mob {
    --border-image: url('/img/border/dung_6_mob.png?iv=1793203794-86317');
}

.dung_7_mob {
    --border-image: url('/img/border/dung_7_mob.png?iv=1793203794-104863');
}

.dung_8_mob {
    --border-image: url('/img/border/dung_8_mob.png?iv=1793203794-87420');
}

.dung_9_mob {
    --border-image: url('/img/border/dung_9_mob.png?iv=1793203794-78565');
}

.dung_10_mob {
    --border-image: url('/img/border/dung_10_mob.png?iv=1793203794-92906');
}

.brd_dragon_m {
    --border-image: url('/img/border/dragon_mob.png?iv=1793203794-65333');
}

.brd_dragon_b {
    --border-image: url('/img/border/dragon_boss.png?iv=1793203794-64136');
}

.border_autumn_26_01 {
    --border-image: url('/img/border/border_autumn_26_01.png?iv=1793203793-119185');
}

.border_autumn_26_02 {
    --border-image: url('/img/border/border_autumn_26_02.png?iv=1793203793-112931');
}

.border_autumn_26_03 {
    --border-image: url('/img/border/border_autumn_26_03.png?iv=1793203793-113196');
}

.border_autumn_26_04 {
    --border-image: url('/img/border/border_autumn_26_04.png?iv=1793203793-130960');
}

.border_autumn_26_05 {
    --border-image: url('/img/border/border_autumn_26_05.png?iv=1793203793-145433');
}

.border_autumn_26_06 {
    --border-image: url('/img/border/border_autumn_26_06.png?iv=1793203793-107855');
}

.border_autumn_26_07 {
    --border-image: url('/img/border/border_autumn_26_07.png?iv=1793203793-88732');
}

.border_autumn_26_08 {
    --border-image: url('/img/border/border_autumn_26_08.png?iv=1793203793-89263');
}

.border_autumn_26_09 {
    --border-image: url('/img/border/border_autumn_26_09.png?iv=1793203793-93461');
}

.border_autumn_26_10 {
    --border-image: url('/img/border/border_autumn_26_10.png?iv=1793203793-83688');
}

.border_autumn_26_11 {
    --border-image: url('/img/border/border_autumn_26_11.png?iv=1793203793-85507');
}

.border_autumn_26_12 {
    --border-image: url('/img/border/border_autumn_26_12.png?iv=1793203793-77927');
}

.border_autumn_26_13 {
    --border-image: url('/img/border/border_autumn_26_13.png?iv=1793203793-94149');
}

.border_autumn_26_14 {
    --border-image: url('/img/border/border_autumn_26_14.png?iv=1793203793-108527');
}

.border_autumn_26_15 {
    --border-image: url('/img/border/border_autumn_26_15.png?iv=1793203793-94623');
}

.border_autumn_26_16 {
    --border-image: url('/img/border/border_autumn_26_16.png?iv=1793203793-106376');
}

.border_autumn_26_17 {
    --border-image: url('/img/border/border_autumn_26_17.png?iv=1793203793-80475');
}

.border_autumn_26_18 {
    --border-image: url('/img/border/border_autumn_26_18.png?iv=1793203793-100140');
}

.border_autumn_26_19 {
    --border-image: url('/img/border/border_autumn_26_19.png?iv=1793203793-88891');
}

.border_autumn_26_20 {
    --border-image: url('/img/border/border_autumn_26_20.png?iv=1793203793-97485');
}

.border_autumn_26_21 {
    --border-image: url('/img/border/border_autumn_26_21.png?iv=1793203793-102212');
}

.border_autumn_26_22 {
    --border-image: url('/img/border/border_autumn_26_22.png?iv=1793203793-104249');
}

.border_autumn_26_23 {
    --border-image: url('/img/border/border_autumn_26_23.png?iv=1793203793-103044');
}

.hero-img-2 {
    height: 205px;
    width: 205px;
    display: inline-block;
    margin: auto;
    border-radius: 10px;
    border: 1px solid #ff0;
}

/* 27. Навигация и дополнительные размеры
   ==================================================================== */

.pagination ul.nav-list {
    display: table;
    width: 100%;
    margin: 5px 0;
    padding: 0;
    text-align: center;
}

.pagination ul.nav-list li {
    width: 30px;
    height: 20px;
    border-radius: 10px;
    padding-top: 5px;
    display: inline-block;
    margin-left: 5px;
    border: 1px solid #101f54;
    text-align: center;
    color: #c4deffc7;
    font-size: 15px;
    background-color: #0210433d;
}

.pagination ul.nav-list li:hover {
    color: #c4deff;
    background-color: #3954b138;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    transform: scale(1.02);
    transition: all 0.1s ease-in-out;
}

.pb4 {
    padding-bottom: 4px;
}

.pt7 {
    padding-top: 7px;
}

.h240 {
    min-height: 240px;
}

.cb {
    clear: both;
}

.tar {
    text-align: right;
}

.br50pc {
    border-radius: 50%;
}

.blocks-l-c {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}

ul.table-row {
    /*display: table-row;*/
    padding: 0px;
    margin: 0px 0px;
}

ul.table-row li {
    display: table-cell;
}

/* ANIMATIONS */

/* 28. Анимации и фоны локаций
   ==================================================================== */

.volkov {
    animation: volkov 3s linear infinite;
}

@keyframes volkov {
    0% {
        opacity: 0.7;
        -webkit-transform: rotate(-0.1deg);
    }

    50% {
        opacity: 1;
        -webkit-transform: rotate(0.1deg);
    }

    100% {
        opacity: 0.7;
        -webkit-transform: rotate(-0.1deg);
    }
}

.ball {
    animation: ball 2s ease-out infinite;
}

@keyframes ball {
    0% {
        opacity: 0.7;
        -moz-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
    }

    50% {
        opacity: 1;
        -moz-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
    }

    100% {
        opacity: 0.7;
        -moz-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
    }
}

.back_none, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/profile_none.png?iv=1793203792-168592);
    background-position: top;
    background-repeat: no-repeat;
}

.back-dungeon, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/icons/diz/fon_dungeon.png);
    background-position: top;
    background-repeat: no-repeat;
}

.back-index, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/icons/diz/logo_index.png);
    background-position: top;
    background-repeat: no-repeat;
}

.back-arena, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/icons/diz/fon_arena.png);
    background-position: top;
    background-repeat: no-repeat;
}

.back-main, .back- {
    width: 100%;
    min-height: 180px;
    background-image: url(/icons/fon3.png);
    background-position: top;
    background-repeat: no-repeat;
}

.back-main2, .back- {
    width: 100%;
    min-height: 375px;
    background-image: url(/icons/fon4.png);
    background-position: top;
    background-repeat: no-repeat;
}

.back-dung1, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/dung1.png?iv=1793203790-352551);
    background-position: top;
    background-repeat: no-repeat;
}

.back-dung2, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/dung2.png?iv=1793203791-352639);
    background-position: top;
    background-repeat: no-repeat;
}

.back-dung3, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/dung3.png?iv=1793203791-320397);
    background-position: top;
    background-repeat: no-repeat;
}

.back-dung4, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/dung4.png?iv=1793203791-396868);
    background-position: top;
    background-repeat: no-repeat;
}

.back-dung5, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/dung5.png?iv=1793203791-374758);
    background-position: top;
    background-repeat: no-repeat;
}

.back-dung6, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/dung6.png?iv=1793203791-427461);
    background-position: top;
    background-repeat: no-repeat;
}

.back-dung7, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/dung7.png?iv=1793203791-406277);
    background-position: top;
    background-repeat: no-repeat;
}

.back-dung8, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/dung8.png?iv=1793203791-322159);
    background-position: top;
    background-repeat: no-repeat;
}

.back-dung9, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/dung9.png?iv=1793203791-365103);
    background-position: top;
    background-repeat: no-repeat;
}

.back-dung10, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/dung10.png?iv=1793203791-328277);
    background-position: top;
    background-repeat: no-repeat;
}

.back-world_boss1, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/world_boss.png?iv=1793203793-356293);
    background-position: top;
    background-repeat: no-repeat;
}

.back-dragon_01, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/dragon_01.png?iv=1793203790-488508);
    background-position: top;
    background-repeat: no-repeat;
}

.back-territories, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/territories.png?iv=1793203792-227936);
    background-position: top;
    background-repeat: no-repeat;
}

.back-portal-0, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/portal_0.png?iv=1793203792-228133);
    background-position: top;
    background-repeat: no-repeat;
}

.back-portal-1, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/portal_1.png?iv=1793203792-263034);
    background-position: top;
    background-repeat: no-repeat;
}

.back-town-e1, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/town_e1.png?iv=1793203792-296522);
    background-position: top;
    background-repeat: no-repeat;
}

.back-town, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/town.jpg?iv=1793203792-78346);
    background-position: top;
    background-repeat: no-repeat;
}

.back-almaz-mount, .back- {
    width: 100%;
    min-height: 538px;
    background-image: url(/img/background/almaz_mount.png?iv=1793203788-363582);
    background-position: top;
    background-repeat: no-repeat;
}

.back-castle_01, .back- {
    width: 100%;
    min-height: 538px;
    background-image: url(/img/background/castle_01.png?iv=1793203790-343320);
    background-position: top;
    background-repeat: no-repeat;
}

.back-castle_02, .back- {
    width: 100%;
    min-height: 538px;
    background-image: url(/img/background/castle_02.png?iv=1793203790-320300);
    background-position: top;
    background-repeat: no-repeat;
}

.back-castle_03, .back- {
    width: 100%;
    min-height: 538px;
    background-image: url(/img/background/castle_03.png?iv=1793203790-329579);
    background-position: top;
    background-repeat: no-repeat;
}

.back-castle_04, .back- {
    width: 100%;
    min-height: 538px;
    background-image: url(/img/background/castle_04.png?iv=1793203790-319166);
    background-position: top;
    background-repeat: no-repeat;
}

.back-castle_05, .back- {
    width: 100%;
    min-height: 538px;
    background-image: url(/img/background/forest_04.png?iv=1793203791-325491);
    background-position: top;
    background-repeat: no-repeat;
}

.back-user1, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/user_race1.png?iv=1793203793-350587);
    background-position: top;
    background-repeat: no-repeat;
}

.back-user2, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/user_race2.png?iv=1793203793-363429);
    background-position: top;
    background-repeat: no-repeat;
}

.back_l_war, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/l_war.png?iv=1793203791-330521);
    background-position: top;
    background-repeat: no-repeat;
}

.back_l_mag, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/l_mag.png?iv=1793203791-285869);
    background-position: top;
    background-repeat: no-repeat;
}

.back_l_kill, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/l_killer.png?iv=1793203791-317119);
    background-position: top;
    background-repeat: no-repeat;
}

.back_n_war, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/n_war.png?iv=1793203792-302232);
    background-position: top;
    background-repeat: no-repeat;
}

.back_n_mag, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/n_mag.png?iv=1793203792-231601);
    background-position: top;
    background-repeat: no-repeat;
}

.back_n_kill, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/n_killer.png?iv=1793203792-298786);
    background-position: top;
    background-repeat: no-repeat;
}

.back-family, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/family.png?iv=1793203791-506153);
    background-position: top;
    background-repeat: no-repeat;
}

.back-magic-01, .back- {
    width: 100%;
    min-height: 430px;
    background-image: url(/img/background/magic_01.png?iv=1793203791-286414);
    background-position: top;
    background-repeat: no-repeat;
}

.back-magic-02, .back- {
    width: 100%;
    min-height: 430px;
    background-image: url(/img/background/magic_02.png?iv=1793203791-299387);
    background-position: top;
    background-repeat: no-repeat;
}

.back-magic-03, .back- {
    width: 100%;
    min-height: 430px;
    background-image: url(/img/background/magic_03.png?iv=1793203791-297067);
    background-position: top;
    background-repeat: no-repeat;
}

.back-magic-04, .back- {
    width: 100%;
    min-height: 430px;
    background-image: url(/img/background/magic_04.png?iv=1793203792-292294);
    background-position: top;
    background-repeat: no-repeat;
}

.back-battlepass, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/battlepass.png?iv=1793203790-299182);
    background-position: top;
    background-repeat: no-repeat;
}

.back-battlepass-spring-2026, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/bp_spring_2026.png?iv=1793203790-555487);
    background-position: top;
    background-repeat: no-repeat;
}

.back-battlepass-summer-2026, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/bp_summer_2026.png?iv=1793203790-548135);
    background-position: top;
    background-repeat: no-repeat;
}

.back-battlepass-autumn-2026, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/bp_autumn_2026.png?iv=1793203790-668898);
    background-position: top;
    background-repeat: no-repeat;
}

.back-gamehouse, .back- {
    width: 100%;
    min-height: 430px;
    background-image: url(/img/background/gamehouse.png?iv=1793203791-349462);
    background-position: top;
    background-repeat: no-repeat;
}

.back-skill, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/skill_back.png?iv=1793203792-357114);
    background-position: top;
    background-repeat: no-repeat;
}

.back-forest, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/forest_back.png?iv=1793203791-376708);
    background-position: top;
    background-repeat: no-repeat;
}

.back-mine, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/mine_back.png?iv=1793203792-455618);
    background-position: top;
    background-repeat: no-repeat;
}

.back-mz, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/back_mz.png?iv=1793203790-362152);
    background-position: top;
    background-repeat: no-repeat;
}

.back-company, .back- {
    width: 100%;
    min-height: 300px;
    background-image: url(/img/background/back_company.png?iv=1793203789-315057);
    background-position: top;
    background-repeat: no-repeat;
}

.back-boss, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/wb_in.png?iv=1793203793-319391);
    background-position: top;
    background-repeat: no-repeat;
}

.back-campaign, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/campaign.png?iv=1793203790-335065);
    background-position: top;
    background-repeat: no-repeat;
}

.back-rudnik, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/rudnik.png?iv=1793203792-297250);
    background-position: top;
    background-repeat: no-repeat;
}

.back-clan-mine-1, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/clan_mine_1.png?iv=1793203790-592257);
    background-position: top;
    background-repeat: no-repeat;
}

.back-clan-mine-2, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/clan_mine_2.png?iv=1793203790-607332);
    background-position: top;
    background-repeat: no-repeat;
}

.back-clan-mine-3, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/clan_mine_3.png?iv=1793203790-616649);
    background-position: top;
    background-repeat: no-repeat;
}

.back-clan-mine-4, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/clan_mine_4.png?iv=1793203790-582889);
    background-position: top;
    background-repeat: no-repeat;
}

.back-clan-mine-5, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/clan_mine_5.png?iv=1793203790-566093);
    background-position: top;
    background-repeat: no-repeat;
}

.back-clan-throne-1, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/clan_throne_5.png?iv=1793203790-431608);
    background-position: top;
    background-repeat: no-repeat;
}

.back-clan-throne-2, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/clan_throne_4.png?iv=1793203790-446552);
    background-position: top;
    background-repeat: no-repeat;
}

.back-clan-throne-3, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/clan_throne_3.png?iv=1793203790-456622);
    background-position: top;
    background-repeat: no-repeat;
}

.back-clan-throne-4, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/clan_throne_2.png?iv=1793203790-541754);
    background-position: top;
    background-repeat: no-repeat;
}

.back-clan-throne-5, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/clan_throne_2.png?iv=1793203790-541754);
    background-position: top;
    background-repeat: no-repeat;
}

.back-ruins, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/back-ruins.png?iv=1793203789-301069);
    background-position: top;
    background-repeat: no-repeat;
}

.back-cave1, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/cave_1.png?iv=1793203790-349021);
    background-position: top;
    background-repeat: no-repeat;
}

.back-cave2, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/cave_2.png?iv=1793203790-335212);
    background-position: top;
    background-repeat: no-repeat;
}

.back-cave3, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/cave_3.png?iv=1793203790-332877);
    background-position: top;
    background-repeat: no-repeat;
}

.back-raz1, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/raz_1.png?iv=1793203792-484843);
    background-position: top;
    background-repeat: no-repeat;
}

.back-raz2, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/raz_2.png?iv=1793203792-442850);
    background-position: top;
    background-repeat: no-repeat;
}

.back-raz3, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/raz_3.png?iv=1793203792-559697);
    background-position: top;
    background-repeat: no-repeat;
}

.back-magic_03, .back- {
    width: 100%;
    min-height: 538px;
    background-image: url(/img/background/magic_03.png?iv=1793203791-297067);
    background-position: top;
    background-repeat: no-repeat;
}

.back-arena02, .back- {
    width: 100%;
    min-height: 725px;
    background-image: url(/img/background/arena_02.png?iv=1793203789-376731);
    background-position: top;
    background-repeat: no-repeat;
}

.back-topclan, .back- {
    width: 100%;
    min-height: 725px;
    background-image: url(/img/background/clan_top.png?iv=1793203790-268102);
    background-position: top;
    background-repeat: no-repeat;
}

.back-5, .back- {
    width: 100%;
    min-height: 180px;
    background-image: url(/icons/fon5.png);
    background-position: top;
    background-repeat: no-repeat;
}

.back-clan, .back- {
    width: 100%;
    min-height: 300px;
    background-image: url(/icons/clan_back.png);
    background-position: top;
    background-repeat: no-repeat;
}

.back_clan_boss, .back- {
    width: 100%;
    min-height: 515px;
    background-image: url(/img/background/clan_boss.png?iv=1793203790-250857);
    background-position: top;
    background-repeat: no-repeat;
}

.back_hell_01, .back- {
    width: 100%;
    min-height: 538px;
    background-image: url(/img/background/hell_01.png?iv=1793203791-298034);
    background-position: top;
    background-repeat: no-repeat;
}

.back_hell_02, .back- {
    width: 100%;
    min-height: 538px;
    background-image: url(/img/background/hell_02.png?iv=1793203791-301255);
    background-position: top;
    background-repeat: no-repeat;
}

.back_hell_03, .back- {
    width: 100%;
    min-height: 538px;
    background-image: url(/img/background/hell_03.png?iv=1793203791-291077);
    background-position: top;
    background-repeat: no-repeat;
}

.back_hell_04, .back- {
    width: 100%;
    min-height: 538px;
    background-image: url(/img/background/hell_04.png?iv=1793203791-280070);
    background-position: top;
    background-repeat: no-repeat;
}

.back_smith, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_smith.png?iv=1793203790-312697);
    background-position: top;
    background-repeat: no-repeat;
}

.back_timer, .back- {
    width: 100%;
    min-height: 760px;
    background-image: url(/img/background/back_timer.png?iv=1793203790-566184);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_01, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_01.png?iv=1793203789-405046);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_02, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_02.png?iv=1793203789-413753);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_03, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_03.png?iv=1793203789-400795);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_04, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_04.png?iv=1793203789-412848);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_05, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_05.png?iv=1793203789-419472);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_06, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_06.png?iv=1793203789-463750);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_07, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_07.png?iv=1793203789-389812);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_08, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_08.png?iv=1793203789-449565);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_09, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_09.png?iv=1793203789-454110);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_10, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_10.png?iv=1793203789-417199);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_11, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_11.png?iv=1793203789-471739);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_12, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_12.png?iv=1793203789-448236);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_13, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_13.png?iv=1793203789-382607);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_14, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_14.png?iv=1793203789-468022);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_15, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_15.png?iv=1793203789-432048);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_16, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_16.png?iv=1793203789-462366);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_17, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_17.png?iv=1793203789-466273);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_18, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_18.png?iv=1793203789-448923);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_19, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_19.png?iv=1793203789-489587);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_20, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_20.png?iv=1793203789-501927);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_21, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_21.png?iv=1793203789-453606);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_22, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_22.png?iv=1793203789-461004);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_23, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_23.png?iv=1793203789-418556);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_24, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_24.png?iv=1793203789-416767);
    background-position: top;
    background-repeat: no-repeat;
}

.back_campaign_25, .back- {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/back_campaign_25.png?iv=1793203789-411639);
    background-position: top;
    background-repeat: no-repeat;
}

.back_bank {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/bank.png?iv=1793203790-331991);
    background-position: top;
    background-repeat: no-repeat;
}

.back_town_1 {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/town_1.png?iv=1793203792-485107);
    background-position: top;
    background-repeat: no-repeat;
}

.back_town_2 {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/town_2.png?iv=1793203792-466656);
    background-position: top;
    background-repeat: no-repeat;
}

.back_town_3 {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/town_3.png?iv=1793203792-521572);
    background-position: top;
    background-repeat: no-repeat;
}

.back_town_4 {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/town_4.png?iv=1793203792-431170);
    background-position: top;
    background-repeat: no-repeat;
}

.back_town_5 {
    width: 100%;
    min-height: 645px;
    background-image: url(/img/background/town_5.png?iv=1793203792-424541);
    background-position: top;
    background-repeat: no-repeat;
}

.pet_info_panel {
    width: 220px;
    border: 1px solid rgba(0, 0, 0, 0.46);
    border-top: 1px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: rgba(10, 50, 57, 0.78);
}

.chest3 {
    color: #7f7e7e;
}

/* TOOLS */

/* Простые стили для модального окна */

/* 29. Инструменты, улучшение и создание предметов
   ==================================================================== */

.modal5 {
    display: none;
    /* Модальное окно скрыто по умолчанию */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    color: black;
    padding: 20px;
    border: 1px solid black;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    z-index: 1001;
}

.modal-overlay {
    display: none;
    /* Скрываем overlay */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    /* Overlay под модальным окном */
}

.modal-header {
    font-size: 18px;
    font-weight: bold;
}

.modal-content {
    margin-top: 10px;
}

.item {
    padding: 10px;
    margin: 10px;
    border: 1px solid #ddd;
    display: inline-block;
    border-radius: 5px;
    background-color: #f9f9f9;
    cursor: pointer;
}

.item:hover {
    background-color: #ddd;
}

.stat-item {
    margin-top: 10px;
}

.button_tool {
    display: flex;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    border: 3px solid #4c49474a;
    margin: 10px;
    background: #1b252a7a;
    filter: drop-shadow(3px 3px 10px #0000008a);
    cursor: pointer;
    animation: push 2s infinite;
}

.button_main {
    display: flex;
    width: clamp(40px, 13vw, 60px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    border: 3px solid #4c49474a;
    background: #1b252a7a;
    filter: drop-shadow(3px 3px 10px #0000008a);
    cursor: pointer;
}

.button_main:hover {
    border: 3px solid #4561c34a;
    background: #2337417a;
    filter: drop-shadow(3px 3px 10px #0000008a);
}

.button_main_green {
    display: flex;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    border: 3px solid #20c3254a;
    background: #1b252a7a;
    filter: drop-shadow(3px 3px 10px #0000008a);
    cursor: pointer;
}

.button_main_green:hover {
    display: flex;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    border: 3px solid #2dff344a;
    background: #2337417a;
    filter: drop-shadow(3px 3px 10px #0000008a);
    cursor: pointer;
}

.button_main_select {
    display: flex;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    border: 3px solid #29375b;
    background: #1b252a7a;
    filter: drop-shadow(3px 3px 10px #0000008a);
    cursor: pointer;
}

.button_main_select:hover {
    display: flex;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    border: 3px solid #4561c34a;
    background: #2337417a;
    filter: drop-shadow(3px 3px 10px #4a5e91);
    cursor: pointer;
}

.button_upgrade {
    display: flex;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    border: 3px solid #4c49474a;
    background: #1b252a7a;
    filter: drop-shadow(3px 3px 10px #0000008a);
    cursor: pointer;
}

.button_upgrade:hover {
    border: 3px solid #26335dba;
}

.button_craft_green {
    display: flex;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    border: 3px solid #08a24852;
    background: #1b252a7a;
    filter: drop-shadow(3px 3px 10px #0000008a);
    cursor: pointer;
}

.button_craft_green:hover {
    border: 3px solid #08a248bf;
}

.button_craft_red {
    display: flex;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    border: 3px solid #a208084a;
    background: #1b252a7a;
    filter: drop-shadow(3px 3px 10px #0000008a);
    cursor: pointer;
}

.button_craft_red:hover {
    border: 3px solid #a208086e;
}

.btn_dop_text {
    position: absolute;
    padding-top: 59px;
}

.pick_upgrade {
    width: 50px;
    height: 50px;
    filter: drop-shadow(3px 3px 10px #0000008a);
}

.pick img {
    width: 45px;
    height: 45px;
    filter: drop-shadow(3px 3px 10px #0000008a);
}

.pick:hover {
    border: 3px solid #0096882b;
}

/* 30. Анимации кнопок и декоративные эффекты
   ==================================================================== */

.anim_jump {
    animation: jump 2s infinite;
}

@keyframes jump {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.anim_push {
    animation: push 2s infinite;
}

@keyframes push {
    0% {
        box-shadow: 0 0 0 0 #00000063;
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0);
        transform: scale(1.1);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        transform: scale(1);
    }
}

@keyframes glow {
    0% {
        filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.54));
    }

    50% {
        filter: drop-shadow(3px 3px 20px rgba(255, 0, 0, 0.5));
    }

    100% {
        filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.54));
    }
}

@keyframes gradientAnimation {
    0% {
        background: linear-gradient(to right, #a32c2c00, #a32c2c4d, #a32c2c00);
    }

    50% {
        background: linear-gradient(to right, #a32c2c4d, #a32c2c00, #a32c2c4d);
    }

    100% {
        background: linear-gradient(to right, #a32c2c00, #a32c2c4d, #a32c2c00);
    }
}

@keyframes borderMovement {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 200% 0%;
    }
}

@keyframes vignetteEffect {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.05);
    }
}

/* Кнопка выпадающего меню */

/* 31. Меню, рамки редкости и навыков
   ==================================================================== */

.main_button_menu {
    position: fixed;
    top: 5px;
    z-index: 1000;
    width: 25px;
    height: 25px;
    padding-left: 2px;
    background-image: linear-gradient(to bottom, #00000026 15%, #000000d1 30%, #000000 50%, #000000d1 70%, #00000026 85%);
}

/* Рамки качества предметов и NPC */

/* 0 — Серый */

.r3_type_0 {
    border-radius: 10px;
    border: 2px solid #2d2d2d;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .65);
    transition: border-color .15s, box-shadow .15s;
}

.r3_type_0:hover {
    border-radius: 10px;
    border: 2px solid #454444;
    box-shadow: 0 0 0 1px rgba(119, 119, 119, .25), 0px 0px 5px 5px rgba(119, 119, 119, .4);
    transition: border-color .15s, box-shadow .15s;
    border-color: #a2a2a2;
}

.r3_type_0_active {
    border-radius: 10px;
    border: 2px solid #4b4b4b;
    box-shadow: 0 0 0 1px rgba(119, 119, 119, .25), 0px 0px 5px 5px rgba(119, 119, 119, .4);
    transition: border-color .15s, box-shadow .15s;
    border-color: #3f3e3e;
}

.r3_type_0_active:hover {
    border-radius: 10px;
    border: 2px solid #4b4b4b;
    box-shadow: 0 0 0 1px rgba(119, 119, 119, .4), 0px 0px 5px 5px rgba(119, 119, 119, .4);
    transition: border-color .15s, box-shadow .15s;
    border-color: #3f3e3e;
}

/* 1 — Зелёный */

.r3_type_1 {
    border-radius: 10px;
    border: 2px solid #408728;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .65);
    transition: border-color .15s, box-shadow .15s;
}

.r3_type_1:hover {
    border-radius: 10px;
    border: 2px solid #4e873b;
    box-shadow: 0 0 0 1px rgba(78, 135, 59, .25), 0px 0px 5px 5px rgba(78, 135, 59, .4);
    transition: border-color .15s, box-shadow .15s;
    border-color: #6ba34f;
}

.r3_type_1_active {
    border-radius: 10px;
    border: 2px solid #408728;
    box-shadow: 0 0 0 1px rgba(78, 135, 59, .25), 0px 0px 5px 5px rgba(78, 135, 59, .4);
    transition: border-color .15s, box-shadow .15s;
    border-color: #408728;
}

.r3_type_1_active:hover {
    border-radius: 10px;
    border: 2px solid #4e873b;
    box-shadow: 0 0 0 1px rgba(78, 135, 59, .4), 0px 0px 5px 5px rgba(78, 135, 59, .4);
    transition: border-color .15s, box-shadow .15s;
    border-color: #6ba34f;
}

/* 2 — Синий */

.r3_type_2 {
    border-radius: 10px;
    border: 2px solid #163761;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .65);
    transition: border-color .15s, box-shadow .15s;
}

.r3_type_2:hover {
    border-radius: 10px;
    border: 2px solid #164684;
    box-shadow: 0 0 0 1px rgba(53, 95, 160, .25), 0px 0px 5px 5px rgba(53, 95, 160, .4);
    transition: border-color .15s, box-shadow .15s;
    border-color: #164684;
}

.r3_type_2_active {
    border-radius: 10px;
    border: 2px solid #163761;
    box-shadow: 0 0 0 1px rgba(53, 95, 160, .25), 0px 0px 5px 5px rgba(53, 95, 160, .4);
    transition: border-color .15s, box-shadow .15s;
    border-color: #163761;
}

.r3_type_2_active:hover {
    border-radius: 10px;
    border: 2px solid #164684;
    box-shadow: 0 0 0 1px rgba(53, 95, 160, .4), 0px 0px 5px 5px rgba(53, 95, 160, .4);
    transition: border-color .15s, box-shadow .15s;
    border-color: #164684;
}

/* 3 — Фиолетовый */

.r3_type_3 {
    border-radius: 10px;
    border: 2px solid #542579;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .65);
    transition: border-color .15s, box-shadow .15s;
}

.r3_type_3:hover {
    border-radius: 10px;
    border: 2px solid #6f22ab;
    box-shadow: 0 0 0 1px rgba(119, 70, 157, .25), 0px 0px 5px 5px rgba(119, 70, 157, .4);
    transition: border-color .15s, box-shadow .15s;
    border-color: #7e36b6;
}

.r3_type_3_active {
    border-radius: 10px;
    border: 2px solid #5f3283;
    box-shadow: 0 0 0 1px rgba(119, 70, 157, .25), 0px 0px 5px 5px rgb(102 39 152 / 60%);
    transition: border-color .15s, box-shadow .15s;
    border-color: #7938ad;
}

.r3_type_3_active:hover {
    border-radius: 10px;
    border: 2px solid #5f3283;
    box-shadow: 0 0 0 1px rgba(119, 70, 157, .25), 0px 0px 5px 5px rgb(136 37 214 / 60%);
    transition: border-color .15s, box-shadow .15s;
    border-color: #983fe0;
}

/* 4 — Оранжевый */

.r3_type_4 {
    border-radius: 10px;
    border: 2px solid #af5f04;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .65);
    transition: border-color .15s, box-shadow .15s;
}

.r3_type_4:hover {
    border-radius: 10px;
    border: 2px solid #d17f32;
    box-shadow: 0 0 0 1px rgba(185, 102, 32, .25), 0px 0px 5px 5px rgba(185, 102, 32, .4);
    transition: border-color .15s, box-shadow .15s;
    border-color: #d17f32;
}

.r3_type_4_active {
    border-radius: 10px;
    border: 2px solid #af5f04;
    box-shadow: 0 0 0 1px rgba(185, 102, 32, .25), 0px 0px 5px 5px rgba(185, 102, 32, .4);
    transition: border-color .15s, box-shadow .15s;
    border-color: #af5f04;
}

.r3_type_4_active:hover {
    border-radius: 10px;
    border: 2px solid #b96620;
    box-shadow: 0 0 0 1px rgba(185, 102, 32, .4), 0px 0px 5px 5px rgba(185, 102, 32, .4);
    transition: border-color .15s, box-shadow .15s;
    border-color: #d17f32;
}

/* 5 — Красный */

.r3_type_5 {
    border-radius: 10px;
    border: 2px solid #bb2417;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .65);
    transition: border-color .15s, box-shadow .15s;
}

.r3_type_5:hover {
    border-radius: 10px;
    border: 2px solid #a00d00;
    box-shadow: 0 0 0 1px rgb(160 13 0 / 33%), 0px 0px 5px 5px rgb(170 7 0 / 57%);
    transition: border-color .15s, box-shadow .15s;
    border-color: #a00d00;
}

.r3_type_5_active {
    border-radius: 10px;
    border: 2px solid #d92313;
    box-shadow: 0 0 0 1px rgba(168, 50, 45, .25), 0px 0px 5px 5px rgba(168, 50, 45, .4);
    transition: border-color .15s, box-shadow .15s;
    border-color: #d92313;
}

.r3_type_5_active:hover {
    border-radius: 10px;
    border: 2px solid #a8322d;
    box-shadow: 0 0 0 1px rgba(168, 50, 45, .4), 0px 0px 5px 5px rgba(168, 50, 45, .4);
    transition: border-color .15s, box-shadow .15s;
    border-color: #c74a3f;
}

.r4_type {
    border-radius: 30px 30px;
}

.r4_type_0_active {
    border-radius: 30px 30px;
    border: 2px solid #36576c;
    box-shadow: 0 0 0 0px #b7272c, 0 0 30px #36576c;
}

.r4_type_1_active {
    border-radius: 30px 30px;
    border: 2px solid #499d32;
    box-shadow: 0 0 0 0px #499d32, 0 0 30px #499d32;
}

.r4_type_2_active {
    border-radius: 30px 30px;
    border: 2px solid #2c4985;
    box-shadow: 0 0 0 0px #2c4985, 0 0 30px #2c4985;
}

.r4_type_3_active {
    border-radius: 30px 30px;
    border: 2px solid #5e1dad;
    box-shadow: 0 0 0 0px #5e1dad, 0 0 30px #5e1dad;
}

.r4_type_4_active {
    border-radius: 30px 30px;
    border: 2px solid #954204;
    box-shadow: 0 0 0 0px #954204, 0 0 30px #954204;
}

.r4_type_5_active {
    border-radius: 30px 30px;
    border: 2px solid #a90000;
    box-shadow: 0 0 0 0px #b7272c, 0 0 30px #b10f0f;
}

.r_skill {
    border-radius: 30%;
    border: 2px solid #173664;
    min-width: 64px;
    min-height: 64px;
}

.r_skill_1 {
    border-radius: 30%;
    border: 2px solid #2c4985;
    min-width: 64px;
    min-height: 64px;
}

.r_skill_2 {
    border-radius: 30%;
    border: 2px solid #5e1dad;
    min-width: 64px;
    min-height: 64px;
}

.r_skill_3 {
    border-radius: 30%;
    border: 2px solid #954204;
    min-width: 64px;
    min-height: 64px;
}

.r_skill_4 {
    border-radius: 30%;
    border: 2px solid #954204;
    min-width: 64px;
    min-height: 64px;
}

.r_skill_5 {
    border-radius: 30%;
    border: 2px solid #499d32;
    min-width: 64px;
    min-height: 64px;
}

.skill_box_1 {
    box-shadow: 0 0 15px rgb(59 84 255 / 88%);
}

.skill_box_1:hover {
    box-shadow: 0 0 10px rgb(125 141 249 / 88%);
}

.skill_box_2 {
    box-shadow: 0 0 15px rgb(131 52 227);
}

.skill_box_2:hover {
    box-shadow: 0 0 15px rgb(171 116 237);
}

.skill_box_3 {
    box-shadow: 0 0 15px rgb(255 162 67);
}

.skill_box_3:hover {
    box-shadow: 0 0 15px rgb(255 198 140);
}

.skill_box_4 {
    box-shadow: 0 0 15px rgb(255 162 67);
}

.skill_box_4:hover {
    box-shadow: 0 0 15px rgb(255 198 140);
}

.skill_box_5 {
    box-shadow: 0 0 15px rgb(17 241 44);
}

.skill_box_5:hover {
    box-shadow: 0 0 15px rgb(157 247 168);
}

/* Страница клана */

/**/

/* SKILLS */

/* 32. Общие компоненты и типографика
   ==================================================================== */

.container {
    color: #BEBEBE;
    text-shadow: 1px 1px 1px black;
    background-color: #0b1a22;
}

h1 {
    font-size: 18px;
}

ul li {
    padding: 4px 0;
}

ol, ul {
    list-style: none;
}

/* Margin */

/* Padding */

/* 33. Дополнительные отступы
   ==================================================================== */

.pt50 {
    padding-top: 50px;
}

.pb50 {
    padding-bottom: 50px;
}

/* Chat */

/* 34. Сообщения чата и почты
   ==================================================================== */

.chat-message {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding: 6px 5px;
    border-radius: 5px;
}

.chat-block {
    display:flex;align-items:center;gap:5px;padding:3px 5px;border-radius:5px;
}

.chat-avatar {
    width: 36px;
    flex-shrink: 0;
    border-radius: 5px;
    box-shadow: 0 0 0 1px #2f6719, 0 0 13px #36de11;
    /* онлайн цвет */
}

.chat-content {
    flex-grow: 1;
}

.chat-name {
    font-size: 12px;
}

.chat-text {
    font-size: 12px;
}

.chat-time {
    font-size: 10px;
    color: #888888;
}

.chat-buttons {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: right;
}

.chat-buttons img {
    width: 20px;
    cursor: pointer;
}

.mail-message {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding: 1px 5px;
    border-radius: 5px;
}

.row-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* по вертикали */
}

/* upgrade flash */

/* 35. Результат улучшения и итоговые стили предметов
   ==================================================================== */

@keyframes flash-green {
    0% {
        background-color: #1f5c1f;
    }

    100% {
        background-color: transparent;
    }
}

@keyframes flash-red {
    0% {
        background-color: #5c1f1f;
    }

    100% {
        background-color: transparent;
    }
}

.item-block.flash-success {
    animation: flash-green 1s ease-out;
}

.item-block.flash-fail {
    animation: flash-red 1s ease-out;
}

.r10_type_0 {
    border-radius: 10px 10px;
    border: 2px solid #36576c;
}

.r10_type_1 {
    border-radius: 10px 10px;
    border: 2px solid #499d32;
}

.r10_type_2 {
    border-radius: 10px 10px;
    border: 2px solid #2c4985;
}

.r10_type_3 {
    border-radius: 10px 10px;
    border: 2px solid #5e1dad;
}

.r10_type_4 {
    border-radius: 10px 10px;
    border: 2px solid #954204;
}

.r10_type_5 {
    border-radius: 10px 10px;
    border: 2px solid #a90000;
}

.r4_type_0 {
    border-radius: 30px 30px;
    border: 2px solid #36576c;
}

.r4_type_0:hover {
    box-shadow: 0 0 0 0px #b7272c, 0 0 30px #36576c;
}

.r4_type_1 {
    border-radius: 30px 30px;
    border: 2px solid #499d32;
}

.r4_type_1:hover {
    box-shadow: 0 0 0 0px #499d32, 0 0 30px #499d32;
}

.r4_type_2 {
    border-radius: 30px 30px;
    border: 2px solid #2c4985;
}

.r4_type_2:hover {
    box-shadow: 0 0 0 0px #2c4985, 0 0 30px #2c4985;
}

.r4_type_3 {
    border-radius: 30px 30px;
    border: 2px solid #5e1dad;
}

.r4_type_3:hover {
    box-shadow: 0 0 0 0px #5e1dad, 0 0 30px #5e1dad;
}

.r4_type_4 {
    border-radius: 30px 30px;
    border: 2px solid #954204;
}

.r4_type_4:hover {
    box-shadow: 0 0 0 0px #954204, 0 0 30px #954204;
}

.r4_type_5 {
    border-radius: 30px 30px;
    border: 2px solid #a90000;
}

.r4_type_5:hover {
    box-shadow: 0 0 0 0px #b7272c, 0 0 30px #b10f0f;
}

.r1 {
    border-radius: 0 0 20px 20px;
}

.r2 {
    border-radius: 0 10px 20px;
}

.r3 {
    border-radius: 10px 20px;
}

.r4 {
    border-radius: 10px/20px;
}

.r5 {
    border-radius: 5px 10px 15px 30px/30px 15px 10px 5px;
}

.r6 {
    border-radius: 10px 20px 30px 40px/30px;
}

.r7 {
    border-radius: 50%;
}

.r8 {
    border-top: none;
    border-bottom: none;
    border-radius: 30px/90px;
}

.r9 {
    border-bottom-left-radius: 100px;
}

.r10 {
    border-radius: 0 100%;
}

.r11 {
    border-radius: 0 50% 50% 50%;
}

.r12 {
    border-top-left-radius: 100% 20px;
    border-bottom-right-radius: 100% 20px;
    border: 2px solid #034972;
}

.r_skill {
    border-radius: 30%;
    border: 2px solid #173664;
}

.r_skill_1 {
    border-radius: 30%;
    border: 2px solid #2c4985;
}

.r_skill_2 {
    border-radius: 30%;
    border: 2px solid #5e1dad;
}

.r_skill_3 {
    border-radius: 30%;
    border: 2px solid #954204;
}

.r_skill_4 {
    border-radius: 30%;
    border: 2px solid #954204;
}

.r_skill_5 {
    border-radius: 30%;
    border: 2px solid #499d32;
}

.stat_name {
    color: #789bc8;
    display: inline-block;
    /*max-width: 140px;*/
    text-align: left;
}

.inlinediv {
    display: inline-block;
}

.item_icon_wrapper {
    position: relative;
    height: 75px;
    width: 75px;
    vertical-align: middle;
    margin: auto;
    text-align: center;
}

/* Страница клана */

.item_icon_wrapper_clan {
    position: relative;
    height: 55px;
    width: 75px;
    vertical-align: middle;
    margin: auto;
    text-align: center;
}

.icon_wrapper_clan {
    position: absolute;
    width: 75px;
    height: 55px;
}

/**/

.bg_common {
    //*background-color: #020202;*//
}

.icon_wrapper {
    position: absolute;
    width: 75px;
    height: 75px;
}

.item_icon {
    width: 65px;
    height: 65px;
}

.grade_label {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 2px;
    padding-right: 2px;
}

.grade_name {
    font-style: italic;
    font-weight: bold;
    font-size: 16px;
    font-family: "Times New Roman",Times,serif;
}

.item_grade_C {
    color: #fff;
}

.item_grade_B {
    color: #6f92b7;
}

.item_grade_A {
    color: #5a58c1;
}

.item_grade_S {
    color: #ce2be0;
}

.item_grade_R {
    color: #dccf1f;
}

.item_grade_SR {
    color: #f3912a;
}

.item_level_label {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-left: 0px;
    padding-right: 0px;
}

.item_enchant_label {
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 2px;
    padding-right: 2px;
    color: #84cb7b;
    font-weight: bold;
}

.rare_0 {
    background-image: url(/images/rar/rar0.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100%;
}

.rare_1 {
    background-image: url(/images/rar/rar1.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100%;
}

/*SKILLS*/

/* 36. Итоговые стили меню и полей ввода
   ==================================================================== */

.dimmed {
    background-color: rgba(0,0,0,0.3);
}

.stretch {
    width: 100%;
}

.footer {
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 1.4;
    text-align: center;
    font-size: 13px;
    color: #ffffff;
}

.menu {
    padding: 6px 4px 8px 5px;
    display: block;
    margin-top: 1px;
    border: 1px solid #222222;
    border-top: 1px solid #4E4E4E;
    border-bottom: 1px solid #000000;
    color: #CCCCCC;
    text-decoration: none;
    text-shadow: 1px 1px 1px black;
    background-color: #122a37;
}

.menu:hover {
    padding: 6px 4px 8px 5px;
    display: block;
    margin-top: 1px;
    border: 1px solid #222222;
    border-top: 1px solid #4E4E4E;
    border-bottom: 1px solid #000000;
    color: #CCCCCC;
    text-decoration: none;
    text-shadow: 1px 1px 1px black;
    background-color: #0b1a22;
}

.menu._closed {
    color: #8C8C8C;
}

.user-list {
    padding: 0;
    width: 100%;
    border-left: none;
    border-right: none;
}

.input_text {
    border: 1px solid #0e3977;
    padding: 4px;
    border-radius: 1px;
    border-color: #0e3977;
    color: white;
    color: #d1d1d1;
    font-size: 15px;
    background-color: #1c1c1c;
}

/* Margin */

/* 37. Вспомогательные отступы: итоговые значения
   ==================================================================== */

.mlr8 {
    margin-left: 8px;
    margin-right: 8px;
}

.mlr20 {
    margin-left: 20px;
    margin-right: 20px;
}

.mlr30 {
    margin-left: 30px;
    margin-right: 30px;
}

.mlr50 {
    margin-left: 50px;
    margin-right: 50px;
}

.m2 {
    margin: 2px;
}

.m3 {
    margin: 3px;
}

.m5 {
    margin: 5px;
}

.m10 {
    margin: 10px;
}

.mt1 {
    margin-top: 1px;
}

.mt2 {
    margin-top: 2px;
}

.mt3 {
    margin-top: 3px;
}

.mt5 {
    margin-top: 5px;
}

.mt7 {
    margin-top: 7px;
}

.mt8 {
    margin-top: 8px;
}

.mt10 {
    margin-top: 10px;
}

.mt12 {
    margin-top: 12px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 20px;
}

.mt-5 {
    margin-top: -5px;
}

.mt-9 {
    margin-top: -9px;
}

.mb2 {
    margin-bottom: 2px;
}

.mb3 {
    margin-bottom: 3px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb12 {
    margin-bottom: 12px;
}

.mb20 {
    margin-bottom: 20px;
}

.ml2 {
    margin-left: 2px;
}

.ml3 {
    margin-left: 3px;
}

.ml5 {
    margin-left: 5px;
}

.ml10 {
    margin-left: 10px;
}

.ml-5 {
    margin-left: -5px;
}

.mr2 {
    margin-right: 2px;
}

.mr3 {
    margin-right: 3px;
}

.mr5 {
    margin-right: 5px;
}

.mr-5 {
    margin-right: -5px;
}

.mr10 {
    margin-right: 10px;
}

/* Padding */

.p2 {
    padding: 2px;
}

.p3 {
    padding: 3px;
}

.p5 {
    padding: 5px;
}

.p10 {
    padding: 10px;
}

.pt2 {
    padding-top: 2px;
}

.pt3 {
    padding-top: 3px;
}

.pt5 {
    padding-top: 5px;
}

.pt10 {
    padding-top: 10px;
}

.pt12 {
    padding-top: 16px;
}

.pt15 {
    padding-top: 15px;
}

.pb2 {
    padding-bottom: 2px;
}

.pb3 {
    padding-bottom: 3px;
}

.pb5 {
    padding-bottom: 5px;
}

.pb10 {
    padding-bottom: 10px;
}

.pl2 {
    padding-left: 2px;
}

.pl3 {
    padding-left: 3px;
}
.pl4 {
    padding-left: 4px;
}
.pl5 {
    padding-left: 5px;
}

.pl10 {
    padding-left: 10px;
}

.pr2 {
    padding-right: 2px;
}

.pr3 {
    padding-right: 3px;
}
.pr4 {
    padding-right: 4px;
}

.pr5 {
    padding-right: 5px;
}

.pr10 {
    padding-right: 10px;
}

.plr10 {
    padding-left: 10px;
    padding-right: 10px;
}

/* 38. Кнопки и интерактивные состояния
   ==================================================================== */

.ib {
    display: inline-block;
}

.bbtn {
    padding: 1px;
    min-width: 80px;
    display: block;
    margin: 5px auto;
    border-radius: 2px;
    color: #ffffff;
    font-weight: bold;
    font-size: 15px;
    text-shadow: black 1px 0px, black 1px 1px, black 0px 1px, black -1px 1px, black -1px 0px, black -1px -1px, black 0px -1px, black 1px -1px;
    background: -moz-linear-gradient(top, #979898, #212F37);
    background: -webkit-linear-gradient(top, #979898, #212F37);
    background: -o-linear-gradient(top, #979898, #212F37);
    background: -ms-linear-gradient(top, #979898, #212F37);
    background: linear-gradient(top, #979898, #212F37);
}

/* 08-2025 */

.skill-holder:hover {
    background: #00000061;
    transform: scale(1.02);
    transition: all 0.1s ease-in-out;
}

.transform-02:hover {
    transform: scale(1.02);
    transition: all 0.1s ease-in-out;
}

.transform-10:hover {
    transform: scale(1.1);
    transition: all 0.1s ease-in-out;
}

.clan-build:hover {
    transform: scale(1.2);
    transition: all 0.1s ease-in-out;
}

.clan-member:hover {
    background: #00000061;
    transform: scale(1.02);
    transition: all 0.1s ease-in-out;
}

a, a * {
    -webkit-tap-highlight-color: transparent;
    /* отключает синий/серый highlight при нажатии */
    -webkit-user-select: none;
    /* запрет выделения */
    user-select: none;
    outline: none;
}

/* Контейнер уведомления */

/* 39. Уведомления и предупреждения
   ==================================================================== */

.alert-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 11000;
    display: flex;
    justify-content: center;
    pointer-events: none;
    transform: translateY(-120%);
    /* начальное скрытое состояние */
}

/* Блоки уведомлений */

.alert-container .notice,
.alert-container .notice_red,
.alert-container .notice_green {
    width: 90%;
    max-width: 417px;
    border-radius: 10px;
    padding: 7px;
    text-align: center;
    font-size: 12px;
}

/* Разные стили */

.alert-container .notice {
    color: #d0cfc1;
    box-shadow: 0 0 0 1px #405cb9, 0 0 30px #405cb9;
    background: #03101ceb;
}

.alert-container .notice_red {
    color: #ffcccc;
    box-shadow: 0 0 0 1px #b94040, 0 0 30px #b94040;
    background: #1c0303eb;
}

.alert-container .notice_green {
    color: #ccffcc;
    box-shadow: 0 0 0 1px #40b940, 0 0 30px #40b940;
    background: #031c0aeb;
}

/* Анимации */

@keyframes dropBounce {
    0% {
        transform: translateY(-120%);
    }

    60% {
        transform: translateY(5px);
    }

    80% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(3px);
    }
}

@keyframes slideUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-120%);
    }
}

/* Классы для включения анимаций */

.alert-container.showNotice {
    animation: dropBounce 0.4s ease-out forwards;
}

.alert-container.hideNotice {
    animation: slideUp 0.3s ease-in forwards;
}

.push_alert_red {
    margin: 5px;
    border-radius: 15px 15px;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(169, 0, 0);
    border-image: initial;
    padding: 5px;
    background-image: linear-gradient(to right, #0a0101eb 15%, #1e0707d1 30%, #4b0e0ead 50%, #1e0707d1 70%, #0a0101eb 85%);
}

/* alert more */

/* Оверлей */

.alert-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 110px;
    background: rgba(0,0,0,.75);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.alert-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

/* Коробка модалки */

.alert-modal {
    position: relative;
    width: 95%;
    max-width: 350px;
    border-radius: 10px;
    padding: 1px 10px 8px;
    background: #000000b0;
    box-shadow: 0 0 0 1px #102057, 0 0 30px #0e193d;
}

/* Кнопка закрытия (иконку можешь подставить своей графикой) */

.alert-close {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.alert-close::before, .alert-close::after {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 2px;
    background: #8896b3;
    content: "";
    transform-origin: center;
}

.alert-close::before {
    transform: translate(-50%,-50%) rotate(45deg);
}

.alert-close::after {
    transform: translate(-50%,-50%) rotate(-45deg);
}

.alert-title {
    margin-top: 4px;
}

.alert-body {
    padding: 6px 8px;
}

/* 40. Подсветка врагов и привилегии
   ==================================================================== */

.enemy_box_5 {
    box-shadow: 0 0 10px rgba(165, 0, 0, .9);
}

.enemy_box_1 {
    box-shadow: 0 0 10px rgb(21 165 0 / 90%);
}

.enemy_box_0 {
    box-shadow: 0 0 10px rgb(109 109 109 / 90%);
}

.privilege_0 {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #101a58;
    border-radius: 15px;
    box-shadow: 0 0 0 0px #00790a2e, 0 0 5px #04950a45;
    background-size: cover;
    background-position: center;
    margin: 3px;
}

.privilege_1 {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #032500;
    border-radius: 15px;
    background-color: #000000f2;
    box-shadow: 0 0 0 0px #00790a2e, 0 0 5px #04950a45;
    background-image: linear-gradient(rgb(0 0 0 / 17%), rgb(0 0 0 / 88%)), url(/img/background/back_campaign_01.png?iv=1793203789-405046);
    background-size: cover;
    background-position: center;
    margin: 3px;
}

.privilege_1_icon {
    border-radius: 5px;
    border: 1px solid #032500;
    box-shadow: 0 0 0 0px #00790a2e, 0 0 15px #04950a45;
}

.privilege_2 {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #0724df96;
    border-radius: 15px;
    background-color: #000000f2;
    box-shadow: 0 0 0 0px #0c1599f0, 0 0 5px #041c95ad;
    background-image: linear-gradient(rgb(0 0 0 / 23%), rgb(0 0 0 / 79%)), url(/img/background/dung3.png?iv=1793203791-320397);
    background-size: cover;
    background-position: center;
    margin: 3px;
}

.privilege_2_icon {
    border-radius: 5px;
    border: 1px solid #0724df96;
    box-shadow: 0 0 0 0px #0c1599f0, 0 0 15px #041c95ad;
}

.privilege_3 {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #6c07dfba;
    border-radius: 15px;
    background-color: #000000f2;
    box-shadow: 0 0 0 0px #6c0495, 0 0 5px #500495;
    background-image: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 68%)), url(/img/background/dung5.png?iv=1793203791-374758);
    background-size: cover;
    background-position: center;
    margin: 3px;
}

.privilege_3_icon {
    border-radius: 5px;
    border: 1px solid #6c07dfba;
    box-shadow: 0 0 0 0px #6c0495, 0 0 15px #500495;
}

.privilege_4 {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #8d5b02ba;
    border-radius: 15px;
    background-color: #000000f2;
    box-shadow: 0 0 0 0px #954204, 0 0 5px #954204;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgb(0 0 0 / 87%)), url(/img/background/dung6.png?iv=1793203791-427461);
    background-size: cover;
    background-position: center;
    margin: 3px;
}

.privilege_4_icon {
    border-radius: 5px;
    border: 1px solid #bb5501ba;
    box-shadow: 0 0 0 0px #954204, 0 0 15px #954204;
}

.privilege_5 {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #910000d9;
    border-radius: 15px;
    background-color: #000000f2;
    box-shadow: 0 0 0 0px #950404, 0 0 5px #bb0707bf;
    background-image: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 39%)), url(/img/background/hell_01.png?iv=1793203791-298034);
    background-size: cover;
    background-position: center;
    margin: 3px;
}

.privilege_5_icon {
    border-radius: 5px;
    border: 1px solid #910000d9;
    box-shadow: 0 0 0 0px #950404, 0 0 15px #bb0707bf;
}

.block_shadow_12 {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: rgba(0,0,0,0.35);
    pointer-events: none;
}

.block_shadow_14 {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: rgba(0,0,0,0.35);
    pointer-events: none;
}

.married_ring_chat {
    position: absolute;
    bottom: -1px;
    left: 26px;
    width: 15px;
    height: 15px;
    padding-bottom: 4px;
    border-radius: 0px 0px 30px 60px;
}

/* 41. Декоративные анимации
   ==================================================================== */

.anum_zoom_05 {
    animation: anim_zoom_05 10s ease-in-out infinite;
}

@keyframes anim_zoom_05 {
    0%, 100% {
        background-size: 100%;
    }

    50% {
        background-size: 105%;
    }
}

@keyframes subtleShift {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-5px, -3px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes bgMove {
    0%, 100% {
        background-position: 50% 0%;
    }

    50% {
        background-position: 55% 5%;
    }
}

/* эффект ветра / света */

.fx-flow {
    position: relative;
    overflow: hidden;
}

.fx-flow::after {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 30% 20%,
        rgba(255,255,255,0.06),
        transparent 60%
    );
    content: '';
    pointer-events: none;
    animation: flowMove 12s ease-in-out infinite;
}

@keyframes flowMove {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(20px, -10px) scale(1.2);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

/* 42. Ползунок аукциона и платёжные наборы
   ==================================================================== */

.auction-range {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    border: none;
    outline: none;
    background: linear-gradient(to right,
                #2db3ff 0%,
                #2db3ff 0%,
                #2b2230 0%,
                #2b2230 100%)

    box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
    -webkit-appearance: none;
    appearance: none;
}

.auction-range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    border: none;
    background: transparent;
}

.auction-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(180deg, #2d3aa1 0%, #031447 100%);
    border: 1px solid #1759bf;
    box-shadow: 0 0 6px rgba(66, 199, 255, 0.6),
        inset 0 0 3px rgba(255,255,255,0.3);
    cursor: pointer;
    margin-top: -10px;
    /* чтобы был по центру */
}

.auction-range::-moz-range-thumb {
    width: 18px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #1759bf;
    background: linear-gradient(180deg, #2d3aa1 0%, #031447 100%);
    box-shadow: 0 0 6px rgba(66, 199, 255, 0.6),
        inset 0 0 3px rgba(255,255,255,0.3);
    cursor: pointer;
}

.pay_kit_block_1 {
    width: 150px;
    height: 180px;
    border-radius: 10px 10px;
    border: 2px solid #499d32;
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 0px #499d32, 0 0 30px #499d32;
}

.pay_kit_block_2 {
    width: 150px;
    height: 180px;
    border-radius: 10px 10px;
    border: 2px solid #2c4985;
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 0px #2c4985, 0 0 30px #2c4985;
}

.pay_kit_block_3 {
    width: 150px;
    height: 180px;
    border-radius: 10px 10px;
    border: 2px solid #5e1dad;
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 0px #5e1dad, 0 0 30px #5e1dad;
}

.pay_kit_block_4 {
    width: 150px;
    height: 180px;
    border-radius: 10px 10px;
    border: 2px solid #954204;
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 0px #954204, 0 0 30px #954204;
}

.pay_kit_block_5 {
    width: 150px;
    height: 180px;
    border-radius: 10px 10px;
    border: 2px solid #a90000;
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 0px #a90000, 0 0 30px #a90000;
}

/* GRID BUTTON */

/* 43. Сетка кнопок
   ==================================================================== */

.button-grid {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

.button-grid.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.button-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.button_grid_blue {
    border: 1px solid #30435f;
    border-radius: 5px;
    padding: 8px 2px;
    min-height: 76px;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #d0cfc1;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
    background: rgba(5, 13, 25, .95);
    transition: border-color .15s, background-color .15s;
}

.button_grid_blue:hover {
    border-color: #607d9f;
    color: #d0cfc1;
    background: #101f34;
}

.button_grid_blue:focus-visible {
    outline: 2px solid #93afd4;
    outline-offset: 2px;
}

.button_grid_blue img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-bottom: 4px;
}

.button_grid_blue span {
    line-height: 15px;
}



.button_grid_purple {
    border: 1px solid #607d9f;
    border-radius: 5px;
    padding: 8px 2px;
    min-height: 76px;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #d0cfc1;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
    background: #101f34;
    transition: border-color .15s, background-color .15s;
}

.button_grid_purple:hover {
    border-color: #30435f;
    color: #d0cfc1;
    background: rgba(5, 13, 25, .95);
}

.button_grid_purple:focus-visible {
    outline: 2px solid #b797d5;
    outline-offset: 2px;
}

.button_grid_purple img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-bottom: 4px;
}

.button_grid_purple span {
    line-height: 15px;
}



.button_grid_grey {
    border: 1px solid #34363c;
    border-radius: 5px;
    padding: 8px 2px;
    min-height: 76px;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #858890;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
    background: rgba(17, 18, 21, .95);
    cursor: not-allowed;
}

.button_grid_grey:hover {
    border-color: #34363c;
    color: #858890;
    background: #111215;
}

.button_grid_grey:focus-visible {
    outline: 2px solid #747780;
    outline-offset: 2px;
}

.button_grid_grey img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .55;
    margin-bottom: 4px;
}

.button_grid_grey span {
    line-height: 15px;
}


/* CHAT MSG */

/* Общий контейнер сообщения */

/* 44. Интерфейс чата
   ==================================================================== */

.chat_message {
    position: relative;
    max-width: 78%;
    padding: 2px 12px;
    margin: 5px 10px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
    word-wrap: break-word;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Сообщение другого игрока (слева) */

.chat_message_other {
    border: 1px solid #3b3b3b;
    margin-right: auto;
    border-bottom-left-radius: 5px;
    color: #d7d7d7;
    background: linear-gradient(180deg, #2d2d2d 0%, #232323 100%);
}

/* Сообщение игрока (справа) */

.chat_message_me {
    border: 1px solid #474747;
    margin-left: auto;
    border-bottom-right-radius: 5px;
    color: #1a1a1a;
    background: linear-gradient(180deg, #5d5d5d 0%, #313131 100%);
}

/* Хвостик сообщения справа */

.chat_message_me::after {
    position: absolute;
    right: -14px;
    bottom: 0px;
    width: 14px;
    height: 14px;
    background: #474747;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    content: "";
}

/* Основной контейнер чата */

.chat_wrapper {
    display: flex;
    flex-direction: column;
    height: 76vh;
    /* вся высота экрана */
    overflow: hidden;
}

/* Блок со списком сообщений */

.chat_messages {
    flex: 1;
    /* занимает всё свободное место */
    overflow-y: auto;
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Нижний блок отправки */

.chat_send {
    flex-shrink: 0;
    padding: 10px;
    border-top: 1px solid #2c2c2c;
    background: linear-gradient(180deg, #3b3b3b 0%, #000000 100%);
}

/* Поле ввода */

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

.chat_send_input {
    flex: 1;
    height: 42px;
    border: 0;
    border-radius: 12px;
    padding: 0 14px;
    color: #fff;
    font-size: 14px;
    background: #2a2a2a;
    outline: none;
}

/* Кнопка */

.chat_send_button {
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    color: #111;
    font-weight: 600;
    background: #d6d6d6;
    cursor: pointer;
}

.chat_send_icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    outline: none;
    background: transparent;
    cursor: pointer;
    transition: 0.15s;
}

.chat_send_icon:hover {
    background: rgba(255,255,255,0.08);
}

.chat_send_icon img {
    width: 35px;
    height: 35px;
    object-fit: contain;
    pointer-events: none;
}

/* 45. Полосы прокрутки и выбор цвета
   ==================================================================== */

::-webkit-scrollbar {
    width: 10px;
}

/* Фон скролла */

::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #161616;
}

/* Сам ползунок */

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    border: 2px solid #161616;
    background: linear-gradient(
        180deg,
        #5b5b5b 0%,
        #8a8a8a 50%,
        #5b5b5b 100%
    );
}

/* Наведение */

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        #7a7a7a 0%,
        #b5b5b5 50%,
        #7a7a7a 100%
    );
}

.chat_color_picker {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    padding: 8px 0;
}

.chat_color_dot {
    width: 24px;
    height: 24px;
    display: inline-block;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.25);
    box-shadow: 0 2px 6px rgba(0,0,0,0.45),
        inset 0 1px 2px rgba(255,255,255,0.25);
    transition: 0.15s ease;
}

.chat_color_dot:hover {
    border-color: rgba(255,255,255,0.65);
    box-shadow: 0 0 10px rgba(255,255,255,0.2),
        0 3px 8px rgba(0,0,0,0.55),
        inset 0 1px 2px rgba(255,255,255,0.35);
    transform: scale(1.14);
}

.color_grey {
    background: linear-gradient(135deg, #5b5b5b 0%, #1e1e1e 100%);
}

.color_blue {
    background: linear-gradient(135deg, #4f668dcc 0%, #081327de 100%);
}

.color_green {
    background: linear-gradient(135deg, #65b371c2 0%, #083514cc 100%);
}

.color_orange {
    background: linear-gradient(135deg, #b3a065e6 0%, #3f3605cc 100%);
}

.color_pink {
    background: linear-gradient(135deg, #8165b3e6 0%, #26053fcc 100%);
}

/* 46. Журнал боя
   ==================================================================== */

.battle-log {
    border: 1px solid #263947bf;
    max-width: 760px;
    border-radius: 10px;
    overflow: hidden;
    margin: 5px;
    color: #cfcfcf;
    font-family: Arial, sans-serif;
    font-size: 13px;
    background: #05090b03;
    box-shadow: inset 0 0 25px rgba(50, 120, 160, 0.15), 0 0 18px rgba(0, 0, 0, 0.8);
}

.battle-log-list {
    max-height: 430px;
    overflow-y: auto;
    padding: 0px 7px;
}

.battle-row {
    display: grid;
    grid-template-columns: 75px 1fr;
    border-bottom: 1px solid rgba(120, 150, 170, 0.15);
    padding: 9px 0;
}

.battle-time {
    padding-top: 4px;
    color: #b9b9b9;
    font-size: 11px;
}

.battle-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

.battle-line {
    line-height: 1.35;
    font-size: 12px;
}

.battle-icon {
    width: 17px;
    height: 17px;
    min-width: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #2c3a43;
    border-radius: 3px;
    margin: 1px;
    font-size: 18px;
    background: #0d1114;
    box-shadow: inset 0 0 8px rgba(255,255,255,0.06);
}

.battle-icon,.enemy {
    border: 1px solid #a50707;
    background: #380202;
}

.battle-icon.pet {
    border: 1px solid #a56a07;
    background: #412604;
}

.battle-icon.user {
    border: 1px solid #02bc18;
    background: #024409;
}

.battle-icon.grey {
    border: 1px solid #818181;
    background: #393939;
}

.enemy-damage {
    background: linear-gradient(to right, rgba(90, 0, 0, 0.24), rgba(90, 0, 0, 0.05));
}

.my-damage {
    background: linear-gradient(to right, rgba(0, 90, 30, 0.24), rgba(0, 90, 30, 0.05));
}

.damage {
    margin-left: auto;
    font-size: 15px;
}

.purple {
    color: #b75cff;
}

.green {
    color: #38e84c;
}

.red {
    color: #ff4b4b;
}

.orange {
    color: #ffb13b;
}

.blue {
    color: #5aa8ff;
}

.battle-tabs {
    display: flex;
    gap: 4px;
    padding: 8px;
    border-top: 1px solid #263947;
    background: linear-gradient(to bottom, #070b0e, #030506);
}

.battle-tabs button {
    border: 1px solid #263947;
    padding: 8px 10px;
    border-radius: 3px;
    color: #cfcfcf;
    font-size: 12px;
    background: linear-gradient(to bottom, #11181d, #080c0f);
    cursor: pointer;
}

.battle-tabs button.active,
.battle-tabs button:hover {
    border-color: #4b6878;
    background: linear-gradient(to bottom, #1b252d, #0d1418);
}

.battle-log-list::-webkit-scrollbar {
    width: 6px;
}

.battle-log-list::-webkit-scrollbar-track {
    background: #050708;
}

.battle-log-list::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #344b5a;
}

/* MENU LEFT */

/* 47. Левое меню
   ==================================================================== */

.dg-sidebar {
    display: none;
}

.dg-sidebar-logo {
    padding: 0px 0px 10px;
    text-align: center;
}

.dg-sidebar-user {
    color: #c0c0c0;
    font-size: 15px;
}

.dg-sidebar-title {
    color: #d7c6ff;
    font-size: 19px;
    font-weight: bold;
    text-shadow: 0 0 8px #35a4ff;
}

.dg-sidebar-push {
    min-height: 20px;
    margin: 0px 0 9px 0px;
    text-align: center;
}

.dg-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    margin-bottom: 4px;
    border-radius: 8px;
    border: 1px solid #ffffff08;
    color: #d8d2e8;
    text-decoration: none;
    font-size: 15px;
    background: #ffffff08;
}

.dg-sidebar-nav a:hover,
    .dg-sidebar-nav a.active {
    border-color: #306ac880;
    color: #fff;
    background: #3886e12b;
}

.dg-sidebar-nav .battle {
    border-color: #5330c880;
    color: #d5e3ef;
    background: #7838e12b;
}

.dg-sidebar-nav img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.dg-sidebar-sep {
    height: 1px;
    margin: 10px 0;
    background: #222335;
}

@media (min-width: 900px) {
    .dg-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 9999;
        display: block;
        width: 240px;
        border-right: 2px solid #131933;
        padding: 10px;
        box-sizing: border-box;
        overflow-y: auto;
        background: linear-gradient(180deg, #111018b5, #111018b5);
        box-shadow: 10px 0 35px #000000f0;
    }

    @media (min-width: 900px) {
        .main-content,
            .foot-content {
            margin-right: auto;
            max-width: 430px;
        }
    }
}

/* mobile sidebar */

.dg-sidebar-toggle,
    .dg-sidebar-overlay {
    display: none;
}

@media (max-width: 899px) {
    .dg-sidebar-toggle {
        position: fixed;
        left: -1px;
        top: 59%;
        z-index: 10004;
        display: block !important;
        width: 33px;
        height: 53px;
        border: 1px solid #00317a6e;
        border-radius: 0 10px 10px 0;
        color: #5c649a;
        font-size: 20px;
        background: linear-gradient(180deg, #243667a3, #0b0711d4);
        box-shadow: 0 0 12px #000;
        transition: opacity .2s;
    }

    .dg-sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        z-index: 10003 !important;
        display: block !important;
        width: 260px !important;
        max-width: 84vw !important;
        border-right: 2px solid #131933;
        padding: 10px;
        box-sizing: border-box;
        overflow-y: auto;
        background: linear-gradient(180deg, #111018, #050507);
        box-shadow: 10px 0 35px #000000f0;
        transform: translateX(-105%);
        transition: transform .22s ease;
    }

    body.dg-sidebar-open .dg-sidebar-toggle {
        opacity: 0;
        pointer-events: none;
    }

    body.dg-sidebar-open .dg-sidebar {
        transform: translateX(0) !important;
    }

    .dg-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 10002;
        display: none;
        background: rgba(0,0,0,.55);
    }

    body.dg-sidebar-open .dg-sidebar-overlay {
        display: block !important;
    }

    body.dg-sidebar-open {
        overflow: hidden;
    }
}

/* ranks */

/* 48. Эмблемы рангов кампании
   ==================================================================== */

.rank-none .campaign-rank-emblem {
    border-color: #5d6670;
}

.rank-none .campaign-rank-emblem span {
    color: #8c949d;
}

/* F */

.rank-f .campaign-rank-emblem {
    border-color: #7f8993;
}

.rank-f .campaign-rank-emblem span {
    color: #c2cad2;
}

/* E */

.rank-e .campaign-rank-emblem {
    border-color: #42a85f;
    box-shadow: 0 0 12px rgba(66, 168, 95, .35);
}

.rank-e .campaign-rank-emblem span {
    color: #54db78;
}

/* D */

.rank-d .campaign-rank-emblem {
    border-color: #3c81d8;
    box-shadow: 0 0 12px rgba(60, 129, 216, .4);
}

.rank-d .campaign-rank-emblem span {
    color: #5ba1ff;
}

/* C */

.rank-c .campaign-rank-emblem {
    border-color: #8b52d6;
    box-shadow: 0 0 12px rgba(139, 82, 214, .4);
}

.rank-c .campaign-rank-emblem span {
    color: #b574ff;
}

/* B */

.rank-b .campaign-rank-emblem {
    border-color: #d78628;
    box-shadow: 0 0 13px rgba(215, 134, 40, .45);
}

.rank-b .campaign-rank-emblem span {
    color: #ffad45;
}

/* A */

.rank-a .campaign-rank-emblem {
    border-color: #df3f35;
    box-shadow: 0 0 14px rgba(223, 63, 53, .5);
}

.rank-a .campaign-rank-emblem span {
    color: #ff6158;
}

/* S */

.rank-s .campaign-rank-emblem {
    border-color: #e1bd3f;
    box-shadow: 0 0 16px rgba(225, 189, 63, .55);
}

.rank-s .campaign-rank-emblem span {
    color: #ffe064;
}

/* SS */

.rank-ss .campaign-rank-emblem {
    border-color: #e868ff;
    box-shadow: 0 0 10px rgba(232, 104, 255, .6),
            0 0 20px rgba(103, 86, 255, .35);
}

.rank-ss .campaign-rank-emblem span {
    color: #f099ff;
}

/* SSS */

.rank-sss .campaign-rank-emblem {
    border-color: #fff0a5;
    box-shadow: 0 0 10px rgba(255, 225, 100, .8),
            0 0 24px rgba(255, 102, 45, .6);
}

.rank-sss .campaign-rank-emblem span {
    color: #fff4a8;
}

/**/

/* 49. Фоны обликов и состояние боя
   ==================================================================== */

.background_skin_0 {
    width: 100px;
    border-radius: 10px 10px;
    border: 2px solid #2f405b;
    box-shadow: 0 0 0 0px #2f405b, 0 0 30px #2f405b;
}

.background_skin_1 {
    width: 100px;
    border-radius: 10px 10px;
    border: 2px solid #499d32;
    box-shadow: 0 0 0 0px #499d32, 0 0 30px #499d32;
}

.background_skin_2 {
    width: 100px;
    border-radius: 10px 10px;
    border: 2px solid #2c4985;
    box-shadow: 0 0 0 0px #2c4985, 0 0 30px #2c4985;
}

.background_skin_3 {
    width: 100px;
    border-radius: 10px 10px;
    border: 2px solid #5e1dad;
    box-shadow: 0 0 0 0px #5e1dad, 0 0 30px #5e1dad;
}

.background_skin_4 {
    width: 100px;
    border-radius: 10px 10px;
    border: 2px solid #954204;
    box-shadow: 0 0 0 0px #954204, 0 0 30px #954204;
}

.background_skin_5 {
    width: 100px;
    border-radius: 10px 10px;
    border: 2px solid #a90000;
    box-shadow: 0 0 0 0px #b7272c, 0 0 30px #b10f0f;
}

.class2CSS {
    background-color: #00000033;
}

.hero-hp-loss {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background: rgb(255 0 0 / 20%);
    pointer-events: none;
    transition: height 0.4s ease;
}

.head_battle_mode {
    position: absolute;
    bottom: -18px;
    left: 5px;
    height: 16px;
    padding-bottom: 4px;
    border-radius: 0px 0px 13px 13px;
    width: 100%;
    font-size: 11px;
    color: #bcbcbc;
    font-weight: bold;
}

/* DG BANK */

/* 50. Банк: меню, предложения и покупка
   ==================================================================== */

.dg-bank {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    box-sizing: border-box;
    color: #d8d8d8;
}

/* Верхнее меню */

.dg-bank-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin: 7px 5px 9px;
}

.dg-bank-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 68px;
    border: 1px solid #263b65;
    border-radius: 8px;
    box-sizing: border-box;
    color: #bfc7d5;
    text-decoration: none;
    background: linear-gradient(180deg, rgba(19,29,49,.95), rgba(7,12,22,.98));
}

.dg-bank-tab img {
    width: 31px;
    height: 31px;
    object-fit: contain;
    margin-bottom: 3px;
}

.dg-bank-tab span {
    font-size: 11px;
}

.dg-bank-tab.active {
    border-color: #7746d8;
    box-shadow: inset 0 0 14px rgba(106,52,213,.16),
            0 0 9px rgba(97,52,190,.12);
}

/* Баннер с маскотом */

.dg-bank-hero {
    position: relative;
    min-height: 190px;
    margin: 5px 5px 10px;
    overflow: hidden;
    border: 1px solid #263b65;
    border-radius: 10px;
    background: radial-gradient(circle at 80% 50%, rgb(17 69 191 / 20%), #00000000 38%), linear-gradient(135deg, #0e1015bd 0%, #090b0fb5 55%, #101217d1 100%);
}

.dg-bank-hero:after {
    position: absolute;
    inset: 0;
    background: linear-gradient(
                90deg,
                rgba(7,9,13,.98) 0%,
                rgba(7,9,13,.90) 35%,
                rgba(7,9,13,.20) 68%,
                rgba(7,9,13,.05) 100%
            );
    content: "";
    pointer-events: none;
}

.dg-bank-hero-content {
    position: relative;
    z-index: 3;
    width: 58%;
    padding: 20px 0 16px 16px;
    box-sizing: border-box;
}

.dg-bank-hero-title {
    color: #9cb9de;
    font-size: 20px;
    line-height: 23px;
    font-weight: 600;
    text-shadow: 0 2px 4px #000;
}

.dg-bank-hero-desc {
    margin-top: 7px;
    color: #aeb5c0;
    font-size: 11px;
    line-height: 16px;
}

.dg-bank-hero-character {
    position: absolute;
    z-index: 2;
    right: -8px;
    bottom: -10px;
    width: 55%;
    max-height: 205px;
    object-fit: contain;
    object-position: right bottom;
}

/* Реплика персонажа */

.dg-bank-speech {
    display: inline-block;
    margin-top: 11px;
    padding: 6px 8px;
    border: 1px solid rgb(69 141 205 / 30%);
    border-radius: 6px;
    color: #a7bad8;
    font-size: 10px;
    line-height: 14px;
    background: rgba(0, 0, 0, .50);
}

/* Акция */

.dg-bank-promo {
    margin: 0 5px 10px;
    padding: 9px 10px;
    border: 1px solid #493c22;
    border-radius: 7px;
    color: #e1bd78;
    font-size: 11px;
    line-height: 16px;
    background: linear-gradient(90deg, rgba(80,49,14,.35), rgba(19,17,14,.90));
}

/* Сетка товаров */

.dg-pay-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 0 5px;
}

/* Карточка */

.dg-pay-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding: 9px 7px 7px;
    border: 1px solid #263653;
    border-radius: 9px;
    box-sizing: border-box;
    background: radial-gradient(circle at 50% 35%, rgba(31, 75, 127, .16), transparent 50%), linear-gradient(180deg, #101724 0%, #080d1573 100%);
}

/* Лучший вариант */

.dg-pay-card.best {
    border-color: #4e8e2c;
    box-shadow: inset 0 0 20px rgba(72,135,37,.10),0 0 7px rgba(70,130,35,.08);
}

.dg-pay-card.top {
    border: 1px solid #532626;
    background: radial-gradient(circle at 50% 35%, rgba(31, 75, 127, .16), transparent 50%), linear-gradient(180deg, #241010 0%, #8c141473 100%);
}

.dg-pay-best {
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 2px 5px;
    border: 1px solid #587d32;
    border-radius: 4px;
    color: #bce886;
    font-size: 8px;
    background: #243916;
}

/* Название */

.dg-pay-name {
    min-height: 32px;
    padding: 0 2px;
    color: #dbc28f;
    text-align: center;
    font-size: 12px;
    line-height: 15px;
}

/* Картинка */

.dg-pay-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 85px;
    margin: 3px 0;
}

.dg-pay-image img {
    max-width: 100px;
    max-height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.7));
}

/* Количество */

.dg-pay-amount {
    margin-top: 2px;
    color: #5da8ff;
    text-align: center;
    font-size: 19px;
    line-height: 23px;
}

.dg-pay-amount img {
    width: 17px;
    vertical-align: -2px;
    margin-right: 2px;
}

.dg-pay-old {
    display: block;
    color: #7f8793;
    font-size: 9px;
}

/* Бонусы */

.dg-pay-bonuses {
    min-height: 35px;
    margin: 4px 0 6px;
    color: #86ba57;
    text-align: center;
    font-size: 9px;
    line-height: 13px;
}

.dg-pay-action {
    color: #599be0;
}

/* Кнопка */

.dg-pay-button {
    display: block;
    width: 100%;
    margin-top: auto;
    padding: 7px 2px;
    border: 1px solid #315b94;
    border-radius: 5px;
    box-sizing: border-box;
    color: #e2e7ef;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    background: linear-gradient(180deg, rgba(31,73,126,.50), rgba(15,33,62,.70));
}

.dg-pay-card.best .dg-pay-button {
    border-color: #568d2e;
    background: linear-gradient(180deg, rgba(60,105,30,.60), rgba(28,57,17,.80));
}

.dg-pay-card.top .dg-pay-button {
    border: 1px solid #671818;
    background: linear-gradient(180deg, rgb(116 45 45 / 50%), rgb(50 4 4 / 70%));
}

/* Очень маленькие экраны */

@media (max-width: 350px) {
    .dg-bank-hero {
        min-height: 175px;
    }

    .dg-bank-hero-title {
        font-size: 17px;
        line-height: 20px;
    }

    .dg-bank-hero-character {
        width: 58%;
    }

    .dg-pay-image {
        height: 72px;
    }

    .dg-pay-image img {
        max-width: 68px;
        max-height: 68px;
    }

    .dg-pay-amount {
        font-size: 17px;
    }
}

/* WHEEL */

/* 51. Колесо наград
   ==================================================================== */

.dg-wheel-window {
    position: relative;
    width: 100%;
    height: 112px;
    margin: 10px 0px 0px 0px;
    overflow: hidden;
    box-sizing: border-box;
}

.dg-wheel-track {
    position: absolute;
    left: 0;
    top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    will-change: transform;
}

.dg-wheel-item {
    width: 82px;
    min-width: 82px;
    height: 92px;
    text-align: center;
}

.dg-wheel-pointer {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #4b8eff;
    box-shadow: 0 0 8px #4b8eff;
    transform: translateX(-50%);
}

.dg-wheel-winner {
    opacity: 1;
}

.dg-wheel-pointer:before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #4b8eff;
    content: "";
    transform: translateX(-50%);
}

.hero-item-rulet-64 {
    position: absolute;
    bottom: -66px;
    left: 9px;
    width: 64px;
    height: 13px;
    padding-bottom: 4px;
    border-radius: 0px 0px 10px 10px;
    background: rgb(0 0 0 / 66%);
}

/* MOB HIT */

/* 52. Эффекты попаданий
   ==================================================================== */

.mob-battle {
    position: relative;
}

.mob-hit-animation {
    animation: mobHitShake .35s ease-out;
}

@keyframes mobHitShake {
    0% {
        transform: translate(0, 0) rotate(0);
    }

    15% {
        transform: translate(-5px, 1px) rotate(-1deg);
    }

    30% {
        transform: translate(5px, -1px) rotate(1deg);
    }

    45% {
        transform: translate(-4px, 0) rotate(-1deg);
    }

    60% {
        transform: translate(3px, 1px) rotate(1deg);
    }

    80% {
        transform: translate(-1px, 0);
    }

    100% {
        transform: translate(0, 0) rotate(0);
    }
}

.mob-slash-effect {
    position: absolute;
    inset: 0;
    z-index: 10;
    overflow: hidden;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
}

.mob-slash-effect img {
    position: absolute;
    top: 5%;
    left: 4%;
    width: 92%;
    height: 75%;
    object-fit: contain;
}

.mob-slash-effect.slash-active {
    animation: slashHit .55s ease-out forwards;
}

@keyframes slashHit {
    0% {
        opacity: 0;
        filter: brightness(2) drop-shadow(0 0 8px rgba(255, 40, 40, 1));
        transform: scale(.7) rotate(-5deg);
    }

    15% {
        opacity: 1;
        transform: scale(1.08) rotate(0);
    }

    55% {
        opacity: .95;
        transform: scale(1) rotate(0);
    }

    100% {
        opacity: 0;
        filter: brightness(1) drop-shadow(0 0 0 transparent);
        transform: scale(1.15) rotate(3deg);
    }
}

/* 53. Магазин обликов и компактное меню
   ==================================================================== */

.skin-border-shop {
    height: 120px;
    width: 120px;
}

.skin-border-shop img {
    height: 120px;
    width: 120px;
}

.no-wrap {
    white-space: nowrap;
}

.main-menu-lite-box {
    display: table-cell;
    vertical-align: middle;
    width: 36px;
    text-align: left;
}

.main-menu-lite-button-tw {
    padding-top: 4px;
    padding-bottom: 4px;
    margin: 0px auto auto;
    width: 97%;
    border-radius: 5px;
    border: 1px solid #2d3552;
    font-size: 12px;
    white-space: nowrap;
    background-color: #002cbc42;
    background-image: linear-gradient(to right, #1c1b1b87 15% 15%, #1c1b1b8f 30%, #1c1b1bab 50%, #1c1b1b8f 70%, #1c1b1b87 85%);
}

/* SEASON PASS */

/* 54. Сезонный пропуск и задания
   ==================================================================== */

.bp-point-shop {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 5px;
}

.bp-point-item {
    min-width: 0;
}

.bp-point-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 4px;
}

.bp-point-amount {
    margin-bottom: 3px;
    font-size: 13px;
}

.bp-point-price {
    line-height: 16px;
}

.bp-old-price {
    margin-right: 3px;
    color: #888;
    text-decoration: line-through;
    font-size: 11px;
}

.quest-info {
    display: flex;
    /*align-items: stretch;*/
    align-items: center;
}

.quest-content {
    display: flex;
    flex-direction: column;
    min-height: 64px;
    margin-left: 5px;
    justify-content: space-evenly;
}

.quest-rewards {
    margin-top: auto;
}

/* Горизонтальная витрина контрактов в городе */
.city-contracts-scroll {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 12px 10px 4px;
    scrollbar-width: thin;
    scrollbar-color: #2d4c6f #161e29;
}

.city-contracts-scroll::-webkit-scrollbar {
    height: 7px;
}

.city-contracts-scroll::-webkit-scrollbar-track {
    border-radius: 7px;
    background: #161e29;
}

.city-contracts-scroll::-webkit-scrollbar-thumb {
    border: 1px solid #161e29;
    border-radius: 7px;
    background: #2d4259;
}

.city-contracts-scroll::-webkit-scrollbar-thumb:hover {
    background: #385572;
}

input::placeholder {
white-space: pre;
overflow-wrap: normal;
overflow-x: hidden;
overflow-y: hidden;
line-height: initial;
}
::placeholder {
-webkit-text-security: none;
color: #696666;
direction: inherit;
pointer-events: none;
text-orientation: inherit;
writing-mode: inherit;
}

/* CITY */
.block_border_3 {
    margin-bottom: 5px;
    border-radius: 14px;
    background: #1c11379e;
    border: 1px solid #7015a4a8;
    box-shadow: 0 0 0 0px #b7272c, 0 0 8px #4d1396;
}
.block_border_2 {
    margin-bottom: 5px;
    border-radius: 14px;
    background: #0e1b3e7d;
    border: 1px solid #2c498540;
    box-shadow: 0 0 0 0px #b7272c, 0 0 2px #1b2085;
}
.block_border_1 {
    margin-bottom: 5px;
    border-radius: 14px;
    background: #103e0e7d;
    border: 1px solid #32852c40;
}
.block_border_0 {
    margin-bottom: 5px;
    border-radius: 14px;
    background: #161c2b7d;
    border: 1px solid #23376140;
}

/* Панель: платежи и календарь */

	.payment-table {
	  width: 100%;
	  border-collapse: collapse;
	  margin: 10px 0;
	  font-size: 11px;
	  border-radius: 8px;
	  overflow: hidden;
	  box-shadow: 0 0 5px rgba(0,0,0,0.6);
	}

	.payment-table th, .payment-table td {
	  padding: 10px;
	  text-align: left;
	  border-bottom: 1px solid #222;
	}

	.payment-table th {
	  color: #ccc;
	  font-weight: 600;
	  text-align: left;
	}

	.payment-table td {
	  color: #eee;
	}

	.payment-status-unpaid {
	  color: #f66;
	}

	.payment-status-paid {
	  color: #6f6;
	}

	.payment-username {
	  color: #769aff;
	  text-decoration: none;
	}

	.payment-amount {
	  font-weight: bold;
	}

	.payment-time {
	  font-size: 11px;
	  color: #999;
	}

	.payment-calendar {
	  display: grid;
	  grid-template-columns: repeat(7, minmax(0, 1fr));
	  gap: 4px;
	  margin-top: 8px;
	}

	.payment-calendar-weekday {
	  padding: 6px 2px;
	  color: #999;
	  font-size: 10px;
	  text-align: center;
	}

	.payment-calendar-day {
	  min-height: 76px;
	  padding: 7px 4px;
	  box-sizing: border-box;
	  background: rgba(0, 0, 0, .22);
	  border: 1px solid #242424;
	  border-radius: 5px;
	  text-align: center;
	}

	.payment-calendar-day.is-outside { opacity: .3; }
	.payment-calendar-day.is-today { border-color: #769aff; }
	.payment-calendar-date { color: #eee; font-weight: bold; }
	.payment-calendar-count { margin-top: 7px; color: #ccc; font-size: 10px; }
	.payment-calendar-sum { margin-top: 3px; color: #6f6; font-size: 10px; font-weight: bold; }
	

/* Панель управления: общая структура, игровые классы полей и кнопок. */
.panel-page { color: #d0cfc1; font-size: 13px; padding: 6px; }
.panel-page *, .panel-page *::before, .panel-page *::after { box-sizing: border-box; }
.panel-header { display: flex; align-items: center; gap: 10px; padding: 6px 2px 10px; border-bottom: 1px solid #364654; margin-bottom: 8px; }
.panel-header h1 { margin: 0; padding: 0; font-size: 16px; font-weight: 500; line-height: 1.35; text-align: left; color: #b9d7da; }
.panel-header > a { width: auto; flex: 0 0 auto; padding: 6px 10px; margin: 0; }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.panel-card { min-width: 0; border: 1px solid #364654; border-radius: 5px; padding: 9px; background: rgba(0,0,0,.25); overflow-wrap: anywhere; }
.panel-card h2, .panel-card h3 { font-size: 14px; margin: 0 0 8px; font-weight: 500; color: #b9d7da; }
.panel-nav { display: grid; gap: 5px; }
.panel-nav-link { display: block; width: 100%; margin: 0; text-align: left; padding: 6px 8px; }
.panel-nav-link small { display: block; margin-top: 3px; color: #9aa7ad; font-size: 11px; }
.panel-form { display: grid; gap: 7px; width: 100%; max-width: 480px; margin: 8px auto; text-align: left; }
.panel-form label { display: grid; gap: 4px; }
.panel-page input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.panel-page select, .panel-page textarea { width: 100%; max-width: 100%; min-height: 0; height: 32px; font-size: 14px; line-height: normal; margin: 0; }
.panel-page textarea { height: auto; min-height: 72px; resize: vertical; }
.panel-page input[type="hidden"] { display: none; }
.panel-page button, .panel-page input[type="submit"] { max-width: 100%; min-height: 0; font-size: 12px; line-height: 18px; padding: 6px 8px; cursor: pointer; }
.panel-form button, .panel-form input[type="submit"] { width: 100%; margin: 2px 0; }
.panel-page form.ib { display: inline-block; width: auto; margin: 0; }
.panel-page form.ib button { width: auto; }
.panel-muted { color: #9aa7ad; font-size: 11px; line-height: 1.4; }
.panel-danger { border-color: #8d3434; }
.panel-scroll { max-width: 100%; overflow-x: auto; }
.panel-page pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }
.panel-page .text-area-2:focus { opacity: 1; outline: 2px solid #769aff; outline-offset: 1px; }
@media (max-width: 520px) {
    .panel-grid { grid-template-columns: 1fr; }
    .panel-header h1 { font-size: 14px; }
    .panel-page input:not([type="hidden"]):not([type="submit"]), .panel-page select, .panel-page textarea { font-size: 16px; }
    .panel-page .panel-desktop-only { display: none; }
}


/* new main menu */
.menu-home{background-color:#050b14;min-height:0}
.menu-home .menu-content{padding: 0px 10px 0px;background:linear-gradient(180deg,rgba(3,9,20,.35),rgba(3,9,20,.78) 65%,#050b14)}
.menu-home .menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.menu-home .menu-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;text-align:center;text-decoration:none;color:#e1e6ef;background:rgba(4,12,24,.94);border:1px solid #30435f;border-radius:7px;box-shadow:0 2px 7px #0008;transition:border-color .15s,background .15s}
.menu-home .menu-card:hover,.menu-home .menu-card:focus-visible{border-color:#93afd4;background:#101f34;outline:2px solid #93afd4;outline-offset:2px}
.menu-home .menu-card-icon{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:0;border-radius:0}
.menu-home .menu-card-name{display:flex;align-items:center;justify-content:center;min-height:34px;padding:5px 3px;font-size:12px;line-height:15px;box-sizing:content-box;overflow-wrap:anywhere;text-shadow:0 1px 2px #000}
.menu-home .menu-card-status{display:block;min-height:18px;padding:4px 2px;border-top:1px solid #26374e;color:#becbdd;font-size:11px;line-height:16px}
.menu-home .menu-card-status span{font-size:inherit;}
.menu-home .menu-card-status img{vertical-align:middle;max-height:14px;width:auto}
.menu-home .menu-heading{display:flex;align-items:center;gap:8px;margin:16px 0 10px;color:#bdcde4;font-size:13px;font-weight:normal;line-height:18px;text-align:center}
.menu-home .menu-heading:before,.menu-home .menu-heading:after{content:"";height:1px;flex:1;background:#354b68}
.menu-home .menu-heading-resources{gap:10px;margin:18px 0 12px;color:#b8cceb;font-family:Georgia,"Times New Roman",serif;font-size:14px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;text-shadow:0 1px 3px #000}
.menu-home .menu-heading-resources:before,.menu-home .menu-heading-resources:after{display:none}
.menu-home .menu-heading-resources img{display:block;flex:1;min-width:0;width:0;height:20px}
.menu-home .menu-heading-resources img:last-child{transform:scaleX(-1)}
.menu-home .menu-heading-resources span{flex:none}
.menu-home .menu-rewards{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px;margin-bottom:14px}
.menu-home .menu-reward{display:grid;grid-template-columns:38% minmax(0,1fr);grid-template-rows:1fr auto;align-items:center;padding:6px;column-gap:6px}
.menu-home .menu-reward .menu-card-icon{grid-row:1 / 3;border-radius:4px}
.menu-home .menu-reward .menu-card-name{padding:2px;min-height:30px}
.menu-home .menu-reward .menu-card-status{padding:3px;border:1px solid #384e6c;border-radius:4px;margin-top:3px}
.menu-home .menu-claim .menu-card-status{background:#244722;border-color:#4f713a;color:#e6f3da}
.menu-home .menu-world{grid-template-columns:repeat(2,minmax(0,1fr))}
.menu-home .menu-world .menu-card-icon{aspect-ratio:2;object-position:center}
.menu-home .menu-season{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px;margin:0 0 14px;border-color:#604482;background:linear-gradient(110deg,#21112f,#0a1120)}
.menu-home .menu-season .menu-card-icon{width:56px;height:56px;border-radius:4px}
.menu-home .menu-season .menu-card-name{justify-content:flex-start;text-align:left;font-size:13px}
.menu-home .menu-season .menu-card-status{border:0;padding:4px;white-space:nowrap}
.menu-home #buttons{padding:0}
.menu-home .button-grid{gap:3px;margin-bottom:8px}
.menu-home .button-blue-97,.menu-home #buttons .button-purple-97{display:block;box-sizing:border-box;width:100%;min-height:36px;padding:7px 5px;}
@media(max-width:350px){.menu-home .menu-content{padding:8px 6px 12px}.menu-home .menu-grid{gap:6px}.menu-home .menu-card-name{font-size:11px}.menu-home .menu-season{grid-template-columns:42px minmax(0,1fr)}.menu-home .menu-season .menu-card-icon{width:42px;height:42px;grid-row:1 / 3}.menu-home .menu-season .menu-card-status{grid-column:2;text-align:left}.menu-home .menu-season .menu-card-name{min-height:20px}}

/* Быстрое переключение главного меню */
.menu-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:8px 10px;box-sizing:border-box;width:100%}
.menu-quick form{min-width:0;margin:0}
.menu-quick button{min-width:0;width:100%;margin:0;padding:7px 2px;border:1px solid #30435f;border-radius:4px;background:#07101b;color:#aebed2;font:11px Arial,sans-serif;line-height:16px;text-align:center;cursor:pointer}
.menu-quick button:hover{background:#14243a;border-color:#607d9f}
.menu-quick button:focus-visible{outline:2px solid #b8cceb;outline-offset:1px}
.menu-quick button[aria-current="true"]{background:#182b43;border-color:#91acd1;color:#e1e6ef;cursor:default}

/* Карточки походов */
.hike-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px;box-sizing:border-box;width:100%}
.hike-card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;min-width:0;overflow:hidden;border:1px solid #30435f;border-radius:7px;background:rgba(4,12,24,.94);color:#e1e6ef;text-align:center;text-decoration:none;box-shadow:0 2px 7px #0008;transition:border-color .15s,background-color .15s}
.hike-card:hover{border-color:#607d9f;background:#101f34}
.hike-card:focus-visible{outline:2px solid #93afd4;outline-offset:2px}
.hike-card .hike-card-image{grid-area:1 / 1;display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:0;border-radius:0}
.hike-card-name{grid-area:2 / 1;display:flex;align-items:center;justify-content:center;min-height:32px;padding:3px;font-size:12px;line-height:16px;color:#e1e6ef}
.hike-card-status{grid-area:3 / 1;display:block;min-height:18px;padding:4px 2px;border-top:1px solid #26374e;border-bottom:1px solid #26374e;color:#becbdd;font-size:11px;line-height:18px;overflow-wrap:anywhere}
.hike-card-ready .hike-card-status{background:#15271c;color:#b7d7af}
.hike-card-rewards{grid-area:1 / 1;align-self:start;justify-self:end;z-index:1;display:block;max-width:calc(100% - 6px);box-sizing:border-box;margin:3px;padding:3px 4px;border-radius:4px;background:rgba(0,0,0,.68);color:#e1e6ef;text-align:right;font-size:10px;line-height:17px;overflow-wrap:anywhere;text-shadow:0 1px 2px #000}
.hike-card-rewards > span{display:block}
.hike-card-rewards img{width:12px;height:12px;vertical-align:middle;margin-right:3px;object-fit:contain}
@media(max-width:350px){.hike-cards{padding:8px 5px;gap:3px}.hike-card-name{font-size:11px}.hike-card-rewards{padding:2px 3px}}

/* Страница походов */
.hike-page{padding-bottom:10px}
.hike-page > .backten50{background-color:rgba(3,10,20,.65)}

.hike-title{display:flex;align-items:center;gap:8px;margin:10px 10px 10px;color:#bdcde4;font:14px/20px Georgia,"Times New Roman",serif;letter-spacing:.7px;text-align:center;text-transform:uppercase}
.hike-title img{display:block;flex:1;min-width:0;width:0;height:20px}
.hike-title img:last-child{transform:scaleX(-1)}
.hike-title > span{max-width:78%}

.block-title{display:flex;align-items:center;gap:8px;margin:4px 10px 5px;color:#bdcde4;font:14px/20px Georgia,"Times New Roman",serif;letter-spacing:.7px;text-align:center;text-transform:uppercase}
.block-title img{display:block;flex:1;min-width:0;width:0;height:20px}
.block-title img:last-child{transform:scaleX(-1)}
.block-title > span{max-width:78%}

.hike-panel{margin:0 8px 14px;padding:10px;border:1px solid #30435f;border-radius:7px;background:rgba(4,12,24,.72);color:#d0dbe9;text-align:center}
.hike-card-status{min-height:42px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
.hike-duration{display:block;font-size:10px;color:#aebed2}
.hike-progress{display:block;height:5px;margin:6px 8px 0;border-radius:3px;background:#26374e;overflow:hidden}
.hike-progress > span{display:block;height:100%;background:#568bc1;border-radius:inherit}
.hike-party{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:3px 0 12px}
.hike-party-card{display:flex;flex-direction:column;align-items:center;min-width:0;text-decoration:none}
.hike-party-portrait{display:block;width:80px;max-width:100%;box-sizing:border-box;overflow:hidden;background:#07101b}
.hike-party-portrait > img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.hike-party-level{display:block;padding:3px 1px;border-top:1px solid #30435f;background:#07101b;color:#d5e0ee;font-size:11px;line-height:15px}
.hike-party-name{margin-top:6px;color:#d5e0ee;font-size:12px;line-height:17px}
.hike-party-purpose{margin-top:3px;color:#9fb4ce;font-size:10px;line-height:15px}
.hike-page .hike-wide-button{display:block;width:100%;box-sizing:border-box;margin:6px 0 0}
.hike-note{margin:8px 0 1px;color:#9daec3;font-size:11px;line-height:16px}
.hike-level-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;line-height:18px;text-align:left}
.hike-level-heading > span:last-child{color:#9fb4ce;font-size:10px;text-align:right}
.hike-level-progress{height:7px;margin:8px 0 12px}
.hike-level-picker{position:relative}
.hike-level-radio{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.hike-level-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.hike-level-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:78px;padding:6px 3px;box-sizing:border-box;border:1px solid #30435f;border-radius:5px;background:#0a1422;color:#c4d3e7;cursor:pointer;font-size:12px;line-height:17px}
.hike-level-option img,.hike-level-result img{vertical-align:middle}
.hike-level-discount{color:#96bbdc;font-size:10px}
.hike-level-unavailable{opacity:.4;cursor:not-allowed}
#hike-pack-1:checked ~ .hike-level-options label[for="hike-pack-1"],#hike-pack-5:checked ~ .hike-level-options label[for="hike-pack-5"],#hike-pack-10:checked ~ .hike-level-options label[for="hike-pack-10"]{border-color:#7a9cc8;background:#152942}
#hike-pack-1:focus-visible ~ .hike-level-options label[for="hike-pack-1"],#hike-pack-5:focus-visible ~ .hike-level-options label[for="hike-pack-5"],#hike-pack-10:focus-visible ~ .hike-level-options label[for="hike-pack-10"]{outline:2px solid #b8cceb;outline-offset:2px}
.hike-level-result{display:none}
#hike-pack-1:checked ~ .hike-level-panels .hike-level-result-1,#hike-pack-5:checked ~ .hike-level-panels .hike-level-result-5,#hike-pack-10:checked ~ .hike-level-panels .hike-level-result-10{display:block}
.hike-level-rewards{margin-top:10px;padding:8px 4px;border:1px solid #26374e;border-radius:5px;background:rgba(4,12,24,.5);font-size:12px;line-height:18px}
.hike-level-reward-values{display:flex;justify-content:center;flex-wrap:wrap;gap:5px 12px;margin-top:5px;font-size:11px}
.hike-level-help{margin-top:8px;color:#9fb4ce;font-size:11px;line-height:17px;text-align:left}
.hike-level-help summary{padding:3px;cursor:pointer;text-align:center}
.hike-level-help p{margin:7px 3px}
@media(max-width:350px){.hike-panel{margin-right:5px;margin-left:5px;padding:8px}.hike-party{gap:5px}.hike-title{font-size:12px}.hike-level-option{font-size:11px}.tab-switcher-black .tab{padding:9px 4px;font-size:11px}.tab-switcher-black .tab.active{font-size:15px}}

.hike-speed-panels{padding:0 10px}

/* Шахта и лес */
.resource-page{color:#d0dbe9}
.resource-shade{min-height:538px;padding-bottom:12px;background:rgba(3,10,20,.48)}
.resource-scene{height:110px;max-height:20vh}
.resource-content{padding:0 8px}
.resource-panel{
    margin: 0 0 14px;
    padding: 6px 12px 6px 12px;
    border: 1px solid #30435f;
    border-radius: 7px;
    background: rgba(4, 12, 24, .71);
    text-align: center;
}
.resource-main{text-align:left;transition:border-color .15s,background-color .15s}
.resource-panel.resource-main:hover,.resource-panel.resource-main:focus-visible{border-color:#607d9f;background:rgba(16,31,52,.88)}
.resource-main-title{margin:0 0 9px;color:#dbe5f1;font:20px/25px Georgia,"Times New Roman",serif}
.resource-status{margin:7px 0;color:#a9c4dc;font-size:12px;line-height:19px}
.resource-status-ready{color:#a7ce9a}
.resource-time{margin:8px 0;color:#b9cce2;font-size:13px;line-height:22px}
.resource-time strong{color:#ecdbb9;font-weight:normal}
.resource-note{margin:7px 0;color:#9eafc5;font-size:11px;line-height:17px}
.resource-progress-row{display:flex;align-items:center;gap:8px;margin:9px 0;color:#d4c29e;font-size:12px}
.resource-progress{display:block;flex:1;height:8px;overflow:hidden;border:1px solid #425771;border-radius:5px;background:#172336}
.resource-progress > span{display:block;height:100%;border-radius:inherit;background:#bd8a3d}
.resource-page-forest .resource-progress > span{background:#568654}
.resource-condition-good .resource-progress > span{background:#568654}
.resource-condition-worn .resource-progress > span{background:#bd8a3d}
.resource-condition-broken{border: 1px solid #651414;background: rgb(24 4 4 / 71%);}
.resource-condition-broken .resource-progress > span{background:#ac4b43}
.resource-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:10px;align-items:start}
.resource-actions > a,.resource-speed > summary{display:block;width:100%;margin:0;box-sizing:border-box}
.resource-speed{min-width:0}
.resource-speed > summary{cursor:pointer;list-style:none}
.resource-speed > summary::-webkit-details-marker{display:none}
.resource-speed[open] > summary{border-color: #607d9f;}
.resource-confirm{margin-top:8px;padding:8px;border:1px solid #30435f;border-radius:5px;background:rgba(3,10,20,.75);font-size:12px;line-height:18px}
.resource-confirm p{margin:4px 0 8px}
.resource-page .resource-wide{display:block;width:100%;box-sizing:border-box;margin:8px 0 0;cursor:pointer}
.resource-page summary.resource-wide{list-style:none}
.resource-page summary.resource-wide::-webkit-details-marker{display:none}
.resource-page img{vertical-align:middle}
.resource-heading{display:flex;align-items:center;gap:8px;margin:17px 0 10px;color:#bdcde4;font:13px/19px Georgia,"Times New Roman",serif;letter-spacing:.7px;text-align:center;text-transform:uppercase}
.resource-heading > img{flex:1;display:block;min-width:0;width:0;height:20px}
.resource-heading > img:last-child{transform:scaleX(-1)}
.resource-heading > span{max-width:80%}
.resource-condition-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;font-size:13px}
.resource-condition-label strong{font-weight:normal;color:#d4c29e}
.resource-help{margin-top:9px;color:#9fb4ce;font-size:11px;line-height:17px;text-align:center}
.resource-help summary{padding:3px;cursor:pointer;text-align:center}
.resource-help p{margin:6px 0}
.resource-repair-material{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0;color:#bed0e3}
.resource-upgrades{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:2px 0 12px}
.resource-upgrade-card{display:flex;flex-direction:column;align-items:center;min-width:0;color:#d2dfed;text-decoration:none}
.resource-upgrade-icon{display:block;width:80px;max-width:100%;box-sizing:border-box;overflow:hidden;background:#07101b}
.resource-upgrade-icon > img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.resource-upgrade-icon > span{display:block;padding:3px 1px;border-top:1px solid #30435f;color:#cad7e7;font-size:11px;line-height:15px;background:#07101b}
.resource-upgrade-card > strong{margin-top:6px;font-size:12px;line-height:17px;font-weight:normal;overflow-wrap:anywhere}
.resource-upgrade-card > .resource-note{margin:4px 0 0;font-size:10px;line-height:15px}
.resource-catalog{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px 5px}
.resource-catalog-item{display:flex;flex-direction:column;align-items:center;min-width:0;color:#aebed2;font-size:10px;line-height:14px;text-decoration:none}
.resource-catalog-icon{position:relative;display:block;width:100%;max-width:52px;margin-bottom:4px}
.resource-catalog-icon > img{display:block;width:100%;height:auto;box-sizing:border-box;aspect-ratio:1;object-fit:contain;background:#07101b}
.resource-locked img{opacity:.35;filter:grayscale(.8)}
.resource-lock{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-size:15px;color:#becbdd}
.resource-rewards{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:12px 0}
.resource-reward-card{display:flex;flex-direction:column;align-items:center;gap:5px;max-width:125px;color:#c9d6e7;text-align:center;font-size:11px;line-height:16px}
.resource-reward-number{color:#b3d5a6}
.resource-page a:focus-visible,.resource-page summary:focus-visible{outline:2px solid #93afd4;outline-offset:2px}
@media(max-width:350px){.resource-content{padding:0 5px}.resource-panel{padding:9px}.resource-scene{height:85px}.resource-heading{font-size:12px}.resource-main-title{font-size:18px}.resource-catalog{gap:8px 4px}.resource-catalog-item{font-size:9px}.resource-upgrades{gap:5px}.resource-upgrade-card > strong{font-size:11px}}

.resource-lock{left:50%;right:auto;width:12px;height:10px;box-sizing:border-box;border:1px solid #a1afc1;border-radius:2px;background:#111b29;transform:translate(-50%,-10%);font-size:0;color:transparent}
.resource-lock:before{content:"";position:absolute;left:2px;top:-7px;width:6px;height:6px;box-sizing:border-box;border:1px solid #a1afc1;border-bottom:0;border-radius:5px 5px 0 0}

/* Улучшения шахты и леса */
.resource-upgrade-screen .resource-content{padding-top:12px}
.resource-upgrade-intro{margin:0 4px 9px;text-align:center}
.resource-upgrade-balance{display:flex;justify-content:center;gap:16px;margin:0 0 13px;color:#c5d4e7;font-size:11px;line-height:18px}
.resource-skill-panel{text-align:left}
.resource-skill-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.resource-skill-header > img{display:block;width:64px;height:64px;object-fit:contain;flex:none;background:#07101b}
.resource-skill-header > div{min-width:0}
.resource-skill-header h2{
    margin: 0 0 5px;
    color: #d7e3f1;
    font: 15px / 7px Georgia, "Times New Roman", serif;
    overflow-wrap: anywhere;
}
.resource-skill-header p{margin:0;color:#9fb4ce;font-size:11px;line-height:17px}
.resource-skill-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.resource-skill-comparison > div{padding:8px;border:1px solid #26374e;border-radius:5px;background:rgba(4,12,24,.6)}
.resource-skill-comparison span{display:block;margin-bottom:5px;color:#91a6c2;font-size:10px;line-height:15px}
.resource-skill-comparison strong{display:block;color:#d3e0f0;font-size:12px;line-height:18px;font-weight:normal}
.resource-skill-comparison > div:nth-child(2) strong{color:#a7c8e5}
.resource-skill-comparison > div:only-child{grid-column:1 / -1}
.resource-skill-cost{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:5px;margin-top:12px;color:#c7d3e3;font-size:12px;line-height:18px}
.resource-skill-cost > span:first-child{color:#9fb4ce;font-size:11px}
.resource-cost-plus{display:inline-block;margin:0 4px;color:#91a6c2}
.resource-skill-purchase summary{list-style:none}
.resource-skill-purchase summary::-webkit-details-marker{display:none}
.resource-skill-max{margin-top:12px;padding:8px;border:1px solid #36533b;border-radius:5px;background:rgba(13,29,19,.7);color:#a7ce9a;text-align:center;font-size:12px;line-height:18px}
.resource-skill-panel .resource-confirm{text-align:center}
@media(max-width:350px){.resource-skill-header{gap:9px}.resource-skill-header h2{font-size:15px;line-height:20px}.resource-skill-comparison > div{padding:7px}.resource-skill-comparison strong{font-size:11px}}

/* Улучшение бойцов похода */
.hike-upgrade-screen .resource-skill-comparison small{display:block;margin-top:4px;color:#8dbb9d;font-size:10px;line-height:15px}
.hike-upgrade-cost-title{margin:12px 0 7px;color:#9fb4ce;font-size:11px;line-height:17px}
.hike-upgrade-packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;align-items:start}
.hike-upgrade-pack{min-width:0;border:1px solid #30415a;border-radius:6px;background:rgba(5,14,27,.85);overflow:hidden}
.hike-upgrade-pack > summary{display:flex;flex-direction:column;gap:5px;padding:10px 5px;color:#c5d5e8;text-align:center;cursor:pointer;font-size:12px;line-height:17px}
.hike-upgrade-pack > summary strong{color:#d5e2f0;font-size:12px;font-weight:normal}
.hike-upgrade-pack > summary span{display:block;overflow-wrap:anywhere}
.hike-upgrade-pack s{color:#738197;font-size:10px}
.hike-upgrade-pack > summary:hover,.hike-upgrade-pack[open] > summary{background:rgba(31,48,73,.65)}
.hike-upgrade-pack > summary:focus-visible{outline:2px solid #88aacd;outline-offset:-3px}
.hike-upgrade-pack .resource-confirm{margin:0;padding:6px;border:0;border-top:1px solid #30415a;border-radius:0}
.hike-upgrade-pack .resource-confirm p{font-size:11px}
.hike-upgrade-pack .resource-wide{font-size:11px}

/* Разделитель */
.hr {
    display: block;
    position: relative;
    height: 12px;
    margin: 2px 5px;
    box-sizing: border-box;
    clear: both;
}

.hr::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #30435f 20%, #58728e 50%, #30435f 80%, transparent);
}

.hr::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border: 1px solid #6884a1;
    background: #091321;
    box-sizing: border-box;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Страница выбранного клана */
.clan-page{color:#cbd9e9;padding-bottom:90px}
.clan-page > .resource-shade > .resource-content{padding-top:12px}
.clan-page .resource-panel{padding:10px}
.clan-page .block-title{margin:0 0 12px}
.clan-identity{display:flex;align-items:center;gap:14px;text-align:left}
.clan-identity-crest{flex:none;width:100px;text-align:center}
.clan-crest{--pad:0px;width:96px;height:96px;margin:0 auto 6px}
.clan-crest::after{width:150%;height:150%}
.clan-identity-info{min-width:0;flex:1}
.clan-identity-info h1{margin:0 0 7px;color:#c8def2;font:20px/25px Georgia,"Times New Roman",serif;overflow-wrap:anywhere}
.clan-identity-info p{margin:4px 0;font-size:11px;line-height:17px;overflow-wrap:anywhere}
.clan-description{white-space:pre-line;text-align:left;color:#9fb4ce;font-size:11px;line-height:18px;overflow-wrap:anywhere}
.clan-experience-label{display:flex;justify-content:space-between;flex-wrap:wrap;gap:5px;text-align:left;font-size:11px;line-height:18px}
.clan-experience .resource-progress{margin:8px 0}
.clan-experience .resource-progress > span{background:#5286af}
.clan-bonuses{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.clan-bonuses > div{min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.clan-bonuses strong{font-size:12px;font-weight:normal;color:#d9e4f2;overflow-wrap:anywhere}
.clan-bonuses span{font-size:9px;line-height:13px;color:#9fb4ce;overflow-wrap:anywhere}
.clan-awards{display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;padding:3px 0}
.clan-awards img{display:block;flex:0 1 64px;min-width:0;width:64px;height:auto;border-radius:50%;object-fit:contain}
.clan-awards img + img{margin-left:-18px}
.clan-buildings{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 14px)/3);gap:7px;padding:0 0 7px;scroll-snap-type:x mandatory}
.clan-buildings > a{scroll-snap-align:start}
.clan-buildings .button_grid_blue{padding:8px 3px;gap:3px}
.clan-buildings .button_grid_blue img{width:64px;height:64px;margin:0}
.clan-buildings small{font-size:11px;line-height:16px;color:#9fb4ce}
.clan-page .resource-actions{margin:0}
.clan-page .resource-actions > a{font-size:11px}
.clan-member-list{text-align:left}
.clan-member-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid #26374e}
.clan-member-row:last-of-type{border-bottom:0}
.clan-member-avatar{flex:none;width:32px;text-align:center;color:#8fa4bd;font-size:10px}
.clan-member-avatar img{display:block;object-fit:contain;margin-bottom:4px}
.clan-member-info{flex:1;min-width:0;overflow-wrap:anywhere;font-size:12px;line-height:18px}
.clan-member-info > a{color:#cadcf0}
.clan-member-info .resource-note{margin:3px 0;font-size:10px;line-height:15px}
.clan-member-offline .clan-member-info > a{color:#97a6b9}
.clan-member-contribution{display:flex;flex-wrap:wrap;gap:3px 8px;color:#99acc2;font-size:10px;line-height:16px}
.clan-member-contribution > span{white-space:nowrap}
.clan-member-rank{flex:none;width:62px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:10px;line-height:14px}
.clan-member-rank img{object-fit:contain}
@media(max-width:350px){.clan-page .resource-panel{padding:8px}.clan-identity{gap:9px}.clan-identity-crest{width:82px}.clan-crest{width:80px;height:80px}.clan-identity-info h1{font-size:17px;line-height:22px}.clan-bonuses{gap:3px}.clan-bonuses span{font-size:8px}.clan-member-row{gap:5px}.clan-member-rank{width:53px}.clan-member-info{font-size:11px}}

/* Форум клана */
.forum-topics{position:relative;margin-top:16px}
.forum-order-toggle{position:absolute;width:1px;height:1px;opacity:0}
.forum-order-label{display:block;width:max-content;max-width:100%;margin:0 0 8px auto;padding:5px 7px;border:1px solid #30435f;border-radius:5px;color:#9fb4ce;font-size:11px;line-height:17px;cursor:pointer}
.forum-order-toggle:checked + .forum-order-label{color:#d4e3f2;background:#142238}
.forum-order-toggle:focus-visible + .forum-order-label{outline:2px solid #93afd4}
.forum-topic-link{display:flex;align-items:flex-start;gap:10px;text-align:left}
.forum-topic-link > img{display:block;flex:none;object-fit:contain;background:#091321}
.forum-topic-info{min-width:0;flex:1}
.forum-topic h3,.forum-comment h3{margin:0 0 4px;color:#a9cbe9;font-size:13px;font-weight:normal;line-height:18px;overflow-wrap:anywhere}
.forum-preview{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0 0 6px;color:#b8c6d8;font-size:11px;line-height:17px;overflow-wrap:anywhere}
.forum-topic-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 8px;color:#8fa5bf;font-size:10px;line-height:16px}
.clan-page .forum-topic,.clan-page .forum-comment{margin-bottom:7px}
.forum-topic{transition:border-color .15s,background-color .15s}
.forum-topic:hover,.forum-topic:focus-within{border-color:#607d9f;background:#101f34}
.forum-order-buttons{display:none;justify-content:flex-end;align-items:center;gap:6px;margin-top:8px;padding-top:7px;border-top:1px solid #26374e;color:#8fa5bf;font-size:10px}
.forum-order-buttons > a{display:inline-flex;justify-content:center;align-items:center;width:36px;min-height:32px;margin:0;padding:5px;box-sizing:border-box}
.forum-order-toggle:checked ~ .forum-topic-list .forum-order-buttons{display:flex}
.forum-comment{display:block;text-align:left}
.forum-comment .forum-topic-meta{margin-bottom:5px}
.forum-comment .forum-preview{-webkit-line-clamp:3}
.forum-comment-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px}
.forum-comment-person{flex:1;min-width:0;color:#8fa5bf;font-size:10px;line-height:16px}
.forum-comment-author{display:flex;align-items:center;gap:7px;min-width:0;color:#dce5f1;font-size:12px;font-weight:bold;line-height:17px;overflow-wrap:anywhere}
.forum-comment-author > img{flex:none;object-fit:cover}
.forum-comment-person > span{display:block}
.forum-comment-tools{display:flex;align-items:center;gap:7px;flex:none;color:#8fa5bf;font-size:10px;line-height:20px;white-space:nowrap}
.forum-comment-footer{
    display: grid;
    grid-template-columns: minmax(0, 120px);
    margin-top: 7px;
    justify-content: end;
}
.forum-comment-menu{position:relative}
.forum-comment-menu > summary{display:flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;cursor:pointer;list-style:none;color:#a9cbe9;font-size:18px;font-weight:bold}
.forum-comment-menu > summary::-webkit-details-marker{display:none}
.forum-comment-menu > summary:focus-visible{outline:2px solid #93afd4;border-radius:3px}
.forum-comment-menu-body{position:absolute;z-index:5;right:0;top:100%;width:max-content;max-width:calc(100vw - 48px);padding:9px;border:1px solid #30435f;border-radius:5px;background:#0b1727;box-shadow:0 4px 12px #0008;color:#cbd9e9;white-space:normal;font-size:12px;line-height:18px}
.forum-comment .resource-note{margin:0;font-size:10px;line-height:16px}
[id^="clan-comment-"]{scroll-margin-top:12px}

/* Настройка AFK-режима */
.afk-page .resource-content{padding-top:12px}
.afk-page .resource-panel > .block-title{margin:0 0 10px}
.afk-page .resource-actions > details{min-width:0}
.afk-icons{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:12px 0}
.afk-icons > img{display:block;width:40px;height:40px;box-sizing:border-box;object-fit:contain;background:#091321}

/* Тема и редактор кланового форума */
.forum-page .resource-content{padding-top:12px}
.forum-editor{display:block;text-align:left}
.forum-editor .forum-field{display:block;width:100%;min-width:0;clear:both}
.forum-editor .forum-field > label{display:block;width:100%;margin-top:14px;color:#c1d2e6;font-size:12px;line-height:18px}
.forum-editor .text-area-2,form[action^="/chat/"] textarea#message.text-area-2{box-sizing:border-box;max-width:100%;padding:9px;border:1px solid #30435f;border-radius:5px;background:rgba(4,12,24,.85);color:#cbd9e9;font:12px/18px Arial,sans-serif;opacity:1}
.forum-editor .text-area-2{display:block;width:100%;margin:6px 0 0}
.forum-editor .text-area-2:focus,form[action^="/chat/"] textarea#message.text-area-2:focus{border-color:#607d9f;outline:1px solid #607d9f}
.forum-editor .text-area-2::placeholder,form[action^="/chat/"] textarea#message.text-area-2::placeholder{color:#7f93ad}
.forum-editor select.text-area-2{height:auto;min-height:40px;line-height:20px;padding:8px 9px;opacity:1}
.forum-editor option{background:#091321;color:#cbd9e9}
.forum-editor textarea{min-height:240px;resize:vertical}
.forum-editor textarea[name="topic_text"]{height:55vh;min-height:440px}
.forum-editor textarea.forum-comment-input{min-height:90px}
.forum-editor > .block-title{margin:0 0 12px}
.forum-body-title{margin:0 0 12px;text-align:left;color:#c8def2;font:20px/26px Georgia,"Times New Roman",serif;overflow-wrap:anywhere}
.forum-body{text-align:left;overflow-wrap:anywhere;overflow-x:auto;color:#c4d0e0;font-size:11px;line-height:20px}
.forum-comment-text{font-size:12px;line-height:1.4}
.forum-body img,.forum-body video,.forum-body iframe{max-width:100%}
.forum-body img{height:auto}
.forum-body img.forum-inline-icon{width:15px;height:15px;min-width:15px;max-width:15px;min-height:15px;max-height:15px;object-fit:contain;vertical-align:middle}
.forum-body pre{white-space:pre-wrap;overflow-wrap:anywhere}
.forum-body table{max-width:100%}
.forum-page .resource-panel{min-width:0}
.forum-page .forum-topic-meta{margin:7px 0}
.forum-visibility > a{display:flex;align-items:center;justify-content:center;width:100%;margin:0;box-sizing:border-box;font-size:10px;line-height:16px}

/* Алтарь богов */
.altar-page .resource-content{padding-top:12px}
.altar-page .resource-panel > .block-title{margin:0 0 12px}
.altar-gods{row-gap:16px}
.altar-gods .hike-party-level{font-size:10px;line-height:15px}
.altar-gods .hike-party-level > img{vertical-align:middle}
.altar-gods .hike-party-name{font-size:11px;line-height:16px;text-align:center}
.altar-gods > a:hover .hike-party-portrait{filter:brightness(1.15)}
.altar-filter{margin:0 0 12px}
.altar-equipment{display:flex;align-items:flex-start;gap:12px;text-align:left;color:#cbd9e9;text-decoration:none}
a.altar-equipment{transition:border-color .15s,background-color .15s}
a.altar-equipment:hover{border-color:#607d9f;background:#101f34}
.altar-item-portrait{position:relative;flex:none;width:64px}
.altar-item-portrait > img{display:block;width:64px;height:64px;object-fit:contain;box-sizing:border-box;background:#091321}
.altar-item-grade,.altar-item-rank,.altar-item-upgrade{position:absolute;box-sizing:border-box;padding:0 3px;font-size:11px;line-height:14px;text-shadow:0 1px 2px #000;background:rgba(0,0,0,.76);pointer-events:none}
.altar-item-grade{top:48px;left:2px;right:2px;height:14px;text-align:center;border-radius:0 0 6px 6px;white-space:nowrap}
.altar-item-grade > img{vertical-align:middle}
.altar-item-rank{top:2px;left:2px;border-radius:6px 0 3px 0;text-align:left}
.altar-item-upgrade{top:2px;right:2px;border-radius:0 6px 0 3px;text-align:right}
.altar-item-stones{display:flex;justify-content:center;gap:3px;margin-top:5px}
.altar-item-stones > img{width:15px;height:15px;object-fit:contain;box-sizing:border-box}
.altar-item-info{flex:1;min-width:0;font-size:11px;line-height:17px;overflow-wrap:anywhere}
.altar-item-info h3{margin:0 0 4px;font-size:13px;font-weight:normal;line-height:18px}
.altar-item-info .resource-note{margin:4px 0;font-size:10px}
.altar-page .resource-progress > span{background:#82649c}
.altar-page .resource-catalog-item[aria-current="true"]{color:#c5ddba}
.altar-page .resource-actions > a{font-size:11px}
@media(max-width:350px){.altar-equipment{gap:9px}.altar-gods{column-gap:5px}}


/* Главная страница аукциона */
.auction-page .resource-content{padding-top:12px}
.auction-page #menu > .block-title{margin:0 0 12px}
.auction-catalog{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0}
.auction-catalog > a{display:flex;flex:0 0 20%;flex-direction:column;align-items:center;min-width:0;color:#cbd9e9;text-decoration:none;font-size:10px;line-height:15px;text-align:center}
.auction-catalog > a > img{display:block;width:54px;height:54px;max-width:90%;box-sizing:border-box;object-fit:contain;background:#07101b;transition:filter .15s}
.auction-catalog > a > span{margin-top:4px;max-width:100%;overflow-wrap:anywhere}
.auction-catalog > a:hover > img{filter:brightness(1.15)}
.auction-catalog > a[aria-current="true"]{color:#c1dcf7}
.auction-filters{margin-bottom:14px}
.auction-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:stretch}
.auction-search-field,.auction-filter-row > label{display:block;min-width:0}
.auction-search .text-area-2,.auction-filter-row select.text-area-2{width:100%;min-width:0;margin:0;min-height:38px}
.auction-search > button{width:auto;box-sizing:border-box;margin:0;padding:7px 12px;font-size:11px}
.auction-filter-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;margin-top:6px}
.auction-filter-row .auction-check{display:flex;align-items:center;justify-content:center;gap:5px;box-sizing:border-box;padding:5px;border:1px solid #30435f;border-radius:5px;background:rgba(4,12,24,.85);color:#aebed2;font-size:11px;line-height:16px;cursor:pointer}
.auction-check input{margin:0;accent-color:#688bb8}
.auction-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}
.auction-lot-tabs{margin-bottom:10px}
.auction-lot-tabs > a{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;margin:0;padding:6px 3px;font-size:10px;line-height:15px}
.auction-card.resource-panel{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:10px;margin:0 0 6px;padding:10px;text-align:left;text-decoration:none;color:#cbd9e9;transition:border-color .15s,background-color .15s}
.auction-card:hover,.auction-card:focus-visible{border-color:#607d9f;background:rgba(16,31,52,.88)}
.auction-item-icon{display:block;position:relative;width:64px;align-self:start}
.auction-item-icon > img{display:block;width:64px;height:64px;object-fit:contain;box-sizing:border-box;background:#07101b}
.auction-item-icon > span{position:absolute;left:2px;right:2px;bottom:2px;box-sizing:border-box;min-height:14px;border-radius:0 0 5px 5px;background:rgba(0,0,0,.76);color:#cbd9e9;text-align:center;font-size:10px;line-height:14px}
.auction-item-info{display:block;min-width:0;font-size:11px;line-height:17px;overflow-wrap:anywhere}
.auction-item-name{display:block;font-size:12px;line-height:17px;margin-bottom:4px}
.auction-item-meta{display:block;color:#98acc5;font-size:10px;line-height:16px}
.auction-market{display:block;color:#86acd0;font-size:10px;line-height:17px}
.auction-item-price{display:flex;flex-direction:column;align-items:flex-end;gap:3px;max-width:100px;text-align:right;font-size:12px;line-height:17px}
.auction-item-price > span{white-space:nowrap}
.auction-item-price small{display:block;color:#9eafc5;font-size:10px;line-height:14px}
.auction-lot-locked .auction-item-meta{color:#8391a5}
@media(max-width:350px){.auction-catalog > a{flex-basis:25%}.auction-catalog > a > img{width:48px;height:48px}.auction-card.resource-panel{gap:7px;padding:8px;grid-template-columns:54px minmax(0,1fr) auto}.auction-item-icon,.auction-item-icon > img{width:54px;height:54px}.auction-item-name{font-size:11px;line-height:16px}.auction-item-price{max-width:78px;font-size:11px}.auction-filter-row .auction-check{font-size:10px}}

/* Товары, заявки и остальные разделы аукциона */
.auction-module .auction-content{box-sizing:border-box;padding:0 8px 12px}
.auction-content > .tab-switcher-black{width:100%;margin:0 0 12px}
.auction-module .auction-content > .tab-switcher-black + .hr,.auction-module a + .hr{display:none}
.auction-module .resource-panel{
    /*box-sizing: border-box;
    margin: 0 0 12px;
    padding: 1px 9px 9px 9px;*/
}
.auction-module .resource-panel > .block-title{
    margin: 4px 0 0px;
}
.auction-module .block-title + .hr,.auction-module .block-title + div > .hr:first-child{display:none}
.auction-module .auction-record,.auction-module .auction-offer,.auction-module .skill-holder{
    box-sizing: border-box;
    padding: 6px 6px 6px 6px;
    border: 1px solid #30435f;
    border-radius: 6px;
    background: rgba(4, 12, 24, .71);
    text-align: left;
    transition: border-color .15s, background-color .15s;
    margin-bottom: 5px;
}
.auction-module .auction-record:hover,.auction-module .auction-offer:hover,.auction-module .skill-holder:hover{border-color:#607d9f;background:rgba(16,31,52,.88)}
.auction-module .auction-offer + .hr{display:none}
.auction-module .auction-offer table{table-layout:fixed;border-collapse:collapse;font-size:11px;line-height:17px}
.auction-module .auction-offer td{overflow-wrap:anywhere;padding:2px}
.auction-module .auction-offer td:last-child img{transform:rotate(180deg)}
.auction-module .auction-offer .fz10{font-size:9px}
.auction-module .text-dark{color:#91a6c2}
.auction-module .auction-product-summary{display:flex;align-items:flex-start;gap:12px;text-align:left;box-sizing:border-box}
.auction-module .auction-product-icon{display:block;flex:none;box-sizing:border-box;width:64px;padding:0}
.auction-module .auction-product-icon > img{display:block;box-sizing:border-box;width:64px;height:64px;object-fit:contain}
.auction-module .auction-product-icon .hero-item-stats-64{box-sizing:border-box;left:2px;width:60px;bottom:-62px;height:15px;line-height:15px;padding:0}
.auction-module .auction-product-description{flex:1;min-width:0;font-size:11px;line-height:18px;overflow-wrap:anywhere}
.auction-module .auction-form{margin:8px 0;text-align:center}
.auction-module .auction-form .text-area-2{box-sizing:border-box;max-width:100%;min-height:38px;padding:8px;border:1px solid #30435f;border-radius:5px;background:rgba(4,12,24,.85);color:#cbd9e9;font:12px/18px Arial,sans-serif;opacity:1}
.auction-module .auction-form select.text-area-2{height:auto;line-height:20px}
.auction-module .auction-form select option{background:#091321;color:#cbd9e9}
.auction-module .auction-form .text-area-2:focus{border-color:#607d9f;outline:1px solid #607d9f}
.auction-module .auction-form input[type="number"],.auction-module .auction-form input[name="itemValue"]{display:block;margin:7px auto}
.auction-module .auction-form input[type="range"]{max-width:100%;accent-color:#688bb8}
.auction-module .auction-form input[type="range"]{appearance:none;-webkit-appearance:none;width:100%;height:6px;margin:12px 0;background:#23364e;border:1px solid #425771;border-radius:4px;box-shadow:none}
.auction-module .auction-form input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1px solid #88a1bd;border-radius:4px;background:#405c7c;box-shadow:none;cursor:pointer}
.auction-module .auction-form input[type="range"]::-moz-range-thumb{width:15px;height:15px;border:1px solid #88a1bd;border-radius:4px;background:#405c7c;box-shadow:none;cursor:pointer}
.auction-module .auction-form input[type="submit"]{min-height:36px;max-width:100%;box-sizing:border-box;cursor:pointer}
.auction-module .resource-panel table{max-width:100%;border-spacing:3px}
.auction-module .resource-panel > table{width:100%;table-layout:fixed}
.auction-module .resource-panel .resource-panel{margin:8px 0 0;padding:9px;background:rgba(3,10,20,.75)}
.auction-module .resource-panel [class*="button-"]{
    box-sizing: border-box;
    max-width: 100%;
    white-space: nowrap;
    line-height: 18px;
}
.auction-module #list{padding-left:0;padding-right:0}
.auction-module .auction-fitting-shade{padding:6px;background:rgba(3,10,20,.35);border-radius:5px}
.auction-module #loc table{table-layout:fixed;border-spacing:0}
.auction-module #loc .hero-frame,.auction-module #loc .hero-img-user{max-width:100%;height:auto;aspect-ratio:1}
.auction-module #loc .hero-img{max-width:100%;height:100%;object-fit:cover}
.auction-module #loc .resource-panel{padding:5px}
@media(max-width:350px){.auction-module #loc .hero-frame,.auction-module #loc .hero-img-user{width:110px;height:110px}.auction-module #loc .transform-10{transform:none}.auction-module #loc .blocks-l-l{max-width:64px}.auction-module #loc table table{width:100%}}
@media(max-width:350px){.auction-module .auction-content{padding-right:5px;padding-left:5px}.auction-module .resource-panel{padding:9px}.auction-module .auction-record,.auction-module .auction-offer,.auction-module .skill-holder{padding:6px}.auction-module .auction-offer table{font-size:10px;line-height:16px}.auction-module .auction-product-summary{gap:9px}.auction-module .auction-product-description{font-size:10px;line-height:17px}}


/* Содержимое карточек в списке банков */
.bank-row{transition:border-color .15s,background-color .15s}
.bank-row:hover,.bank-row:focus-within{border-color:#607d9f;background:rgba(16,31,52,.88)}
.banks-card-link{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:9px;color:#cbd9e9;text-align:left;text-decoration:none;overflow-wrap:anywhere}
.banks-identity{display:contents}
.banks-portrait{min-width:0}
.banks-portrait > img{display:block;box-sizing:border-box;width:54px;height:54px;object-fit:contain;background:#07101b}
.banks-stars{display:flex;justify-content:center;gap:1px;margin-top:3px}
.banks-stars > img{display:block;width:10px;height:10px}
.banks-identity-info{min-width:0}
.banks-identity-info h3{margin:0;font-size:12px;font-weight:normal;line-height:17px}
.banks-owner{margin:2px 0;color:#9eafc5;font-size:10px;line-height:16px}
.banks-details{color:#a9bbd0;font-size:10px;line-height:16px}
.banks-capacity{min-width:0}
.banks-balances{display:flex;flex-direction:column;gap:3px;color:#cbd9e9;font-size:11px;line-height:17px}
.banks-balances > span{display:inline-flex;align-items:center;justify-content:flex-end;gap:3px;white-space:nowrap}

/* Открытый личный диалог */
.mail-dialog{display:flex;flex-direction:column;position:relative;height:var(--mail-height,100dvh);min-height:0;overflow:hidden;background:#060e19 url(/img/background/magic_01.png?iv=1793203791-286414) center top/cover no-repeat;color:#cbd9e9;box-sizing:border-box;text-align:left}
.mail-dialog-header{display:flex;align-items:center;gap:10px;flex-shrink:0;padding:9px 10px;background:rgba(4,12,24,.92);border-bottom:1px solid #30435f}
.mail-dialog-back,.mail-dialog-menu-button{display:flex;align-items:center;justify-content:center;flex:0 0 34px;min-height:38px;color:#aec6df;background:transparent;border:0;cursor:pointer;font:26px Arial}
.mail-dialog-person{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:inherit}
.mail-dialog-person > img{flex-shrink:0;object-fit:cover;border-radius:7px}
.mail-dialog-person-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.mail-dialog-person-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:16px Georgia,serif;color:#d2dff0}
.mail-dialog-status{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#91a5bf;font:11px/16px Arial}
.mail-dialog-settings{position:absolute;z-index:5;top:60px;right:8px;left:8px;max-height:calc(100% - 72px);overflow:auto}
.mail-dialog-settings[hidden]{display:none}
.mail-dialog-history{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:10px 12px;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:thin;scrollbar-color:#30435f transparent}
.mail-dialog-row{display:flex;flex-direction:column;align-items:flex-start;margin:0 0 9px;min-width:0}
.mail-dialog-row-own{align-items:flex-end}
.mail-dialog-date{align-self:center;padding:4px 10px;margin:7px 0 14px;border-radius:12px;background:rgba(4,12,24,.82);color:#9fb4ce;font:11px/16px Arial}
.mail-dialog-bubble{position:relative;max-width:86%;min-width:60px;box-sizing:border-box;padding:8px 10px 5px;border:1px solid var(--mail-from,#30435f);border-radius:10px 10px 10px 3px;background:linear-gradient(160deg,var(--mail-from,#243449),var(--mail-to,#0b1524));box-shadow:0 2px 8px #0003}
.mail-dialog-row-own .mail-dialog-bubble{border-radius:10px 10px 3px 10px}
.mail-dialog-text{white-space:pre-line;overflow-wrap:anywhere;color:#dbe4ef;font:12px/18px Arial,sans-serif}
.mail-dialog-text img{max-width:100%;height:auto}
.mail-dialog-meta{display:flex;align-items:center;justify-content:flex-end;gap:5px;color:#b4c2d3;font:10px/16px Arial;margin-top:3px}
.mail-dialog-report{position:relative}
.mail-dialog-report > summary{cursor:pointer;list-style:none;font:18px/18px Arial;padding:0 3px}
.mail-dialog-report > summary::-webkit-details-marker{display:none}
.mail-dialog-report-content{position:fixed;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);width:280px;max-width:calc(100vw - 32px);padding:10px;box-sizing:border-box;background:#0b1727;border:1px solid #30435f;border-radius:7px;color:#cbd9e9;font:12px/18px Arial;box-shadow:0 5px 16px #0008}
.mail-dialog-empty{padding:24px 8px;text-align:center;color:#91a5bf}
.mail-dialog-older{display:block;margin:0 auto 10px;padding:6px 12px;border:1px solid #30435f;border-radius:14px;background:#081423;color:#adc2dc;font:11px Arial;cursor:pointer}
.mail-dialog-new{position:absolute;z-index:3;bottom:var(--mail-composer-height,65px);left:50%;transform:translateX(-50%);max-width:90%;padding:8px 14px;border:1px solid #526e93;border-radius:18px;background:#12243b;color:#dbe9fa;font:12px Arial;cursor:pointer;box-shadow:0 3px 12px #0008}
.mail-dialog-older[hidden],.mail-dialog-new[hidden]{display:none}
.mail-dialog-composer{flex-shrink:0;padding:8px 8px max(8px,env(safe-area-inset-bottom));border-top:1px solid #30435f;background:rgba(4,12,24,.95)}
.mail-dialog-form{display:flex;align-items:flex-end;gap:6px;margin:0}
.mail-dialog-input{flex:1;min-width:0;box-sizing:border-box;height:40px;max-height:128px;min-height:40px;margin:0;padding:9px 10px;resize:none;border:1px solid #30435f;border-radius:7px;background:rgba(4,12,24,.85);color:#cbd9e9;font:16px/21px Arial;outline:none}
.mail-dialog-input:focus{border-color:#607d9f;box-shadow:0 0 0 1px #607d9f44}
.mail-dialog-input::placeholder{color:#8195af}
.mail-dialog-tool{display:flex;align-items:center;justify-content:center;flex:0 0 38px;height:40px;padding:0;border:1px solid #30435f;border-radius:7px;background:#0b192b;color:#cbd9e9;font:21px Arial;cursor:pointer}
.mail-dialog-send{background:#172c46;border-color:#466389}
.mail-dialog-tool:hover,.mail-dialog-older:hover{background:#101f34;border-color:#607d9f}
.mail-dialog-emoji{max-height:130px;overflow:auto;padding:4px 0 8px}
.mail-dialog-tool:focus-visible,.mail-dialog-menu-button:focus-visible,.mail-dialog-older:focus-visible,.mail-dialog-new:focus-visible{outline:2px solid #93afd4;outline-offset:1px}

/* Состояние панели с непрочитанным содержимым */
.resource-panel-unread{border-color:#4a6588;background:rgba(16,31,52,.88)}

/* Содержимое компактной строки диалога; геометрия общей auction-card сохранена */
.mail-list-content{display:block;min-width:0}
.mail-list-heading{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.mail-list-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cbd9e9;font:16px/20px Georgia,serif}
.mail-list-name-unread{font-weight:bold;color:#e0ecfa}
.mail-list-time{flex-shrink:0;color:#8fa5bf;font:10px/16px Arial;white-space:nowrap}
.mail-list-preview{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;white-space:normal;color:#aebed2;font:12px/18px Arial}
.mail-list-prefix{color:#829ab7}
.mail-list-online{position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border:2px solid #081321;border-radius:50%;background:#78bc65;box-shadow:0 0 5px #5fba7044}
.mail-list-indicator{display:flex;align-items:center;justify-content:flex-end;min-width:14px}
.mail-list-unread{display:inline-block;min-width:19px;box-sizing:border-box;padding:2px 4px;border-radius:10px;background:#35577f;color:#edf5ff;text-align:center;font:bold 10px/15px Arial}
.mail-list-receipt{color:#8faaca;font:11px/16px Arial;white-space:nowrap}

/* Содержимое кнопки навигации административной панели */
.admin-menu-content{display:flex;align-items:center;gap:10px;min-height:40px;text-align:left}
.admin-menu-icon{display:block;position:relative;flex:0 0 32px;width:32px;height:32px}
.admin-menu-icon > img{display:block;width:32px;height:32px;object-fit:contain}
.admin-menu-new{position:absolute;right:-2px;bottom:-2px;color:#95d786;font:bold 19px/19px Arial;text-shadow:0 1px 3px #000}
.admin-menu-text{display:block;flex:1;min-width:0;overflow-wrap:anywhere}
.admin-menu-title{display:block;color:#d9e5f3;font-size:13px;line-height:19px}
.admin-menu-note{display:block;margin-top:2px;color:#8fa5bf;font-size:11px;line-height:16px}
.admin-menu-count{flex-shrink:0;padding:2px 6px;border-radius:10px;background:#35577f;color:#edf5ff;font: bold 11px/16px Arial;white-space:nowrap}

/* Выбор оформления главного меню в настройках */
.menu-choice{margin:12px 0;padding:10px;border:1px solid #30435f;border-radius:6px;background:#07101b;text-align:left}
.menu-choice legend{padding:0 6px;color:#bdcde4;font-size:14px}
.menu-choice-option{position:relative;display:block;margin:0 0 8px;cursor:pointer}
.menu-choice-option input{position:absolute;left:12px;top:50%;transform:translateY(-50%);margin:0;accent-color:#9bb8df}
.menu-choice-card{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 10px 10px 34px;border:1px solid #293a50;border-radius:5px;background:#0a1422;color:#d0cfc1}
.menu-choice-option input:checked + .menu-choice-card{border-color:#91acd1;background:#14243a}
.menu-choice-option input:focus-visible + .menu-choice-card{outline:2px solid #b8cceb;outline-offset:2px}
.menu-choice-copy{flex:1;min-width:0;font-size:12px;line-height:17px}
.menu-choice-name{display:block;margin-bottom:3px;color:#e1e6ef;font-size:13px}
.menu-choice-description{display:block;color:#aebed2}
.menu-choice-badge{display:inline-block;margin:0 0 3px;color:#b7cce9;font-size:10px}
.menu-choice-selected{display:none;margin-top:3px;color:#b7d7af;font-size:11px}
.menu-choice-option input:checked + .menu-choice-card .menu-choice-selected{display:block}
.menu-choice-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;flex:none;width:90px;padding:5px;box-sizing:border-box;border:1px solid #30435f;border-radius:4px;background:#050b14}
.menu-choice-preview img{display:block;width:100%;height:auto;min-width:0;border-radius:2px}
.menu-choice-preview-classic{grid-template-columns:22px 1fr;align-items:center;gap:4px;background:#10151c}
.menu-choice-preview-classic:after{content:"";height:1px;background:#42526a}
.menu-choice-preview-classic img{grid-column:1}
.menu-choice-preview-modern img{padding-bottom:5px;background:#20324c}
.menu-choice-preview-atmosphere{gap:8px;background:#07101b url(/images/index_main_dark.png?iv=1793203771-607821) center/cover}
.menu-choice-preview-atmosphere img:nth-child(2){transform:translateY(8px)}
.menu-choice-save{display:block;margin:4px auto 0;cursor:pointer}
@media(max-width:350px){.menu-choice{padding:8px}.menu-choice-card{gap:7px;padding-right:7px}.menu-choice-preview{width:72px}.menu-choice-copy{font-size:11px;line-height:16px}}

/* Компактные награды журнала персонажа */
.journal-rewards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 12px;
	margin-top: 8px;
}
.journal-reward {
	display: grid;
	grid-template-columns: 15px minmax(0, 1fr);
	column-gap: 5px;
	align-items: center;
	min-width: 0;
}
.journal-reward > img {
	width: 15px;
	height: 15px;
	grid-row: 1 / 3;
	object-fit: contain;
}
.journal-reward-label {
	color: #9aadc1;
	font-size: 11px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}
.journal-reward-value {
	font-size: 12px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}
.journal-event-status {
	color: #d48686;
}

/* Содержимое главной страницы города */
.city-place-icon{width:54px;height:54px;justify-self:center;object-fit:contain;box-sizing:border-box}
.city-place-icon-40{width:40px;height:40px;justify-self:center;object-fit:contain;box-sizing:border-box}
.city-place-status{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;max-width:65px;font-size:11px;line-height:15px;overflow-wrap:anywhere}
.city-place-status > img{object-fit:contain;opacity:.8}
.city-contract-card{flex:0 0 72px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;text-decoration:none}
.city-contract-portrait{display:block;position:relative;width:64px;height:64px}
.city-contract-portrait > img{display:block;width:64px;height:64px;box-sizing:border-box}
.city-contract-rank{position:absolute;top:2px;left:4px;font-size:11px;line-height:14px}
.city-contract-stars{position:absolute;bottom:2px;left:2px;right:2px;border-radius:0 0 5px 5px;background:rgba(0,0,0,.7);font-size:11px;line-height:15px}
.city-contract-card:focus-visible{outline:1px solid #93afd4;outline-offset:2px}

/* Компактное содержимое карточки питомца */
.pet-list-summary{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:#cbd9e9}
.pet-list-summary > img{display:block;flex:none;width:64px;height:64px;object-fit:contain;box-sizing:border-box}
.pet-list-info{flex:1;min-width:0}
.pet-list-name{margin:0 0 3px;font:15px/19px Georgia,"Times New Roman",serif;overflow-wrap:anywhere}
.pet-list-meta{display:flex;flex-wrap:wrap;gap:2px 8px;margin-bottom:3px;color:#9fb4ce;font-size:11px;line-height:16px}
.pet-list-values{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11px;line-height:18px}
.pet-list-values > span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.pet-list-summary:focus-visible{outline:1px solid #93afd4;outline-offset:3px}

/* Параметры и пассивные навыки выбранного питомца */
.pet-info-primary{margin:9px 0;font-size:13px;gap:6px 18px}
.pet-info-combat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin:10px 0}
.pet-info-combat > div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 5px;min-width:0}
.pet-info-combat > div > span{color:#9fb4ce;font-size:10px;line-height:17px}
.pet-info-combat strong{font-size:11px;line-height:17px;font-weight:normal;overflow-wrap:anywhere}
.pet-passive-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;max-width:298px;margin:8px auto}
.pet-passive-list > a{flex:0 0 64px;text-align:center}
.pet-passive-list > a > img{display:block;width:64px;height:64px;object-fit:contain;box-sizing:border-box}
.pet-passive-list > a > span{font-size:11px;line-height:17px}

/* Содержимое карточки достижения */
.achievement-name{display:block;margin-bottom:2px;color:#d7e3f1;font:15px/19px Georgia,"Times New Roman",serif;overflow-wrap:anywhere}
.achievement-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:2px 7px;color:#8fa5bf;font-size:10px;line-height:15px}
.achievement-description{color:#a5b7cc;font-size:11px;line-height:16px}
.achievement-bonus{color:#cbd9e9;font-size:11px;line-height:16px}
.achievement-progress{display:flex;margin-top:4px}
.achievement-icon-unearned{filter:grayscale(.65);opacity:.65}

/* Цвета заполнения общего прогресса по качеству */
.resource-progress > .progress-fill-0{background:#8d929a}
.resource-progress > .progress-fill-1{background:#66a967}
.resource-progress > .progress-fill-2{background:#528fc7}
.resource-progress > .progress-fill-3{background:#9b65bf}
.resource-progress > .progress-fill-4{background:#cc8b43}
.resource-progress > .progress-fill-5{background:#bf5656}

/* Главная подземелий: уникальное содержимое карточек */
.dungeon-scene{height:10vh;}
.dungeon-owner{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:9px;text-align:left}
.dungeon-owner > div{min-width:0;overflow-wrap:anywhere}
.dungeon-owner-title{color:#b9cbe1;font:10px/15px Georgia,serif;text-transform:uppercase}
.dungeon-owner-help{position:relative;color:#9fb4ce;font-size:11px;line-height:17px}
.dungeon-owner-help summary{cursor:pointer;list-style:none;font-size:21px}
.dungeon-owner-help summary::-webkit-details-marker{display:none}
.dungeon-owner-help > div{position:absolute;right:0;top:28px;z-index:3;width:min(250px,calc(100vw - 66px));box-sizing:border-box;padding:10px;border:1px solid #30435f;border-radius:5px;background:#07101b;overflow-wrap:anywhere}
.dungeon-filter-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px}
.dungeon-power{white-space:nowrap;color:#bdcce0;font-size:11px}
.dungeon-card-art{position:absolute;inset:0;border-radius:inherit;background-position:center;background-size:cover;pointer-events:none}
.dungeon-card-content{position:relative;min-width:0}
.dungeon-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left}
.dungeon-card-header h2{min-width:0;margin:0;color:#dbe5f1;font:15px/20px Georgia,serif;overflow-wrap:anywhere}
.dungeon-card-header > span{flex:none;color:#a9bbd1;font-size:10px;white-space:nowrap}
.dungeon-portraits{display:flex;justify-content:center;gap:8px;margin:9px 0}
.dungeon-portrait{position:relative;flex:0 1 64px;min-width:0}
.dungeon-portrait > img:first-child{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.dungeon-portrait-badge{position:absolute;left:50%;bottom:1px;transform:translateX(-50%)}
.dungeon-rewards{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;font-size:11px;line-height:17px}
.dungeon-rewards > span{white-space:nowrap}
.dungeon-card-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:2px 8px;margin-top:3px;color:#9fb4ce;font-size:10px;line-height:16px}
.dungeon-card-footer{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px}
.dungeon-description{flex:1;min-width:0}
.dungeon-description[open]{flex-basis:100%;order:1}
.dungeon-locked-note{margin:5px 0;color:#d2deed;font-size:11px;line-height:17px}
.dungeon-locked-note > span{color:#a9bbd1}
.dungeon-card-locked .dungeon-portraits,.dungeon-card-locked .dungeon-card-art{opacity:.4}
@media(max-width:350px){.dungeon-card-header{align-items:flex-start}.dungeon-card-header h2{font-size:13px;line-height:18px}.dungeon-portraits{gap:6px}.dungeon-filter-row{grid-template-columns:1fr;gap:0}.dungeon-power{text-align:left}}

/* Авторизация: фон и уникальное содержимое страницы */
.login-page{background:#040810 url(/images/index_login.png?v=809612d7fa87&iv=1793203771-2043338) center top/100% auto no-repeat}
.login-hero{position:relative;height:clamp(155px,49vw,210px)}
.login-brand{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.login-tagline{margin:0 0 12px;color:#b4c9e1;font-size:11px;line-height:17px;text-align:center}
.login-auth-wrap{max-width:360px;margin:0 auto}
.login-input{height:40px}
.login-password-row{display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:end;gap:4px}
.login-password-toggle{display:flex;align-items:center;justify-content:center;width:34px;height:40px;padding:0;border:0;border-radius:5px;background:transparent;color:#a8bdd7;cursor:pointer}
.login-password-toggle:hover,.login-password-toggle:focus-visible{background:#101f34;color:#d4e1f2;outline:1px solid #607d9f}
.login-newcomer{margin:0 0 16px;text-align:center}
.login-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;padding:8px 0;text-align:left}
.login-feature{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;gap:8px}
.login-feature > img{display:block;width:40px;height:40px;object-fit:contain}
.login-feature h3{margin:0 0 4px;color:#d6e1ef;font:12px/16px Georgia,serif}
.login-feature p{margin:0;color:#9fb4ce;font-size:10px;line-height:15px}
.login-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 0 12px}
.login-gallery > a{display:block;min-width:0;color:#a9c0dc;text-align:center;font-size:10px;line-height:17px}
.login-gallery img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top;border:1px solid #30435f;border-radius:5px;box-sizing:border-box}
.login-gallery > a:hover img{border-color:#607d9f}
.login-footer-note{margin:4px 0;color:#9fb4ce;text-align:center;font-size:10px;line-height:16px}
@media(max-width:350px){.login-features{gap:14px 8px}.login-feature{grid-template-columns:32px minmax(0,1fr);gap:6px}.login-feature > img{width:32px;height:32px}.login-feature h3{font-size:11px}}


/* Всплывающее уведомление cookies */
#dg-cookie-notice{position:fixed;z-index:100100;left:50%;bottom:8px;transform:translateX(-50%);width:calc(100% - 16px);max-width:430px;max-height:70vh;overflow-y:auto;box-sizing:border-box;box-shadow:0 8px 32px rgba(0,0,0,.75);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#cbd9e9;font-family:Arial,sans-serif;font-size:12px;line-height:18px}
.dg-cookie-title{display:block;margin:6px 0;color:#dbe5f1;font:16px/22px Georgia,"Times New Roman",serif}
.dg-cookie-copy{margin:8px 0;text-align:left}
.dg-cookie-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:10px 0 0;align-items:stretch}
#dg-cookie-notice [data-dg-cookie-error]{color:#ff9b9b;margin:6px 0;text-align:left}


/* Содержимое кланового хранилища */
.clan-storage-resources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0}
.clan-storage-resource{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:4px;border:0;background:transparent;font:12px/18px Arial,sans-serif;cursor:pointer}
.clan-storage-resource > img{display:block;object-fit:contain}
.clan-storage-resource > strong{font-size:14px;font-weight:normal;overflow-wrap:anywhere}
.clan-storage-resource[aria-pressed="true"] > img{filter:drop-shadow(0 0 5px rgba(139,173,214,.55))}
.clan-storage-resource:focus-visible{outline:1px solid #93afd4;outline-offset:2px;border-radius:4px}
.clan-storage-amount{display:grid;grid-template-columns:60px minmax(0,1fr) 60px;gap:6px;align-items:center}