Add Rarity to cosmetic items (#3587)

## Description:


https://github.com/user-attachments/assets/f2216dec-72aa-497a-89cc-169c2a40021e


* Fortnite-style rarity system for cosmetics: New CosmeticContainer
component applies tier-based visual styling (gradient backgrounds,
glowing borders, hover effects) to flag and pattern cards across 5
rarity tiers: Common, Uncommon, Rare, Epic, and Legendary
* Legendary hover effects: Scale-up animation, pulsing orange glow,
shimmer sweep, rotating border sweep, corner sparkles, and screen
dimming backdrop
* Epic hover effects: Purple shimmer sweep glint on hover
* Purchase button overhaul: Green ember particles on container hover
(non-common only), 40-particle burst stream on button hover, pulsating
green glow, shimmer streak animation, and loading spinner on click
* Clickable cosmetic cards: Clicking anywhere on a purchasable card (not
just the purchase button) triggers the purchase flow
* Refactored components: ArtistInfo renamed to CosmeticInfo (now shows
rarity and color palette in tooltip),
* Forward-compatible rarity schema: rarity field uses .or(z.string()) so
unknown backend values won't break the client


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan

resources/lang/en.json

@@ -920,7 +920,13 @@
     "selected": "selected"
   },
   "cosmetics": {
-    "artist_label": "Artist:"
+    "artist_label": "Artist:",
+    "color_label": "Color:",
+    "common": "Common",
+    "uncommon": "Uncommon",
+    "rare": "Rare",
+    "epic": "Epic",
+    "legendary": "Legendary"
   },
   "flag_input": {
     "title": "Select Flag",