/* Four distinct states, readable labels and no change to the control hit areas. */
#power-bar button[data-skill-phase]{position:relative;height:54px;min-height:54px;overflow:visible;border:2px solid #638c9f;background:#14364c;box-shadow:0 3px 8px #0005;color:#f1fbff;filter:none;opacity:1;outline:0;outline-offset:0;transition:background-color .16s,border-color .16s,box-shadow .16s}
#power-bar button[data-skill-phase] .mini,#power-bar button[data-skill-phase] .new-portrait{left:2px;top:1px;width:23px;height:22px;max-height:22px;object-fit:contain}
#power-bar button[data-skill-phase] .skill-symbol58,#power-bar button[data-skill-phase].mimic-card140 .skill-symbol58{left:22px;right:auto;top:3px;width:17px;height:17px;padding:1px;border-radius:4px;background:#071e31}
#power-bar button[data-skill-phase] .skill-symbol58 svg,#power-bar button[data-skill-phase].mimic-card140 .skill-symbol58 svg{width:15px;height:15px}
#power-bar button[data-skill-phase]>.skill-meta381{position:static;padding:0;width:100%;min-width:0}
#power-bar button[data-skill-phase] .skill-role381{position:absolute;top:4px;right:4px;left:auto;font-size:9px;line-height:12px;color:#e3f1f8;font-weight:800}
#power-bar button[data-skill-phase] .skill-name381{position:absolute;top:22px;left:3px;right:3px;display:block;font-size:9px;line-height:11px;font-weight:800;text-align:center;white-space:nowrap;color:#fff;overflow:hidden;text-overflow:ellipsis}
#power-bar button[data-skill-phase] .power-charge,#power-bar button[data-skill-phase].mimic-card140 .power-charge{position:absolute;top:auto;bottom:5px;left:2px;right:2px;display:block;max-height:none;font-size:9px!important;line-height:11px;text-align:center;white-space:nowrap;font-style:normal;font-weight:900;color:#fff0a5}
#power-bar button[data-skill-phase=armed]{border-color:#ffb78b;background:#753d31;box-shadow:0 0 0 1px #ffb78b60;animation:skillArmed381 1.8s ease-in-out infinite}
#power-bar button[data-skill-phase=active]{border-color:#a4fff0;background:#125a60;box-shadow:0 0 0 1px #a4fff070,0 0 12px #74efdc60}
#power-bar button[data-skill-phase=active] .power-charge{color:#dbfff5}
#power-bar button[data-skill-phase=cooling]{border-color:#607482;background:#223442;box-shadow:0 2px 5px #0003}
#power-bar button[data-skill-phase=cooling] .power-charge{color:#d5e1e9}
#power-bar button[data-skill-phase=cooling] .mini,#power-bar button[data-skill-phase=cooling] .new-portrait,#power-bar button[data-skill-phase=cooling] .skill-symbol58{filter:grayscale(.85);opacity:.65}
#power-bar button[data-skill-phase=learning],#power-bar button[data-skill-phase=waiting],#power-bar button[data-skill-phase=stunned]{border-style:dashed;background:#243849;box-shadow:none;animation:none}
#power-bar button[data-skill-phase=stunned] .power-charge{color:#ffd7ce}
#power-bar button[data-skill-phase] .cooldown-track58{position:absolute;display:block;inset:auto 4px 0;height:3px;width:auto;border-radius:3px;overflow:hidden;background:#051c2c;z-index:0}
#power-bar button[data-skill-phase] .cooldown-track58::after{content:'';display:block;width:100%;height:100%;background:#a0e5ef;transform:scaleX(var(--recovery381,1));transform-origin:left center}
#power-bar button[data-skill-phase]:not([data-skill-phase=cooling]) .cooldown-track58{display:none}
#power-bar button[data-skill-phase]:focus-visible{outline:3px solid white;outline-offset:3px}
#power-bar #power-count{display:block;font-size:9px!important;line-height:12px}
#power-bar #skill-conditions381{position:absolute;bottom:calc(100% + 5px);left:0;right:0;display:block;pointer-events:none;padding:5px 7px;border:1px solid #ffc19270;border-radius:7px;background:#10283bed;color:#ffddbd;box-shadow:0 2px 7px #0003;font-size:10px;line-height:1.4;font-weight:800}
#power-bar #skill-conditions381>span{display:block;font-size:10px;line-height:1.4}
#power-bar #skill-conditions381[hidden]{display:none}
#power-bar .skill-burst381{position:absolute;inset:-2px;border:2px solid #b8fff3;border-radius:inherit;opacity:0;pointer-events:none}
#power-bar button.skill-fire381 .skill-burst381{animation:skillBurst381 .55s ease-out both}
#power-bar button[data-skill-phase].skill-tap381{animation:skillTap381 .22s ease-out}
.skill-sr381{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0!important}
@keyframes skillArmed381{0%,100%{box-shadow:0 0 0 1px #ffb78b55,0 0 5px #ffb78b20}50%{box-shadow:0 0 0 2px #ffb78b95,0 0 10px #ffb78b55}}
@keyframes skillBurst381{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.22,1.3)}}
@keyframes skillTap381{0%,100%{transform:scale(1)}45%{transform:scale(.94)}}
@media(max-width:360px){#power-bar button[data-skill-phase] .skill-name381,#power-bar button[data-skill-phase] .power-charge{font-size:8px!important}#power-bar button[data-skill-phase] .skill-role381{font-size:8px}}
@media(prefers-reduced-motion:reduce){#power-bar button[data-skill-phase],#power-bar button.skill-fire381 .skill-burst381,#power-bar button[data-skill-phase].skill-tap381{animation:none;transition:none}#power-bar button.skill-fire381{outline:2px solid #b8fff3;outline-offset:2px}}

@media(max-width:340px){#power-bar{width:142px}}
@media(max-width:360px){
 #power-bar button[data-skill-phase] .mini,#power-bar button[data-skill-phase] .new-portrait{height:17px;max-height:17px}
 #power-bar button[data-skill-phase] .skill-role381{top:2px;line-height:10px}
 #power-bar button[data-skill-phase] .skill-symbol58,#power-bar button[data-skill-phase].mimic-card140 .skill-symbol58{top:1px;height:15px}
 #power-bar button[data-skill-phase] .skill-symbol58 svg{height:13px}
 #power-bar button[data-skill-phase] .skill-name381{top:18px;line-height:9px;max-height:18px;white-space:normal;text-overflow:clip}
 #power-bar button[data-skill-phase] .power-charge,#power-bar button[data-skill-phase].mimic-card140 .power-charge{bottom:3px;line-height:10px}
}

#power-bar button[data-skill-phase=ready]{border-color:#ffb56f;box-shadow:0 0 0 1px #ffb56f33,0 3px 8px #0005}