/*
 * Стили сайта поверх стандартных theme-*.css шаблона default.
 * Подключается в main.tpl.php после всех theme-*.css.
 *
 * Оформление: тёмная «игровая» шапка с баннером (static/theme/empires/hero-*)
 * и тёмные панели виджетов на тёмно-синем фоне (статьи — светлые карточки, у героев и новостей — тёмные).
 */

:root {
    --ep-bg:          #0a1428;
    --ep-bg-2:        #0e1c38;
    --ep-bar:         rgba(9, 19, 40, .92);
    --ep-panel:       rgba(12, 26, 52, .78);
    --ep-line:        rgba(126, 162, 230, .22);
    --ep-accent:      #2563eb;
    --ep-accent-hi:   #3b82f6;
    --ep-sky:         #60a5fa;
    --ep-gold:        #f5c04a;
    --ep-text-inv:    #e8eefc;
    --ep-muted-inv:   #9fb0cf;
    --ep-text:        #1e293b;
    --ep-muted:       #64748b;
    --ep-card:        #ffffff;
    --ep-card-soft:   #f1f5fb;
    --ep-radius:      12px;
    --ep-shadow:      0 10px 30px rgba(0, 0, 0, .35);
    --ep-bar-h:       56px;
    --ep-font:        'Roboto', 'Segoe UI', Arial, 'Helvetica Neue', sans-serif;
}

/* theme-layout ============================================================= */

html, body { height: auto; }

body.ep_theme {
    background: var(--ep-bg);
    font-family: var(--ep-font);
    font-size: 15px;
    color: var(--ep-text);
    -webkit-font-smoothing: antialiased;
}

#canvas {
    z-index: -1;
    position: fixed;
}

.ep_container {
    box-sizing: border-box;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
}

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

#ep_header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--ep-bar);
    border-bottom: 1px solid var(--ep-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
}

.ep_bar {
    max-width: 1680px;
    display: flex;
    align-items: center;
    gap: 24px;
    height: var(--ep-bar-h);
}

/* Логотип: текстовый, либо картинка из настроек шаблона (options.css.php) */
#logo { flex: 0 0 auto; position: relative; z-index: 2; align-self: flex-start; }
#logo a, #logo > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 72px;
    margin-bottom: -16px;
    text-decoration: none;
    background: no-repeat center / contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6));
    transition: transform .2s ease;
}
#logo a:hover { transform: scale(1.04); }
#logo b {
    display: block;
    font-family: var(--ep-font);
    font-weight: 900;
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: .5px;
    -webkit-text-stroke: 1.2px #3a1d05;
    paint-order: stroke fill;
}
#logo .ep_logo_top {
    font-size: 26px;
    background: linear-gradient(180deg, #fff3b0 0%, #f7c443 45%, #d9861a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
#logo .ep_logo_bottom {
    font-size: 21px;
    background: linear-gradient(180deg, #e6f6ff 0%, #6ec3ff 50%, #1d6fd6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke-color: #071a3d;
}
#logo .ep_logo_bottom i {
    font-style: normal;
    font-size: 17px;
    background: linear-gradient(180deg, #fff3b0, #e0901f);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Главное меню ============================================================= */

#ep_header nav {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--ep-bar-h);
    margin: 0;
    padding: 0;
    background: none;
    font-size: 14px;
}

#ep_header nav .menu {
    float: none;
    display: flex;
    height: var(--ep-bar-h);
    line-height: var(--ep-bar-h);
}

#ep_header nav .menu > li { float: none; position: relative; }

#ep_header nav .menu > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--ep-bar-h);
    padding: 0 14px;
    color: #cfd9ee;
    font-size: 14px;
    text-transform: none;
    font-weight: 500;
    white-space: nowrap;
    background: none !important;
    border-bottom: 2px solid transparent;
    box-sizing: border-box;
    transition: color .15s, background .15s, border-color .15s;
}
#ep_header nav .menu > li > a .wrap { line-height: normal; }

#ep_header nav .menu > li:hover > a { color: #fff; background: rgba(255, 255, 255, .04) !important; }
#ep_header nav .menu > li.active > a {
    color: var(--ep-sky);
    border-bottom-color: var(--ep-sky);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0) 0%, rgba(59, 130, 246, .16) 100%) !important;
}

#ep_header nav .menu > .folder > a > .wrap {
    padding-right: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%239fb0cf' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right center / 12px !important;
}

/* Иконки пунктов меню (по адресу ссылки) */
#ep_header nav .menu > li > a::before {
    content: '';
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--ep-ico) no-repeat center / contain;
    mask: var(--ep-ico) no-repeat center / contain;
    opacity: .9;
}
#ep_header nav .menu > li > a:not([href="/"]):not([href*="news"]):not([href*="heroes"]):not([href*="articles"]):not([href*="wiki"]):not([href*="calculator"]):not([href*="buildings"]):not([href*="forum"]):not([href*="alliance"]):not([href*="faq"]):not([href*="quest"])::before { display: none; }
#ep_header nav .menu > li > a { --ep-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2.2'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3Ccircle cx='19' cy='12' r='2.2'/%3E%3C/svg%3E"); }
#ep_header nav .menu > li > a[href="/"]            { --ep-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11.5h3V21h5.5v-6h3v6H19v-9.5h3z'/%3E%3C/svg%3E"); }
#ep_header nav .menu > li > a[href*="news"]        { --ep-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h15v14a2 2 0 0 0 2 2H5a2 2 0 0 1-2-2zm3 3v4h9V7zm0 6v2h9v-2zm0 3v1h6v-1zM19 8h2v10a1 1 0 0 1-2 0z'/%3E%3C/svg%3E"); }
#ep_header nav .menu > li > a[href*="heroes"]      { --ep-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M1 20c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5z'/%3E%3Ccircle cx='17.5' cy='8.5' r='3'/%3E%3Cpath d='M18.5 13.6c2.700.4 4.500 2.400 4.500 5.400V20h-4.300c0-2.500-.800-4.600-2.300-6.200z'/%3E%3C/svg%3E"); }
#ep_header nav .menu > li > a[href*="articles"]    { --ep-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2h10l5 5v15H5zm9 1.5V8h4.5zM8 11v2h9v-2zm0 4v2h9v-2zm0-8v2h4V7z'/%3E%3C/svg%3E"); }
#ep_header nav .menu > li > a[href*="wiki"]        { --ep-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4.5C4.500 3.500 8 3.500 11 5v15c-3-1.500-6.500-1.500-9-.500zm20 0c-2.500-1-6-1-9 .500v15c3-1.500 6.500-1.500 9-.500z'/%3E%3C/svg%3E"); }
#ep_header nav .menu > li > a[href*="calculator"]  { --ep-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.3 2h3.4l.5 2.600 1.800.800 2.200-1.500 2.400 2.400-1.500 2.200.800 1.800 2.600.5v3.400l-2.600.5-.800 1.800 1.500 2.200-2.400 2.400-2.200-1.500-1.800.8-.5 2.600h-3.400l-.5-2.600-1.800-.8-2.200 1.500-2.400-2.400 1.500-2.200-.8-1.800L2 13.700v-3.400l2.600-.5.8-1.800-1.500-2.200 2.400-2.400 2.200 1.500 1.800-.8zM12 8.500a3.500 3.500 0 1 0 0 7 3.500 3.500 0 0 0 0-7z'/%3E%3C/svg%3E"); }
#ep_header nav .menu > li > a[href*="buildings"]   { --ep-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V8l3-2v3h2V4l4-2 4 2v5h2V6l3 2v13h-7v-5h-4v5z'/%3E%3C/svg%3E"); }
#ep_header nav .menu > li > a[href*="forum"]       { --ep-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h13v9H8l-5 4zm15 4h3v12l-4-3H9v-2h9z'/%3E%3C/svg%3E"); }
#ep_header nav .menu > li > a[href*="alliance"]    { --ep-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.400 9.300 8 11 4.600-1.700 8-6 8-11V5z'/%3E%3C/svg%3E"); }
#ep_header nav .menu > li > a[href*="faq"]         { --ep-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 16h-2v-2h2zm2.100-7.700-.9.900c-.7.700-1.200 1.300-1.200 2.800h-2v-.5c0-1.100.5-2.100 1.200-2.800l1.200-1.300a2 2 0 1 0-3.400-1.400H8a4 4 0 1 1 7.100 2.300z'/%3E%3C/svg%3E"); }
#ep_header nav .menu > li > a[href*="quest"]       { --ep-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16v4H4zm1 5h14v13H5zm3 3v2h2v-2zm0 4v2h2v-2zm4-4v2h4v-2zm0 4v2h4v-2z'/%3E%3C/svg%3E"); }

/* Выпадающие подменю */
#ep_header nav .menu ul {
    top: 100%;
    left: 0;
    width: 230px;
    margin-top: 0;
    padding: 6px 0;
    background: #0f1f3d;
    border: 1px solid var(--ep-line);
    border-radius: 0 0 10px 10px;
    box-shadow: var(--ep-shadow);
    line-height: normal;
}
#ep_header nav .menu > li.more > ul { left: auto; right: 0; }
#ep_header nav .menu ul ul { top: -7px; left: 100%; border-radius: 10px; }
#ep_header nav .menu ul li { background: none; border: 0; }
#ep_header nav .menu ul li a,
#ep_header nav .menu li.active ul li a {
    height: auto;
    line-height: 20px;
    padding: 8px 16px;
    color: #cfd9ee;
    font-size: 14px;
    white-space: normal;
}
#ep_header nav .menu ul li:hover > a { background-color: rgba(59, 130, 246, .18); color: #fff; }
#ep_header nav .menu li ul li.active > a { color: var(--ep-sky); }
#ep_header nav .menu ul *.folder > a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 8 6 4.5 9.5' fill='none' stroke='%239fb0cf' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-size: 10px !important;
    background-position: right 10px center !important;
}

/* Мобильный селект меню (создаётся core.js) */
#ep_header nav select { display: none; }

/* Правый блок: поиск, вход, регистрация, профиль ========================== */

.ep_actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
    gap: 8px;
    height: var(--ep-bar-h);
}

/* Выбор героя (select2) */
.ep_hero_pick {
    position: relative;
    width: 200px;
    margin: 0 6px 0 0;
    padding-right: 14px;
    border-right: 1px solid var(--ep-line);
    line-height: normal;
}
.ep_hero_pick .select2-container--default .select2-selection--single {
    height: 36px;
    border: 1px solid var(--ep-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239fb0cf'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M1 20c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5z'/%3E%3Ccircle cx='17.5' cy='8.5' r='3'/%3E%3C/svg%3E") no-repeat 10px center / 18px;
    transition: border-color .15s, background-color .15s;
}
.ep_hero_pick .select2-container--default .select2-selection--single:hover,
.ep_hero_pick .select2-container--open .select2-selection--single {
    border-color: rgba(96, 165, 250, .7);
    background-color: rgba(255, 255, 255, .1);
}
.ep_hero_pick .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 36px;
    line-height: 34px;
    color: #e8eefc;
    font-size: 14px;
}
.ep_hero_pick .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #cfd9ee; }
.ep_hero_pick .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; }
.ep_hero_pick .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: #9fb0cf; }
.ep_hero_pick .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-bottom-color: #9fb0cf; }

.ep_hero_pick .select2-dropdown {
    z-index: 1100;
    overflow: hidden;
    border: 1px solid var(--ep-line);
    border-radius: 8px;
    background: #0f1f3d;
    box-shadow: var(--ep-shadow);
    font-family: var(--ep-font);
    font-size: 14px;
}
.ep_hero_pick .select2-dropdown .select2-search--dropdown { padding: 8px; }
.ep_hero_pick .select2-dropdown .select2-search--dropdown .select2-search__field {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--ep-line);
    border-radius: 6px;
    outline: none;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 14px;
}
.ep_hero_pick .select2-dropdown .select2-results > .select2-results__options { max-height: 320px; }
.ep_hero_pick .select2-dropdown .select2-results__option { padding: 7px 12px; color: #cfd9ee; }
.ep_hero_pick .select2-dropdown .select2-results__option[aria-selected=true] { background: rgba(59, 130, 246, .2); color: #fff; }
.ep_hero_pick .select2-dropdown .select2-results__option--highlighted[aria-selected] { background: var(--ep-accent); color: #fff; }

#ep_header #widget_pos_header {
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--ep-bar-h);
}

#ep_header #widget_pos_header .menu {
    float: none;
    display: flex;
    align-items: center;
    gap: 6px;
    height: auto;
    padding: 0;
    line-height: normal;
}
#ep_header #widget_pos_header .menu > li { float: none; padding: 0; }
#ep_header #widget_pos_header .menu > li > a {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    color: #e8eefc;
    font-size: 14px;
    font-weight: 500;
}
#ep_header #widget_pos_header .menu > li > a:hover { background: rgba(255, 255, 255, .06); }
#ep_header #widget_pos_header .menu .item { background-image: none; padding-left: 14px; }

/* «Войти» — с иконкой пользователя */
#ep_header .menu-header li.key > a::before {
    content: '';
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.5' r='4.5'/%3E%3Cpath d='M3 21c0-4.500 4-7.500 9-7.500s9 3 9 7.500z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.5' r='4.5'/%3E%3Cpath d='M3 21c0-4.500 4-7.500 9-7.500s9 3 9 7.500z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* «Регистрация» — основная кнопка */
#ep_header .menu-header li.user_add > a {
    background: var(--ep-accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .45);
}
#ep_header .menu-header li.user_add > a:hover { background: var(--ep-accent-hi) !important; color: #fff; }

/* Уведомления — колокольчик с числом непрочитанных */
#ep_header #widget_pos_header .menu-notices > li > a {
    position: relative;
    justify-content: center;
    width: 40px;
    padding: 0;
}
#ep_header #widget_pos_header .menu-notices > li > a::before {
    content: '';
    width: 21px;
    height: 21px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a1.5 1.5 0 0 0-1.5 1.5v.7a6.5 6.5 0 0 0-5 6.3v4.3l-1.9 2.6a1 1 0 0 0 .8 1.6h15.2a1 1 0 0 0 .8-1.6l-1.9-2.6v-4.3a6.5 6.5 0 0 0-5-6.3v-.7A1.5 1.5 0 0 0 12 2zM9.5 20a2.5 2.5 0 0 0 5 0z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a1.5 1.5 0 0 0-1.5 1.5v.7a6.5 6.5 0 0 0-5 6.3v4.3l-1.9 2.6a1 1 0 0 0 .8 1.6h15.2a1 1 0 0 0 .8-1.6l-1.9-2.6v-4.3a6.5 6.5 0 0 0-5-6.3v-.7A1.5 1.5 0 0 0 12 2zM9.5 20a2.5 2.5 0 0 0 5 0z'/%3E%3C/svg%3E") no-repeat center / contain;
}
#ep_header #widget_pos_header .menu-notices .wrap { font-size: 0; }
#ep_header #widget_pos_header .menu-notices .wrap .counter {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    margin: 0;
    padding: 0 5px;
    box-sizing: border-box;
    border: 2px solid #0b1730;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}
#ep_header #widget_pos_header .menu-notices .wrap .counter:before,
#ep_header #widget_pos_header .menu-notices .wrap .counter:after { content: none; }

/* Аватар и меню пользователя */
#ep_header .widget_user_avatar { margin: 0; }
#ep_header .widget_user_avatar .user_info {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    line-height: 40px;
    padding: 0 30px 0 6px;
    border-radius: 8px;
}
#ep_header .widget_user_avatar:hover .user_info { background: rgba(255, 255, 255, .06); }
#ep_header .widget_user_avatar .user_info .avatar { float: none; order: -1; height: 32px; }
#ep_header .widget_user_avatar .user_info .avatar img { width: 32px; height: 32px; border-radius: 50%; }
#ep_header .widget_user_avatar .user_info .name { float: none; margin: 0; padding: 0; height: auto; line-height: normal; }
#ep_header .widget_user_avatar .user_info .name a { font-size: 14px; font-weight: 500; color: #e8eefc; }
#ep_header .widget_user_avatar .user_info:after { top: 4px; right: 6px; }
#ep_header #widget_pos_header .widget_user_avatar .menu {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    width: 230px;
    padding: 6px 0;
    background: #0f1f3d;
    border: 1px solid var(--ep-line);
    border-radius: 10px;
    box-shadow: var(--ep-shadow);
}
#ep_header #widget_pos_header .widget_user_avatar .menu > li > a {
    height: auto;
    padding: 9px 16px 9px 40px;
    border-radius: 0;
    font-size: 14px;
    background-position: 14px center;
    background-repeat: no-repeat;
}
#ep_header #widget_pos_header .widget_user_avatar .menu > li:hover,
#ep_header #widget_pos_header .widget_user_avatar .menu > li > a:hover { background-color: rgba(59, 130, 246, .18); }
@media (min-width: 801px) {
    #ep_header #widget_pos_header .widget_user_avatar .menu ul {
        left: auto;
        right: 100%;
        top: 0;
    }
}

/* Баннер (hero) =========================================================== */

#ep_hero {
    position: relative;
    background-color: var(--ep-bg);
    background-image: url("/static/theme/empires/hero-1920.jpg");
    background-image: -webkit-image-set(url("/static/theme/empires/hero-1920.webp") type("image/webp"), url("/static/theme/empires/hero-1920.jpg") type("image/jpeg"));
    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 35%;
    background-repeat: no-repeat;
    color: var(--ep-text-inv);
    text-align: center;
}
#ep_hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 70% at 50% 42%, rgba(7, 16, 36, .62) 0%, rgba(7, 16, 36, 0) 100%),
        linear-gradient(180deg, rgba(10, 20, 40, .45) 0%, rgba(10, 20, 40, .05) 30%, rgba(10, 20, 40, .25) 70%, var(--ep-bg) 100%);
}
.ep_hero_inner_wrap { position: relative; z-index: 1; }

.ep_hero_home .ep_hero_inner_wrap { padding-top: 46px; padding-bottom: 28px; }
.ep_hero_inner .ep_hero_inner_wrap { padding-top: 40px; padding-bottom: 34px; }

/* Хлебные крошки в шапке: страница героя (.ep_hp_crumbs) и все остальные страницы (.ep_crumbs, main.tpl.php) */
.ep_hero_crumbs .ep_hero_inner_wrap { padding-top: 14px; }
.ep_crumbs { margin-bottom: 18px; text-align: left; }
.ep_hp_crumbs ul,
.ep_crumbs ul {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin: 0;
    padding: 6px 14px;
    list-style: none;
    border-radius: 8px;
    background: rgba(7, 16, 36, .55);
    font-size: 13px;
}
.ep_hp_crumbs li,
.ep_crumbs li { display: flex; align-items: center; margin: 0; padding: 0; color: #fff; font-weight: 500; }
.ep_hp_crumbs li a,
.ep_crumbs li a { color: #c7d5ef; text-decoration: none; }
.ep_hp_crumbs li a:hover,
.ep_crumbs li a:hover { color: #fff; }
.ep_hp_crumbs li.sep::before,
.ep_crumbs li.sep::before { content: '/'; color: #6f86b3; }
.ep_hp_crumbs li.home a,
.ep_crumbs li.home a {
    display: block;
    width: 16px;
    height: 16px;
    background: #c7d5ef;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11.5h3V21h5.5v-6h3v6H19v-9.5h3z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11.5h3V21h5.5v-6h3v6H19v-9.5h3z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ep_hp_crumbs li.home a:hover,
.ep_crumbs li.home a:hover { background: #fff; }

.ep_kicker {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #dbe5f8;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}
.ep_kicker span { color: var(--ep-sky); }

#ep_hero .ep_hero_title {
    margin: 0 0 12px;
    padding: 0;
    font-family: var(--ep-font);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .75);
}
.ep_hero_sub {
    margin-bottom: 26px;
    font-size: 19px;
    color: #dde6f7;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}

/* Поиск */
.ep_search {
    position: relative;
    display: flex;
    max-width: 550px;
    height: 46px;
    margin: 0 auto;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
    overflow: hidden;
}
.ep_search > svg {
    position: absolute;
    left: 15px;
    top: 14px;
    color: #64748b;
    pointer-events: none;
}
.ep_search input[type=search] {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    margin: 0;
    padding: 0 14px 0 44px;
    border: 0;
    border-radius: 0;
    outline: none;
    background: none;
    box-shadow: none;
    font-family: var(--ep-font);
    font-size: 15px;
    color: var(--ep-text);
}
.ep_search input[type=search]::placeholder { color: #94a3b8; }
.ep_search button {
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--ep-accent);
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}
.ep_search button:hover { background: var(--ep-accent-hi); }

/* Карточки разделов */
.ep_cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 30px;
    text-align: left;
}
.ep_card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 8px 34px 8px 14px;
    position: relative;
    border: 1px solid var(--ep-line);
    border-radius: 10px;
    background: var(--ep-panel);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--ep-text-inv);
    text-decoration: none;
    transition: border-color .15s, background .15s, transform .15s;
}
.ep_card::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border: solid #cfd9ee;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
}
.ep_card:hover {
    border-color: rgba(96, 165, 250, .7);
    background: rgba(17, 38, 76, .9);
    transform: translateY(-2px);
    color: #fff;
}
.ep_card_icon {
    flex: 0 0 40px;
    height: 40px;
    background: no-repeat center / contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
}
.ep_card_text b { display: block; font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.ep_card_text small { display: block; font-size: 12px; color: var(--ep-muted-inv); }

.ep_card_heroes .ep_card_icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b0'/%3E%3Cstop offset='.5' stop-color='%23e9a93a'/%3E%3Cstop offset='1' stop-color='%23a35f12'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e2e8f0'/%3E%3Cstop offset='1' stop-color='%23718096'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 4C19 4 11 14 11 28v14l7 12 14 6 14-6 7-12V28C53 14 45 4 32 4z' fill='url(%23s)' stroke='%233a2408' stroke-width='2'/%3E%3Cpath d='M32 4c-3 0-5 2-5 5v51l5 2 5-2V9c0-3-2-5-5-5z' fill='url(%23g)' stroke='%233a2408' stroke-width='1.5'/%3E%3Cpath d='M15 30h13v8l-9 3zm34 0H36v8l9 3z' fill='%231a2238'/%3E%3Cpath d='M11 30c-4-2-6-8-5-14 4 2 6 6 6 10zm42 0c4-2 6-8 5-14-4 2-6 6-6 10z' fill='url(%23g)' stroke='%233a2408' stroke-width='1.5'/%3E%3C/svg%3E");
}
.ep_card_events .ep_card_icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b0'/%3E%3Cstop offset='.5' stop-color='%23e9a93a'/%3E%3Cstop offset='1' stop-color='%23a35f12'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f87171'/%3E%3Cstop offset='1' stop-color='%239b1c1c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='12' y='8' width='40' height='44' rx='4' fill='%23f3e2b3' stroke='%23704214' stroke-width='2'/%3E%3Crect x='8' y='4' width='48' height='8' rx='4' fill='url(%23g)' stroke='%23704214' stroke-width='2'/%3E%3Crect x='8' y='48' width='48' height='8' rx='4' fill='url(%23g)' stroke='%23704214' stroke-width='2'/%3E%3Cpath d='M24 40l-4 20 7-4 5 6V40zm16 0 4 20-7-4-5 6V40z' fill='url(%23r)' stroke='%23601010' stroke-width='1.5'/%3E%3Ccircle cx='32' cy='34' r='11' fill='url(%23r)' stroke='%23601010' stroke-width='2'/%3E%3Cpath d='m32 27 2.200 4.500 4.800.700-3.500 3.400.800 4.900L32 38.200l-4.300 2.300.800-4.900-3.500-3.400 4.800-.700z' fill='url(%23g)'/%3E%3C/svg%3E");
}
.ep_card_articles .ep_card_icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='1' stop-color='%23b45309'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 16c10-4 20-3 28 3v37c-8-6-18-7-28-3z' fill='%23fdf4dc' stroke='%237c4a14' stroke-width='2'/%3E%3Cpath d='M60 16c-10-4-20-3-28 3v37c8-6 18-7 28-3z' fill='%23f6e7c1' stroke='%237c4a14' stroke-width='2'/%3E%3Cpath d='M2 54c10-4 21-3 30 3 9-6 20-7 30-3v4c-10-3-21-2-30 3-9-5-20-6-30-3z' fill='url(%23g)' stroke='%237c4a14' stroke-width='1.5'/%3E%3Cpath d='M10 26c6-1.500 11-1 16 1M10 33c6-1.500 11-1 16 1M10 40c6-1.500 11-1 16 1M38 27c5-2 10-2.500 16-1M38 34c5-2 10-2.500 16-1' stroke='%23a8865a' stroke-width='2' fill='none'/%3E%3Cpath d='m44 6 14 14-14 22-6-6z' fill='%233b82f6' stroke='%231e3a8a' stroke-width='2'/%3E%3C/svg%3E");
}
.ep_card_tools .ep_card_icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23bfe0ff'/%3E%3Cstop offset='.5' stop-color='%234a9bf0'/%3E%3Cstop offset='1' stop-color='%231e4fa8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M14 4a12 12 0 0 0-9 16l33 33a6 6 0 0 0 8-8L13 12l1-8zM8 4l8 2 2 8-8-2z' fill='url(%23b)' stroke='%230b2556' stroke-width='2'/%3E%3Cpath d='M50 4a12 12 0 0 1 9 16L26 53a6 6 0 0 1-8-8l33-33-1-8zm6 0-8 2-2 8 8-2z' fill='url(%23b)' stroke='%230b2556' stroke-width='2'/%3E%3Ccircle cx='32' cy='32' r='5' fill='%23e2e8f0' stroke='%230b2556' stroke-width='2'/%3E%3C/svg%3E");
}

/* Тело страницы ============================================================ */

#layout {
    width: auto;
    padding-top: 6px;
    padding-bottom: 24px;
}

#body {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}
#body > .sess_messages { position: absolute; }

#body section {
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
#body aside {
    float: none;
    flex: 0 0 300px;
    width: 300px;
}

#body section article {
    padding: 24px 28px;
    margin-bottom: 20px;
    border-radius: var(--ep-radius);
    background: var(--ep-card);
    box-shadow: var(--ep-shadow);
}

#body section h1 {
    font-family: var(--ep-font);
    font-weight: 700;
    color: #0f2246;
}

/* Сообщения сессии */
.sess_messages { margin-bottom: 16px; }

/* Виджеты ================================================================== */

/* Все виджеты — тёмная панель, как «Популярные герои» и статьи разделов героев и новостей */
.ep_theme .widget,
.ep_theme .widget_tabbed {
    margin-bottom: 20px;
    border: 1px solid var(--ep-line);
    border-radius: var(--ep-radius);
    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: #d5def0;
}
.ep_theme .widget > .title,
.ep_theme aside .widget > .title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    min-height: 52px;
    line-height: 1.25;
    padding: 8px 18px 8px 22px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--ep-line);
    border-radius: var(--ep-radius) var(--ep-radius) 0 0;
    background: none;
    font-family: var(--ep-font);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.ep_theme .widget > .title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 4px;
    border-radius: 0 3px 3px 0;
    background: var(--ep-sky);
}
.ep_theme aside .widget > .title { min-height: 46px; font-size: 15px; }
.ep_theme aside .widget > .title::before { top: 13px; bottom: 13px; }

/* Ссылка в заголовке («Все новости», «На форум!») — как «Все герои →» */
.ep_theme .widget > .title .links { margin-left: auto; white-space: nowrap; }
.ep_theme .widget > .title .links a {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--ep-sky);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
}
.ep_theme .widget > .title .links a::after { content: ' \2192'; }
.ep_theme .widget > .title .links a:hover { background: none; color: #fff; }

.ep_theme .widget > .body { padding: 16px 20px 18px; line-height: 1.55; }
/* :where — нулевая специфичность, чтобы не перебивать цвета ссылок-карточек (.ep_pop_card, .ep_news_cat…) */
:where(.ep_theme .widget > .body) a { color: var(--ep-sky); }
:where(.ep_theme .widget > .body) a:hover { color: #fff; }

.ep_theme .widget_tabbed .tabs ul {
    border-bottom: 1px solid var(--ep-line);
    border-radius: var(--ep-radius) var(--ep-radius) 0 0;
    background: none;
}
.ep_theme .widget_tabbed .tabs ul li a { border: 0; background: none; color: var(--ep-muted-inv); }
.ep_theme .widget_tabbed .tabs ul li a.active,
.ep_theme .widget_tabbed .tabs ul li a:hover { background: none; color: #fff; box-shadow: inset 0 -2px 0 var(--ep-sky); }
.ep_theme .widget_tabbed .widgets .body { background: none; color: #d5def0; }

/* Панель действий (виджет «Меню действий»: Добавить / Редактировать / Удалить…) — тёмная строка кнопок */
.ep_theme .widget:has(> .body > .menu-toolbar) {
    border: 1px solid var(--ep-line);
    background: var(--ep-panel);
    box-shadow: none;
}
.ep_theme .widget > .body:has(> .menu-toolbar) { padding: 10px 12px; }
/* #body … — чтобы перебить «#body section .menu» из theme-layout.css */
#body .menu.menu-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: none;
}
#body .menu.menu-toolbar li { float: none; margin: 0; padding: 0; background: none; }
#body .menu.menu-toolbar li a {
    display: block;
    padding: 6px 12px 6px 32px;
    border: 1px solid var(--ep-line);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, .05);
    background-position: 10px center;
    color: #dbe7ff;
    font-size: 13px;
    line-height: 20px;
    text-decoration: none;
}
#body .menu.menu-toolbar li a:hover { border-color: var(--ep-sky); background-color: rgba(59, 130, 246, .18); color: #fff; }

/* Меню в виджетах (боковые и в колонке: «Меню», меню профиля…) */
#body aside .menu, #body aside .menu li,
#body section .widget .menu, #body section .widget .menu li { background: transparent; }
#body aside .menu li a, #body aside .menu li span.item,
#body section .widget .menu li a { border-radius: 6px; color: #cfd9ee; }
#body aside .menu li:hover, #body aside .menu li.active,
#body section .widget .menu li:hover, #body section .widget .menu li.active { background: rgba(59, 130, 246, .14); }
#body aside .menu li:hover > a, #body aside .menu li.active > a,
#body section .widget .menu li:hover > a { color: #fff; }
#body aside .menu .counter, #body section .menu .counter { background: var(--ep-accent); }

/* Содержимое виджетов на тёмной панели ===================================== */

/* Поля форм (вход на сайт и др.) */
.ep_theme .widget .input,
.ep_theme .widget input.form-control,
.ep_theme .widget select,
.ep_theme .widget textarea {
    box-sizing: border-box;
    border: 1px solid rgba(126, 162, 230, .28);
    border-radius: 8px;
    background: rgba(7, 16, 36, .55);
    color: var(--ep-text-inv);
}
.ep_theme .widget .input:focus,
.ep_theme .widget input.form-control:focus,
.ep_theme .widget textarea:focus { border-color: var(--ep-sky); outline: none; box-shadow: 0 0 0 3px rgba(96, 165, 250, .2); }
.ep_theme .widget .field label,
.ep_theme .widget .field .title,
.ep_theme .widget .auth_remember { color: var(--ep-muted-inv); }
.ep_theme .widget .widget_auth .field { margin-bottom: 12px; }
.ep_theme .widget .widget_auth input.form-control { width: 100%; height: 36px; padding: 0 10px; }

/* Мелкий служебный текст: даты, «N дней назад» */
.ep_theme .widget .date,
.ep_theme .widget .details,
.ep_theme .widget .text-muted { color: #8fa1c2 !important; }

/* Новые комментарии / Лента активности */
.ep_theme .widget_comments_list .item,
.ep_theme .widget_activity_list .item { padding: 8px 0; border-bottom: 1px solid rgba(126, 162, 230, .14); }
.ep_theme .widget_comments_list .item:last-child,
.ep_theme .widget_activity_list .item:last-child { border-bottom: 0; }
.ep_theme .widget_comments_list .item .title,
.ep_theme .widget_activity_list .item .title { color: #cfd9ee; }
.ep_theme .widget_comments_list .image img { border-radius: 50%; }
.ep_theme .widget .author { color: #fff !important; font-weight: 500; text-decoration: none; }
.ep_theme .widget .author:hover { color: var(--ep-sky) !important; }
.ep_theme .widget_comments_list .subject { text-decoration: none; }

/* Последние сообщения на форуме */
.ep_theme .widget-posts-item,
.ep_theme .widget-posts-item.odd {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid rgba(126, 162, 230, .14);
    background: none;
}
.ep_theme .widget-posts-item:last-child { border-bottom: 0; }
.ep_theme .widget-posts-title a { color: #fff; text-decoration: none; }
.ep_theme .widget-posts-title a:hover { color: var(--ep-sky); }
.ep_theme .widget-posts-content { color: #b9c6de; line-height: 1.5; }
.ep_theme .widget-posts-details,
.ep_theme .widget-posts-author,
.ep_theme .widget-posts-date { color: #8fa1c2; }
.ep_theme .widget-posts-date span { color: #cfd9ee; font-weight: 500; }

/* Текстовые и HTML-блоки */
.ep_theme .widget_html_block,
.ep_theme .widget_text_block { color: #d5def0; }

/* Календарь (виджет календаря событий): тёмный вариант цветов calendar.css */
.ep_theme .widget .cal-widget {
    --c-line:  rgba(126, 162, 230, .2);
    --c-soft:  rgba(255, 255, 255, .05);
    --c-text:  #d5def0;
    --c-muted: #8fa1c2;
    --c-accent: var(--ep-sky);
}
.ep_theme .widget .cal-widget__item { background: color-mix(in srgb, var(--t) 20%, rgba(7, 16, 36, .4)); }
.ep_theme .widget .cal-widget__item a { color: #fff; }
.ep_theme .widget .cal-widget__item a:hover { color: var(--ep-sky); }

/* Кнопки */
.ep_theme .button,
.ep_theme input.button,
.ep_theme .button-submit,
.ep_theme input[type=submit] {
    border-radius: 8px;
}
.ep_theme .button-submit,
.ep_theme input.button-submit {
    background: var(--ep-accent);
    border-color: var(--ep-accent);
}
.ep_theme .button-submit:hover,
.ep_theme input.button-submit:hover { background: var(--ep-accent-hi); }

/* Подвал =================================================================== */

#layout footer {
    height: auto;
    margin-top: 10px;
    padding: 18px 24px;
    border: 1px solid var(--ep-line);
    border-radius: var(--ep-radius);
    background: var(--ep-bg-2);
    color: var(--ep-muted-inv);
    font-size: 13px;
    line-height: 1.6;
}
#layout footer ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
}
#layout footer ul li {
    float: none;
    height: auto;
    line-height: inherit;
    margin: 0;
}
#layout footer #info:empty { display: none; }
#layout footer a { color: #c7d5ef; }
#layout footer a:hover { color: #fff; }

/* Уведомление о cookie (виджет cookiebox): карточка в левом нижнем углу, как панели сайта.
   Стили виджета подключаются позже шаблонных, поэтому селекторы с id. */
#box-cookies, #box-cookies * { line-height: 1.5; }
#box-cookies { z-index: 300; }
#box-cookies.left, #box-cookies.right { width: min(380px, 100%); }
#box-cookies .box-cookies-wrapper {
    position: relative;
    max-width: 380px;
    padding: 20px 22px 22px 74px;
    border: 1px solid var(--ep-line);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(16, 33, 66, .96) 0%, rgba(10, 22, 46, .97) 100%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #d5def0;
    font-size: 13px;
    text-align: left;
}
#box-cookies.left .box-cookies-wrapper { margin: 0 0 20px 20px; }
#box-cookies.right .box-cookies-wrapper { margin: 0 20px 20px 0; }
#box-cookies .box-cookies-wrapper::before {
    content: "\1F36A";
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(245, 192, 74, .16);
    font-size: 22px;
    line-height: 1;
}
#box-cookies .box-cookie-content { margin-bottom: 0; }
#box-cookies .box-cookie-content h4 { margin: 0 0 6px; color: #fff; font-size: 16px; font-weight: 700; }
#box-cookies .box-cookie-content a { color: var(--ep-sky); text-decoration: none; border-bottom: 1px dashed rgba(96, 165, 250, .5); }
#box-cookies .box-cookie-content a:hover { color: #fff; border-bottom-color: #fff; text-decoration: none; }
#box-cookies .box-cookie-buttons { margin-top: 16px; padding: 0; justify-content: flex-start; gap: 8px; }
#box-cookies a.tap {
    min-width: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: var(--ep-accent);
    color: #fff;
    font-weight: 500;
    line-height: 38px;
}
#box-cookies a.tap:hover { background: var(--ep-accent-hi); color: #fff; }
#box-cookies a.tap:not(.allow) { background: rgba(255, 255, 255, .08); color: #d5def0; }
#box-cookies a.tap:not(.allow):hover { background: rgba(255, 255, 255, .16); }
#box-cookies .box-cookie-buttons .tap:first-child,
#box-cookies .box-cookie-buttons .tap:last-child { border-radius: 8px; }
:root[data-theme="light"] #box-cookies .box-cookies-wrapper {
    background: #fff;
    box-shadow: 0 18px 40px rgba(30, 64, 120, .25);
    color: #334155;
}
:root[data-theme="light"] #box-cookies .box-cookie-content h4 { color: #0f2246; }
:root[data-theme="light"] #box-cookies .box-cookie-content a { color: #1d4ed8; border-bottom-color: rgba(29, 78, 216, .4); }
:root[data-theme="light"] #box-cookies .box-cookie-content a:hover { color: #0f2246; border-bottom-color: #0f2246; }
:root[data-theme="light"] #box-cookies a.tap:not(.allow) { background: rgba(30, 64, 120, .08); color: #334155; }
@media (max-width: 767px) {
    #box-cookies.left, #box-cookies.right { width: 100%; }
    #box-cookies .box-cookies-wrapper,
    #box-cookies.left .box-cookies-wrapper,
    #box-cookies.right .box-cookies-wrapper { max-width: none; margin: 0 10px 10px; padding: 16px 16px 18px 64px; }
    #box-cookies .box-cookies-wrapper::before { top: 16px; left: 16px; }
}

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

/* Иконки в меню помещаются только на широких экранах (пунктов меню много) */
@media screen and (max-width: 1800px) {
    #ep_header nav .menu > li > a::before { display: none; }
    #ep_header nav .menu > li > a { padding: 0 12px; }
}

@media screen and (max-width: 1400px) {
    #ep_header nav .menu > li > a { padding: 0 10px; font-size: 14px; }
    .ep_bar { gap: 14px; }
}

@media screen and (max-width: 1100px) {
    #body aside { flex-basis: 270px; width: 270px; }
}

@media screen and (max-width: 980px) {
    #layout { width: auto !important; }
    #body { flex-direction: column; align-items: stretch; }
    #body aside { flex-basis: auto; width: 100%; }
    .ep_cards { grid-template-columns: repeat(2, 1fr); }
}

/* Кнопка «Меню» и выезжающая панель (js/empires.js) ======================= */

.ep_menu_btn,
.ep_drawer_head,
.ep_drawer_heroes,
.ep_sub_toggle,
.ep_overlay { display: none; }

@media screen and (max-width: 1240px) {
    /* backdrop-filter у шапки ломает position: fixed у панели */
    #ep_header { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0b1730; }

    .ep_menu_btn {
        display: flex;
        align-items: center;
        gap: 9px;
        height: 36px;
        margin-left: 4px;
        padding: 0 14px 0 12px;
        border: 1px solid var(--ep-line);
        border-radius: 8px;
        background: rgba(255, 255, 255, .06);
        color: #e8eefc;
        font-family: var(--ep-font);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
    }
    .ep_menu_btn:hover { background: rgba(255, 255, 255, .12); }
    .ep_burger { position: relative; display: block; width: 18px; height: 14px; }
    .ep_burger::before, .ep_burger::after, .ep_burger i {
        content: '';
        position: absolute;
        left: 0;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform .25s ease, opacity .2s;
    }
    .ep_burger::before { top: 0; }
    .ep_burger i { top: 6px; }
    .ep_burger::after { bottom: 0; }
    .ep_menu_open .ep_burger::before { transform: translateY(6px) rotate(45deg); }
    .ep_menu_open .ep_burger::after { transform: translateY(-6px) rotate(-45deg); }
    .ep_menu_open .ep_burger i { opacity: 0; }

    .ep_overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 998;
        background: rgba(3, 8, 20, .6);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s, visibility .25s;
    }
    .ep_menu_open .ep_overlay { opacity: 1; visibility: visible; }
    body.ep_menu_open { overflow: hidden; }
    .ep_menu_open #ep_header { z-index: 1000; }

    /* Панель */
    #ep_header nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        display: flex;
        flex-direction: column;
        width: 340px;
        max-width: 88vw;
        height: auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: linear-gradient(180deg, #102449 0%, #0a1428 100%);
        border-left: 1px solid var(--ep-line);
        box-shadow: -20px 0 50px rgba(0, 0, 0, .5);
        transform: translateX(105%);
        visibility: hidden;
        transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility .3s;
    }
    .ep_menu_open #ep_header nav { transform: none; visibility: visible; }

    .ep_drawer_head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        height: var(--ep-bar-h);
        padding: 0 12px 0 20px;
        border-bottom: 1px solid var(--ep-line);
        color: #fff;
        font-size: 17px;
        font-weight: 700;
    }
    .ep_drawer_close {
        position: relative;
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 8px;
        background: rgba(255, 255, 255, .06);
        cursor: pointer;
    }
    .ep_drawer_close:hover { background: rgba(255, 255, 255, .14); }
    .ep_drawer_close::before, .ep_drawer_close::after {
        content: '';
        position: absolute;
        left: 10px;
        top: 18px;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: #e8eefc;
        transform: rotate(45deg);
    }
    .ep_drawer_close::after { transform: rotate(-45deg); }

    .ep_drawer_heroes:not(:empty) { display: block; padding: 14px 16px 4px; }
    .ep_drawer_heroes .ep_hero_pick { width: auto; margin: 0; padding: 0; border: 0; }
    .ep_drawer_heroes .ep_hero_pick .select2-container--default .select2-selection--single { height: 42px; }
    .ep_drawer_heroes .ep_hero_pick .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; }
    .ep_drawer_heroes .ep_hero_pick .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }

    /* Пункты меню в панели */
    #ep_header nav .widget_ajax_wrap { padding: 10px 12px 24px; }
    #ep_header nav .menu { display: block; height: auto; line-height: normal; }
    #ep_header nav .menu li { position: relative; }
    #ep_header nav .menu > li > a {
        height: 48px;
        padding: 0 52px 0 14px;
        border: 0;
        border-radius: 10px;
        font-size: 16px;
        color: #dbe5f8;
    }
    #ep_header nav .menu > li > a::before { display: block !important; flex-basis: 20px; width: 20px; height: 20px; opacity: .75; }
    #ep_header nav .menu > li:hover > a { background: rgba(255, 255, 255, .06) !important; }
    #ep_header nav .menu > li.active > a {
        color: #fff;
        background: linear-gradient(90deg, rgba(59, 130, 246, .35) 0%, rgba(59, 130, 246, .08) 100%) !important;
        box-shadow: inset 3px 0 0 var(--ep-sky);
    }
    #ep_header nav .menu > .folder > a > .wrap { padding-right: 0; background: none !important; }

    .ep_sub_toggle {
        display: block;
        position: absolute;
        top: 6px;
        right: 6px;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 8px;
        background: rgba(255, 255, 255, .05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23cfd9ee' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 12px;
        cursor: pointer;
        transition: transform .2s, background-color .15s;
    }
    .ep_sub_toggle:hover { background-color: rgba(255, 255, 255, .12); }
    #ep_header nav .menu ul .ep_sub_toggle { top: 2px; width: 32px; height: 32px; }
    #ep_header nav .menu li.ep_open > .ep_sub_toggle { transform: rotate(180deg); }

    #ep_header nav .menu ul,
    #ep_header nav .menu ul ul,
    #ep_header nav .menu > li.more > ul {
        display: none;
        position: static;
        visibility: visible;
        width: auto;
        margin: 2px 0 6px 24px;
        padding: 2px 0 2px 10px;
        border: 0;
        border-left: 1px solid var(--ep-line);
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    #ep_header nav .menu li.ep_open > ul { display: block; }
    #ep_header nav .menu ul li a,
    #ep_header nav .menu li.active ul li a {
        padding: 9px 44px 9px 12px;
        border-radius: 8px;
        font-size: 15px;
        color: #b9c7e2;
    }
    #ep_header nav .menu ul *.folder > a { background-image: none !important; }

    #ep_header nav select.mobile_menu_select { display: none !important; }
}

@media screen and (max-width: 900px) {
    .ep_actions > .ep_hero_pick { display: none; }
}

@media screen and (max-width: 640px) {
    .ep_container { padding: 0 12px; }
    :root { --ep-bar-h: 52px; }
    .ep_bar { gap: 8px; }
    #logo a, #logo > span { width: 100px; height: 58px; margin-bottom: -10px; }
    #logo .ep_logo_top { font-size: 20px; }
    #logo .ep_logo_bottom { font-size: 16px; }
    #logo .ep_logo_bottom i { font-size: 13px; }
    #ep_header #widget_pos_header .menu > li > a { padding: 0 9px; font-size: 13px; height: 34px; }
    .ep_menu_btn { height: 34px; padding: 0 10px; font-size: 13px; gap: 7px; }
    #ep_header .menu-header li.key > a::before { display: none; }
    #ep_header .widget_user_avatar .user_info .name { display: none; }

    #ep_hero {
        background-image: url("/static/theme/empires/hero-960.jpg");
        background-image: -webkit-image-set(url("/static/theme/empires/hero-960.webp") type("image/webp"), url("/static/theme/empires/hero-960.jpg") type("image/jpeg"));
        background-image: image-set(url("/static/theme/empires/hero-960.webp") type("image/webp"), url("/static/theme/empires/hero-960.jpg") type("image/jpeg"));
    }
    .ep_hero_home .ep_hero_inner_wrap { padding-top: 30px; }
    .ep_hero_inner .ep_hero_inner_wrap { padding-top: 22px; padding-bottom: 22px; }
    .ep_kicker { font-size: 12px; }
    #ep_hero .ep_hero_title { font-size: 28px; }
    .ep_hero_sub { font-size: 16px; margin-bottom: 20px; }
    .ep_cards { gap: 10px; margin-top: 24px; }
    .ep_card { padding: 8px 26px 8px 10px; gap: 10px; min-height: 54px; }
    .ep_card::after { right: 12px; }
    .ep_card_icon { flex-basis: 32px; height: 32px; }
    .ep_card_text b { font-size: 14px; }
    .ep_card_text small { display: none; }

    #body section article { padding: 16px; }
}

@media screen and (max-width: 380px) {
    .ep_cards { grid-template-columns: 1fr; }
}

/* theme-content ============================================================ */

.first_type_images {
    max-width: none;
}

/* Популярные герои (content/widgets/list/list_popular_heroes) =============== */

.ep_theme .widget.ep_pop_widget {
    background: var(--ep-panel);
    border: 1px solid var(--ep-line);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.ep_theme .widget.ep_pop_widget > .title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    line-height: 1.2;
    padding: 0 20px;
    background: none;
    font-size: 20px;
}
.ep_theme .widget.ep_pop_widget > .title::before {
    position: static;
    flex: 0 0 26px;
    width: 26px;
    height: 22px;
    border-radius: 0;
    background: linear-gradient(#ffe27a, #f5b324 60%, #d98a12);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cpath d='M2 6l6 5 5-9 5 9 6-5-2.500 11h-17zM4.500 18.500h17V21h-17z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cpath d='M2 6l6 5 5-9 5 9 6-5-2.500 11h-17zM4.500 18.500h17V21h-17z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ep_theme .widget.ep_pop_widget > .title .links { margin-left: auto; }
.ep_theme .widget.ep_pop_widget > .title .links a {
    padding: 0;
    background: none;
    color: var(--ep-sky);
    font-size: 13px;
    font-weight: 400;
}
.ep_theme .widget.ep_pop_widget > .title .links a::after { content: ' \2192'; }
.ep_theme .widget.ep_pop_widget > .title .links a:hover { background: none; color: #fff; }
.ep_theme .widget.ep_pop_widget > .body { padding: 4px 18px 20px; }

.ep_pop {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 148px));
    justify-content: space-between;
    gap: 24px;
}

.ep_pop_card {
    --e: #8740c0; --e-hi: #c07af5; --e-bg: #2a1240;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid var(--e);
    border-radius: 8px;
    background: var(--e-bg);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 14px -2px var(--e), inset 0 0 0 1px rgba(255, 255, 255, .12);
    color: #fff;
    text-decoration: none;
}
.ep_pop--red    { --e: #e0352b; --e-hi: #ff7a5c; --e-bg: #3b0f0d; }
.ep_pop--blue   { --e: #2f8be6; --e-hi: #7cc4ff; --e-bg: #0c2448; }
.ep_pop--green  { --e: #3cb043; --e-hi: #8be06a; --e-bg: #10300f; }
.ep_pop--yellow { --e: #f0a52a; --e-hi: #ffd66b; --e-bg: #3d2808; }
.ep_pop--purple { --e: #a052e6; --e-hi: #d29bff; --e-bg: #2a1240; }

.ep_pop_photo {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle at 50% 35%, var(--e), var(--e-bg) 80%);
    border-bottom: 2px solid var(--e);
}
.ep_pop_face {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}
/* Затемнение снизу под эмблему, как у иконки героя */
.ep_pop_photo::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(transparent 60%, rgba(0, 0, 0, .35));
    box-shadow: inset 0 0 .6em rgba(0, 0, 0, .45);
}
/* Ромбик по центру разделителя */
.ep_pop_photo::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background: var(--e-hi);
    transform: rotate(45deg);
    box-shadow: 0 0 6px var(--e);
}

/* Значок класса слева внизу портрета (static/images/calculator/table_N.png) */
.ep_pop_class {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 1;
    box-sizing: content-box;
    width: 22px;
    height: 22px;
    padding: 2px;
    border: 1px solid var(--e);
    border-radius: 50%;
    background: rgba(7, 16, 36, .75);
    box-shadow: 0 0 6px -1px var(--e);
}

.ep_pop_info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--e) 22%, transparent), transparent 70%), var(--e-bg);
}
.ep_pop_name {
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ep_pop_el {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #cbd6ea;
    font-size: 12px;
    line-height: 16px;
}
.ep_pop_el img { width: 14px; height: 14px; border: 0; }
.ep_pop_stars { display: flex; gap: 3px; margin-top: 3px; }
.ep_pop_stars i {
    width: 14px;
    height: 14px;
    background: linear-gradient(#fff1a6, #ffcc33 45%, #f0a020);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.800l3.100 6.600 7.200.9-5.300 5 1.400 7.100L12 17.900l-6.400 3.500L7 14.300l-5.300-5 7.200-.9z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.800l3.100 6.600 7.200.9-5.300 5 1.400 7.100L12 17.900l-6.400 3.500L7 14.300l-5.300-5 7.200-.9z'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (prefers-reduced-motion: no-preference) {
    .ep_pop_card { transition: transform .15s ease, box-shadow .15s ease; }
    .ep_pop_card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 22px 0 var(--e), inset 0 0 0 1px rgba(255, 255, 255, .18); }
}

/* В правой колонке («Последние добавленные герои») — по две карточки в ряд */
.ep_theme aside .widget.ep_pop_widget > .title { min-height: 48px; font-size: 16px; padding: 10px 16px; }
.ep_theme aside .widget.ep_pop_widget > .title .links a { white-space: nowrap; }
/* Вместо короны «Популярных» — искорка «новое» */
.ep_theme aside .widget.ep_pop_widget > .title::before {
    flex-basis: 22px;
    width: 22px;
    background: linear-gradient(#bfe3ff, #60a5fa 60%, #2563eb);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.600 7.400L22 11l-7.400 2.600L12 21l-2.600-7.400L2 11l7.400-2.600zM19.500 16l1 2.500 2.500 1-2.500 1-1 2.500-1-2.500-2.500-1 2.500-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.600 7.400L22 11l-7.400 2.600L12 21l-2.600-7.400L2 11l7.400-2.600zM19.500 16l1 2.500 2.500 1-2.500 1-1 2.500-1-2.500-2.500-1 2.500-1z'/%3E%3C/svg%3E");
}
.ep_theme aside .widget.ep_pop_widget > .body { padding: 4px 14px 16px; }
aside .ep_pop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* Узкие экраны: лента с прокруткой вбок */
@media screen and (max-width: 760px) {
    .ep_theme .widget.ep_pop_widget > .title { font-size: 17px; padding: 0 14px; }
    .ep_theme .widget.ep_pop_widget > .body { padding: 4px 0 16px; }
    .ep_pop {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 124px;
        gap: 12px;
        overflow-x: auto;
        padding: 0 14px 6px;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 14px;
    }
    .ep_pop_card { scroll-snap-align: start; }
}