/* Icons: white silhouettes (CSS-masked SVGs from game-icons.net) on the ability's phase colour. */
.svgi { display: block; width: 100%; height: 100%; background: #fff; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }

/* Ability bar: the icon on a radial gradient in the phase colour, with an inner glow. */
.slot { background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--ph) 55%, #10141d) 0%, color-mix(in srgb, var(--ph) 18%, #0b0e15) 58%, #0a0d13 100%); box-shadow: inset 0 0 14px color-mix(in srgb, var(--ph) 35%, transparent), 0 8px 20px rgba(0,0,0,.4); }
.slot .ic { width: 34px; height: 34px; font-size: 22px; display: grid; place-items: center; filter: drop-shadow(0 0 6px var(--ph)) drop-shadow(0 1px 1px rgba(0,0,0,.8)); color: #fff; }
.slot .nm { text-shadow: 0 1px 2px #000; }
.slot.ult { border-color: #d9b45a; box-shadow: inset 0 0 0 1px rgba(255,214,120,.5), inset 0 0 14px color-mix(in srgb, var(--ph) 35%, transparent), 0 8px 20px rgba(0,0,0,.4); }
.slot.cd .ic, .slot:disabled:not(.chosen) .ic { filter: grayscale(.85) brightness(.7); }
.slot.cd, .slot:disabled:not(.chosen):not(.charged) { background: radial-gradient(circle at 50% 38%, #283040, #0b0e15 70%); }
.cat { display: inline-flex; align-items: center; gap: 5px; }
.cat .ci { display: inline-block; width: 15px; height: 15px; color: var(--ph); }
.cat .ci .svgi { background: var(--ph); }
.cat .ci:empty { display: none; }
.frame .pt { width: 26px; height: 26px; display: grid; place-items: center; }
.frame .pt .svgi { background: #dff6ff; }
#kit .portrait .svgi { width: 30px; height: 30px; background: #fff; }
#kit .abil .key { padding: 3px; }
#kit .abil .key .svgi { background: var(--ph); }
.ch .ic { width: 34px; height: 34px; display: block; }
.ch .ic .svgi { background: #dff6ff; }
.ch .ab i { display: inline-flex; align-items: center; gap: 3px; }
.ch .ab i .svgi { width: 11px; height: 11px; background: var(--ph); display: inline-block; }
.credit { color: var(--muted); font-size: 11px; text-align: center; margin: 12px 0 0; }
.credit a { color: var(--fg); }
@media (max-width: 640px) { .slot .ic { width: 28px; height: 28px; } }