.team-battle{max-width:680px;margin:auto}.battle-sides{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin:14px 0}.battle-side{min-width:0;--battle-color:#ed9e4b}.battle-side:nth-child(2){--battle-color:#9e8cff}.battle-side header{display:grid;gap:5px;min-height:68px}.battle-side header>span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.65}.battle-side header>strong{overflow-wrap:anywhere;font-size:16px}.battle-side header>b{font-size:12px;color:var(--battle-color)}.battle-health{height:7px;background:#ffffff16;border-radius:8px;overflow:hidden;margin:12px 0;--hp:100%}.battle-health>i{display:block;width:var(--hp);height:100%;background:var(--battle-color);transition:width .3s ease-out}.battle-roster{display:grid;gap:8px}.battle-hero{position:relative;min-width:0;text-align:center;border:1px solid #ffffff18;border-radius:16px;padding:10px 6px;background:linear-gradient(145deg,#ffffff08,#00000014);isolation:isolate}.battle-art{position:relative;height:95px;margin-bottom:6px}.battle-art img{height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 12px #0005)}.battle-hero>strong,.battle-hero>small,.battle-hero>span{display:block;line-height:1.35;overflow-wrap:anywhere}.battle-hero>strong{font-size:12px}.battle-hero>small{font-size:11px;margin:4px 0;opacity:.7}.battle-hero>span{font-size:10px;opacity:.7}.battle-spark{position:absolute;inset:0;display:grid;place-items:center;font-size:65px;color:var(--effect,#ffd06a);opacity:0;pointer-events:none}.battle-hero[data-element=ember]{--effect:#ff883b}.battle-hero[data-element=frost]{--effect:#88edff}.battle-hero[data-element=forest],.battle-hero[data-element=plague]{--effect:#9eff8e}.battle-hero[data-element=storm],.battle-hero[data-element=void]{--effect:#b998ff}.battle-side:first-child .attacking{animation:battle-strike .4s ease-in-out}.battle-side:last-child .attacking{animation:battle-strike .4s ease-in-out reverse}.battle-hero.hit{animation:battle-hit .4s ease-out}.battle-hero.skill .battle-spark{animation:battle-skill .7s ease-out}.battle-log{min-height:44px;display:grid;place-items:center;text-align:center;font-size:14px;color:var(--text,#eee)}.battle-result{padding:12px;background:#ffffff08;border:1px solid #ffffff20;border-radius:16px;text-align:center;margin:14px 0}.battle-result[hidden]{display:none}.battle-result strong,.battle-result span{display:block}.battle-result strong{font-size:18px}.battle-result span{margin-top:8px;opacity:.7;font-size:13px}.battle-result[data-outcome=win]{border-color:#70b885;color:#9ce4ad}.battle-side.defeated .battle-art{filter:grayscale(.8);opacity:.55}.team-battle>.primary{width:100%;margin-top:8px}.player-actions{flex-wrap:wrap}.player-actions button{min-width:0;flex:1 1 85px}
@keyframes battle-strike{50%{transform:translateX(12px) rotate(3deg)}}@keyframes battle-hit{35%{transform:translateY(3px);filter:brightness(1.6)}}@keyframes battle-skill{10%{opacity:1;transform:scale(.5)}70%{opacity:.8;transform:scale(1.3)}100%{opacity:0;transform:scale(1.6)}}
@media(max-width:380px){.battle-sides{gap:12px}.battle-art{height:76px}.battle-side header>strong{font-size:14px}.battle-hero{padding:8px 4px}}
@media(prefers-reduced-motion:reduce){.battle-hero,.battle-spark{animation:none!important}.battle-health>i{transition:none}}

.battle-art .character-portrait-art{height:100%;width:auto;aspect-ratio:3/4;margin:auto;background:transparent}.battle-art .character-portrait-art img{width:200%;max-width:none;height:100%;object-fit:fill}

dialog:has(.team-battle){width:calc(100% - 26px);max-width:680px;max-height:calc(100dvh - 32px)}.battle-hero{display:grid;grid-template-columns:45px minmax(0,1fr);column-gap:7px;text-align:left;padding:8px}.battle-art{grid-row:1 / span 3;width:45px;height:60px;margin:0}.battle-hero>strong{align-self:end}.battle-hero>span{align-self:start}.battle-hero>small{margin:3px 0}.battle-log{color:inherit;min-height:24px}.battle-result[data-outcome=win]{color:#18734c;background:#15804a0a}.battle-side{--battle-color:#a95810}.battle-side:nth-child(2){--battle-color:#7553b5}.battle-health{background:#7e919d25}.battle-result{border-color:var(--line)}
[data-theme=dark] .battle-result[data-outcome=win]{color:#9ce4ad}[data-theme=dark] .battle-side{--battle-color:#ed9e4b}[data-theme=dark] .battle-side:nth-child(2){--battle-color:#b09aff}
@media(max-width:380px){.battle-hero{grid-template-columns:40px minmax(0,1fr);gap:0 5px;padding:7px 5px}.battle-art{height:56px;width:40px}.battle-hero>strong{font-size:11px}.battle-hero>small,.battle-hero>span{font-size:10px}}