Format the card overlay information with color to make it readable

[BudgieInWA]

This PR changes the look of the information that is overlayed on the cards with the goal of making the information readable at a glance.

The principles that I have used and how I implement them:

1. It should be obvious at a glance if a card is better or worse: each rating is colored depending on how good it is.
2. Good ratings should stand out from the bad/mediocre ratings: bad ratings are dark and good ratings are bright.
3. Each rating is visually distinct from the others: each rating has its own color so that it is easy to tell which rating you are reading (and thus, how it should be interpreted). The letters w and p are added to the win and pick rate, because otherwise they would look the same.

The tier ranking has been removed because of my personal preference, and could easily be added back in. I feel like that information is not very useful. Extra information like this and future information like synergies from Artibuff could be shown on hover.

---

I have reached the edge of my design ability, so I would love for this to improved upon in future work by someone with graphic design skills, including:

• Properly choose a nice set of colors that fit on the draft page.
• Incorporate branding from the data sources into the legend or the rating overlays themselves; they deserve it, and it adds context for the user.
• Integrate the style of the rating overlays into the style of the cards themselves, using icons and stuff. All card overlays could be made to look like native card elements, taking inspiration from the card type icon, item cost, rarity indicator and data source branding.