/*
 * Страница героя (content/heroes_item.tpl.php, макет !-design/design-heroes.png).
 * Шапка #ep_hpage выводится в main.tpl.php вместо общего баннера; ниже — тёмные панели вкладок.
 */

.ep_hp {
    --hp-el:      #c084fc;
    --hp-el-rgb:  192, 132, 252;
    --hp-panel:   linear-gradient(180deg, rgba(16, 33, 66, .88) 0%, rgba(10, 22, 46, .9) 100%);
    --hp-line:    rgba(126, 162, 230, .2);
    --hp-shade:   .4;
    color: var(--ep-text-inv);
}
.ep_hp--red    { --hp-el: #f87171; --hp-el-rgb: 248, 113, 113; }
.ep_hp--yellow { --hp-el: #facc15; --hp-el-rgb: 250, 204, 21; }
.ep_hp--purple { --hp-el: #c084fc; --hp-el-rgb: 192, 132, 252; }
.ep_hp--green  { --hp-el: #4ade80; --hp-el-rgb: 74, 222, 128; }
.ep_hp--blue   { --hp-el: #60a5fa; --hp-el-rgb: 96, 165, 250; }

/* Панели вкладок лежат в статье: у неё на странице героя нет своего фона */
.ep_layout_hero #body section article {
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
}

/* Шапка ==================================================================== */

.ep_hp_banner {
    position: relative;
    overflow: hidden;
    background-color: var(--ep-bg);
    background-image: url("/static/theme/empires/hero-1920.jpg");
    background-image: image-set(url("/static/theme/empires/hero-1920.webp") type("image/webp"), url("/static/theme/empires/hero-1920.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center 40%;
}
.ep_hp--bg-ogon .ep_hp_banner {
    background-image: url("/static/theme/empires/heroes/ogon-1536.jpg");
    background-image: image-set(url("/static/theme/empires/heroes/ogon-1536.webp") type("image/webp"), url("/static/theme/empires/heroes/ogon-1536.jpg") type("image/jpeg"));
    background-position: center 55%;
}
.ep_hp--bg-svjatynja .ep_hp_banner {
    --hp-shade: .5;
    background-image: url("/static/theme/empires/heroes/svjatynja-1536.jpg");
    background-image: image-set(url("/static/theme/empires/heroes/svjatynja-1536.webp") type("image/webp"), url("/static/theme/empires/heroes/svjatynja-1536.jpg") type("image/jpeg"));
    background-position: center 45%;
}
.ep_hp--bg-tma .ep_hp_banner {
    --hp-shade: .3;
    background-image: url("/static/theme/empires/heroes/tma-1536.jpg");
    background-image: image-set(url("/static/theme/empires/heroes/tma-1536.webp") type("image/webp"), url("/static/theme/empires/heroes/tma-1536.jpg") type("image/jpeg"));
    background-position: center 40%;
}
.ep_hp--bg-lyod .ep_hp_banner {
    --hp-shade: .5;
    background-image: url("/static/theme/empires/heroes/lyod-1536.jpg");
    background-image: image-set(url("/static/theme/empires/heroes/lyod-1536.webp") type("image/webp"), url("/static/theme/empires/heroes/lyod-1536.jpg") type("image/jpeg"));
    background-position: center 40%;
}
/* Затемнение: слева под портретом и текстом, снизу — переход в фон страницы */
.ep_hp_banner::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7, 16, 36, calc(var(--hp-shade) + .2)) 0%, rgba(7, 16, 36, var(--hp-shade)) 45%, rgba(7, 16, 36, calc(var(--hp-shade) - .25)) 100%),
        linear-gradient(180deg, rgba(7, 16, 36, .5) 0%, rgba(7, 16, 36, 0) 25%, rgba(7, 16, 36, .35) 75%, var(--ep-bg) 100%);
}
.ep_hp_banner_wrap { position: relative; z-index: 1; }

/* Хлебные крошки: отступ в шапке; оформление — .ep_hp_crumbs в empires.css */
.ep_hp_crumbs { position: relative; z-index: 2; padding-top: 14px; }

.ep_hp_top {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr) minmax(0, 470px);
    align-items: center;
    gap: 8px 28px;
    min-height: 320px;
}

/* Портрет: картинка героя растворяется в фоне */
.ep_hp_portrait {
    align-self: end;
    height: 340px;
    margin-top: -40px;
}
.ep_hp_portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 8%;
    -webkit-mask-image: radial-gradient(ellipse 50% 62% at 50% 42%, #000 50%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 62% at 50% 42%, #000 50%, transparent 100%);
}
/* Рендер на прозрачном фоне (Heroplan): hero_renders.php уже вырезал кадр «голова — пояс», как в макете.
   Кадр — на всю высоту портрета, левее центра колонки (может выйти за край контейнера) */
.ep_hp_portrait--render {
    position: relative;
    height: 370px;
    margin-top: -46px;
}
.ep_hp_portrait--render::before {
    content: '';
    position: absolute;
    inset: 0 -10% -10%;
    background: radial-gradient(ellipse 50% 50% at 50% 40%, rgba(var(--hp-el-rgb), .4) 0%, rgba(var(--hp-el-rgb), 0) 100%);
}
/* Обёртка рендера — по размеру кадра; низ растворяется у края шапки */
.ep_hp_render {
    position: absolute;
    top: 0;
    left: 37.5%;
    height: 100%;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
}
.ep_hp_render img {
    display: block;
    width: auto;
    max-width: none;
    height: 100%;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55));
}
/* Переливание: блик раз в несколько секунд проходит по фигуре — маской служит сам рендер */
.ep_hp_render::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent 46%,
        rgba(var(--hp-el-rgb), .3) 48.5%,
        rgba(255, 255, 255, .75) 50%,
        rgba(var(--hp-el-rgb), .3) 51.5%,
        transparent 54%) no-repeat;
    background-size: 300% 100%;
    background-position: 120% 0;
    mix-blend-mode: screen;
    -webkit-mask: var(--hp-render) no-repeat 0 0 / 100% 100%;
    mask: var(--hp-render) no-repeat 0 0 / 100% 100%;
}
@media (prefers-reduced-motion: no-preference) {
    .ep_hp_render::after { animation: ep-hp-shine 6s ease-in-out 1s infinite; }
    .ep_hp_portrait--render::before { animation: ep-hp-glow 4s ease-in-out infinite alternate; }
}
@keyframes ep-hp-shine {
    0%        { background-position: 120% 0; }
    35%, 100% { background-position: -20% 0; }
}
@keyframes ep-hp-glow {
    from { opacity: .6; transform: scale(.96); }
    to   { opacity: 1;  transform: scale(1.04); }
}
.ep_hp_portrait--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    height: auto;
    margin: 0;
    padding: 20px 0;
}

.ep_hp_info, .ep_hp_skills { position: relative; z-index: 1; min-width: 0; }
.js_hp_for[hidden] { display: none !important; }

/* Имя, звёзды, значки */
.ep_hp_name h1 {
    margin: 0;
    padding: 0;
    font-family: var(--ep-font);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}
.ep_hp_stars { margin-top: 6px; font-size: 24px; line-height: 1; letter-spacing: 3px; }
.ep_hp_stars i {
    font-style: normal;
    color: var(--ep-gold);
    text-shadow: 0 0 8px rgba(245, 192, 74, .55), 0 1px 2px rgba(0, 0, 0, .8);
}

.ep_hp_badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 18px; }
.ep_hp_badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(126, 162, 230, .35);
    border-radius: 18px;
    background: rgba(9, 19, 40, .78);
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
}
a.ep_hp_badge:hover { border-color: rgba(var(--hp-el-rgb), .8); color: #fff; }
.ep_hp_badge img { width: 22px; height: 22px; }
.ep_hp_badge .ep_hp_ico { fill: var(--ep-sky); }
.ep_hp_badge--star {
    border-color: #e9b949;
    background: linear-gradient(180deg, #e9b949, #b9861d);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.ep_hp_badge--el { border-color: rgba(var(--hp-el-rgb), .55); }

.ep_hp_facts {
    display: inline-flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--hp-line);
    border-radius: 10px;
    background: rgba(9, 19, 40, .8);
}
.ep_hp_facts li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-left: 1px solid var(--hp-line);
}
.ep_hp_facts li:first-child { border-left: 0; }
.ep_hp_facts .ep_hp_ico { flex: 0 0 auto; fill: var(--ep-sky); }
.ep_hp_facts span { display: flex; flex-direction: column; line-height: 1.3; }
.ep_hp_facts small { font-size: 12px; color: var(--ep-muted-inv); }
.ep_hp_facts b { font-size: 14px; font-weight: 700; color: #fff; }

/* Карточка навыка */
.ep_hp_skill {
    position: relative;
    display: flex;
    gap: 18px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(126, 162, 230, .3);
    border-radius: 12px;
    background:
        radial-gradient(ellipse 60% 90% at 100% 100%, rgba(var(--hp-el-rgb), .22) 0%, rgba(var(--hp-el-rgb), 0) 70%),
        rgba(9, 19, 40, .86);
    box-shadow: var(--ep-shadow);
}
.ep_hp_skill_icon {
    flex: 0 0 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(var(--hp-el-rgb), .8);
    border-radius: 10px;
    background: radial-gradient(circle, rgba(var(--hp-el-rgb), .35) 0%, rgba(9, 19, 40, .9) 75%);
    box-shadow: 0 0 18px rgba(var(--hp-el-rgb), .35);
}
.ep_hp_skill_icon img { width: 56px; height: 56px; }
.ep_hp_skill_icon--img { overflow: hidden; }
.ep_hp_skill_icon--img img { width: 100%; height: 100%; object-fit: cover; }
.ep_hp_skill_body { min-width: 0; flex: 1 1 auto; }
.ep_hp_skill_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ep_hp_skill_head b { font-size: 21px; font-weight: 700; line-height: 1.25; color: #fff; }
.ep_hp_skill p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #d5def0; }
.ep_hp_skill_stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ep_hp_skill_stats span {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--hp-line);
    border-radius: 8px;
    background: rgba(7, 16, 36, .6);
}
.ep_hp_skill_stats img { grid-row: span 2; width: 22px; height: 22px; }
.ep_hp_skill_stats b { font-size: 17px; line-height: 1.1; color: #fff; }
.ep_hp_skill_stats small { font-size: 11px; color: var(--ep-muted-inv); }

.ep_hp_tag {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 22px;
    padding: 0 10px;
    border: 1px solid rgba(var(--hp-el-rgb), .6);
    border-radius: 11px;
    background: rgba(var(--hp-el-rgb), .14);
    font-size: 12px;
    font-weight: 500;
    color: var(--hp-el);
    white-space: nowrap;
    vertical-align: middle;
}
.ep_hp_tag--off { border-color: rgba(159, 176, 207, .5); background: rgba(159, 176, 207, .12); color: var(--ep-muted-inv); }

/* Вкладки */
.ep_hp_tabs {
    position: relative;
    border-top: 1px solid var(--hp-line);
    border-bottom: 1px solid var(--hp-line);
    background: rgba(9, 19, 40, .92);
}
.ep_hp_tabs .ep_container {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ep_hp_tabs .ep_container::-webkit-scrollbar { display: none; }
.ep_hp_tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    height: 50px;
    padding: 0 18px;
    border-bottom: 3px solid transparent;
    font-size: 16px;
    font-weight: 500;
    color: #c7d5ef;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, background-color .15s;
}
.ep_hp_tab .ep_hp_ico { fill: currentColor; }
.ep_hp_tab:hover { color: #fff; background: rgba(59, 130, 246, .1); }
.ep_hp_tab.active { color: #fff; border-bottom-color: var(--ep-accent-hi); background: rgba(59, 130, 246, .12); }
.ep_hp_tab.is_in_compare { color: var(--hp-el); }

/* Панели =================================================================== */

.ep_hp_pane { display: none; }
.ep_hp_pane.active { display: block; }

.ep_hp_panes { padding-top: 18px; color: var(--ep-text-inv); }
.ep_hp_panes a { color: var(--ep-sky); }
.ep_hp_panes a:hover { color: #93c5fd; }

.ep_hp_row { display: grid; gap: 18px; margin-bottom: 18px; }
.ep_hp_row--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.ep_hp_row--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

.ep_hp_panel {
    min-width: 0;
    margin-bottom: 18px;
    padding: 18px 22px 20px;
    border: 1px solid var(--hp-line);
    border-radius: 10px;
    background: var(--hp-panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.ep_hp_row > .ep_hp_panel { margin-bottom: 0; }

#body section .ep_hp_panel_title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--hp-line);
    font-family: var(--ep-font);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
.ep_hp_panel_title .ep_hp_ico { fill: var(--hp-el); }

.ep_hp_muted { color: var(--ep-muted-inv); font-size: 14px; line-height: 1.55; }

/* Ключ — значение */
.ep_hp_kv { margin: 0 0 4px; padding: 0; list-style: none; }
.ep_hp_kv li {
    display: grid;
    grid-template-columns: minmax(130px, 40%) 1fr;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(126, 162, 230, .12);
}
.ep_hp_kv li:last-child { border-bottom: 0; }
.ep_hp_kv_k { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ep-muted-inv); }
.ep_hp_kv_k .ep_hp_ico { flex: 0 0 auto; fill: var(--hp-el); }
.ep_hp_kv_v { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-size: 14px; font-weight: 500; color: #fff; }
.ep_hp_kv_v img { width: 22px; height: 22px; }
.ep_hp_kv_v a { color: #fff; }
.ep_hp_panes .ep_hp_kv_v a.ep_hp_more { font-size: 12px; font-weight: 400; color: var(--ep-sky); }
.ep_hp_gold { color: var(--ep-gold); font-weight: 700; }

/* Характеристики и калькулятор */
.ep_hp_stats {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--hp-line);
    border-radius: 8px;
    background: rgba(7, 16, 36, .45);
}
.ep_hp_stats_note { margin-bottom: 10px; font-size: 12px; color: var(--ep-muted-inv); }
.ep_hp_stats_row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ep_hp_stat { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ep_hp_stat img { flex: 0 0 auto; width: 34px; height: 34px; }
.ep_hp_stat span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ep_hp_stat small { font-size: 12px; color: var(--ep-muted-inv); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep_hp_stat b { font-size: 20px; font-weight: 700; color: #fff; }
.ep_hp_calc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(126, 162, 230, .12);
    font-size: 13px;
    color: var(--ep-muted-inv);
}
.ep_hp_calc label { display: inline-flex; align-items: center; gap: 8px; }
.ep_hp_calc select {
    height: 30px;
    padding: 0 8px;
    border: 1px solid rgba(126, 162, 230, .35);
    border-radius: 6px;
    background: #0d1b38;
    color: #fff;
    font: inherit;
}
.ep_hp_calc_hint { display: inline-flex; margin-left: auto; cursor: help; }
.ep_hp_calc_hint .ep_hp_ico { fill: var(--ep-muted-inv); }

/* Умения */
.ep_hp_ability_head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.ep_hp_ability_head b { font-size: 17px; color: #fff; }
.ep_hp_text { font-size: 14px; line-height: 1.6; color: #d5def0; }
.ep_hp_text p { margin: 0 0 8px; }
.ep_hp_text p:last-child { margin-bottom: 0; }
.ep_hp_sub { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(126, 162, 230, .12); }
#body section .ep_hp_sub h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-family: var(--ep-font);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.ep_hp_sub h3 .ep_hp_ico { fill: var(--ep-sky); }
.ep_hp_effects + .ep_hp_effects { margin-top: 8px; }
.ep_hp_effects em { display: block; margin-bottom: 6px; font-style: normal; font-size: 12px; color: var(--ep-muted-inv); }
.ep_hp_effects ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ep_hp_effects li { margin: 0; padding: 0; }
.ep_hp_effects li a, .ep_hp_effects li span {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid rgba(126, 162, 230, .3);
    border-radius: 14px;
    background: rgba(59, 130, 246, .1);
    font-size: 12px;
    line-height: 1.4;
    color: #dbe5f8;
    text-decoration: none;
}
.ep_hp_panes .ep_hp_effects li a:hover { border-color: var(--ep-sky); color: #fff; }

/* Костюмы в обзоре: строка — миниатюра (верх рендера), название, навык; ведёт на вкладку */
.ep_hp_costumes { margin: 0; padding: 0; list-style: none; }
.ep_hp_costumes li { margin: 0; padding: 0; }
.ep_hp_costumes li + li { margin-top: 6px; }
.ep_hp_panes .ep_hp_costumes a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px 6px 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    transition: background-color .15s, border-color .15s;
}
.ep_hp_panes .ep_hp_costumes a:hover { border-color: var(--hp-line); background: rgba(59, 130, 246, .1); color: #fff; }
.ep_hp_costume_thumb {
    flex: 0 0 48px;
    height: 48px;
    overflow: hidden;
    border: 2px solid rgba(var(--hp-el-rgb), .6);
    border-radius: 8px;
    background: radial-gradient(circle at 50% 40%, rgba(var(--hp-el-rgb), .35), #071024 75%);
}
.ep_hp_costume_thumb img { display: block; width: 150%; height: 150%; margin-left: -25%; object-fit: cover; object-position: center top; }
.ep_hp_costume_name { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.ep_hp_costume_name b { font-size: 14px; }
.ep_hp_costume_name small { overflow: hidden; font-size: 12px; color: var(--ep-muted-inv); text-overflow: ellipsis; white-space: nowrap; }
.ep_hp_costumes .ep_hp_ico { flex: 0 0 auto; fill: var(--ep-muted-inv); }

/* Кнопки */
.ep_hp_btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ep_hp_btns--end { justify-content: flex-end; }
.ep_hp_panes a.ep_hp_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--ep-accent-hi);
    border-radius: 8px;
    background: rgba(37, 99, 235, .22);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: background-color .15s;
}
.ep_hp_panes a.ep_hp_btn:hover { background: var(--ep-accent); color: #fff; }
.ep_hp_btn .ep_hp_ico { fill: currentColor; }

/* Прокачка в обзоре */
.ep_hp_stages { margin: 0; padding: 0; list-style: none; }
.ep_hp_stages li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(126, 162, 230, .12);
}
.ep_hp_stages li:last-child { border-bottom: 0; }
.ep_hp_stages li { flex-direction: column; align-items: flex-start; gap: 6px; }
.ep_hp_stage_n { font-size: 13px; font-weight: 700; color: #fff; }
.ep_hp_mats { display: flex; flex-wrap: wrap; gap: 4px; }
.ep_hp_mat { display: flex; flex-direction: column; align-items: center; width: 40px; }
.ep_hp_mat img { width: 30px; height: 30px; object-fit: contain; }
.ep_hp_mat small { font-size: 11px; line-height: 1.2; color: #c7d5ef; }

/* Быстрые ссылки */
.ep_hp_links { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ep_hp_panes a.ep_hp_link {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding: 0 20px;
    border: 1px solid var(--hp-line);
    border-radius: 10px;
    background: var(--hp-panel);
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: border-color .15s;
}
.ep_hp_panes a.ep_hp_link:hover { border-color: var(--ep-accent-hi); color: #fff; }
.ep_hp_link span { flex: 1 1 auto; }
.ep_hp_link .ep_hp_ico { flex: 0 0 auto; fill: var(--ep-sky); }
.ep_hp_link .ep_hp_ico:last-child { fill: var(--ep-muted-inv); }
.ep_hp_link.is_in_compare { border-color: rgba(var(--hp-el-rgb), .6); }

/* Вкладка «Прокачка» */
.ep_hp_stage_cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; margin-top: 12px; }
.ep_hp_stage_card {
    padding: 14px 16px;
    border: 1px solid var(--hp-line);
    border-radius: 8px;
    background: rgba(7, 16, 36, .45);
}
.ep_hp_stage_title { margin-bottom: 8px; font-size: 15px; font-weight: 700; color: #fff; }
.ep_hp_stage_card ul { margin: 0; padding: 0; list-style: none; }
.ep_hp_stage_card li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; color: #d5def0; }
.ep_hp_stage_card li img { flex: 0 0 auto; width: 44px; height: 44px; object-fit: contain; }
.ep_hp_stage_card li span { flex: 1 1 auto; min-width: 0; }
.ep_hp_stage_card li b { color: #fff; white-space: nowrap; }

/* Остальное содержимое страницы: просмотры и «поделиться», реклама, свойства, теги */
.ep_hp_extra { color: var(--ep-text-inv); }
.ep_hp_extra a { color: var(--ep-sky); }
.ep_hp_extra .content_item_props,
.ep_hp_extra .tags_bar,
.ep_hp_extra .append_html,
.ep_hp_extra .content_moderator_info,
.ep_hp_extra > h2 + * {
    margin-bottom: 18px;
    padding: 16px 22px;
    border: 1px solid rgba(126, 162, 230, .2);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(16, 33, 66, .88) 0%, rgba(10, 22, 46, .9) 100%);
    color: var(--ep-text-inv);
}
.ep_hp_extra .content_item_props table td { border-color: rgba(126, 162, 230, .12); color: var(--ep-text-inv); }
.ep_hp_extra [id^="yandex_rtb_"]:not(:empty) { margin-bottom: 18px; border-radius: 10px; overflow: hidden; }

.ep_hp_bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 12px 22px;
}
.ep_hp_bar_info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 14px; color: var(--ep-muted-inv); }
.ep_hp_bar_info > span { display: inline-flex; align-items: center; gap: 8px; }
.ep_hp_bar_info b { color: #fff; font-weight: 500; }
.ep_hp_bar_info .ep_hp_ico { fill: var(--ep-sky); }
.ep_hp_share { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--ep-muted-inv); }
.ep_hp_share .ya-share2 { min-height: 32px; }
.ep_hp_share .ya-share2__list { display: flex; gap: 6px; margin: 0 !important; }
.ep_hp_share .ya-share2__item { margin: 0 !important; transition: transform .15s, filter .15s; }
.ep_hp_share .ya-share2__item:hover { transform: translateY(-2px); filter: brightness(1.15); }

/* Виджеты сайдбара на странице героя — тёмные, как панели */
.ep_layout_hero aside .cal-widget {
    --c-line:   rgba(126, 162, 230, .25);
    --c-soft:   rgba(7, 16, 36, .45);
    --c-text:   #e8eefc;
    --c-muted:  #9fb0cf;
    --c-accent: #60a5fa;
}
.ep_layout_hero aside .widget,
.ep_layout_hero aside .widget_tabbed {
    overflow: hidden;
    border: 1px solid rgba(126, 162, 230, .2);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(16, 33, 66, .88) 0%, rgba(10, 22, 46, .9) 100%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    color: var(--ep-text-inv);
}
.ep_layout_hero aside .widget > .title {
    margin: 0 18px;
    padding: 0;
    border-bottom: 1px solid rgba(126, 162, 230, .2);
    border-radius: 0;
    background: none;
}
.ep_layout_hero aside .widget > .title::before { left: -18px; }
.ep_layout_hero aside .widget > .body { padding: 14px 18px 18px; color: #d5def0; }
.ep_layout_hero aside .widget > .body:empty { display: none; }
.ep_layout_hero aside .widget a { color: var(--ep-sky); }
.ep_layout_hero aside .widget a:hover { color: #93c5fd; }
.ep_layout_hero aside .widget label,
.ep_layout_hero aside .widget legend,
.ep_layout_hero aside .widget .field label { color: var(--ep-muted-inv); }
.ep_layout_hero aside .widget input[type=text],
.ep_layout_hero aside .widget input[type=email],
.ep_layout_hero aside .widget input[type=password],
.ep_layout_hero aside .widget .input {
    border: 1px solid rgba(126, 162, 230, .35);
    border-radius: 6px;
    background: #0d1b38;
    color: #fff;
}
.ep_layout_hero aside .widget .button:not(.button-submit) {
    border-color: rgba(126, 162, 230, .35);
    background: rgba(59, 130, 246, .12);
    color: #fff;
}

/* Адаптив ================================================================== */

@media screen and (max-width: 1200px) {
    .ep_hp_top { grid-template-columns: 240px minmax(0, 1fr); }
    .ep_hp_skills { grid-column: 1 / -1; margin-bottom: 20px; }
    .ep_hp_portrait { height: 300px; }
}

@media screen and (max-width: 760px) {
    .ep_hp_top { grid-template-columns: 120px minmax(0, 1fr); gap: 12px 16px; min-height: 0; padding-top: 12px; }
    .ep_hp_portrait { height: 190px; margin-top: 0; align-self: start; }
    .ep_hp_portrait--render { height: 220px; }
    .ep_hp_render { left: 50%; }
    .ep_hp_portrait--icon { padding: 0; }
    .ep_hp_portrait--icon .hero-icon { --hi-size: 110px !important; }
    .ep_hp_name h1 { font-size: 26px; }
    .ep_hp_stars { font-size: 18px; }
    .ep_hp_badges { gap: 6px; margin: 12px 0 0; }
    .ep_hp_badge { height: 30px; padding: 0 11px; font-size: 13px; }
    .ep_hp_facts { grid-column: 1 / -1; display: flex; }
    .ep_hp_info { display: contents; }
    .ep_hp_name, .ep_hp_badges { grid-column: 2; }
    .ep_hp_name { align-self: end; }
    .ep_hp_badges { align-self: start; }
    .ep_hp_portrait { grid-row: 1 / span 2; }
    .ep_hp_facts li { flex: 1 1 33%; padding: 10px 12px; gap: 8px; }
    .ep_hp_skill { padding: 16px; gap: 14px; }
    .ep_hp_skill_icon { flex-basis: 56px; height: 56px; }
    .ep_hp_skill_icon img { width: 44px; height: 44px; }
    .ep_hp_skill_head b { font-size: 18px; }
    .ep_hp_tab { height: 46px; padding: 0 12px; font-size: 14px; gap: 8px; }
    .ep_hp_panel { padding: 14px 16px 16px; }
    .ep_hp_kv li { grid-template-columns: 1fr; gap: 4px; }
    .ep_hp_bar { padding: 12px 16px; }
}

@media screen and (max-width: 640px) {
    .ep_hp--bg-ogon .ep_hp_banner {
        background-image: url("/static/theme/empires/heroes/ogon-960.jpg");
        background-image: image-set(url("/static/theme/empires/heroes/ogon-960.webp") type("image/webp"), url("/static/theme/empires/heroes/ogon-960.jpg") type("image/jpeg"));
    }
    .ep_hp--bg-tma .ep_hp_banner {
        background-image: url("/static/theme/empires/heroes/tma-960.jpg");
        background-image: image-set(url("/static/theme/empires/heroes/tma-960.webp") type("image/webp"), url("/static/theme/empires/heroes/tma-960.jpg") type("image/jpeg"));
    }
    .ep_hp--bg-lyod .ep_hp_banner {
        background-image: url("/static/theme/empires/heroes/lyod-960.jpg");
        background-image: image-set(url("/static/theme/empires/heroes/lyod-960.webp") type("image/webp"), url("/static/theme/empires/heroes/lyod-960.jpg") type("image/jpeg"));
    }
    .ep_hp--bg-svjatynja .ep_hp_banner {
        background-image: url("/static/theme/empires/heroes/svjatynja-960.jpg");
        background-image: image-set(url("/static/theme/empires/heroes/svjatynja-960.webp") type("image/webp"), url("/static/theme/empires/heroes/svjatynja-960.jpg") type("image/jpeg"));
    }
    .ep_hp_stats_row { grid-template-columns: 1fr; }
    .ep_hp_facts small { font-size: 11px; }
    .ep_hp_facts b { font-size: 13px; }
}