/* A single row keeps the five-slot loadout clear of mobile movement controls. */
.ability-slots {
  display: grid; grid-template-columns: repeat(var(--ability-slots, 5), minmax(0, 1fr));
}
.ability-slot { min-width: 0; }
.ability-name { min-width: 0; overflow-wrap: normal; word-break: normal; }
.ability-name > span {
  display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 901px) and (max-width: 1150px) {
  body:not([data-touch-controls=true]) .ability-hud { width: min(370px, calc(100vw - 630px)); }
}
@media (min-width: 1151px) {
  body:not([data-touch-controls=true]) .ability-hud { width: 400px; }
}
.empty-ability { opacity: .6; justify-content: center; }
.empty-ability-icon { color: #c3b083; font: 28px/1 'OSRS Plain', monospace; height: 28px; }
.empty-ability .ability-name { color: #c3b083; min-height: 15px; }
.empty-ability .ability-status { color: #b4a68c; }
.upgrade-loading { min-height: 18px; margin: 12px 0 0; color: #ffff00; font: 16px/1.3 'OSRS Plain', monospace; }
.upgrade-loading:empty { display: none; }
[data-ability=powerstab] .ability-icon,
[data-ability=sweep] .ability-icon,
[data-ability=healingblade] .ability-icon { background-image: url('/assets/ui/combat-sword.png'); }
[data-ability=sliceanddice] .ability-icon { background-image: url('/assets/ui/combat-dagger.png'); }
[data-ability=shove] .ability-icon { background-image: url('/assets/ui/skill-attack.png'); }
[data-ability=quicksmash] .ability-icon { background-image: url('/assets/ui/combat-hammer.png'); }
body[data-touch-controls=true] .ability-name { font-size: 11px; }
body[data-touch-controls=true] .empty-ability .ability-name { font-size: 11px; }
body[data-touch-controls=true] .empty-ability-icon { height: 22px; font-size: 24px; }