/* Highlight the active battle turn and the selected character profile. */
.team-roster button{position:relative;isolation:isolate}
.team-roster button::before{content:"";display:block;position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;padding:2px;opacity:0;background:linear-gradient(110deg,#a77aff,#66e8ff,#baff82,#ffc16f,#ff70c5,#a77aff,#66e8ff);background-size:300% 100%;background-position:0 50%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .2s ease}
.team-roster button:is(.is-profile-selected,[aria-pressed="true"],:focus-visible)::before,.team-roster:not(.has-profile-selection) button.is-current-turn::before{opacity:1}
.team-roster button:is(.is-profile-selected,[aria-pressed="true"],:focus-visible),.team-roster:not(.has-profile-selection) button.is-current-turn{box-shadow:0 0 12px #a77aff65,0 0 20px #66e8ff26}
@media(prefers-reduced-motion:no-preference){html.motion-enabled .team-roster button:is(.is-profile-selected,[aria-pressed="true"],:focus-visible)::before,html.motion-enabled .team-roster:not(.has-profile-selection) button.is-current-turn::before{animation:roster-rainbow-sweep 2.2s linear infinite}@keyframes roster-rainbow-sweep{to{background-position:300% 50%}}}
@media(prefers-reduced-motion:reduce){.team-roster button::before{transition:none}}