Merge pull request 'fix: improve diamond tier indicator visibility' (#194) from fix/diamond-indicator-styling into main

- Add silver backing div behind diamond so the X gap lines pop
- Darken unfilled quads for better contrast with filled tier color
- Make diamond grid background transparent (backing shows through gaps)
- Deduplicate shared positioning into a combined CSS rule
- Remove dead TIER_DIAMOND_COLORS dict and filled_bg from Python
  (template already computes these via Jinja)

NOTE: These are volume-mounted template files, NOT baked into the
Docker image. After merging, manually deploy to each server:

  scp storage/templates/tier_style.html <host>:<container-data>/storage/templates/
  scp storage/templates/player_card.html <host>:<container-data>/storage/templates/

Hosts:
  Dev:  ssh pd-database → /home/cal/container-data/dev-pd-database/
  Prod: ssh akamai → /root/container-data/paper-dynasty/

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/routers_v2/players.py

@@ -143,14 +143,6 @@ def normalize_franchise(franchise: str) -> str:
     return FRANCHISE_NORMALIZE.get(titled, titled)
 
 
-TIER_DIAMOND_COLORS = {
-    1: "linear-gradient(135deg, #40b040 0%, #1a6b1a 50%, #145214 100%)",
-    2: "linear-gradient(135deg, #50a0e8 0%, #2070b0 50%, #185488 100%)",
-    3: "linear-gradient(135deg, #e85050 0%, #a82020 50%, #7e1818 100%)",
-    4: "linear-gradient(135deg, #a060d0 0%, #6b2d8e 50%, #50226a 100%)",
-}
-
-
 def resolve_refractor_tier(player_id: int, variant: int) -> int:
     """Determine the refractor tier (0-4) from a player's variant hash.
 
@@ -817,7 +809,6 @@ async def get_animated_card(
         else:
             card_data["cardset_name"] = this_player.description
         card_data["refractor_tier"] = refractor_tier
-        card_data["filled_bg"] = TIER_DIAMOND_COLORS.get(refractor_tier, "")
         card_data["request"] = request
         html_response = templates.TemplateResponse("player_card.html", card_data)
 
@@ -854,7 +845,6 @@ async def get_animated_card(
         else:
             card_data["cardset_name"] = this_player.description
         card_data["refractor_tier"] = refractor_tier
-        card_data["filled_bg"] = TIER_DIAMOND_COLORS.get(refractor_tier, "")
         card_data["request"] = request
         html_response = templates.TemplateResponse("player_card.html", card_data)
 
@@ -954,9 +944,6 @@ async def get_batter_card(
         card_data["refractor_tier"] = (
             tier if tier is not None else resolve_refractor_tier(player_id, variant)
         )
-        card_data["filled_bg"] = TIER_DIAMOND_COLORS.get(
-            card_data["refractor_tier"], ""
-        )
         card_data["request"] = request
         html_response = templates.TemplateResponse("player_card.html", card_data)
 
@@ -997,9 +984,6 @@ async def get_batter_card(
         card_data["refractor_tier"] = (
             tier if tier is not None else resolve_refractor_tier(player_id, variant)
         )
-        card_data["filled_bg"] = TIER_DIAMOND_COLORS.get(
-            card_data["refractor_tier"], ""
-        )
         card_data["request"] = request
         html_response = templates.TemplateResponse("player_card.html", card_data)
 

storage/templates/player_card.html

@@ -15,6 +15,7 @@
         } -%}
         {%- set dc = diamond_colors[refractor_tier] -%}
         {%- set filled_bg = 'linear-gradient(135deg, ' ~ dc.highlight ~ ' 0%, ' ~ dc.color ~ ' 50%, ' ~ dc.color ~ ' 100%)' -%}
+        <div class="tier-diamond-backing"></div>
         <div class="tier-diamond{% if refractor_tier == 4 %} diamond-glow{% endif %}">
             <div class="diamond-quad{% if refractor_tier >= 2 %} filled{% endif %}" {% if refractor_tier >= 2 %}style="background: {{ filled_bg }};"{% endif %}></div>
             <div class="diamond-quad{% if refractor_tier >= 1 %} filled{% endif %}" {% if refractor_tier >= 1 %}style="background: {{ filled_bg }};"{% endif %}></div>

storage/templates/tier_style.html

@@ -6,17 +6,30 @@
 </style>
 {% if refractor_tier is defined and refractor_tier > 0 %}
 <style>
+    .tier-diamond-backing,
     .tier-diamond {
         position: absolute;
         left: 597px;
         top: 78.5px;
         transform: translate(-50%, -50%) rotate(45deg);
+        border-radius: 2px;
+        pointer-events: none;
+    }
+
+    .tier-diamond-backing {
+        width: 44px;
+        height: 44px;
+        background: rgba(200,210,220,0.9);
+        z-index: 19;
+    }
+
+    .tier-diamond {
         display: grid;
         grid-template: 1fr 1fr / 1fr 1fr;
         gap: 2px;
         z-index: 20;
         pointer-events: none;
-        background: rgba(0,0,0,0.75);
+        background: transparent;
         border-radius: 2px;
         box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 2px 5px rgba(0,0,0,0.5);
     }
@@ -24,7 +37,7 @@
     .diamond-quad {
         width: 19px;
         height: 19px;
-        background: rgba(0,0,0,0.3);
+        background: rgba(0,0,0,0.55);
     }
 
     .diamond-quad.filled {