/* Divatkém (Glam Spy) kém-kütyü réteg — js/ui/divatkemSpyVfx.js.
   Színek: --dk-c1 fő, --dk-c2 másodlagos, --dk-c3 mély, --dk-c4 fény, --dk-c5 kiegészítő. */
.dk-spy-layer { position: absolute; inset: 0; z-index: 640; pointer-events: none; overflow: visible; }
.dk-spy-layer svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Leadás: ezüst lencsefény + kiemelkedő holo-kütyü. */
.dk-spy-cast__flare { position: absolute; inset: -4%; border-radius: 18px; background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--dk-c1) 40%, transparent), transparent 46%),
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, color-mix(in srgb, var(--dk-c2) 50%, transparent) 54%, transparent 70%);
    background-size: 100% 100%, 260% 100%; mix-blend-mode: screen; animation: dkFlare 1.2s ease-out both; }
.dk-spy-cast__gadget { position: absolute; left: 50%; top: 38%; width: 42%; aspect-ratio: 1; translate: -50% -50%; color: #fff;
    filter: drop-shadow(0 0 3px var(--dk-c1)) drop-shadow(0 0 10px var(--dk-c2)) drop-shadow(0 2px 2px var(--dk-c3));
    animation: dkGadgetRise 1.5s cubic-bezier(.2,.9,.3,1.2) both; }
.dk-spy-cast__gadget svg { stroke-width: 2.6; }
.dk-spy-cast__sparkles, .dk-spy-vip__glitter, .dk-spy-mist { position: absolute; inset: 0; }
.dk-spy-sparkle { position: absolute; left: var(--dk-x); top: var(--dk-y); width: 9px; height: 9px; background: #fff; color: var(--dk-c2);
    clip-path: polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%); box-shadow: 0 0 6px currentColor;
    animation: dkTwinkle .9s calc(var(--dk-i) * 70ms) ease-in-out both; }
.dk-spy-sparkle:nth-child(3n) { background: var(--dk-c4); }
.dk-spy-label { position: absolute; left: 50%; bottom: 20%; translate: -50% 0; padding: 2px 8px; border: 1px solid #fff; border-radius: 999px;
    font: 800 10px/1.2 system-ui, sans-serif; letter-spacing: .22em; color: #fff; background: color-mix(in srgb, var(--dk-c3) 78%, transparent);
    box-shadow: 0 0 10px var(--dk-c1); animation: dkLabel 1.3s ease-out both; }

/* ping: kommunikátor-hullámok */
.dk-spy-rings i { position: absolute; left: 50%; top: 38%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
    border: 2px solid var(--dk-c2); box-shadow: 0 0 8px var(--dk-c1), inset 0 0 8px var(--dk-c1); animation: dkPing 1.2s ease-out both; }
.dk-spy-rings i:nth-child(2) { animation-delay: .22s; border-color: var(--dk-c4); }
.dk-spy-rings i:nth-child(3) { animation-delay: .44s; border-style: dashed; }

/* burst: kütyük sugárirányban */
.dk-spy-burst i { position: absolute; left: 50%; top: 40%; width: 20%; aspect-ratio: 1; margin: -10% 0 0 -10%; color: var(--dk-c1);
    filter: drop-shadow(0 0 4px var(--dk-c2)); animation: dkBurst 1.3s calc(var(--dk-i) * 30ms) cubic-bezier(.15,.8,.3,1) both; }
.dk-spy-burst i:nth-child(odd) { color: var(--dk-c4); }

/* beam / grapple: képernyő-szintű sugár a hősből a célpontig */
.dk-spy-beam { position: fixed; z-index: 9000; height: 0; transform-origin: 0 0; pointer-events: none; }
.dk-spy-beam__ray { position: absolute; left: 0; top: -3px; height: 6px; width: 100%; border-radius: 6px; transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--dk-c3), var(--dk-c1) 30%, #fff 50%, var(--dk-c2) 70%, transparent);
    box-shadow: 0 0 10px var(--dk-c1), 0 0 22px var(--dk-c2); animation: dkBeam 1.1s ease-out both; }
.dk-spy-beam--grapple .dk-spy-beam__ray { top: -1px; height: 2px; background: repeating-linear-gradient(90deg, #fff 0 6px, var(--dk-c1) 6px 10px); box-shadow: 0 0 6px var(--dk-c2); }
.dk-spy-beam__gadget { position: absolute; top: -14px; left: 0; width: 28px; height: 28px; color: #fff; filter: drop-shadow(0 0 5px var(--dk-c1));
    animation: dkBeamGadget .5s cubic-bezier(.5,0,.6,1) both; }
.dk-spy-beam--beam .dk-spy-beam__gadget { animation-duration: .35s; }
.dk-spy-beam__gadget svg { width: 100%; height: 100%; }

/* lock: szív-célkereszt */
.dk-spy-reticle { position: absolute; left: 50%; top: 40%; width: 64%; aspect-ratio: 1; translate: -50% -50%; color: var(--dk-c1);
    filter: drop-shadow(0 0 4px var(--dk-c2)) drop-shadow(0 0 1px #fff); animation: dkLock 1.2s cubic-bezier(.2,.8,.2,1) both; }
.dk-spy-reticle svg { stroke-width: 2; }

/* scan: pásztázó adatcsík + rács */
.dk-spy-grid { position: absolute; inset: 4%; border-radius: 14px; opacity: .5; mix-blend-mode: screen;
    background: repeating-linear-gradient(0deg, transparent 0 9px, color-mix(in srgb, var(--dk-c2) 45%, transparent) 10px), repeating-linear-gradient(90deg, transparent 0 9px, color-mix(in srgb, var(--dk-c1) 30%, transparent) 10px);
    animation: dkFade 1.2s ease-out both; }
.dk-spy-scanline { position: absolute; left: 2%; right: 2%; top: 0; height: 12%; background: linear-gradient(180deg, transparent, var(--dk-c1), #fff, var(--dk-c2), transparent);
    filter: blur(.5px); mix-blend-mode: screen; animation: dkScan 1.1s ease-in-out both; }

/* mist: parfümköd */
.dk-spy-puff { position: absolute; left: var(--dk-x); top: var(--dk-y); width: 34%; aspect-ratio: 1; margin: -17% 0 0 -17%; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--dk-c1) 55%, transparent), color-mix(in srgb, var(--dk-c2) 25%, transparent) 50%, transparent 70%);
    mix-blend-mode: screen; animation: dkPuff 1.25s calc(var(--dk-i) * 40ms) ease-out both; }

/* shield: holo-kupola */
.dk-spy-dome { position: absolute; inset: 2% -2% 8%; border-radius: 48% 48% 22% 22%; border: 2px solid color-mix(in srgb, #fff 70%, var(--dk-c2));
    background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--dk-c2) 28%, transparent), transparent 60%),
        repeating-linear-gradient(60deg, transparent 0 12px, color-mix(in srgb, var(--dk-c1) 22%, transparent) 13px 14px);
    box-shadow: 0 0 14px var(--dk-c1), inset 0 0 18px var(--dk-c2); animation: dkDome 1.25s ease-out both; }
.dk-spy-dome__mark { position: absolute; left: 50%; top: 12%; width: 22%; aspect-ratio: 1; translate: -50% 0; color: #fff; filter: drop-shadow(0 0 4px var(--dk-c1)); animation: dkFade 1.2s ease-out both; }

/* beam/grapple célpont-becsapódás */
.dk-spy-impact { position: absolute; left: 50%; top: 40%; width: 30%; aspect-ratio: 1; translate: -50% -50%; color: #fff;
    filter: drop-shadow(0 0 6px var(--dk-c1)) drop-shadow(0 0 14px var(--dk-c2)); animation: dkImpact .9s ease-out both; }

/* alaptámadás: kicsi célkereszt-jel */
.dk-spy-basic__mark { position: absolute; left: 50%; top: 40%; width: 34%; aspect-ratio: 1; translate: -50% -50%; color: var(--dk-c1);
    filter: drop-shadow(0 0 4px var(--dk-c2)); animation: dkImpact .85s ease-out both; }

/* Nitocris: körbejáró fekete párduc, sárga és lila szemmel */
.dk-panther-orbit { position: absolute; left: 50%; top: 46%; width: 0; height: 0; }
.dk-panther-walker { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: dkPantherOrbit 2.5s linear both; }
.dk-panther { position: absolute; width: clamp(64px, 7vw, 108px); height: auto; left: 0; top: 0; translate: -50% calc(-50% - clamp(78px, 8.2vw, 124px));
    overflow: visible; filter: drop-shadow(0 0 3px #9317DD) drop-shadow(0 0 8px #7A0392); }
.dk-panther__body, .dk-panther__tail { fill: #07020b; stroke: #4A2748; stroke-width: 1.2; stroke-linejoin: round; }
.dk-panther__tail { fill: none; stroke: #07020b; stroke-width: 4; stroke-linecap: round; animation: dkPantherTail .5s ease-in-out infinite alternate; transform-origin: 6px 40px; }
.dk-panther__eye--gold { fill: #FFD31A; filter: drop-shadow(0 0 2px #FFD31A); }
.dk-panther__eye--violet { fill: #C26BFF; filter: drop-shadow(0 0 2px #9317DD); }
.dk-panther-head { position: absolute; left: 50%; top: 36%; width: 62%; translate: -50% -50%; opacity: 0; animation: dkPantherHead 2.5s ease-out both; filter: drop-shadow(0 0 6px #9317DD); }
.dk-panther-head svg { height: auto; }
.dk-panther__face { fill: #07020b; stroke: #9317DD; stroke-width: 1.4; }
.dk-panther-head .dk-panther__eye { animation: dkPantherBlink 2.5s ease-in-out both; }
.dk-panther__nose { fill: none; stroke: #4A2748; stroke-width: 1.6; stroke-linecap: round; }

/* VIP Divatkém Eda: csillámeső, fényívek és VIP felirat */
.dk-spy-vip { z-index: 660; }
.dk-spy-vip__arcs i { position: absolute; left: 50%; top: 42%; width: 104%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
    border: 2px solid transparent; border-top-color: var(--dk-c2); border-right-color: color-mix(in srgb, var(--dk-c1) 70%, transparent);
    filter: drop-shadow(0 0 6px var(--dk-c1)); animation: dkVipArc 1.6s ease-out both; }
.dk-spy-vip__arcs i:nth-child(2) { width: 82%; animation-delay: .12s; animation-direction: reverse; border-top-color: var(--dk-c4); }
.dk-spy-vip__arcs i:nth-child(3) { width: 124%; animation-delay: .24s; border-top-color: #fff; }
.dk-spy-glitter { position: absolute; left: var(--dk-x); top: -6%; width: 5px; height: 5px; border-radius: 1px; rotate: 45deg;
    background: linear-gradient(135deg, #fff, var(--dk-c2) 50%, var(--dk-c1)); box-shadow: 0 0 5px var(--dk-c2);
    animation: dkGlitter 1.5s calc(var(--dk-i) * 55ms) ease-in both; }
.dk-spy-glitter:nth-child(3n) { background: var(--dk-c3); box-shadow: 0 0 5px var(--dk-c3); }
.dk-spy-vip__tag { position: absolute; right: 6%; top: 8%; padding: 2px 9px; border-radius: 6px; font: 900 13px/1.2 Georgia, serif; letter-spacing: .18em;
    color: var(--dk-c3); background: linear-gradient(135deg, var(--dk-c2), #fff 45%, var(--dk-c1)); border: 1px solid #fff;
    box-shadow: 0 0 12px var(--dk-c1), 0 0 2px var(--dk-c5); animation: dkVipTag 1.7s cubic-bezier(.2,1.4,.4,1) both; }
.dk-spy-vip__crown { position: absolute; left: 50%; top: 4%; width: 18%; aspect-ratio: 1; translate: -50% 0; color: var(--dk-c2); filter: drop-shadow(0 0 5px var(--dk-c1)); animation: dkFade 1.6s ease-out both; }

@keyframes dkFlare { 0% { opacity: 0; background-position: 0 0, 120% 0; } 25% { opacity: 1; } 100% { opacity: 0; background-position: 0 0, -60% 0; } }
@keyframes dkGadgetRise { 0% { opacity: 0; transform: translateY(30%) scale(.4) rotate(-18deg); } 30% { opacity: 1; transform: translateY(0) scale(1.08) rotate(4deg); } 70% { opacity: 1; transform: scale(1) rotate(0); } 100% { opacity: 0; transform: translateY(-24%) scale(.9); } }
@keyframes dkTwinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes dkLabel { 0% { opacity: 0; transform: translateY(8px); } 25%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes dkPing { from { opacity: .95; transform: scale(.3); } to { opacity: 0; transform: scale(2.3); } }
@keyframes dkBurst { 0% { opacity: 0; transform: rotate(var(--dk-a)) translateY(0) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--dk-a)) translateY(-150%) scale(1); } }
@keyframes dkBeam { 0% { transform: scaleX(0); opacity: 1; } 35% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes dkBeamGadget { from { left: 0; opacity: 1; } to { left: calc(100% - 28px); opacity: 1; } }
@keyframes dkLock { 0% { opacity: 0; transform: scale(2) rotate(-90deg); } 45% { opacity: 1; transform: scale(.92) rotate(0); } 60% { transform: scale(1.04); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
@keyframes dkFade { 0% { opacity: 0; } 20%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dkScan { from { transform: translateY(-20%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(760%); opacity: 0; } }
@keyframes dkPuff { 0% { opacity: 0; transform: scale(.3); } 35% { opacity: .9; } 100% { opacity: 0; transform: scale(1.6) translateY(-12%); } }
@keyframes dkDome { 0% { opacity: 0; transform: scale(.7); } 30% { opacity: 1; transform: scale(1.03); } 75% { opacity: .8; transform: scale(1); } 100% { opacity: 0; } }
@keyframes dkImpact { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(.95); } }
@keyframes dkPantherOrbit { 0% { transform: rotate(-90deg); opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { transform: rotate(270deg); opacity: 0; } }
@keyframes dkPantherTail { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@keyframes dkPantherHead { 0%, 55% { opacity: 0; transform: scale(.6); } 72% { opacity: 1; transform: scale(1.05); } 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes dkPantherBlink { 0%, 76% { opacity: 1; } 79% { opacity: .1; } 82%, 100% { opacity: 1; } }
@keyframes dkVipArc { 0% { opacity: 0; transform: rotate(-120deg) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(200deg) scale(1.05); } }
@keyframes dkGlitter { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(560%) rotate(320deg); } }
@keyframes dkVipTag { 0% { opacity: 0; transform: scale(.3) rotate(-14deg); } 25% { opacity: 1; transform: scale(1.12) rotate(4deg); } 40% { transform: scale(1) rotate(0); } 82% { opacity: 1; } 100% { opacity: 0; } }

body.v3-vfx-disabled :is(.dk-spy-layer, .dk-spy-beam) { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    .dk-spy-layer *, .dk-spy-beam * { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; }
    .dk-spy-layer, .dk-spy-beam { display: none; }
}