fix: address PR #179 review — consolidate CSS, extract inline styles, add tests

- Consolidate T3 duplicate #header rule into single block with overflow/position
- Add explicit T2 #resultHeader border-bottom-width (4px) for clarity
- Move diamond quad filled box-shadow from inline styles to .diamond-quad.filled CSS rule
- Add TestResolveTier: 6 parametrized tests covering tier roundtrip, base card, unknown variant

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

storage/templates/player_card.html

@@ -16,10 +16,10 @@
         {%- 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{% 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 }}; box-shadow: inset 0 1px 2px rgba(255,255,255,0.45), inset 0 -1px 2px rgba(0,0,0,0.35), inset 1px 0 2px rgba(255,255,255,0.15);"{% endif %}></div>
+            <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 }}; box-shadow: inset 0 1px 2px rgba(255,255,255,0.45), inset 0 -1px 2px rgba(0,0,0,0.35), inset 1px 0 2px rgba(255,255,255,0.15);"{% endif %}></div>
+            <div class="diamond-quad{% if refractor_tier >= 1 %} filled{% endif %}" {% if refractor_tier >= 1 %}style="background: {{ filled_bg }};"{% endif %}></div>
-            <div class="diamond-quad{% if refractor_tier >= 3 %} filled{% endif %}" {% if refractor_tier >= 3 %}style="background: {{ filled_bg }}; box-shadow: inset 0 1px 2px rgba(255,255,255,0.45), inset 0 -1px 2px rgba(0,0,0,0.35), inset 1px 0 2px rgba(255,255,255,0.15);"{% endif %}></div>
+            <div class="diamond-quad{% if refractor_tier >= 3 %} filled{% endif %}" {% if refractor_tier >= 3 %}style="background: {{ filled_bg }};"{% endif %}></div>
-            <div class="diamond-quad{% if refractor_tier >= 4 %} filled{% endif %}" {% if refractor_tier >= 4 %}style="background: {{ filled_bg }}; box-shadow: inset 0 1px 2px rgba(255,255,255,0.45), inset 0 -1px 2px rgba(0,0,0,0.35), inset 1px 0 2px rgba(255,255,255,0.15);"{% endif %}></div>
+            <div class="diamond-quad{% if refractor_tier >= 4 %} filled{% endif %}" {% if refractor_tier >= 4 %}style="background: {{ filled_bg }};"{% endif %}></div>
         </div>
         {% if refractor_tier == 4 %}
         <div class="corner-accent tl" style="width: 35px; height: 35px; border-top: 3px solid #c9a94e; border-left: 3px solid #c9a94e;"></div>

storage/templates/tier_style.html

@@ -27,6 +27,12 @@
         background: rgba(0,0,0,0.3);
     }
 
+    .diamond-quad.filled {
+        box-shadow: inset 0 1px 2px rgba(255,255,255,0.45),
+                    inset 0 -1px 2px rgba(0,0,0,0.35),
+                    inset 1px 0 2px rgba(255,255,255,0.15);
+    }
+
     .corner-accent {
         position: absolute;
         z-index: 6;
@@ -73,6 +79,9 @@
         border-bottom-color: #7a9cc4;
         border-bottom-width: 4px;
     }
+    #resultHeader.border-bot {
+        border-bottom-width: 4px;
+    }
     #resultHeader .border-right-thick {
         border-right-width: 6px;
     }
@@ -97,6 +106,8 @@
     /* T3 — Gold Refractor */
     #header {
         background: linear-gradient(135deg, rgba(195,155,35,0.26) 0%, rgba(235,200,70,0.2) 50%, rgba(195,155,35,0.26) 100%), #ffffff;
+        overflow: hidden;
+        position: relative;
     }
     #fullCard {
         box-shadow: inset 0 0 16px 4px rgba(200,165,48,0.22);
@@ -123,7 +134,6 @@
     }
 
     /* T3 shimmer animation — paused for static PNG capture */
-    #header { overflow: hidden; position: relative; }
     @keyframes t3-shimmer {
         0%   { transform: translateX(-130%); }
         100% { transform: translateX(230%); }

tests/test_refractor_boost.py

@@ -19,6 +19,7 @@ from app.services.refractor_boost import (
     PITCHER_PRIORITY,
     PITCHER_XCHECK_COLUMNS,
 )
+from app.routers_v2.players import resolve_refractor_tier
 
 
 # ---------------------------------------------------------------------------
@@ -911,6 +912,34 @@ class TestVariantHash:
         )
 
 
+# ---------------------------------------------------------------------------
+# Tier resolution (from variant hash)
+# ---------------------------------------------------------------------------
+
+
+class TestResolveTier:
+    """Verify resolve_refractor_tier correctly reverse-maps variant hashes to
+    tier numbers using compute_variant_hash as the source of truth.
+    """
+
+    @pytest.mark.parametrize("tier", [1, 2, 3, 4])
+    def test_known_tier_roundtrips(self, tier):
+        """resolve_refractor_tier returns the correct tier for a variant hash
+        produced by compute_variant_hash.
+        """
+        player_id = 42
+        variant = compute_variant_hash(player_id, tier)
+        assert resolve_refractor_tier(player_id, variant) == tier
+
+    def test_base_card_returns_zero(self):
+        """variant=0 (base card) always returns tier 0."""
+        assert resolve_refractor_tier(999, 0) == 0
+
+    def test_unknown_variant_returns_zero(self):
+        """An unrecognized variant hash falls back to tier 0."""
+        assert resolve_refractor_tier(1, 99999999) == 0
+
+
 # ---------------------------------------------------------------------------
 # Batter display stats
 # ---------------------------------------------------------------------------