/* каркас героя */
.hr{position:relative;display:block;left:0;bottom:0;--wd:.7s;--A:1.1px;--L:1.4px;transform-origin:50% 100%}
.hr img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none}
.hr .up{transform-origin:50% 72%;z-index:3}.hr .fl{z-index:1}.hr .fr{z-index:2}
.hr .fl,.hr .fr{transform-origin:50% 72%}
.hr .up{animation:hrBreath 3.2s ease-in-out infinite}
@keyframes hrBreath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.004,1.012)}}
.walking .hr .up{animation:hrBob var(--wd) ease-in-out infinite}
@keyframes hrBob{0%,50%,100%{transform:translateY(0) rotate(-.4deg)}25%,75%{transform:translateY(-.6px) rotate(.4deg)}}
/* 3/4 (вправо; влево — зеркало): ступни ходят вперёд-назад, при переносе приподнимаются */
.walking .hr[data-v="s"] .fl{animation:hrSide var(--wd) linear infinite}
.walking .hr[data-v="s"] .fr{animation:hrSide var(--wd) linear infinite;animation-delay:calc(var(--wd)/-2)}
@keyframes hrSide{0%,100%{transform:translateX(calc(var(--A)*.6)) rotate(4deg)}50%{transform:translateX(calc(var(--A)*-.6)) rotate(-4deg)}75%{transform:translateY(calc(var(--L)*-1)) rotate(-2deg)}}
/* спереди / сзади: ступни идут «на нас» и «от нас» */
.walking .hr[data-v="f"] .fl,.walking .hr[data-v="b"] .fl{animation:hrFront var(--wd) linear infinite}
.walking .hr[data-v="f"] .fr,.walking .hr[data-v="b"] .fr{animation:hrFront var(--wd) linear infinite;animation-delay:calc(var(--wd)/-2)}
@keyframes hrFront{0%,100%{transform:translateY(calc(var(--A)*.8)) scale(1.008)}50%{transform:translateY(calc(var(--A)*-.6)) scale(.995)}75%{transform:translateY(calc(var(--L)*-.8)) scale(.995)}}
.walking .hr[data-v="b"] .fl,.walking .hr[data-v="b"] .fr{animation-direction:reverse}
/* состояния */
.act-joy .hr{animation:hrJoy .55s ease-out 3}
@keyframes hrJoy{0%,100%{transform:translateY(0) scale(1,1)}20%{transform:translateY(2px) scale(1.03,.96)}55%{transform:translateY(-16px) scale(.97,1.04)}80%{transform:translateY(0) scale(1.03,.97)}}
.act-wave .hr{animation:hrWave .9s ease-in-out 2}
@keyframes hrWave{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg) translateY(-3px)}75%{transform:rotate(4deg) translateY(-3px)}}
.act-work .hr .up{animation:hrWork .32s ease-in-out infinite}
@keyframes hrWork{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(1.5deg) translateY(.6px)}}
.act-look .hr .up{animation:hrLook 1.3s ease-in-out 1}
@keyframes hrLook{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.2deg) translateY(-.8px)}}
.hr-bub{position:absolute;left:0;bottom:112px;width:54px;height:54px;margin-left:-27px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.4);animation:bubPop .35s cubic-bezier(.3,1.6,.5,1);z-index:50;background:#fff}
.hr-bub img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes bubPop{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}}

/* в карте города: якорь героя — точка между ступнями; зеркалим вокруг неё */
.actor.hero .spr{width:0;transform:scaleX(var(--dir,1));transform-origin:0 100%}
.actor.hero.cheer .spr{animation:none}
.actor.hero .shadow{left:-22px;width:44px}
/* экран выбора */
.hero-pick{display:flex;gap:12px;justify-content:center;margin:14px 0}
.hpick-card{flex:1;max-width:190px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px 10px;border-radius:18px;border:2px solid rgba(255,255,255,.2);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));color:#fff;cursor:pointer;font:inherit}
.hpick-card.on{border-color:#ffd36a;box-shadow:0 0 0 3px rgba(255,211,106,.3)}
.hpick-card:hover{transform:translateY(-2px)}
.hpick-card .hc-fig{position:relative;display:block;width:80px;height:140px;margin:6px 0}
.hpick-card .hc-fig .hr{position:absolute;left:50%;bottom:0;zoom:1.35}
.hpick-card small{opacity:.75}

/* Complete frames supersede the split-foot rig; map feet stay at the same anchor. */
.hr-atlas svg{display:block;overflow:hidden;pointer-events:none}
.actor.hero .hr-atlas{animation:none!important;transform:none!important}
.actor.hero .shadow{left:-11px;width:22px;height:4px}
.actor.hero .hr-bub{bottom:74px}
.hpick-card .hc-fig{height:116px}

.hpick-card .hc-fig{width:100px;height:124px}.hero-pick .hpick-card .hc-fig .hr-atlas{zoom:2.12!important}