830e703e76
- 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>
243 lines
7.4 KiB
HTML
243 lines
7.4 KiB
HTML
{% if refractor_tier is defined and refractor_tier > 0 %}
|
|
<style>
|
|
/* Shared rules for all refractor tiers */
|
|
#fullCard {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tier-diamond {
|
|
position: absolute;
|
|
left: 600px;
|
|
top: 78.5px;
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
display: grid;
|
|
grid-template: 1fr 1fr / 1fr 1fr;
|
|
gap: 2px;
|
|
z-index: 20;
|
|
pointer-events: none;
|
|
background: rgba(0,0,0,0.75);
|
|
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);
|
|
}
|
|
|
|
.diamond-quad {
|
|
width: 19px;
|
|
height: 19px;
|
|
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;
|
|
pointer-events: none;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
}
|
|
.corner-accent.tl { top: 0; left: 0; }
|
|
.corner-accent.tr { top: 0; right: 0; }
|
|
.corner-accent.bl { bottom: 0; left: 0; }
|
|
.corner-accent.br { bottom: 0; right: 0; }
|
|
|
|
{% if refractor_tier == 1 %}
|
|
/* T1 — Base Chrome */
|
|
#header {
|
|
background: linear-gradient(135deg, rgba(185,195,210,0.25) 0%, rgba(210,218,228,0.35) 50%, rgba(185,195,210,0.25) 100%), #ffffff;
|
|
}
|
|
.border-bot {
|
|
border-bottom-color: #8e9baf;
|
|
border-bottom-width: 4px;
|
|
}
|
|
#resultHeader.border-bot {
|
|
border-bottom-width: 3px;
|
|
}
|
|
.border-right-thick {
|
|
border-right-color: #8e9baf;
|
|
}
|
|
.border-right-thin {
|
|
border-right-color: #8e9baf;
|
|
}
|
|
.vline {
|
|
border-left-color: #8e9baf;
|
|
}
|
|
|
|
{% elif refractor_tier == 2 %}
|
|
/* T2 — Refractor */
|
|
#header {
|
|
background: linear-gradient(135deg, rgba(100,155,230,0.28) 0%, rgba(155,90,220,0.18) 25%, rgba(90,200,210,0.24) 50%, rgba(185,80,170,0.16) 75%, rgba(100,155,230,0.28) 100%), #ffffff;
|
|
}
|
|
#fullCard {
|
|
box-shadow: inset 0 0 14px 3px rgba(90,143,207,0.22);
|
|
}
|
|
.border-bot {
|
|
border-bottom-color: #7a9cc4;
|
|
border-bottom-width: 4px;
|
|
}
|
|
#resultHeader.border-bot {
|
|
border-bottom-width: 4px;
|
|
}
|
|
#resultHeader .border-right-thick {
|
|
border-right-width: 6px;
|
|
}
|
|
.border-right-thick {
|
|
border-right-color: #7a9cc4;
|
|
}
|
|
.border-right-thin {
|
|
border-right-color: #7a9cc4;
|
|
border-right-width: 3px;
|
|
}
|
|
.vline {
|
|
border-left-color: #7a9cc4;
|
|
}
|
|
.blue-gradient {
|
|
background-image: linear-gradient(to right, rgba(60,110,200,1), rgba(100,55,185,0.55), rgba(60,110,200,1));
|
|
}
|
|
.red-gradient {
|
|
background-image: linear-gradient(to right, rgba(190,35,80,1), rgba(165,25,100,0.55), rgba(190,35,80,1));
|
|
}
|
|
|
|
{% elif refractor_tier == 3 %}
|
|
/* 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);
|
|
}
|
|
.border-bot {
|
|
border-bottom-color: #c9a94e;
|
|
border-bottom-width: 4px;
|
|
}
|
|
.border-right-thick {
|
|
border-right-color: #c9a94e;
|
|
}
|
|
.border-right-thin {
|
|
border-right-color: #c9a94e;
|
|
border-right-width: 3px;
|
|
}
|
|
.vline {
|
|
border-left-color: #c9a94e;
|
|
}
|
|
.blue-gradient {
|
|
background-image: linear-gradient(to right, rgba(195,160,40,1), rgba(220,185,60,0.55), rgba(195,160,40,1));
|
|
}
|
|
.red-gradient {
|
|
background-image: linear-gradient(to right, rgba(195,160,40,1), rgba(220,185,60,0.55), rgba(195,160,40,1));
|
|
}
|
|
|
|
/* T3 shimmer animation — paused for static PNG capture */
|
|
@keyframes t3-shimmer {
|
|
0% { transform: translateX(-130%); }
|
|
100% { transform: translateX(230%); }
|
|
}
|
|
#header::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: linear-gradient(
|
|
105deg,
|
|
transparent 38%,
|
|
rgba(255,240,140,0.18) 44%,
|
|
rgba(255,220,80,0.38) 50%,
|
|
rgba(255,200,60,0.30) 53%,
|
|
rgba(255,240,140,0.14) 58%,
|
|
transparent 64%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 5;
|
|
animation: t3-shimmer 2.5s ease-in-out infinite;
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
{% elif refractor_tier == 4 %}
|
|
/* T4 — Superfractor */
|
|
#header {
|
|
background: #ffffff;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
#fullCard {
|
|
box-shadow: inset 0 0 22px 6px rgba(45,212,191,0.28), inset 0 0 39px 9px rgba(200,165,48,0.15);
|
|
}
|
|
.border-bot {
|
|
border-bottom-color: #c9a94e;
|
|
border-bottom-width: 6px;
|
|
}
|
|
#resultHeader.border-bot {
|
|
border-bottom-width: 5px;
|
|
}
|
|
.border-right-thick {
|
|
border-right-color: #c9a94e;
|
|
border-right-width: 7px;
|
|
}
|
|
.border-right-thin {
|
|
border-right-color: #c9a94e;
|
|
border-right-width: 4px;
|
|
}
|
|
.vline {
|
|
border-left-color: #c9a94e;
|
|
}
|
|
.blue-gradient {
|
|
background-image: linear-gradient(to right, rgba(195,160,40,1), rgba(220,185,60,0.55), rgba(195,160,40,1));
|
|
}
|
|
.red-gradient {
|
|
background-image: linear-gradient(to right, rgba(195,160,40,1), rgba(220,185,60,0.55), rgba(195,160,40,1));
|
|
}
|
|
|
|
/* T4 prismatic header sweep — paused for static PNG capture */
|
|
@keyframes t4-prismatic-sweep {
|
|
0% { transform: translateX(0%); }
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
#header::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 200%; height: 100%;
|
|
background: linear-gradient(135deg,
|
|
transparent 2%, rgba(255,100,100,0.28) 8%, rgba(255,200,50,0.32) 14%,
|
|
rgba(100,255,150,0.30) 20%, rgba(50,190,255,0.32) 26%, rgba(140,80,255,0.28) 32%,
|
|
rgba(255,100,180,0.24) 38%, transparent 44%,
|
|
transparent 52%, rgba(255,100,100,0.28) 58%, rgba(255,200,50,0.32) 64%,
|
|
rgba(100,255,150,0.30) 70%, rgba(50,190,255,0.32) 76%, rgba(140,80,255,0.28) 82%,
|
|
rgba(255,100,180,0.24) 88%, transparent 94%
|
|
);
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
animation: t4-prismatic-sweep 6s linear infinite;
|
|
animation-play-state: paused;
|
|
}
|
|
#header > * { position: relative; z-index: 2; }
|
|
|
|
/* T4 diamond glow pulse — paused for static PNG */
|
|
@keyframes diamond-glow-pulse {
|
|
0%, 100% { box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 2px 5px rgba(0,0,0,0.5),
|
|
0 0 8px 2px rgba(107,45,142,0.6); }
|
|
50% { box-shadow: 0 0 0 1.5px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3),
|
|
0 0 14px 5px rgba(107,45,142,0.8),
|
|
0 0 24px 8px rgba(107,45,142,0.3); }
|
|
}
|
|
.tier-diamond.diamond-glow {
|
|
animation: diamond-glow-pulse 2s ease-in-out infinite;
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
{% endif %}
|
|
</style>
|
|
{% else %}
|
|
<style>
|
|
/* T0 Standard — no tier overrides */
|
|
#fullCard {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
{% endif %} |