/* Unique paintings shared by the boutique, applied cards and combat ghosts. */
.fantasy-art{position:relative;display:block;aspect-ratio:1;isolation:isolate;overflow:hidden;background:#080c15;color:var(--skin-color,#edcd99);border-radius:18px 18px 50% 50%/18px 18px 12% 12%;box-shadow:0 12px 26px #0009,inset 0 0 0 1px currentColor}
.relic-picture{position:absolute;inset:0;background-image:url('/art/fantasy-relics.png');background-size:300% 200%;background-position:var(--art-x) var(--art-y);filter:hue-rotate(var(--art-hue)) saturate(1.08);transition:transform .6s;transform:scale(1.025)}
.relic-mist{position:absolute;inset:-20%;background:conic-gradient(from 45deg,transparent 35%,color-mix(in srgb,var(--skin-color) 30%,transparent),transparent 70%);mix-blend-mode:screen;filter:blur(12px);opacity:.6;transform:rotate(-25deg);pointer-events:none}
.relic-tracery{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2;filter:drop-shadow(0 2px 2px #000);opacity:.85}
.relic-gem{position:absolute;left:48%;top:4%;width:4%;aspect-ratio:1;transform:rotate(45deg);background:linear-gradient(135deg,#fff,currentColor 45%,#192333);box-shadow:0 0 12px currentColor}
.relic-rune{position:absolute;bottom:5%;left:42%;width:16%;aspect-ratio:1;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;background:radial-gradient(circle,#233144,#070a12);font-size:20px;box-shadow:0 0 14px #000,inset 0 0 12px color-mix(in srgb,var(--skin-color) 40%,transparent)}
.theme-1{border-radius:5px 40px 5px 40px}.theme-2{border-radius:45% 45% 8px 8px/18% 18% 8px 8px}.theme-3 .relic-tracery{stroke-width:2}.theme-4 .relic-tracery{stroke-dasharray:12 2}
.tier-epic,.tier-legendary,.tier-mythic{box-shadow:0 10px 30px #000b,0 0 16px color-mix(in srgb,var(--skin-color) 25%,transparent)}
.tier-legendary .relic-tracery,.tier-mythic .relic-tracery{stroke-width:1.8;filter:drop-shadow(0 0 4px currentColor)}
.skin-product{background:linear-gradient(160deg,#192236,#090d19 62%);border-color:color-mix(in srgb,var(--skin-color) 32%,#182133);border-radius:16px;box-shadow:0 8px 24px #0003;transition:transform .2s,box-shadow .2s}
.skin-product:hover{transform:translateY(-4px);box-shadow:0 15px 30px #0006}
.skin-product .skin-art-button{background:none;border:0;padding:10px 10px 0;width:100%;display:block;cursor:pointer;border-radius:16px;color:inherit;text-align:left;position:relative}
.skin-art-button:focus-visible{outline:2px solid var(--skin-color);outline-offset:-3px}
.skin-product:hover .relic-picture,.skin-art-button:focus-visible .relic-picture{transform:scale(1.075)}
.skin-product .skin-product-info{padding:18px 18px 20px}.skin-product-info>small{color:var(--skin-color);letter-spacing:.12em;text-transform:uppercase;font-size:10px}.skin-product-info h3{font-family:Georgia,serif;font-size:21px;color:#fff1d9}.skin-product-info .caption{min-height:30px}.skin-product-info .secondary{width:100%;border-color:color-mix(in srgb,var(--skin-color) 30%,transparent)}
.skin-art-hint{position:absolute;left:25%;right:25%;bottom:14%;font-size:10px;letter-spacing:.08em;padding:4px;background:#050a12bb;border:1px solid #ffffff20;border-radius:12px;text-align:center;color:#f6e2ba;opacity:0;transition:opacity .2s}.skin-art-button:hover .skin-art-hint,.skin-art-button:focus-visible .skin-art-hint{opacity:1}
.card.skin-card{background:linear-gradient(160deg,color-mix(in srgb,var(--skin-color) 20%,#0c1426),#08101e 65%);border:3px double var(--skin-color)!important;overflow:visible}
.card.skin-card .fantasy-art{width:100%;aspect-ratio:1.45;flex-shrink:0;border-radius:12px 12px 4px 4px;margin:2px 0 5px;box-shadow:inset 0 0 0 1px var(--skin-color)}
.card.skin-card .relic-picture{inset:-23% 0;background-size:300% 200%}
.card.skin-card .relic-tracery{display:none}.card.skin-card .relic-rune{font-size:11px;width:14%;left:auto;right:5%;bottom:6%}.card.skin-card .relic-gem{display:none}
.card.skin-card .card-name{text-shadow:0 2px 8px #000;color:#fff2d2}.card.skin-card.skin-zombie{border-radius:22px 22px 6px 6px!important;box-shadow:0 0 15px #81f59c65,inset 0 0 30px #66db9140}
.skin-sigils{position:relative;top:auto;left:auto;display:flex;justify-content:center;gap:4px;padding:0;margin:0 0 4px;background:transparent;letter-spacing:0}.skin-sigils>span{background:linear-gradient(135deg,#2d3b48,#080d16);border:1px solid var(--skin-color);color:var(--skin-color);width:19px;height:19px;border-radius:4px;display:grid;place-items:center;font-size:11px;box-shadow:0 0 6px color-mix(in srgb,var(--skin-color) 30%,transparent)}
.skin-showcase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px;margin:22px 0}.skin-showcase .fantasy-art{max-width:320px;margin:auto}.skin-showcase>.card{width:210px;justify-self:center}.skin-showcase .skin-card .fantasy-art{margin:2px 0 5px}.skin-demo-stage{position:relative;text-align:center;padding:22px;border:1px solid #ffffff1c;background:radial-gradient(ellipse at 50% 100%,#294631,#101521 65%);border-radius:16px}.skin-demo-stage .demo-victim{width:140px;margin:0 auto 18px;padding:22px 12px;border:2px solid #8794a4;border-radius:15px;background:linear-gradient(130deg,#29394b,#0d1623);color:#eee}.skin-demo-stage strong{display:block;font-size:26px;margin:8px}.depth-fx{position:fixed!important;inset:0!important;pointer-events:none!important;z-index:95!important;border:0!important;max-width:none!important;margin:0!important;}
@keyframes relic-cloud{to{transform:rotate(335deg)}}
@media(prefers-reduced-motion:no-preference){.skin-product:hover .relic-mist,.skin-card.chosen .relic-mist,.skin-card.ready .relic-mist{animation:relic-cloud 9s linear infinite}.skin-showcase>.fantasy-art .relic-mist{animation:relic-cloud 12s linear infinite}}
@media(max-width:700px){.skin-product .skin-product-info{padding:12px}.skin-product-info h3{font-size:17px}.skin-product .skin-art-button{padding:6px 6px 0}.relic-rune{font-size:16px}.skin-showcase{gap:12px}.skin-showcase>.card{width:100%;max-width:190px}.skin-sigils>span{width:14px;height:14px;font-size:8px}.skin-art-hint{display:none}}
.skin-showcase>.fantasy-art{width:100%}
.reduce-motion .relic-mist{animation:none!important}
.shop-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
@media(max-width:700px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.relic-picture.unique-picture{display:block;width:100%;height:100%;object-fit:cover;background:none;filter:none}
.card.skin-card .relic-picture.unique-picture{inset:0;object-fit:cover;object-position:center}