.skill-control { --skill-icon-size: 26px; --cooldown-ring-size: 52px; }
.skill-control > svg, .skill-control > img, .skill-control > i,
.touch-actions button > svg, .active-skills-desktop button > svg,
.coop-actions button > svg, .coop-role-card span > svg,
.skill-card .catalog-icon > svg, .character-skill-tabs button > svg {
 width: 26px !important; height: 26px !important; min-width: 26px; min-height: 26px;
 max-width: 26px !important; max-height: 26px !important; object-fit: contain; flex: 0 0 26px;
}
.skill-control > b { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; font-size: 23px; }
.skill-control.is-cooling { opacity: .88 !important; }
.skill-control.is-cooling > small { visibility: hidden; }
.skill-control.is-cooling::after {
 content: ''; pointer-events: none; position: absolute; left: 50%; top: 50%;
 width: calc(100% - 4px); height: calc(100% - 4px); transform: translate(-50%,-50%);
 border-radius: 50%; z-index: 3;
 background: conic-gradient(from 0deg, #b5e9fa calc(var(--cooldown-progress) * 1turn), #accbd530 0);
 -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
 mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
.skill-control.cooldown-ready-flash { animation: skill-ready-gently .7s ease-out 1; }
@keyframes skill-ready-gently {
 0%,100% { box-shadow: 0 0 0 0 transparent; }
 35% { box-shadow: 0 0 12px 3px #c0efff88, inset 0 0 8px #bdeeff40; }
}
.cooldown-announcer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media(prefers-reduced-motion: reduce) { .skill-control.cooldown-ready-flash { animation-duration: .35s; } }