.skill-art{display:inline-block;flex:none;width:56px;height:56px;border-radius:13px;border:2px solid #f7d67c;background-color:#047c9e;background-repeat:no-repeat;background-size:200% 200%;box-shadow:inset 0 0 0 1px #fff6c9,0 2px 4px #052d4260;vertical-align:middle;pointer-events:none}
.skill-art[data-skill-character]{background-size:200% 200%;background-repeat:no-repeat}
.skill-art[data-skill-character="mira"],.skill-art[data-skill-character="vera"],.skill-art[data-skill-character="bao"],.skill-art[data-skill-character="dax"]{background-image:url('../assets/skill-art-v1/active-1.webp')}
.skill-art[data-skill-character="trumbo"],.skill-art[data-skill-character="lumi"],.skill-art[data-skill-character="zed"],.skill-art[data-skill-character="nico"]{background-image:url('../assets/skill-art-v1/active-2.webp')}
.skill-art[data-skill-character="fenn"],.skill-art[data-skill-character="rocco"],.skill-art[data-skill-character="tavi"],.skill-art[data-skill-character="mochi"]{background-image:url('../assets/skill-art-v1/active-3.webp')}
.skill-art[data-skill-character="mira"],.skill-art[data-skill-character="trumbo"],.skill-art[data-skill-character="fenn"]{background-position:0 0}
.skill-art[data-skill-character="vera"],.skill-art[data-skill-character="lumi"],.skill-art[data-skill-character="rocco"]{background-position:100% 0}
.skill-art[data-skill-character="bao"],.skill-art[data-skill-character="zed"],.skill-art[data-skill-character="tavi"]{background-position:0 100%}
.skill-art[data-skill-character="dax"],.skill-art[data-skill-character="nico"],.skill-art[data-skill-character="mochi"]{background-position:100% 100%}
#skill-loadout{align-items:center;gap:9px}#skill-loadout>.skill-art{width:54px;height:54px}
.skill-button-art{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:fill;border:0;border-radius:0;box-shadow:none;pointer-events:none;user-select:none}
[data-control="skill"].has-skill-button-art{isolation:isolate;overflow:visible;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
/* Hide the old decoration, but let the real cooldown mask occupy ::after. */
[data-control="skill"].has-skill-button-art::before,[data-control="skill"].has-skill-button-art:not([data-skill-cooldown])::after{display:none!important}
[data-control="skill"].has-skill-button-art>.skill-orb,[data-control="skill"].has-skill-button-art>[data-icon]{visibility:hidden}
[data-control="skill"].has-skill-button-art>.skill-button-art{z-index:0;opacity:1!important;filter:none!important}
[data-control="skill"].has-skill-button-art:disabled{opacity:1!important}
[data-control="skill"].has-skill-button-art #touch-skill-name{position:absolute!important;inset:auto 15% 6% 6%!important;max-width:none!important;padding:0!important;background:none!important;line-height:1.05!important;color:#fff7d8;z-index:2;text-align:center;text-shadow:0 1px 2px #002c45,1px 0 #002c45,-1px 0 #002c45}
[data-control="skill"].has-skill-button-art #skill-charges{position:absolute!important;inset:6% 4% auto auto!important;z-index:3;border:1px solid #ffda7d;border-radius:5px;padding:0 4px;background:#06455ee8;color:#fff6d6;font:900 11px/17px 'Nunito Sans';text-shadow:0 1px #002f42}
.core-loadout .core-loadout-skill>.skill-art{width:44px;height:44px;grid-row:span 2}
.core-hero-info .skill-art,.kit-detail .skill-art{float:left;width:96px;height:96px;margin:0 12px 8px 0}
.hud-settings-open{font-size:22px;line-height:1}
@media(orientation:landscape) and (max-height:600px){#skill-loadout>.skill-art{width:32px;height:32px;border-radius:8px}.core-loadout .core-loadout-skill>.skill-art{width:32px;height:32px}.kit-detail .skill-art{width:70px;height:70px}}

body.is-playing:not(.has-battle-hud-v1) [data-control="skill"].has-skill-button-art{width:122px!important;height:46px!important;min-height:44px!important;aspect-ratio:8/3}
body.is-playing:not(.has-battle-hud-v1) [data-control="skill"].has-skill-button-art #touch-skill-name{font-size:10px!important}