/* Individual transparent sprites avoid clipping the hero silhouettes at atlas cell edges. */
#app .hero-art{height:230px;background-size:contain;background-position:center bottom;background-repeat:no-repeat}
#app .hero-art.boy{background-image:url('assets/magic/hero-boy-v5.webp')}
#app .hero-art.girl{background-image:url('assets/magic/hero-girl-v5.webp')}
#app .familiar-art{height:120px;background-size:contain;background-position:center;background-repeat:no-repeat}
#app .familiar-art.fox{background-image:url('assets/models-v6/portraits/familiar-fox.png')}
#app .familiar-art.owl{background-image:url('assets/models-v6/portraits/familiar-owl.png')}
#app .familiar-art.dragon{background-image:url('assets/models-v6/portraits/familiar-dragon.png')}
#app .operator-face,#app .operator-face[data-frame],#app.playing[data-controls=touch][data-touch-layout=compact] .operator-face{background-image:url('assets/magic/hero-girl-v5.webp');background-size:220% auto;background-position:center top;image-rendering:auto}
#app[data-hero=boy] .operator-face,#app[data-hero=boy] .operator-face[data-frame],#app.playing[data-hero=boy][data-controls=touch][data-touch-layout=compact] .operator-face{background-image:url('assets/magic/hero-boy-v5.webp');background-position:center top}
#app .leader-portrait{width:90px;height:112px;min-width:90px;background-size:contain!important;background-position:center!important;background-repeat:no-repeat}
#app #bossPhoto{width:55px;height:66px;min-width:55px}
@media(max-width:700px){#app .hero-art{height:195px}#app .familiar-art{height:94px}#app .leader-portrait{width:74px;height:94px;min-width:74px}}

#app .brand-mark{background:url('icon.svg?v=0.6.0') center/contain no-repeat!important;border:0!important;border-radius:22%!important}
#app .brand-mark:after{display:none!important}