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

src/client/Store.ts

@@ -159,7 +159,7 @@ export class StoreModal extends BaseModal {
 
     return html`
       <div
-        class="flex flex-wrap gap-4 p-2 justify-center items-stretch content-start"
+        class="flex flex-wrap gap-4 p-8 justify-center items-stretch content-start"
       >
         ${buttons}
       </div>
@@ -179,13 +179,7 @@ export class StoreModal extends BaseModal {
       const selectedFlag = new UserSettings().getFlag() ?? "";
       buttons.push(html`
         <flag-button
-          .flag=${{
-            key: `flag:${key}`,
-            name: flag.name,
-            url: flag.url,
-            product: flag.product,
-            artist: flag.artist,
-          }}
+          .flag=${{ ...flag, key: `flag:${key}` }}
           .selected=${selectedFlag === `flag:${key}`}
           .requiresPurchase=${rel === "purchasable"}
           .onPurchase=${() => handlePurchase(flag.product!)}
@@ -203,7 +197,7 @@ export class StoreModal extends BaseModal {
 
     return html`
       <div
-        class="flex flex-wrap gap-4 p-2 justify-center items-stretch content-start"
+        class="flex flex-wrap gap-4 p-8 justify-center items-stretch content-start"
       >
         ${buttons}
       </div>