.boss-banner{isolation:isolate}
.boss-banner:before{z-index:1;pointer-events:none}
.boss-banner>div:not(.boss-portrait-wrap){z-index:2}
.boss-banner>.boss-portrait-wrap{position:absolute;z-index:0;left:50%;top:0;width:100%;aspect-ratio:16/9;transform:translateX(-50%);pointer-events:none;overflow:hidden}
.boss-portrait{position:absolute;inset:0;background:url('../assets/suixin-fox-stages-v17-1.webp') 0 0/200% 300% no-repeat;animation:feather-breathe 5s ease-in-out infinite;transform-origin:50% 45%}
.boss-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 55% 40%,#c8a1ff14 0,transparent 62%);opacity:.5;animation:feather-glow 4s ease-in-out infinite}
.boss-feather{position:absolute;color:#c4b4ef;left:24%;top:33%;font-size:17px;opacity:.6;animation:feather-drift 4s ease-in-out infinite}
.boss-feather.f-two{left:77%;top:49%;font-size:11px;animation-delay:-2s}
.boss-portrait-wrap[data-stage="1"] .boss-portrait{animation-duration:3.6s}
.boss-portrait-wrap[data-stage="2"] .boss-glow{background:radial-gradient(ellipse at 53% 40%,#c889ff38,transparent 66%);animation-duration:2.5s}
.boss-portrait-wrap[data-stage="3"] .boss-glow{background:radial-gradient(ellipse at 55% 44%,#f25cbc40,transparent 65%);animation-duration:1.6s}
.boss-portrait-wrap[data-stage="4"] .boss-portrait{animation:feather-defeated 700ms ease-out both}
.boss-portrait-wrap[data-stage="4"] .boss-glow,.boss-portrait-wrap[data-stage="4"] .boss-feather{display:none}
.boss-portrait-wrap[data-attacking="true"] .boss-glow{background:radial-gradient(ellipse at 75% 43%,#fff5bf55,transparent 54%)}
.boss-portrait-wrap.paused *{animation:none!important;transition:none!important}
.joe-mode .boss-portrait-wrap{display:none}
#portrait-open{font-size:11px;margin:12px 0 0;background:#211a2aba;color:#d9c1e8;border-color:#6b547a;padding:6px 10px}
#portrait-preview{width:760px;max-width:min(760px,calc(100vw - 24px));padding:22px}
#portrait-preview .boss-banner{height:280px;margin:18px 0}
.portrait-options{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.portrait-options button{font-size:11px;padding:7px 10px}
.portrait-options .active{border-color:#dcc298;color:#ead3ad}
#portrait-preview>p{font-size:12px;color:#bbaac7;margin-top:12px}
@keyframes feather-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes feather-glow{0%,100%{opacity:.35}50%{opacity:.8}}
@keyframes feather-drift{0%,100%{transform:translate(0,0);opacity:.2}50%{transform:translate(5px,-9px);opacity:.7}}
@keyframes feather-defeated{from{transform:translateY(-2px);opacity:1}to{transform:translateY(5px);opacity:.83}}
@media(max-width:600px){#portrait-preview{padding:15px}#portrait-preview .boss-banner{height:210px}#portrait-open{margin-top:8px;font-size:10px;padding:5px 8px}.splash:has(#portrait-open){height:657px}}
@media(prefers-reduced-motion:reduce){.boss-portrait-wrap *{animation:none!important}}