/* Crimson Eclipse: falling seals, chains and talismans against a red eclipse. */
.v3-skin-effect--rend{--aura-a:#B41D26;--aura-b:#4F0008}
.v3-skin-effect--rend .v3-skin-particle{--particle-color:#B41D26}
.v3-skin-effect--rend .v3-skin-particle:nth-child(4n+2){--particle-color:#c0b1c9}
.v3-skin-effect--rend .v3-skin-particle:nth-child(4n+3){--particle-color:#B1695E}
.v3-skin-effect--rend::before{background:radial-gradient(ellipse at 12% 80%,#4F000888,transparent 45%),radial-gradient(ellipse at 95% 20%,#B41D2644,transparent 40%);animation:v3RendCloud 9s ease-in-out infinite alternate}
.v3-skin-effect--rend::after{inset:7% 9% auto auto;width:31%;height:auto;aspect-ratio:1;border:1px solid #B41D2688;border-radius:50%;background:radial-gradient(circle at 43% 44%,#1C131599 49%,#B41D2699 53%,transparent 60%);box-shadow:0 0 15px #B41D2644;opacity:.48;animation:v3RendMoon 6s ease-in-out infinite alternate}
@keyframes v3RendCloud{to{transform:translateY(-4%) scale(1.08);opacity:.65}}
@keyframes v3RendMoon{to{opacity:.7;box-shadow:0 0 24px #B41D2666}}
@media(prefers-reduced-motion:reduce){.v3-skin-effect--rend::before,.v3-skin-effect--rend::after{animation:none}}

/* V3 portrait ornaments. This layer remains below the HUD at z-index: 2.
   Container-relative travel also works when cards shrink on laptop screens. */
.v3-skin-effect--refined {
    container-type: size;
    --aura-a: #ff52d9;
    --aura-b: #65ddff;
}
.v3-skin-effect--refined .v3-skin-particle {
    top: -32px;
    bottom: auto;
    will-change: auto;
    animation: v3MotifFall calc(var(--particle-duration) * 1.7) linear var(--particle-delay) infinite;
}
.v3-skin-effect--refined .v3-skin-motif {
    width: var(--motif-size);
    height: var(--motif-size);
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    filter: drop-shadow(0 0 3px currentColor);
}
.v3-skin-motif svg { display: block; width: 100%; height: 100%; overflow: visible; }
.v3-skin-motif svg > path:first-child { fill: currentColor; fill-opacity: .12; }
@keyframes v3MotifFall {
    0% { opacity: 0; transform: translate3d(-50%, 0, 0) rotate(-18deg) scale(var(--particle-scale)); }
    12%, 36% { opacity: var(--motif-depth); }
    55% { opacity: .18; transform: translate3d(calc(-50% + var(--particle-drift)), 55cqh, 0) rotate(12deg) scale(var(--particle-scale)); }
    72% { opacity: var(--motif-depth); }
    100% { opacity: 0; transform: translate3d(-50%, calc(100cqh + 64px), 0) rotate(42deg) scale(var(--particle-scale)); }
}

/* Soft edge light leaves faces clear; fine rings add a second depth plane. */
.v3-skin-effect--refined:is(.v3-skin-effect--csillagorzok, .v3-skin-effect--akademia, .v3-skin-effect--kristaly, .v3-skin-effect--jeg, .v3-skin-effect--kalandor, .v3-skin-effect--elegans, .v3-skin-effect--urhajos)::before {
    opacity: .2;
    background: radial-gradient(ellipse at 0 25%, var(--aura-a), transparent 46%), radial-gradient(ellipse at 100% 85%, var(--aura-b), transparent 42%);
    animation: v3MotifAura 7s ease-in-out infinite alternate;
}
@keyframes v3MotifAura {
    from { opacity: .1; transform: scale(1); }
    to { opacity: .22; transform: scale(1.06); }
}
.v3-skin-effect--csillagorzok::after {
    opacity: .2;
    background: radial-gradient(ellipse at 95% 20%, transparent 24%, #b6a2ff 24.3%, transparent 24.7%), radial-gradient(ellipse at 0 90%, transparent 30%, #79ffef 30.3%, transparent 30.7%);
    animation: v3MotifAura 9s ease-in-out -3s infinite alternate;
}
.v3-skin-effect--csillagorzok .v3-skin-motif:nth-child(4n) { --particle-color: #ac80ff; }
.v3-skin-effect--csillagorzok .v3-skin-motif:nth-child(4n+3) { --particle-color: #8dffdf; filter: drop-shadow(2px 0 2px #ed88ff) drop-shadow(-1px 0 2px #74eaff); }

.v3-skin-effect--cyber::before {
    opacity: .35;
    background: repeating-linear-gradient(0deg, transparent 0 23px, #3cffe51c 24px, transparent 25px), repeating-linear-gradient(90deg, transparent 0 39px, #ff3ccf14 40px, transparent 41px);
    mask-image: linear-gradient(90deg, #000, transparent 40% 65%, #000);
}
.v3-skin-effect--cyber::after {
    background: linear-gradient(180deg, transparent 35%, #20ff9920 65%, #4ccfff70 69%, #ff32d628 71%, transparent 85%);
    animation-duration: 6.8s;
}
.v3-skin-effect--cyber .v3-skin-motif { filter: drop-shadow(0 0 4px currentColor); }
.v3-skin-effect--cyber .v3-skin-motif svg { animation: v3HoloSignal 3.8s steps(1) var(--particle-delay) infinite; }
@keyframes v3HoloSignal { 0%, 9%, 14%, 100% { opacity: 1; } 10%, 13% { opacity: .35; } }

/* New Cyber relics carry their own palette into the card's ambient projection. */
.v3-card[data-skin-family="cyber"]:is([data-hero-id-num="49"], [data-hero-id-num="86"]) { --cyber-card-a:#DF5A16; --cyber-card-b:#FD762E; --cyber-card-c:#D45F0B; }
.v3-card[data-skin-family="cyber"][data-hero-id-num="35"] { --cyber-card-a:#5484D0; --cyber-card-b:#31E6FB; --cyber-card-c:#64B4E2; }
.v3-card[data-skin-family="cyber"][data-hero-id-num="90"] { --cyber-card-a:#489614; --cyber-card-b:#D1FB43; --cyber-card-c:#A1F656; }
.v3-card[data-skin-family="cyber"][data-hero-id-num="89"] { --cyber-card-a:#852DAC; --cyber-card-b:#FBBDFB; --cyber-card-c:#7670C3; }
.v3-card[data-skin-family="cyber"]:is([data-hero-id-num="49"], [data-hero-id-num="35"], [data-hero-id-num="90"], [data-hero-id-num="89"], [data-hero-id-num="86"]) .v3-skin-effect--cyber::before {
    background:repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--cyber-card-a) 25%,transparent) 24px,transparent 25px),repeating-linear-gradient(90deg,transparent 0 39px,color-mix(in srgb,var(--cyber-card-b) 18%,transparent) 40px,transparent 41px);
}
.v3-card[data-skin-family="cyber"]:is([data-hero-id-num="49"], [data-hero-id-num="35"], [data-hero-id-num="90"], [data-hero-id-num="89"], [data-hero-id-num="86"]) .v3-skin-effect--cyber::after {
    background:linear-gradient(180deg,transparent 35%,color-mix(in srgb,var(--cyber-card-a) 12%,transparent) 65%,color-mix(in srgb,var(--cyber-card-b) 44%,transparent) 69%,color-mix(in srgb,var(--cyber-card-c) 16%,transparent) 71%,transparent 85%);
}
.v3-card[data-skin-family="cyber"]:is([data-hero-id-num="49"], [data-hero-id-num="35"], [data-hero-id-num="90"], [data-hero-id-num="89"], [data-hero-id-num="86"]) .v3-skin-particle { --particle-color:var(--cyber-card-b); }
.v3-card[data-skin-family="cyber"]:is([data-hero-id-num="49"], [data-hero-id-num="35"], [data-hero-id-num="90"], [data-hero-id-num="89"], [data-hero-id-num="86"]) .v3-skin-particle:nth-child(3n+2) { --particle-color:var(--cyber-card-a); }
.v3-card[data-skin-family="cyber"]:is([data-hero-id-num="49"], [data-hero-id-num="35"], [data-hero-id-num="90"], [data-hero-id-num="89"], [data-hero-id-num="86"]) .v3-skin-particle:nth-child(3n) { --particle-color:var(--cyber-card-c); }

.v3-skin-effect--akademia { --aura-a: #326bff; --aura-b: #990c35; }
.v3-skin-effect--akademia .v3-skin-motif:nth-child(4n) { --particle-color: #f5f1ef; }
.v3-skin-effect--akademia .v3-skin-motif:nth-child(4n+3) { --particle-color: #cb375a; }
.v3-skin-effect--akademia::after {
    opacity: .18;
    background: linear-gradient(125deg, transparent 21%, #78acff 21.2%, transparent 21.6% 76%, #ffcf7d 76.2%, transparent 76.6%);
    animation: v3MotifAura 4.8s ease-in-out infinite alternate;
}
.v3-skin-effect--kristaly { --aura-a: #e5c4f4; --aura-b: #ace7ff; }
.v3-skin-effect--kristaly .v3-skin-motif { --particle-color: #f8f0ed; }
.v3-skin-effect--kristaly .v3-skin-motif:nth-child(4n+2) { --particle-color: #f4bccc; }
.v3-skin-effect--kristaly .v3-skin-motif:nth-child(4n+3) { --particle-color: #d6c6fc; }
.v3-skin-effect--kristaly .v3-skin-motif:nth-child(4n) { --particle-color: #bbdefa; }
.v3-skin-effect--kristaly .v3-skin-motif:nth-child(4n+1) { filter: drop-shadow(1px 0 2px #9bcfff) drop-shadow(-1px 0 2px #f6d9a5); }
.v3-skin-effect--kristaly .v3-skin-motif:nth-child(2n) svg { animation: v3PetalTilt 4s ease-in-out var(--particle-delay) infinite alternate; }
@keyframes v3PetalTilt { from { transform: rotateY(-50deg) rotate(-12deg); } to { transform: rotateY(45deg) rotate(18deg); } }
.v3-skin-effect--jeg { --aura-a: #d4f8ff; --aura-b: #126be0; }
.v3-skin-effect--jeg::after {
    opacity: .18;
    background: repeating-conic-gradient(from 165deg at 50% -10%, transparent 0deg 9deg, #b9edff 9.3deg, transparent 9.7deg 21deg);
    mask-image: linear-gradient(#000, transparent 32%);
}
.v3-skin-effect--jeg .v3-skin-particle { animation-duration: calc(var(--particle-duration) * 1.1); --particle-drift: 48px; }
.v3-skin-effect--kalandor { --aura-a: #b36a22; --aura-b: #34572d; }
.v3-skin-effect--kalandor .v3-skin-motif:nth-child(4n) { --particle-color: #ff9948; }
.v3-skin-effect--kalandor::after {
    opacity: .12;
    background: repeating-radial-gradient(ellipse at -20% 110%, transparent 0 30px, #e8b965 31px, transparent 32px 48px);
    mask-image: linear-gradient(30deg, #000, transparent 65%);
}
.v3-skin-effect--elegans { --aura-a: #0bd58d; --aura-b: #bc984c; }
.v3-skin-effect--elegans .v3-skin-particle { animation-duration: calc(var(--particle-duration) * 2.4); }
.v3-skin-effect--elegans::after {
    inset: 12px;
    opacity: .18;
    border: 1px solid #e5c786;
    border-radius: 48% 48% 2px 2px;
    mask-image: linear-gradient(90deg, #000, transparent 24% 76%, #000);
}
.v3-skin-effect--urhajos { --aura-a: #1061a9; --aura-b: #ec8735; }
.v3-skin-effect--urhajos .v3-skin-motif:nth-child(4n+1) { --particle-color: #e8f5ff; }
.v3-skin-effect--urhajos .v3-skin-motif:nth-child(4n+2) { --particle-color: #72fff5; }
.v3-skin-effect--urhajos .v3-skin-motif:nth-child(4n) { --particle-color: #bf9bff; }
.v3-skin-effect--urhajos::after {
    opacity: .17;
    background: repeating-radial-gradient(ellipse at 100% 72%, transparent 0 58px, #97ddff 59px, transparent 60px 83px);
    mask-image: linear-gradient(90deg, transparent 45%, #000);
    animation: v3MotifAura 8s ease-in-out infinite alternate;
}
.v3-skin-effect--kokorszaki .v3-skin-motif { --particle-color: #efcf99; }
.v3-skin-effect--monsterhunter .v3-skin-motif { --particle-color: #d9fbff; filter: drop-shadow(2px 0 3px #ef48db) drop-shadow(-2px 0 2px #72fff3); }
.v3-skin-effect--mesekonyv .v3-skin-motif:nth-child(4n+1) { --particle-color: #769aff; }
.v3-skin-effect--mesekonyv .v3-skin-motif:nth-child(4n+3) { --particle-color: #ff717f; }

/* Eight two-segment legs, alternating gait; head points along the crawl. */
.v3-skin-effect--remakademia .v3-skin-motif.v3-skin-particle--spider {
    top: -36px;
    width: calc(var(--motif-size) * 1.35);
    height: calc(var(--motif-size) * 1.5);
    background: none;
    border-radius: 0;
    box-shadow: none;
    --particle-color: #aaa0c4;
    filter: drop-shadow(0 1px 1px #090611);
    animation: v3SpiderWalk calc(var(--particle-duration) * 2.3) linear var(--particle-delay) infinite;
}
.v3-skin-effect--remakademia .v3-skin-motif::before,
.v3-skin-effect--remakademia .v3-skin-motif::after { content: none; }
.v3-spider-body { fill: #171321; stroke: #a69cbe; stroke-width: .9; }
.v3-spider-eyes { stroke: #eadbff; stroke-width: 1.6; }
.v3-spider-leg { animation: v3SpiderStep .72s ease-in-out var(--leg-delay) infinite alternate; }
.v3-spider-foot { animation: v3SpiderFoot .72s ease-in-out var(--leg-delay) infinite alternate; }
@keyframes v3SpiderStep { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@keyframes v3SpiderFoot { from { transform: rotate(15deg); } to { transform: rotate(-15deg); } }
@keyframes v3SpiderWalk {
    0% { opacity: 0; transform: translate3d(-50%, 0, 0) rotate(-7deg) scale(var(--particle-scale)); }
    10%, 85% { opacity: .76; }
    32% { transform: translate3d(calc(-50% + var(--particle-drift)), 33cqh, 0) rotate(-7deg) scale(var(--particle-scale)); }
    38% { transform: translate3d(calc(-50% + var(--particle-drift)), 39cqh, 0) rotate(8deg) scale(var(--particle-scale)); }
    72% { transform: translate3d(-50%, 74cqh, 0) rotate(8deg) scale(var(--particle-scale)); }
    100% { opacity: 0; transform: translate3d(-50%, calc(100cqh + 72px), 0) rotate(0deg) scale(var(--particle-scale)); }
}
@media (prefers-reduced-motion: reduce) {
    .v3-skin-effect--refined::before,
    .v3-skin-effect--refined::after,
    .v3-skin-effect--refined .v3-skin-particle,
    .v3-skin-effect--refined .v3-skin-motif.v3-skin-particle--spider,
    .v3-skin-effect--refined .v3-skin-motif:nth-child(n) svg,
    .v3-skin-effect--refined .v3-spider-leg,
    .v3-skin-effect--refined .v3-spider-foot { animation: none; }
    .v3-skin-effect--refined .v3-skin-particle:nth-child(n) { top: var(--particle-x); bottom: auto; opacity: .24; }
    .v3-skin-effect--refined .v3-skin-particle:nth-child(n+6) { display: none; }
}
.v3-skin-effect--bi4vip { --aura-a: #FCDEB1; --aura-b: #EDD7AF; }
.v3-skin-effect--bi4vip .v3-skin-particle { --particle-color: #FCDEB1; }
.v3-skin-effect--bi4vip .v3-skin-particle:nth-child(4n+2) { --particle-color: #EDD7AF; }
.v3-skin-effect--bi4vip .v3-skin-particle:nth-child(4n+3) { --particle-color: #FEFAFE; }
.v3-skin-effect--bi4vip .v3-skin-particle:nth-child(4n) { --particle-color: #BE9368; --motif-size: 26px; }
.v3-skin-effect--bi4vip::before { opacity: .24; background: radial-gradient(ellipse at 0 25%, #FCDEB1, transparent 42%), radial-gradient(ellipse at 100% 80%, #EDD7AF, transparent 46%); animation: v3MotifAura 7s ease-in-out infinite alternate; }
.v3-skin-effect--bi4vip::after { opacity: .28; background: radial-gradient(ellipse at 50% 10%, transparent 34%, #FEFAFE 34.4%, transparent 35%), radial-gradient(ellipse at 100% 60%, transparent 28%, #FCDEB1 28.4%, transparent 29%); animation: v3MotifAura 9s ease-in-out -3s infinite alternate; }
@media (prefers-reduced-motion: reduce) { .v3-skin-effect--bi4vip::before, .v3-skin-effect--bi4vip::after { animation: none; } }