Replace red background of cannotRoll perks with dotted circle outline

[FlaminSarge]

Fixes #10550

This is more readable than the slightly different shades of red used for selected/unselected cannotRoll perks.

Alternatives considered: small faExclamationCircle in the bottom right/left of the icon. This ended up clashing with the thumbs up icon if on the bottom right, and the enhancement arrow if on the bottom left.

Screenshots:

Updated screenshots for later changes in this PR:
Realigned dashes so gaps are in cardinal directions:

Added dashed circle to tooltip text:

[FlaminSarge]

Adjusted dashoffset:

[bhollis]

Nice. The one bit that I'm not entirely happy with is that this doesn't really communicate "can't roll" to me - it seems more like "not unlocked" or something like that. I'm not sure what the solution is. The perk is there, it's just no longer unlockable for new rolls...

[FlaminSarge]

Nice. The one bit that I'm not entirely happy with is that this doesn't really communicate "can't roll" to me - it seems more like "not unlocked" or something like that. I'm not sure what the solution is. The perk is there, it's just no longer unlockable for new rolls...

Thoughts on this? It's a little bit awkward but directly ties the concept of the dashed icon to the tooltip warning about cannotRoll.

Old preview:

[bhollis]

I'm not sure that's quite it either. Maybe the dashed border is fine on its own.

[FlaminSarge]

I'm not sure that's quite it either. Maybe the dashed border is fine on its own.

One last iteration, and I think this one looks slick. I'm not sure if this is the right way to implement it (with an empty span), though.

[bhollis]

Yeah that's quite nice.