/* Ability and perk icon: the official white glyph on a plate in the hero's role colour, as in the game.
   One component for the whole site (app/Heroes/AbilityIcon.php, assets/js/ability-icon.js).
   Sizes: .ab-inline (in a sentence), .ab-list (rows, chips), .ab-kit (the hero Kit). The plate carries its own dark
   fill and rim, so the glyph reads the same on light and dark backgrounds. */
.ab-icon{--ab-role:var(--brand,#FFC940);--ab-s:40px;position:relative;display:inline-grid;place-items:center;flex:none;box-sizing:border-box;width:var(--ab-s);height:var(--ab-s);border-radius:calc(var(--ab-s) * .26);vertical-align:middle;isolation:isolate;overflow:hidden;
  background:radial-gradient(120% 110% at 28% 12%,color-mix(in oklab,var(--ab-role) 58%,#202636) 0%,color-mix(in oklab,var(--ab-role) 26%,#0C0F16) 72%);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ab-role) 72%,transparent),inset 0 1px 0 rgba(255,255,255,.2),0 2px 8px -3px rgba(0,0,0,.55)}
.ab-icon::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 45%);pointer-events:none}
.ab-icon img{display:block;width:76%;height:76%;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.ab-role-tank{--ab-role:var(--tank,#5CB8FF)}.ab-role-damage{--ab-role:var(--dmg,#FF8A7A)}.ab-role-support{--ab-role:var(--sup,#4FD8A0)}

/* Sizes */
.ab-inline{--ab-s:1.6em;border-radius:.34em;margin:-.2em .08em 0}
.ab-inline img{width:80%;height:80%}
.ab-list{--ab-s:40px}
.ab-kit{--ab-s:60px}
@media (max-width:480px){.ab-kit{--ab-s:52px}}

/* Wide weapon pictures keep their shape, like the weapon slot in the game. */
.ab-wide{width:calc(var(--ab-s) * 1.72)}
.ab-wide img{width:86%;height:70%}

/* Types: ultimates get the gold rim, perks are round (major perks gold), passives a quieter plate. */
.ab-t-ultimate{box-shadow:inset 0 0 0 2px var(--brand,#FFC940),inset 0 0 0 4px color-mix(in oklab,var(--ab-role) 45%,transparent),0 2px 10px -3px color-mix(in oklab,var(--brand,#FFC940) 60%,transparent)}
.ab-t-minor,.ab-t-major{border-radius:50%}
.ab-t-major{box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--brand,#FFC940) 85%,transparent),inset 0 1px 0 rgba(255,255,255,.2),0 2px 8px -3px rgba(0,0,0,.55)}
.ab-t-passive{background:radial-gradient(120% 110% at 28% 12%,color-mix(in oklab,var(--ab-role) 34%,#202636) 0%,color-mix(in oklab,var(--ab-role) 14%,#0C0F16) 72%)}

/* No official icon: the hero portrait in the same frame. */
.ab-portrait{background:#1E2230}
.ab-portrait img{width:100%;height:100%;object-fit:cover;filter:none}