/*
 * Иконка героя (assets/ui/hero-icon.tpl.php).
 * Картинка — только лицо героя (static/images/heroes/face/), рамка, звёзды и эмблема стихии — CSS.
 * Все размеры в em: font-size иконки = 1/10 стороны, размер задаётся через --hi-size.
 */
.hero-icon {
    --hi-size: 120px;
    --e: #8740c0; --e-bg: #4a1f70;
    font-size: calc(var(--hi-size) / 10);
    display: inline-block; vertical-align: top; position: relative;
    width: 10em; height: 10em; padding: .45em; box-sizing: border-box; border-radius: .9em;
    background:
        linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 65%, rgba(0,0,0,.45)),
        linear-gradient(var(--e), var(--e));
    box-shadow: 0 0 0 .1em rgba(0,0,0,.65), inset 0 .1em 0 rgba(255,255,255,.5), inset 0 -.1em 0 rgba(0,0,0,.4), 0 .25em .6em rgba(0,0,0,.35);
    line-height: 0;
}
.hero-icon--red    { --e: #c8372a; --e-bg: #6e1a12; }
.hero-icon--blue   { --e: #2d74cc; --e-bg: #173e78; }
.hero-icon--green  { --e: #2d8a3f; --e-bg: #1a5228; }
.hero-icon--yellow { --e: #cf9f22; --e-bg: #7a5815; }
.hero-icon--purple { --e: #8740c0; --e-bg: #4a1f70; }

.hero-icon__in {
    position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: .45em;
    background: radial-gradient(circle at 50% 35%, var(--e), var(--e-bg) 75%);
    box-shadow: 0 0 0 .15em rgba(0,0,0,.7);
}
.hero-icon__in::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(rgba(0,0,0,.35), transparent 28%, transparent 78%, rgba(0,0,0,.2));
    box-shadow: inset 0 0 .6em rgba(0,0,0,.55);
}
.hero-icon__face { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }

.hero-icon__stars {
    position: absolute; top: .15em; left: 0; right: 0; z-index: 1;
    display: flex; justify-content: center;
}
.hero-icon__stars i {
    width: 1.6em; height: 1.6em; margin: 0 -.08em;
    background: url(/static/images/heroes/star.svg) center / contain no-repeat;
    filter: drop-shadow(0 .1em .05em rgba(0,0,0,.7));
}
.hero-icon__el {
    position: absolute; right: .3em; bottom: .3em; z-index: 2;
    height: 1.8em; width: auto; border: 0;
    filter: drop-shadow(0 .1em .1em rgba(0,0,0,.6));
}

/* Герой игрока: уровень на серой плашке, лычки, талант (параметры level/asc/talent) */
.hero-icon__lvl {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    height: 2.3em; padding: 0 .5em; box-sizing: border-box;
    display: flex; align-items: center; gap: .25em;
    background: linear-gradient(rgba(58,60,66,.86), rgba(34,35,40,.94));
    border-top: .1em solid rgba(255,255,255,.18);
    color: #fff; font-family: inherit; font-weight: 700; line-height: 1;
    text-shadow: 0 .1em .1em #000;
}
.hero-icon__lvl small { font-size: 1.15em; opacity: .9; }
.hero-icon__lvl b { font-size: 1.75em; letter-spacing: -.02em; }

/* Лычки — стопкой шевронов в правой части плашки, поверх неё (4 шеврона умещаются в высоту плашки) */
.hero-icon__asc {
    position: absolute; right: .4em; bottom: .12em; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
}
/* Одинаковый шаг между всеми шевронами: каждый следующий заходит на предыдущий на .5em */
.hero-icon__asc i {
    width: 1.4em; height: .9em;
    background: linear-gradient(#ffe27a, #ffc935 50%, #c27c10);
    clip-path: polygon(0 70%, 50% 0, 100% 70%, 100% 100%, 50% 30%, 0 100%);
    filter: drop-shadow(0 .06em 0 #6b3d05);
}
.hero-icon__asc i + i { margin-top: -.5em; }

/* Талант — ромб над лычками, над плашкой справа */
.hero-icon__tal {
    position: absolute; right: .1em; bottom: 2.4em; z-index: 2;
    width: 2.5em; height: 2.5em; display: flex; align-items: center; justify-content: center;
}
.hero-icon__tal::before {
    content: ""; position: absolute; inset: .35em; transform: rotate(45deg); border-radius: .2em;
    background: linear-gradient(135deg, #5aa8ff, #1d4fa8);
    box-shadow: 0 0 0 .15em #ffc935, 0 0 0 .25em #6b3d05, 0 .15em .3em rgba(0,0,0,.6);
}
.hero-icon__tal b {
    position: relative; color: #fff; font-size: 1.15em; font-weight: 700; line-height: 1;
    text-shadow: 0 .08em .08em #000;
}

@media (prefers-reduced-motion: no-preference) {
    a .hero-icon { transition: transform .15s ease; }
    a:hover .hero-icon { transform: translateY(-2px); }
}