/* ===== SHARED CARD STRUCTURE ===== */
.card-wrapper {
position: relative;
width: 200px;
aspect-ratio: 2/3;
overflow: visible;
}
.card-face {
width: 100%; height: 100%;
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(180deg, #0d1117 0%, #080b12 40%, #060810 100%);
position: relative;
border-radius: 8px;
}
.card-inner-frame {
position: absolute; inset: 6px;
border-radius: 6px;
box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
pointer-events: none; z-index: 2;
}
.card-side-accent-left, .card-side-accent-right {
position: absolute; top: 15%; bottom: 15%; width: 2px; z-index: 3; pointer-events: none;
}
.card-side-accent-left { left: 3px; }
.card-side-accent-right { right: 3px; }
.card-corner-dot {
position: absolute; width: 10px; height: 10px; border-radius: 50%; z-index: 3; pointer-events: none;
}
.card-corner-dot.bl { bottom: 8px; left: 8px; }
.card-corner-dot.br { bottom: 8px; right: 8px; }
.card-art-container {
position: relative;
width: calc(100% - 24px);
aspect-ratio: 280/340;
margin-top: -20px; margin-bottom: 10px;
flex-shrink: 0; z-index: 5;
}
.card-art {
width: 100%; height: 100%;
border-radius: 50%; overflow: hidden;
position: relative;
background: linear-gradient(135deg, #0a0e18, #141a28);
}
.card-art img { width: 100%; height: 100%; object-fit: cover; }
.card-art-rivet {
position: absolute; width: 10px; height: 10px; border-radius: 50%; z-index: 4;
}
.card-art-rivet.top { top: -5px; left: 50%; transform: translateX(-50%); }
.card-art-rivet.bottom { bottom: -5px; left: 50%; transform: translateX(-50%); }
.card-art-rivet.left { left: -5px; top: 50%; transform: translateY(-50%); }
.card-art-rivet.right { right: -5px; top: 50%; transform: translateY(-50%); }
.card-art-corner {
position: absolute; width: 7px; height: 7px; transform: rotate(45deg); z-index: 4;
}
.card-art-corner.tl { top: 8%; left: 8%; }
.card-art-corner.tr { top: 8%; right: 8%; }
.card-art-corner.bl { bottom: 8%; left: 8%; }
.card-art-corner.br { bottom: 8%; right: 8%; }
.card-name-banner {
position: absolute; left: 50%; transform: translateX(-50%); top: 50%; width: 118%;
padding: 12px 22px; text-align: center;
display: flex; align-items: center; justify-content: center; gap: 10px;
clip-path: polygon(4% 0%, 96% 0%, 100% 50%, 96% 100%, 4% 100%, 0% 50%);
z-index: 20;
}
.card-name-banner::before, .card-name-banner::after {
content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.card-name {
font-family: 'Cinzel', serif; font-weight: 700; font-size: 11px;
text-transform: uppercase; letter-spacing: 1.5px; flex: 1;
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.rarity-gem {
position: absolute; left: 50%; transform: translateX(-50%);
top: calc(67% - 13px); width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center; z-index: 21;
}
.rarity-gem::before {
content: ''; position: absolute; inset: -6px; border-radius: 50%; filter: blur(6px); z-index: -1;
}
.rarity-gem-frame {
position: absolute; inset: 0;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.rarity-gem-trim {
position: absolute; inset: 3px;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.rarity-gem-inner {
width: calc(100% - 10px); height: calc(100% - 10px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
position: relative; z-index: 1;
}
.rarity-gem-inner::after {
content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.05) 100%);
clip-path: polygon(0% 0%, 100% 0%, 50% 100%); z-index: 1;
}
.card-lore-panel {
width: calc(100% - 28px);
border-radius: 4px; padding: 13px 14px; margin-bottom: 16px;
flex: 1; display: flex; align-items: center; justify-content: center;
min-height: 0; position: relative;
box-shadow: inset 0 2px 8px rgba(0,0,0,0.4); z-index: 1;
}
.card-lore-panel::before {
content: ''; position: absolute; top: 4px; left: 4px; width: 6px; height: 6px;
}
.card-lore-panel::after {
content: ''; position: absolute; bottom: 4px; right: 4px; width: 6px; height: 6px;
}
.card-lore {
font-family: 'Crimson Text', serif; font-size: 10px; color: #c8cdd8;
font-style: italic; line-height: 1.4; text-align: center;
}
.card-type-bar {
position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
width: 55%; height: 26px; z-index: 10;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.card-type-bar::before {
content: ''; position: absolute; inset: 0;
clip-path: polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
}
.card-type-bar::after {
content: ''; position: absolute; inset: 2px;
clip-path: polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
}
.card-type-label {
position: relative; z-index: 1;
font-family: 'Cinzel', serif; font-size: 7px; font-weight: 400;
text-transform: uppercase; letter-spacing: 3px;
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
}
.stat-badge {
position: absolute; width: 46px; height: 52px;
display: flex; align-items: center; justify-content: center;
z-index: 10; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.stat-badge::before {
content: ''; position: absolute; inset: 0;
clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.stat-badge::after {
content: ''; position: absolute; inset: 3px;
clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.stat-badge .stat-value {
font-family: 'Cinzel', serif; font-weight: 400; font-size: 13px;
text-shadow: 0 2px 4px rgba(0,0,0,0.7); position: relative; z-index: 2;
}
.stat-badge.atk { bottom: -12px; left: -10px; }
.stat-badge.def { bottom: -12px; right: -10px; }
.mana-badge {
position: absolute; width: 42px; height: 42px;
top: -10px; left: -10px;
display: flex; align-items: center; justify-content: center; z-index: 10;
}
.mana-badge::before {
content: ''; position: absolute; inset: 0;
clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.mana-badge::after {
content: ''; position: absolute; inset: 3px;
clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.mana-badge .mana-value {
font-family: 'Cinzel', serif; font-weight: 400; font-size: 15px;
position: relative; z-index: 2;
}
/* ============================================================
ORIGINAL (GOLD/LEGENDARY) PALETTE
============================================================ */
@keyframes legendary-glow {
0%, 100% { box-shadow: 0 0 10px rgba(212,175,55,0.25), 0 0 25px rgba(212,175,55,0.1); }
50% { box-shadow: 0 0 16px rgba(212,175,55,0.4), 0 0 40px rgba(212,175,55,0.18); }
}
.original .card-border {
position: absolute; inset: 0; border: 3px solid #d4af37;
border-radius: 10px; pointer-events: none; z-index: 4;
animation: legendary-glow 3s ease-in-out infinite;
}
.original .card-inner-frame { border: 1px solid rgba(212,175,55,0.2); }
.original .card-side-accent-left,
.original .card-side-accent-right {
background: linear-gradient(180deg, transparent 0%, rgba(212,175,55,0.15) 20%, rgba(212,175,55,0.3) 50%, rgba(212,175,55,0.15) 80%, transparent 100%);
}
.original .card-corner-dot { background: radial-gradient(circle, rgba(212,175,55,0.6) 0%, transparent 70%); }
.original .card-art-container .card-art-frame {
position: absolute; inset: 0; border: 3px solid #d4af37; border-radius: 50%;
z-index: 2; pointer-events: none;
box-shadow: inset 0 0 15px rgba(0,0,0,0.6), 0 0 14px rgba(212,175,55,0.3), 0 0 30px rgba(212,175,55,0.1);
}
.original .card-art-rivet {
background: radial-gradient(circle at 35% 35%, #f5dfc8, #d4af37);
box-shadow: 0 0 5px rgba(212,175,55,0.6), 0 2px 3px rgba(0,0,0,0.5);
}
.original .card-art-corner { background: rgba(212,175,55,0.5); }
.original .card-name-banner {
background: linear-gradient(180deg, rgb(200,192,176) 0%, rgb(160,152,136) 10%, rgb(120,112,96) 30%, rgb(74,68,56) 50%, rgb(120,112,96) 70%, rgb(160,152,136) 90%, rgb(200,192,176) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(255,255,255,0.1), 0 3px 8px rgba(0,0,0,0.6);
}
.original .card-name-banner::before, .original .card-name-banner::after {
background: radial-gradient(circle at 35% 35%, #e0d8d0, #a09888);
}
.original .card-name { color: #fdf8e0; }
.original .rarity-gem::before { background: radial-gradient(circle, rgba(212,175,55,0.4) 0%, transparent 70%); }
.original .rarity-gem-frame { background: linear-gradient(180deg, #5a4a28 0%, #3a2a14 40%, #2a1c0a 60%, #4a3a20 100%); }
.original .rarity-gem-trim { background: linear-gradient(180deg, #d4af37 0%, #a8894a 50%, #d4af37 100%); }
.original .rarity-gem-inner { background: linear-gradient(180deg, #f0c848 0%, #d4a020 35%, #a07810 65%, #d4b030 100%); }
.original .card-lore-panel {
background: linear-gradient(180deg, rgb(100,92,78) 0%, rgb(55,48,38) 50%, rgb(100,92,78) 100%);
border: 2px solid rgba(160,144,128,0.5);
}
.original .card-lore-panel::before { border-top: 1px solid rgba(212,175,55,0.4); border-left: 1px solid rgba(212,175,55,0.4); }
.original .card-lore-panel::after { border-bottom: 1px solid rgba(212,175,55,0.4); border-right: 1px solid rgba(212,175,55,0.4); }
.original .card-type-bar::before { background: linear-gradient(180deg, #d4af37 0%, #a8894a 50%, #d4af37 100%); }
.original .card-type-bar::after { background: linear-gradient(180deg, #2a2520 0%, #1a1510 40%, #0e0a08 60%, #2a2520 100%); }
.original .card-type-label { color: #f5e6a3; }
.original .stat-badge::before { background: linear-gradient(180deg, #d4af37 0%, #a8894a 50%, #7d6530 100%); }
.original .stat-badge.atk::after { background: linear-gradient(180deg, #343c58 0%, #1c2240 50%, #111830 100%); }
.original .stat-badge.def::after { background: linear-gradient(180deg, #5a2d2d 0%, #3a1a1a 50%, #261010 100%); }
.original .stat-badge .stat-value { color: #f0e4c4; }
.original .mana-badge { filter: drop-shadow(0 2px 6px rgba(60,100,200,0.4)); }
.original .mana-badge::before { background: linear-gradient(180deg, #d4af37 0%, #a8894a 50%, #7d6530 100%); }
.original .mana-badge::after {
background: linear-gradient(180deg, #1a2244 0%, #0e1530 50%, #0a0e20 100%);
box-shadow: inset 0 0 8px rgba(60,100,200,0.3);
}
.original .mana-badge .mana-value {
color: #c8d8ff;
text-shadow: 0 0 8px rgba(100,140,255,0.4), 0 2px 4px rgba(0,0,0,0.7);
}
/* ============================================================
COMMON (IRON) PALETTE
============================================================ */
.common .card-border {
position: absolute; inset: 0; border: 3px solid #8a8a8a;
border-radius: 10px; pointer-events: none; z-index: 4;
}
.common .card-inner-frame { border: 1px solid rgba(140,140,140,0.2); }
.common .card-side-accent-left,
.common .card-side-accent-right {
background: linear-gradient(180deg, transparent 0%, rgba(140,140,140,0.15) 20%, rgba(140,140,140,0.2) 50%, rgba(140,140,140,0.15) 80%, transparent 100%);
}
.common .card-corner-dot { background: radial-gradient(circle, rgba(140,140,140,0.4) 0%, transparent 70%); }
.common .card-art-container .card-art-frame {
position: absolute; inset: 0; border: 3px solid #8a8a8a; border-radius: 50%;
z-index: 2; pointer-events: none;
box-shadow: inset 0 0 15px rgba(0,0,0,0.6), 0 0 8px rgba(140,140,140,0.1);
}
.common .card-art-rivet { display: none; }
.common .card-art-corner { display: none; }
.common .rarity-gem { display: none; }
.common .card-name-banner {
background: linear-gradient(180deg, rgb(100,98,94) 0%, rgb(72,70,66) 50%, rgb(100,98,94) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 5px rgba(0,0,0,0.5);
clip-path: none;
border-radius: 2px;
width: 108%;
}
.common .card-name-banner::before, .common .card-name-banner::after {
display: none;
}
.common .card-name { color: #dcd8cc; }
.common .card-lore-panel {
background: linear-gradient(180deg, rgb(100,92,78) 0%, rgb(55,48,38) 50%, rgb(100,92,78) 100%);
border: 2px solid rgba(160,144,128,0.5);
}
.common .card-lore-panel::before { border-top: 1px solid rgba(212,175,55,0.4); border-left: 1px solid rgba(212,175,55,0.4); }
.common .card-lore-panel::after { border-bottom: 1px solid rgba(212,175,55,0.4); border-right: 1px solid rgba(212,175,55,0.4); }
.common .card-type-bar::before { background: linear-gradient(180deg, #8a8a8a 0%, #5a5a5a 50%, #8a8a8a 100%); }
.common .card-type-bar::after { background: linear-gradient(180deg, #2a2825 0%, #1a1815 40%, #0e0c0a 60%, #2a2825 100%); }
.common .card-type-label { color: #b0a888; }
.common .stat-badge::before { background: linear-gradient(180deg, #8a8a8a 0%, #5a5a5a 50%, #404040 100%); }
.common .stat-badge.atk::after { background: linear-gradient(180deg, #2a2c38 0%, #1c1e28 50%, #101218 100%); }
.common .stat-badge.def::after { background: linear-gradient(180deg, #382a2a 0%, #281c1c 50%, #181010 100%); }
.common .stat-badge .stat-value { color: #d0ccc0; }
.common .mana-badge { filter: drop-shadow(0 2px 6px rgba(120,140,180,0.2)); }
.common .mana-badge::before { background: linear-gradient(180deg, #8a8a8a 0%, #5a5a5a 50%, #404040 100%); }
.common .mana-badge::after {
background: linear-gradient(180deg, #1a1e30 0%, #0e1220 50%, #0a0e18 100%);
box-shadow: inset 0 0 8px rgba(120,140,180,0.2);
}
.common .mana-badge .mana-value {
color: #a0b0cc;
text-shadow: 0 0 8px rgba(120,140,180,0.2), 0 2px 4px rgba(0,0,0,0.7);
}
/* ============================================================
UNCOMMON (FOREST GREEN) PALETTE
============================================================ */
.uncommon .card-border {
position: absolute; inset: 0; border: 3px solid #6b8f5e;
border-radius: 10px; pointer-events: none; z-index: 4;
}
.uncommon .card-inner-frame { border: 1px solid rgba(107,143,94,0.2); }
.uncommon .card-side-accent-left,
.uncommon .card-side-accent-right {
background: linear-gradient(180deg, transparent 0%, rgba(107,143,94,0.15) 20%, rgba(107,143,94,0.25) 50%, rgba(107,143,94,0.15) 80%, transparent 100%);
}
.uncommon .card-corner-dot { background: radial-gradient(circle, rgba(107,143,94,0.5) 0%, transparent 70%); }
.uncommon .card-art-container .card-art-frame {
position: absolute; inset: 0; border: 3px solid #6b8f5e; border-radius: 50%;
z-index: 2; pointer-events: none;
box-shadow: inset 0 0 15px rgba(0,0,0,0.6), 0 0 8px rgba(107,143,94,0.12);
}
.uncommon .card-art-rivet { display: none; }
.uncommon .card-art-corner { display: none; }
.uncommon .card-name-banner {
background: linear-gradient(180deg, rgb(110,122,100) 0%, rgb(68,78,58) 50%, rgb(110,122,100) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 5px rgba(0,0,0,0.5);
clip-path: none;
border-radius: 2px;
width: 108%;
}
.uncommon .card-name-banner::before, .uncommon .card-name-banner::after {
display: none;
}
.uncommon .card-name { color: #e0ecd4; }
.uncommon .rarity-gem { width: 26px; height: 26px; top: calc(67% - 8px); }
.uncommon .rarity-gem::before { background: radial-gradient(circle, rgba(107,143,94,0.25) 0%, transparent 70%); }
.uncommon .rarity-gem-frame { background: linear-gradient(180deg, #4a5a44 0%, #2a3828 40%, #1a2418 60%, #3a4a34 100%); border-radius: 50%; clip-path: none; }
.uncommon .rarity-gem-trim { background: linear-gradient(180deg, #6b8f5e 0%, #4a6a40 50%, #6b8f5e 100%); border-radius: 50%; clip-path: none; }
.uncommon .rarity-gem-inner { background: linear-gradient(180deg, #8ec87a 0%, #5a9e48 35%, #3a7830 65%, #6aaa58 100%); border-radius: 50%; clip-path: none; }
.uncommon .rarity-gem-inner::after { clip-path: none; border-radius: 50% 50% 0 0; left: 20%; right: 20%; height: 45%; }
.uncommon .card-lore-panel {
background: linear-gradient(180deg, rgb(100,92,78) 0%, rgb(55,48,38) 50%, rgb(100,92,78) 100%);
border: 2px solid rgba(160,144,128,0.5);
}
.uncommon .card-lore-panel::before { border-top: 1px solid rgba(212,175,55,0.4); border-left: 1px solid rgba(212,175,55,0.4); }
.uncommon .card-lore-panel::after { border-bottom: 1px solid rgba(212,175,55,0.4); border-right: 1px solid rgba(212,175,55,0.4); }
.uncommon .card-type-bar::before { background: linear-gradient(180deg, #6b8f5e 0%, #4a6a40 50%, #6b8f5e 100%); }
.uncommon .card-type-bar::after { background: linear-gradient(180deg, #252a22 0%, #1a1e18 40%, #0e100c 60%, #252a22 100%); }
.uncommon .card-type-label { color: #b8d0a8; }
.uncommon .stat-badge::before { background: linear-gradient(180deg, #6b8f5e 0%, #4a6a40 50%, #3a5030 100%); }
.uncommon .stat-badge.atk::after { background: linear-gradient(180deg, #2a3338 0%, #1c2428 50%, #101818 100%); }
.uncommon .stat-badge.def::after { background: linear-gradient(180deg, #382e2a 0%, #28201c 50%, #181210 100%); }
.uncommon .stat-badge .stat-value { color: #d8e4cc; }
.uncommon .mana-badge { filter: drop-shadow(0 2px 6px rgba(80,140,100,0.25)); }
.uncommon .mana-badge::before { background: linear-gradient(180deg, #6b8f5e 0%, #4a6a40 50%, #3a5030 100%); }
.uncommon .mana-badge::after {
background: linear-gradient(180deg, #1a2a20 0%, #0e1a14 50%, #0a120e 100%);
box-shadow: inset 0 0 8px rgba(80,140,100,0.2);
}
.uncommon .mana-badge .mana-value {
color: #a0ccb0;
text-shadow: 0 0 8px rgba(80,140,100,0.25), 0 2px 4px rgba(0,0,0,0.7);
}
/* ============================================================
RARE (STEEL BLUE) PALETTE
============================================================ */
.rare .card-border {
position: absolute; inset: 0; border: 3px solid #4a7ec8;
border-radius: 10px; pointer-events: none; z-index: 4;
}
.rare .card-inner-frame { border: 1px solid rgba(74,126,200,0.2); }
.rare .card-side-accent-left,
.rare .card-side-accent-right {
background: linear-gradient(180deg, transparent 0%, rgba(74,126,200,0.15) 20%, rgba(74,126,200,0.25) 50%, rgba(74,126,200,0.15) 80%, transparent 100%);
}
.rare .card-corner-dot { background: radial-gradient(circle, rgba(74,126,200,0.5) 0%, transparent 70%); }
.rare .card-art-container .card-art-frame {
position: absolute; inset: 0; border: 3px solid #4a7ec8; border-radius: 50%;
z-index: 2; pointer-events: none;
box-shadow: inset 0 0 15px rgba(0,0,0,0.6), 0 0 8px rgba(74,126,200,0.15);
}
.rare .card-art-rivet { display: none; }
.rare .card-art-corner { display: none; }
.rare .card-name-banner {
background: linear-gradient(180deg, rgb(152,168,192) 0%, rgb(100,118,148) 30%, rgb(48,62,86) 50%, rgb(100,118,148) 70%, rgb(152,168,192) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.6);
}
.rare .card-name-banner::before, .rare .card-name-banner::after {
background: radial-gradient(circle at 35% 35%, #b8c8e0, #4a7ec8);
}
.rare .card-name { color: #dce4f0; }
.rare .rarity-gem::before { background: radial-gradient(circle, rgba(58,134,255,0.3) 0%, transparent 70%); }
.rare .rarity-gem-frame { background: linear-gradient(180deg, #3a4a60 0%, #202c40 40%, #141e30 60%, #2a3a50 100%); }
.rare .rarity-gem-trim { background: linear-gradient(180deg, #4a7ec8 0%, #3460a0 50%, #4a7ec8 100%); }
.rare .rarity-gem-inner { background: linear-gradient(180deg, #4a80cc 0%, #1a50aa 35%, #0c3080 65%, #2a60b0 100%); }
.rare .card-lore-panel {
background: linear-gradient(180deg, rgb(100,92,78) 0%, rgb(55,48,38) 50%, rgb(100,92,78) 100%);
border: 2px solid rgba(160,144,128,0.5);
}
.rare .card-lore-panel::before { border-top: 1px solid rgba(212,175,55,0.4); border-left: 1px solid rgba(212,175,55,0.4); }
.rare .card-lore-panel::after { border-bottom: 1px solid rgba(212,175,55,0.4); border-right: 1px solid rgba(212,175,55,0.4); }
.rare .card-type-bar::before { background: linear-gradient(180deg, #4a7ec8 0%, #3460a0 50%, #4a7ec8 100%); }
.rare .card-type-bar::after { background: linear-gradient(180deg, #222830 0%, #181c24 40%, #0c1018 60%, #222830 100%); }
.rare .card-type-label { color: #a8c4e8; }
.rare .stat-badge::before { background: linear-gradient(180deg, #4a7ec8 0%, #3460a0 50%, #264880 100%); }
.rare .stat-badge.atk::after { background: linear-gradient(180deg, #283040 0%, #1c2430 50%, #101820 100%); }
.rare .stat-badge.def::after { background: linear-gradient(180deg, #3a2830 0%, #2a1c24 50%, #1a1018 100%); }
.rare .stat-badge .stat-value { color: #d0dcf0; }
.rare .mana-badge { filter: drop-shadow(0 2px 6px rgba(60,100,200,0.3)); }
.rare .mana-badge::before { background: linear-gradient(180deg, #4a7ec8 0%, #3460a0 50%, #264880 100%); }
.rare .mana-badge::after {
background: linear-gradient(180deg, #1a2240 0%, #0e1530 50%, #0a0e22 100%);
box-shadow: inset 0 0 8px rgba(60,100,200,0.25);
}
.rare .mana-badge .mana-value {
color: #a0c0f0;
text-shadow: 0 0 8px rgba(60,100,200,0.3), 0 2px 4px rgba(0,0,0,0.7);
}
/* ============================================================
SUPER RARE (INDIGO/PURPLE) PALETTE
============================================================ */
.superrare .card-border {
position: absolute; inset: 0; border: 3px solid #6a5acd;
border-radius: 10px; pointer-events: none; z-index: 4;
}
.superrare .card-inner-frame { border: 1px solid rgba(106,90,205,0.2); }
.superrare .card-side-accent-left,
.superrare .card-side-accent-right {
background: linear-gradient(180deg, transparent 0%, rgba(106,90,205,0.15) 20%, rgba(106,90,205,0.25) 50%, rgba(106,90,205,0.15) 80%, transparent 100%);
}
.superrare .card-corner-dot { background: radial-gradient(circle, rgba(106,90,205,0.5) 0%, transparent 70%); }
.superrare .card-art-container .card-art-frame {
position: absolute; inset: 0; border: 3px solid #6a5acd; border-radius: 50%;
z-index: 2; pointer-events: none;
box-shadow: inset 0 0 15px rgba(0,0,0,0.6), 0 0 8px rgba(106,90,205,0.15);
}
.superrare .card-art-rivet { display: none; }
.superrare .card-art-corner { display: none; }
.superrare .card-name-banner {
background: linear-gradient(180deg, rgb(180,160,220) 0%, rgb(120,100,180) 30%, rgb(60,40,120) 50%, rgb(120,100,180) 70%, rgb(180,160,220) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.6);
}
.superrare .card-name-banner::before, .superrare .card-name-banner::after {
background: radial-gradient(circle at 35% 35%, #d8c8f0, #6a5acd);
}
.superrare .card-name { color: #f0e8ff; }
.superrare .rarity-gem::before { background: radial-gradient(circle, rgba(106,90,205,0.3) 0%, transparent 70%); }
.superrare .rarity-gem-frame { background: linear-gradient(180deg, #4a3a6a 0%, #2a1a4a 40%, #141030 60%, #3a2a5a 100%); }
.superrare .rarity-gem-trim { background: linear-gradient(180deg, #6a5acd 0%, #5040a0 50%, #6a5acd 100%); }
.superrare .rarity-gem-inner { background: linear-gradient(180deg, #8a7aff 0%, #5a40dd 35%, #3a20bb 65%, #6a50e0 100%); }
.superrare .card-lore-panel {
background: linear-gradient(180deg, rgb(100,92,78) 0%, rgb(55,48,38) 50%, rgb(100,92,78) 100%);
border: 2px solid rgba(160,144,128,0.5);
}
.superrare .card-lore-panel::before { border-top: 1px solid rgba(212,175,55,0.4); border-left: 1px solid rgba(212,175,55,0.4); }
.superrare .card-lore-panel::after { border-bottom: 1px solid rgba(212,175,55,0.4); border-right: 1px solid rgba(212,175,55,0.4); }
.superrare .card-type-bar::before { background: linear-gradient(180deg, #6a5acd 0%, #5040a0 50%, #6a5acd 100%); }
.superrare .card-type-bar::after { background: linear-gradient(180deg, #2a2230 0%, #1a1620 40%, #0e0a18 60%, #2a2230 100%); }
.superrare .card-type-label { color: #b8a8e8; }
.superrare .stat-badge::before { background: linear-gradient(180deg, #6a5acd 0%, #5040a0 50%, #3a2880 100%); }
.superrare .stat-badge.atk::after { background: linear-gradient(180deg, #2a2c38 0%, #1c1e28 50%, #101218 100%); }
.superrare .stat-badge.def::after { background: linear-gradient(180deg, #382a2a 0%, #281c1c 50%, #181010 100%); }
.superrare .stat-badge .stat-value { color: #e0d8f0; }
.superrare .mana-badge { filter: drop-shadow(0 2px 6px rgba(106,90,205,0.3)); }
.superrare .mana-badge::before { background: linear-gradient(180deg, #6a5acd 0%, #5040a0 50%, #3a2880 100%); }
.superrare .mana-badge::after {
background: linear-gradient(180deg, #1a1440 0%, #0e0a30 50%, #0a0620 100%);
box-shadow: inset 0 0 8px rgba(106,90,205,0.25);
}
.superrare .mana-badge .mana-value {
color: #b0a0f0;
text-shadow: 0 0 8px rgba(106,90,205,0.3), 0 2px 4px rgba(0,0,0,0.7);
}
/* ============================================================
EPIC (CRIMSON RED) PALETTE
============================================================ */
.epic .card-border {
position: absolute; inset: 0; border: 3px solid #c0392b;
border-radius: 10px; pointer-events: none; z-index: 4;
}
.epic .card-inner-frame { border: 1px solid rgba(192,57,43,0.2); }
.epic .card-side-accent-left,
.epic .card-side-accent-right {
background: linear-gradient(180deg, transparent 0%, rgba(192,57,43,0.15) 20%, rgba(192,57,43,0.25) 50%, rgba(192,57,43,0.15) 80%, transparent 100%);
}
.epic .card-corner-dot { background: radial-gradient(circle, rgba(192,57,43,0.5) 0%, transparent 70%); }
.epic .card-art-container .card-art-frame {
position: absolute; inset: 0; border: 3px solid #c0392b; border-radius: 50%;
z-index: 2; pointer-events: none;
box-shadow: inset 0 0 15px rgba(0,0,0,0.6), 0 0 8px rgba(192,57,43,0.15);
}
.epic .card-art-rivet { display: none; }
.epic .card-art-corner { display: none; }
.epic .card-name-banner {
background: linear-gradient(180deg, rgb(220,140,130) 0%, rgb(160,80,70) 30%, rgb(80,30,20) 50%, rgb(160,80,70) 70%, rgb(220,140,130) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(255,255,255,0.05), 0 3px 8px rgba(0,0,0,0.6);
}
.epic .card-name-banner::before, .epic .card-name-banner::after {
background: radial-gradient(circle at 35% 35%, #f0c8c0, #c0392b);
}
.epic .card-name { color: #ffe8e0; }
.epic .rarity-gem::before { background: radial-gradient(circle, rgba(192,57,43,0.3) 0%, transparent 70%); }
.epic .rarity-gem-frame { background: linear-gradient(180deg, #6a3a30 0%, #4a2420 40%, #2a1410 60%, #5a3028 100%); }
.epic .rarity-gem-trim { background: linear-gradient(180deg, #c0392b 0%, #903020 50%, #c0392b 100%); }
.epic .rarity-gem-inner { background: linear-gradient(180deg, #f05a50 0%, #d02010 35%, #8a0a00 65%, #d82820 100%); }
.epic .card-lore-panel {
background: linear-gradient(180deg, rgb(100,92,78) 0%, rgb(55,48,38) 50%, rgb(100,92,78) 100%);
border: 2px solid rgba(160,144,128,0.5);
}
.epic .card-lore-panel::before { border-top: 1px solid rgba(212,175,55,0.4); border-left: 1px solid rgba(212,175,55,0.4); }
.epic .card-lore-panel::after { border-bottom: 1px solid rgba(212,175,55,0.4); border-right: 1px solid rgba(212,175,55,0.4); }
.epic .card-type-bar::before { background: linear-gradient(180deg, #c0392b 0%, #903020 50%, #c0392b 100%); }
.epic .card-type-bar::after { background: linear-gradient(180deg, #2a2420 0%, #1a1815 40%, #0e0c0a 60%, #2a2420 100%); }
.epic .card-type-label { color: #d8a8a0; }
.epic .stat-badge::before { background: linear-gradient(180deg, #c0392b 0%, #903020 50%, #602010 100%); }
.epic .stat-badge.atk::after { background: linear-gradient(180deg, #2a2c38 0%, #1c1e28 50%, #101218 100%); }
.epic .stat-badge.def::after { background: linear-gradient(180deg, #3a2828 0%, #281818 50%, #181008 100%); }
.epic .stat-badge .stat-value { color: #f0d8d0; }
.epic .mana-badge { filter: drop-shadow(0 2px 6px rgba(192,57,43,0.3)); }
.epic .mana-badge::before { background: linear-gradient(180deg, #c0392b 0%, #903020 50%, #602010 100%); }
.epic .mana-badge::after {
background: linear-gradient(180deg, #1a1c30 0%, #0e1020 50%, #0a0c18 100%);
box-shadow: inset 0 0 8px rgba(192,57,43,0.25);
}
.epic .mana-badge .mana-value {
color: #d0b0a0;
text-shadow: 0 0 8px rgba(192,57,43,0.3), 0 2px 4px rgba(0,0,0,0.7);
}
/* ============================================================
MYTHIC (MYTH RARE - RAINBOW/GOLD SHIMMER) PALETTE
============================================================ */
@keyframes mythic-border-pulse {
0%, 100% { border-color: #f0d060; }
50% { border-color: #fff0a0; }
}
@keyframes mythic-shimmer {
0% { opacity: 0; background-position: -35% 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; background-position: 135% 0; }
}
@keyframes mythic-gem-sparkle {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
@keyframes mythic-gem-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes mythic-banner-glow {
0%, 100% { text-shadow: 0 0 8px rgba(240,208,96,0.4), 0 0 16px rgba(240,208,96,0.1), 0 1px 3px rgba(0,0,0,0.6); }
50% { text-shadow: 0 0 16px rgba(240,208,96,0.6), 0 0 32px rgba(240,208,96,0.25), 0 1px 3px rgba(0,0,0,0.6); }
}
@keyframes mythic-diamond-pulse {
0%, 100% { filter: drop-shadow(0 0 4px rgba(240,208,96,0.4)); }
50% { filter: drop-shadow(0 0 8px rgba(240,208,96,0.7)); }
}
.mythic .card-wrapper {
box-shadow: 0 0 16px rgba(240,208,96,0.5), 0 0 40px rgba(240,208,96,0.2), 0 0 70px rgba(240,208,96,0.08);
border-radius: 10px;
animation: mythic-outer-glow 2.5s ease-in-out infinite;
}
@keyframes mythic-outer-glow {
0%, 100% { box-shadow: 0 0 16px rgba(240,208,96,0.5), 0 0 40px rgba(240,208,96,0.2), 0 0 70px rgba(240,208,96,0.08); }
50% { box-shadow: 0 0 24px rgba(240,208,96,0.7), 0 0 55px rgba(240,208,96,0.35), 0 0 90px rgba(240,208,96,0.12); }
}
.mythic .card-border {
position: absolute; inset: 0; border: 3px solid #f0d060;
border-radius: 10px; pointer-events: none; z-index: 4;
animation: mythic-border-pulse 2.5s ease-in-out infinite;
}
.mythic .card-inner-frame { border: 1px solid rgba(240,208,96,0.3); }
.mythic .card-side-accent-left,
.mythic .card-side-accent-right {
background: linear-gradient(180deg, transparent 0%, rgba(240,208,96,0.2) 20%, rgba(240,208,96,0.35) 50%, rgba(240,208,96,0.2) 80%, transparent 100%);
}
.mythic .card-corner-dot { background: radial-gradient(circle, rgba(240,208,96,0.7) 0%, transparent 70%); }
.mythic .card-art-container .card-art-frame {
position: absolute; inset: 0; border: 3px solid #f0d060; border-radius: 50%;
z-index: 2; pointer-events: none;
box-shadow: inset 0 0 15px rgba(0,0,0,0.6), 0 0 16px rgba(240,208,96,0.4), 0 0 35px rgba(240,208,96,0.15);
}
.mythic .card-art-rivet { display: none; }
.mythic .card-art-corner { display: none; }
/* Shimmer overlay extends past the card-face rectangle (negative
inset) so the sweep covers the portrait that overhangs the top
of the wrapper and the badge corners that poke past the sides
and bottom. The CSS mask traces the actual card silhouette
(rounded rectangle for the body + ellipse for the portrait
dome) so the gradient only renders WHERE THE CARD IS — no
bleed into the empty corners between the dome and the rect. */
.mythic-shimmer-overlay {
position: absolute;
inset: -12% -6% -5% -6%;
background-image: linear-gradient(90deg, transparent 0%, rgba(255,220,100,0.1) 30%, rgba(255,255,255,0.14) 50%, rgba(255,220,100,0.1) 70%, transparent 100%);
background-size: 35% 100%;
background-repeat: no-repeat;
background-position: -35% 0;
animation: mythic-shimmer 3.5s linear infinite;
pointer-events: none; z-index: 6;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.mythic .mini-gem {
position: absolute; width: 18px; height: 18px;
display: flex; align-items: center; justify-content: center; z-index: 4;
}
.mythic .mini-gem.top { top: -9px; left: 50%; transform: translateX(-50%); }
.mythic .mini-gem.bottom { bottom: -9px; left: 50%; transform: translateX(-50%); }
.mythic .mini-gem.left { left: -9px; top: 50%; transform: translateY(-50%); }
.mythic .mini-gem.right { right: -9px; top: 50%; transform: translateY(-50%); }
/* Top/left/right gems sit a touch larger than the bottom one —
they frame the art more prominently, so size bumps from 18 → 26
and the offset bumps in step (13 = 26/2) to keep them centred
on the card edge. */
.mythic .mini-gem.top,
.mythic .mini-gem.left,
.mythic .mini-gem.right { width: 26px; height: 26px; }
.mythic .mini-gem.top { top: -13px; }
.mythic .mini-gem.left { left: -13px; }
.mythic .mini-gem.right { right: -13px; }
.mythic .mini-gem::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
filter: blur(5px);
z-index: -1;
animation: mythic-gem-sparkle 2.5s ease-in-out infinite;
}
.mythic .mini-gem.top::before { background: radial-gradient(circle, rgba(90,200,72,0.6) 0%, transparent 70%); animation-delay: 0s; }
.mythic .mini-gem.bottom::before { background: radial-gradient(circle, rgba(220,50,50,0.6) 0%, transparent 70%); animation-delay: 0.6s; }
.mythic .mini-gem.left::before { background: radial-gradient(circle, rgba(58,134,255,0.6) 0%, transparent 70%); animation-delay: 1.2s; }
.mythic .mini-gem.right::before { background: radial-gradient(circle, rgba(106,90,205,0.6) 0%, transparent 70%); animation-delay: 1.8s; }
.mythic .mini-gem-frame {
position: absolute; inset: 0;
background: linear-gradient(180deg, #8a7830 0%, #6a5820 40%, #504010 60%, #7a6828 100%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.mythic .mini-gem-trim {
position: absolute; inset: 3px;
background: linear-gradient(180deg, #f0d060 0%, #d0a830 50%, #f0d060 100%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.mythic .mini-gem-inner {
width: calc(100% - 10px); height: calc(100% - 10px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
position: relative; z-index: 1;
}
.mythic .mini-gem-inner::after {
content: '';
position: absolute;
top: 0; left: 15%; right: 15%; height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.05) 100%);
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
z-index: 1;
}
.mythic .mini-gem-inner.emerald { background: linear-gradient(180deg, #a0e888 0%, #50b838 35%, #2a7020 65%, #60aa48 100%); }
.mythic .mini-gem-inner.ruby { background: linear-gradient(180deg, #ff8080 0%, #dd3030 35%, #8a0a18 65%, #cc3040 100%); }
.mythic .mini-gem-inner.sapphire { background: linear-gradient(180deg, #90c8ff 0%, #3a86ff 35%, #1450aa 65%, #4a80dd 100%); }
.mythic .mini-gem-inner.amethyst { background: linear-gradient(180deg, #cca8ff 0%, #8a60ee 35%, #5a40bb 65%, #9a78e8 100%); }
.mythic .card-name-banner {
background: linear-gradient(180deg, rgb(255,245,210) 0%, rgb(230,210,150) 8%, rgb(180,158,100) 25%, rgb(100,82,40) 50%, rgb(180,158,100) 75%, rgb(230,210,150) 92%, rgb(255,245,210) 100%);
animation: mythic-banner-glow 2.5s ease-in-out infinite;
}
.mythic .card-name-banner::before, .mythic .card-name-banner::after {
background: linear-gradient(135deg, #fff8d0 0%, #f0d060 40%, #c8a030 70%, #f0d860 100%);
border-radius: 0;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
animation: mythic-diamond-pulse 2s ease-in-out infinite;
}
.mythic .card-name-banner::after { animation-delay: 1s; }
.mythic .card-name { color: #fffef0; text-shadow: 0 0 12px rgba(240,208,96,0.6), 0 0 24px rgba(240,208,96,0.2), 0 1px 3px rgba(0,0,0,0.8); }
.mythic .rarity-gem::before { background: radial-gradient(circle, rgba(240,208,96,0.7) 0%, transparent 70%); animation: mythic-gem-sparkle 2s ease-in-out infinite; }
.mythic .rarity-gem { filter: drop-shadow(0 0 8px rgba(240,208,96,0.5)); }
.mythic .rarity-gem-frame { background: linear-gradient(180deg, #8a7830 0%, #6a5820 40%, #504010 60%, #7a6828 100%); }
.mythic .rarity-gem-trim { background: linear-gradient(180deg, #f0d060 0%, #d0a830 50%, #f0d060 100%); }
.mythic .rarity-gem-inner { background: linear-gradient(180deg, #fff8c0 0%, #f0d060 35%, #c8a030 65%, #f0d860 100%); }
.mythic .card-lore-panel {
background: linear-gradient(180deg, rgb(100,92,78) 0%, rgb(55,48,38) 50%, rgb(100,92,78) 100%);
border: 2px solid rgba(160,144,128,0.5);
}
.mythic .card-lore-panel::before { border-top: 1px solid rgba(212,175,55,0.4); border-left: 1px solid rgba(212,175,55,0.4); }
.mythic .card-lore-panel::after { border-bottom: 1px solid rgba(212,175,55,0.4); border-right: 1px solid rgba(212,175,55,0.4); }
.mythic .card-type-bar::before { background: linear-gradient(180deg, #f0d060 0%, #d0a830 50%, #f0d060 100%); }
.mythic .card-type-bar::after { background: linear-gradient(180deg, #302a18 0%, #241e10 40%, #181408 60%, #302a18 100%); }
.mythic .card-type-label { color: #f8e8a0; }
.mythic .stat-badge::before { background: linear-gradient(180deg, #f0d060 0%, #d0a830 50%, #a88020 100%); }
.mythic .stat-badge.atk::after { background: linear-gradient(180deg, #383020 0%, #282218 50%, #1a1610 100%); }
.mythic .stat-badge.def::after { background: linear-gradient(180deg, #382820 0%, #281c14 50%, #1a1008 100%); }
.mythic .stat-badge .stat-value { color: #fff4d0; }
.mythic .mana-badge { filter: drop-shadow(0 2px 6px rgba(240,208,96,0.4)); }
.mythic .mana-badge::before { background: linear-gradient(180deg, #f0d060 0%, #d0a830 50%, #a88020 100%); }
.mythic .mana-badge::after {
background: linear-gradient(180deg, #282018 0%, #1c1810 50%, #121008 100%);
box-shadow: inset 0 0 8px rgba(240,208,96,0.3);
}
.mythic .mana-badge .mana-value {
color: #f0e0a0;
text-shadow: 0 0 10px rgba(240,208,96,0.4), 0 2px 4px rgba(0,0,0,0.7);
}
/* Card health grid overlays removed — health shown in detail modal only */