/* =======================================
   KIRA (heroId 81) - BI4 POP SZTÁR (bi4_81)
   =======================================
   Futurisztikus kristály K-pop / virtuális idol koncert.
   Paletta (--ki-1 ... --ki-5, a kiraConfig.js írja inline):
   #E171FD (neon rózsaszín-lila), #4966F9 (koncertkék), #6D3E9E (mély lila),
   #7196FB (jégkék), #7E57E5 (ibolya).
   Hatáskör: [data-ki-theme="bi4"] / .ki-bi4-* osztályok, így semelyik másik
   Kira-skint nem érint. A kira-combat-vfx.css és a kira-rework.css UTÁN kell
   betölteni. */

/* =======================================
   1) HARCI VFX (.ki-scene) - motívumok
   ======================================= */
/* Kristály, hangjegy, csillag, mikrofon, fénypálca: körvonalas, áttetsző kitöltésű "üvegdíszek". */
.ki-scene[data-ki-theme="bi4"] .ki-motif svg,
.ki-state[data-ki-theme="bi4"] svg { stroke-width: 4.5; }
.ki-scene[data-ki-theme="bi4"] .ki-motif svg *,
.ki-state[data-ki-theme="bi4"] svg * { fill: color-mix(in srgb, var(--ki-4) 22%, transparent); }
.ki-scene[data-ki-theme="bi4"] .ki-motif svg[data-bi4="1"] path,
.ki-scene[data-ki-theme="bi4"] .ki-motif svg[data-bi4="5"] path,
.ki-state[data-ki-theme="bi4"] svg[data-bi4="1"] path,
.ki-state[data-ki-theme="bi4"] svg[data-bi4="5"] path { fill: none; }
.ki-scene[data-ki-theme="bi4"] .ki-motif svg[data-bi4="1"] ellipse,
.ki-scene[data-ki-theme="bi4"] .ki-motif svg[data-bi4="5"] ellipse { fill: color-mix(in srgb, var(--ki-1) 55%, transparent); }
.ki-scene[data-ki-theme="bi4"] .ki-motif svg[data-bi4="2"] path { fill: #fff; stroke: var(--ki-1); stroke-width: 3; }
/* Holografikus "BI4" felirat: fehér töltés, neon kontúr. */
.ki-scene[data-ki-theme="bi4"] .ki-motif svg text,
.ki-state[data-ki-theme="bi4"] svg text { fill: #fff; stroke: var(--ki-1); stroke-width: 2.4; paint-order: stroke; }
.ki-scene[data-ki-theme="bi4"] .ki-motif {
    filter: drop-shadow(0 0 3px #ffffffaa) drop-shadow(0 0 8px var(--ki-1)) drop-shadow(0 0 15px var(--ki-2));
}
.ki-state[data-ki-theme="bi4"] .ki-state-motif {
    width: 32px; height: 32px;
    filter: drop-shadow(0 0 3px #ffffff99) drop-shadow(0 0 8px var(--ki-1));
}
.ki-state[data-ki-theme="bi4"] .ki-state-motif svg { stroke: var(--ki-4); }
.ki-state[data-ki-theme="bi4"] .ki-state-motif:nth-of-type(odd) svg { stroke: var(--ki-1); }

/* Hangjegyek / szilánkok / csillagok, amiket a JS dobál */
.ki-bi4-note-fx { z-index: 3; }
.ki-bi4-note-fx svg { stroke: var(--ki-1); }
.ki-bi4-note-fx:nth-child(even) svg { stroke: var(--ki-4); }
.ki-bi4-shard-fx svg { stroke: var(--ki-4); }
.ki-bi4-shard-fx:nth-child(3n) svg { stroke: var(--ki-1); }
.ki-bi4-star-fx svg { stroke: var(--ki-4); }
.ki-bi4-impact-gem { z-index: 4; filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px var(--ki-1)) drop-shadow(0 0 26px var(--ki-2)) !important; }
.ki-bi4-impact-gem svg { stroke: var(--ki-1); stroke-width: 3; }
.ki-drain-note svg { stroke: var(--ki-1); }
.ki-drain-note:nth-child(even) svg { stroke: var(--ki-4); }

/* =======================================
   2) KUNAI = kristályszilánk mikrofon-penge / fénypálca tőr
   ======================================= */
.ki-scene[data-ki-theme="bi4"] .ki-blade {
    filter: drop-shadow(0 0 3px #ffffffcc) drop-shadow(0 0 9px var(--ki-1)) drop-shadow(0 0 17px var(--ki-2));
}
/* Csóva: irizáló kristályszilánk-farok, csillámló színátmenettel. */
.ki-scene[data-ki-theme="bi4"] .ki-blade em {
    left: -165%; width: 155%; height: 34%; top: 33%; z-index: -1; opacity: .85;
    background: linear-gradient(90deg, transparent, #4966F966 16%, #E171FD 40%, #7196FB 64%, #7E57E5 80%, #fff);
    background-size: 220% 100%;
    clip-path: polygon(0 50%, 12% 34%, 22% 47%, 38% 6%, 50% 36%, 66% 18%, 100% 50%, 70% 84%, 54% 62%, 40% 96%, 26% 58%, 13% 70%);
    animation: kiBi4Shimmer 620ms linear infinite;
}
/* Fejlesztett Kunai: villám helyett lézer-szaggatott fényív. */
.ki-scene[data-ki-theme="bi4"] .ki-blade > i svg { stroke: #fff; stroke-width: 2.2; stroke-dasharray: 7 4; filter: drop-shadow(0 0 4px var(--ki-1)) drop-shadow(0 0 8px var(--ki-4)); }
.ki-scene[data-ki-theme="bi4"] .ki-blade-projection { filter: brightness(1.5) drop-shadow(-3px 0 3px var(--ki-1)) drop-shadow(3px 0 3px var(--ki-4)); }
/* Penge végén lógó hangjegy-függő. */
.ki-bi4-charm { left: -96%; top: 47%; width: 46%; height: 46%; rotate: 0deg; transform-origin: 50% 0; animation: kiBi4Dangle 640ms ease-in-out infinite alternate; filter: drop-shadow(0 0 4px var(--ki-1)); }
.ki-bi4-charm svg { stroke: var(--ki-1); stroke-width: 6; }
.ki-bi4-charm svg path { fill: none !important; }
.ki-bi4-charm svg ellipse { fill: var(--ki-4) !important; }
/* Három kristályszilánk-csóva a penge mögött. */
.ki-bi4-shard {
    position: absolute; display: block; text-decoration: none; pointer-events: none;
    width: 27%; height: 27%;
    left: calc(-62% - var(--s) * 36%); top: calc(37% + (var(--s) - 1) * 24%);
    animation: kiBi4ShardTrail 640ms ease-out infinite; animation-delay: calc(var(--s) * -190ms);
    filter: drop-shadow(0 0 4px var(--ki-1));
}
.ki-bi4-shard svg { stroke: var(--ki-4); stroke-width: 6; }
.ki-bi4-shard:nth-of-type(odd) svg { stroke: var(--ki-1); }

/* =======================================
   3) Kotta-söprés, hologram felirat, szalag, lézer
   ======================================= */
.ki-bi4-staff-lines { transform: none; z-index: 1; }
.ki-bi4-staff-lines svg { width: 100%; height: 100%; overflow: visible; fill: none; }
.ki-bi4-staff-lines path { fill: none; stroke: var(--ki-4); stroke-width: 1.15; stroke-dasharray: 1000; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--ki-1)); }
.ki-bi4-staff-lines path:nth-child(odd) { stroke: var(--ki-1); }
.ki-bi4-staff-lines path:nth-child(3) { stroke: #fff; stroke-width: 1.5; }

.ki-bi4-flash {
    z-index: 6;
    filter: drop-shadow(0 0 6px var(--ki-1)) drop-shadow(0 0 14px var(--ki-2)) drop-shadow(2px 0 0 #7196FB99) drop-shadow(-2px 0 0 #E171FD99);
}
.ki-bi4-flash svg text { fill: #fff; stroke: var(--ki-1); stroke-width: 2; paint-order: stroke; }
.ki-bi4-flash svg path { stroke: var(--ki-4); stroke-width: 1.6; }
.ki-bi4-flash::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, #7196FB2e 3px 4px); mix-blend-mode: screen; }

.ki-bi4-sweep {
    z-index: 2; border-radius: 8px;
    background: linear-gradient(90deg, transparent, #E171FD38 28%, #7196FB4d 50%, #E171FD38 72%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.ki-bi4-sweep svg { fill: none; stroke: #fff; stroke-width: 1.6; }
.ki-bi4-sweep svg path { fill: none; stroke: #fff; stroke-width: 1.6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px var(--ki-1)); }
.ki-bi4-sweep svg path { stroke-dasharray: 18 6 4 6; }

.ki-scene[data-ki-theme="bi4"] .ki-ribbon path { stroke: var(--ki-1); stroke-width: 2.2; filter: drop-shadow(0 0 4px var(--ki-4)) drop-shadow(0 0 10px var(--ki-2)); }
.ki-scene[data-ki-theme="bi4"] .ki-ribbon path.ki-ribbon-halo { stroke: var(--ki-2); stroke-width: 11; opacity: .28; filter: none; }
.ki-scene[data-ki-theme="bi4"] .ki-ribbon.is-life path { stroke: #fff; stroke-width: 2.6; }
.ki-scene[data-ki-theme="bi4"] .ki-ribbon.is-life path.ki-ribbon-halo { stroke: var(--ki-1); stroke-width: 15; opacity: .22; }

/* Neon lézernyalábok a villám helyén */
.ki-bi4-beam {
    transform-origin: 0 50%; border-radius: 99px;
    background: linear-gradient(90deg, transparent, var(--ki-1) 8%, #fff 50%, var(--ki-4) 92%, transparent);
    box-shadow: 0 0 8px var(--ki-1), 0 0 20px var(--ki-2);
}
.ki-bi4-beam.is-alt { background: linear-gradient(90deg, transparent, var(--ki-4) 8%, #fff 50%, var(--ki-5) 92%, transparent); box-shadow: 0 0 8px var(--ki-4), 0 0 20px var(--ki-5); }

/* =======================================
   4) Becsapódás, törés, klón, füst, Zolan, élet-elszívás
   ======================================= */
.ki-scene[data-ki-theme="bi4"] .ki-burst {
    background: radial-gradient(circle, #ffffffcc 0 4%, color-mix(in srgb, var(--ki-1) 55%, transparent) 13%, color-mix(in srgb, var(--ki-2) 38%, transparent) 36%, transparent 66%);
}
.ki-scene[data-ki-theme="bi4"] .ki-burst i { border-color: #fff; box-shadow: 0 0 18px var(--ki-1), inset 0 0 18px var(--ki-4); }
.ki-scene[data-ki-theme="bi4"] .ki-burst i:nth-child(2) { border-color: var(--ki-4); }
.ki-scene[data-ki-theme="bi4"] .ki-burst i:nth-child(3) { border-color: var(--ki-1); }
/* Reflektor-sugarak (csillagfény) a robbanás mögött */
.ki-scene[data-ki-theme="bi4"] .ki-burst::after {
    content: ""; position: absolute; inset: -12%; border-radius: 50%; pointer-events: none;
    background: repeating-conic-gradient(from 0deg, #ffffffaa 0 2.5deg, transparent 2.5deg 22.5deg);
    -webkit-mask-image: radial-gradient(circle, transparent 26%, #000 38%, transparent 72%);
    mask-image: radial-gradient(circle, transparent 26%, #000 38%, transparent 72%);
    animation: kiBi4Spin 2400ms linear infinite;
}
.ki-scene[data-ki-theme="bi4"] .ki-hit-frame {
    border-color: var(--ki-1);
    box-shadow: 0 0 22px var(--ki-1), 0 0 36px var(--ki-2), inset 0 0 26px color-mix(in srgb, var(--ki-4) 55%, transparent);
    background:
        linear-gradient(115deg, transparent 30%, #7196FB44 48%, #E171FD44 54%, transparent 70%),
        repeating-linear-gradient(0deg, transparent 0 5px, #E171FD1a 5px 6px);
}
.ki-scene[data-ki-theme="bi4"] .ki-hit-frame svg { stroke: var(--ki-4); stroke-dasharray: 8 5; }
.ki-scene[data-ki-theme="bi4"] .ki-fracture { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--ki-1)) drop-shadow(2px 0 2px var(--ki-4)); }
.ki-scene[data-ki-theme="bi4"] .ki-fracture svg { stroke: #fff; }
.ki-scene[data-ki-theme="bi4"] .ki-fracture.is-bite svg { stroke: var(--ki-1); }

/* Hologram-klón / futó Kira: kromatikus eltolás és pásztázó fénycsík */
.ki-scene[data-ki-theme="bi4"] .ki-clone,
.ki-scene[data-ki-theme="bi4"] .ki-runner {
    filter: saturate(1.2) drop-shadow(-3px 0 3px var(--ki-1)) drop-shadow(3px 0 3px var(--ki-4)) drop-shadow(0 0 12px var(--ki-2));
}
.ki-scene[data-ki-theme="bi4"] .ki-clone::after,
.ki-scene[data-ki-theme="bi4"] .ki-runner::after {
    background:
        linear-gradient(115deg, transparent 18%, #E171FD40 38%, #7196FB59 52%, transparent 72%),
        repeating-linear-gradient(0deg, transparent 0 4px, #7196FB33 5px 6px);
}
.ki-scene[data-ki-theme="bi4"] .ki-portrait { border-color: var(--ki-4); background: linear-gradient(135deg, var(--ki-3), var(--ki-1)); }
.ki-scene[data-ki-theme="bi4"] .ki-smoke-plume {
    background: radial-gradient(ellipse at 40% 60%, #1b0a3ae0, color-mix(in srgb, var(--ki-3) 80%, #000) 22%, color-mix(in srgb, var(--ki-5) 62%, transparent) 40%, color-mix(in srgb, var(--ki-1) 46%, transparent) 54%, transparent 72%);
}
.ki-state-smoke[data-ki-theme="bi4"] i {
    background: radial-gradient(ellipse, #ffffff40 6%, color-mix(in srgb, var(--ki-5) 70%, #0a0418) 30%, color-mix(in srgb, var(--ki-1) 50%, transparent) 52%, transparent 72%);
}
.ki-state-smoke[data-ki-theme="bi4"]::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0 4px, #7196FB26 4px 5px);
}
/* Plazmapuha Csapda (1. képesség): a kártyára ülő neon keret/ködréteg bi4-nél teljesen kikapcsolva. */
.ki-state-charge[data-ki-theme="bi4"] { display: none !important; }

.ki-scene[data-ki-theme="bi4"] .ki-charge-ground {
    background: radial-gradient(ellipse, #ffffffb0, var(--ki-1) 30%, color-mix(in srgb, var(--ki-2) 60%, transparent) 50%, transparent 70%);
}
.ki-scene[data-ki-theme="bi4"] .ki-charge-ground i { border-color: var(--ki-4); }
.ki-scene[data-ki-theme="bi4"] .ki-charge-ground i:nth-child(2) { border-color: var(--ki-1); border-style: dashed; }
.ki-scene[data-ki-theme="bi4"] .ki-return-core { background: radial-gradient(circle, #fff 10%, var(--ki-1) 38%, transparent 70%); box-shadow: 0 0 16px var(--ki-1), 0 0 30px var(--ki-2); }
.ki-scene[data-ki-theme="bi4"] .ki-life { border-radius: 30% 70% 30% 70%; background: linear-gradient(135deg, #fff, var(--ki-1)); box-shadow: 0 0 6px var(--ki-1), 0 0 16px var(--ki-4), 0 0 28px var(--ki-2); }
.ki-scene[data-ki-theme="bi4"] .ki-life-arrival { border-color: var(--ki-1); box-shadow: 0 0 20px var(--ki-4), 0 0 34px var(--ki-2); }
.ki-scene[data-ki-theme="bi4"] .ki-speech-trail { color: #fff; text-shadow: -1px -1px 0 #160a2e, 1px -1px 0 #160a2e, -1px 1px 0 #160a2e, 1px 1px 0 #160a2e, 0 2px 4px #000, 0 0 9px var(--ki-1), 0 0 18px var(--ki-2); }
.ki-scene[data-ki-theme="bi4"] .ki-speech-trail:nth-child(even) { color: #c9d6ff; }
.ki-scene[data-ki-theme="bi4"] .ki-eyes { filter: drop-shadow(0 0 5px var(--ki-1)) drop-shadow(0 0 16px var(--ki-5)); }
.ki-scene[data-ki-theme="bi4"] .ki-eye-veil { background: radial-gradient(ellipse, #0b0420f5 8%, #1c0b3cb0 45%, transparent 72%); }

/* Zolan: holografikus kristálygömb, két keringő hologram-gyűrűvel */
.ki-scene[data-ki-theme="bi4"] .ki-zolan { filter: drop-shadow(0 0 6px #ffffff88) drop-shadow(0 0 14px var(--ki-1)) drop-shadow(0 0 28px var(--ki-2)); }
.ki-bi4-orb {
    position: absolute; inset: -6%; z-index: 2; border-radius: 50%; pointer-events: none;
    border: 2px solid var(--ki-4);
    box-shadow: 0 0 14px var(--ki-1), inset 0 0 14px #7196FB66;
    transform: rotateX(64deg) rotateZ(-22deg);
    animation: kiBi4Spin 3200ms linear infinite;
}
.ki-bi4-orb::before { content: ""; position: absolute; left: 8%; top: 16%; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, var(--ki-1) 55%, var(--ki-5)); box-shadow: 0 0 12px var(--ki-1); }
.ki-bi4-orb.is-b { inset: 4%; border-style: dashed; border-color: var(--ki-1); transform: rotateX(-58deg) rotateZ(34deg); animation-direction: reverse; animation-duration: 2400ms; }
.ki-bi4-orb.is-b::before { left: 82%; top: 62%; width: 8px; height: 8px; background: radial-gradient(circle at 30% 30%, #fff, var(--ki-4) 55%, var(--ki-2)); box-shadow: 0 0 10px var(--ki-4); }

/* =======================================
   5) Skin-mező: színpad (reflektorkúpok, LED-fal, lézerek, kristályok, hangjegyek, fénypálcák, csillogás)
   ======================================= */
.ki-skin-field.is-bi4 { overflow: visible; }
.ki-bi4-cone {
    position: absolute; top: -34%; left: -14%; width: 50%; height: 135%; transform-origin: 50% 0;
    background: linear-gradient(180deg, #ffffff99, color-mix(in srgb, var(--ki-1) 40%, transparent) 30%, transparent 86%);
    clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%);
    opacity: .55; animation: kiBi4ConeSweep 2400ms ease-in-out infinite alternate;
}
.ki-bi4-cone.is-right { left: 64%; background: linear-gradient(180deg, #ffffff99, color-mix(in srgb, var(--ki-4) 42%, transparent) 30%, transparent 86%); animation-direction: alternate-reverse; }
.ki-bi4-cone.is-mid { left: 27%; top: -42%; width: 46%; opacity: .34; background: linear-gradient(180deg, #ffffff66, color-mix(in srgb, var(--ki-5) 44%, transparent) 30%, transparent 86%); animation-duration: 3200ms; }
.ki-bi4-stage {
    position: absolute; left: -6%; right: -6%; bottom: -7%; height: 21%; border-radius: 50%;
    border: 2px solid var(--ki-1);
    background: radial-gradient(ellipse, #ffffff66 0, color-mix(in srgb, var(--ki-4) 42%, transparent) 38%, transparent 70%);
    box-shadow: 0 0 16px var(--ki-1), inset 0 0 14px var(--ki-2);
}
.ki-bi4-stage::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 1px dashed var(--ki-4); animation: kiBi4Spin 7s linear infinite; }
.ki-bi4-led {
    position: absolute; left: 8%; top: 3%; width: 84%; height: 43%; overflow: hidden;
    border: 1px solid var(--ki-4); border-radius: 4px; opacity: .55;
    background:
        repeating-linear-gradient(0deg, transparent 0 3px, #7196FB26 3px 4px),
        repeating-linear-gradient(90deg, transparent 0 3px, #E171FD26 3px 4px),
        linear-gradient(135deg, #6D3E9E66, #4966F944);
    box-shadow: 0 0 12px color-mix(in srgb, var(--ki-2) 60%, transparent);
    animation: kiBi4LedFlicker 1700ms steps(1, end) infinite;
}
.ki-bi4-led svg { position: absolute; left: 16%; top: 0; width: 68%; height: 100%; stroke: var(--ki-4); fill: none; }
.ki-bi4-led svg text { fill: #ffffffd9; stroke: var(--ki-1); stroke-width: 1.6; paint-order: stroke; }
.ki-bi4-laser {
    position: absolute; left: -16%; top: 30%; width: 132%; height: 2px; --r: -24deg; rotate: var(--r);
    background: linear-gradient(90deg, transparent, var(--ki-1), #fff, var(--ki-4), transparent);
    box-shadow: 0 0 9px var(--ki-1); animation: kiBi4Laser 1800ms ease-in-out infinite alternate;
}
.ki-bi4-laser.is-cross { top: 47%; --r: 22deg; background: linear-gradient(90deg, transparent, var(--ki-4), #fff, var(--ki-2), transparent); box-shadow: 0 0 9px var(--ki-4); animation-direction: alternate-reverse; }
.ki-bi4-laser.is-low { top: 70%; --r: -8deg; opacity: .7; background: linear-gradient(90deg, transparent, var(--ki-5), #fff, var(--ki-1), transparent); animation-duration: 2400ms; }
.ki-bi4-gem, .ki-bi4-note, .ki-bi4-stick { position: absolute; display: block; pointer-events: none; }
.ki-bi4-gem { left: -9%; top: 13%; width: 23%; aspect-ratio: 1; animation: kiBi4Float 3200ms ease-in-out infinite alternate; filter: drop-shadow(0 0 5px #fff8) drop-shadow(0 0 11px var(--ki-1)); }
.ki-bi4-gem.is-right { left: auto; right: -9%; top: 40%; animation-delay: -1.4s; }
.ki-bi4-gem svg { stroke: var(--ki-4); stroke-width: 4; fill: color-mix(in srgb, var(--ki-4) 24%, transparent); }
.ki-bi4-gem.is-right svg { stroke: var(--ki-1); fill: color-mix(in srgb, var(--ki-1) 24%, transparent); }
.ki-bi4-note { left: 7%; top: 0; width: 15%; aspect-ratio: 1; animation: kiBi4Float 2600ms ease-in-out infinite alternate; filter: drop-shadow(0 0 6px var(--ki-1)); }
.ki-bi4-note.is-right { left: auto; right: 7%; top: 48%; animation-delay: -1.1s; }
.ki-bi4-note svg { stroke: var(--ki-1); stroke-width: 5; fill: none; }
.ki-bi4-note svg ellipse { fill: var(--ki-4); stroke: var(--ki-4); }
.ki-bi4-note.is-right svg { stroke: var(--ki-4); }
.ki-bi4-stick { left: 21%; bottom: -3%; width: 14%; aspect-ratio: 1; transform-origin: 50% 100%; animation: kiBi4Wave 1100ms ease-in-out infinite alternate; filter: drop-shadow(0 0 7px var(--ki-1)) drop-shadow(0 0 13px var(--ki-2)); }
.ki-bi4-stick.is-right { left: auto; right: 21%; animation-delay: -.55s; filter: drop-shadow(0 0 7px var(--ki-4)) drop-shadow(0 0 13px var(--ki-2)); }
.ki-bi4-stick svg { stroke: #fff; stroke-width: 4; fill: color-mix(in srgb, var(--ki-1) 62%, transparent); }
.ki-bi4-stick.is-right svg { fill: color-mix(in srgb, var(--ki-4) 62%, transparent); }
.ki-bi4-spark { position: absolute; width: 10px; height: 10px; background: radial-gradient(circle, #fff 0 22%, var(--ki-1) 42%, transparent 70%); animation: kiBi4Twinkle 1300ms ease-in-out infinite; }
.ki-bi4-spark::before, .ki-bi4-spark::after { content: ""; position: absolute; left: 50%; top: 50%; background: linear-gradient(90deg, transparent, #fff, transparent); }
.ki-bi4-spark::before { width: 26px; height: 2px; translate: -50% -50%; }
.ki-bi4-spark::after { width: 2px; height: 26px; translate: -50% -50%; background: linear-gradient(180deg, transparent, #fff, transparent); }
.ki-bi4-spark { left: 17%; top: 24%; }
.ki-bi4-spark.is-b { left: auto; right: 13%; top: 11%; animation-delay: -.4s; }
.ki-bi4-spark.is-c { left: 7%; top: 64%; animation-delay: -.8s; }
.ki-bi4-spark.is-d { left: auto; right: 6%; top: 72%; animation-delay: -1.1s; }

/* =======================================
   6) UI: mérő, kártya-gyűrű, tooltip, műhely-popup (kira-rework.css felülírás)
   ======================================= */
/* Közös motívum-rajz: körvonalas, áttetsző kitöltésű kristály/hangjegy/mikrofon */
:is(.kira-zolan-meter, .kira-card-fx, .kira-kunai-tooltip, [id="kira-kunai-workshop"])[data-ki-theme="bi4"] .ki-motif svg {
    fill: none; stroke: var(--m-tint, var(--ki-4)); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
:is(.kira-zolan-meter, .kira-card-fx, .kira-kunai-tooltip, [id="kira-kunai-workshop"])[data-ki-theme="bi4"] .ki-motif svg * {
    fill: color-mix(in srgb, var(--m-tint, var(--ki-4)) 24%, transparent);
}
:is(.kira-zolan-meter, .kira-card-fx, .kira-kunai-tooltip, [id="kira-kunai-workshop"])[data-ki-theme="bi4"] .ki-motif svg[data-bi4="1"] path,
:is(.kira-zolan-meter, .kira-card-fx, .kira-kunai-tooltip, [id="kira-kunai-workshop"])[data-ki-theme="bi4"] .ki-motif svg[data-bi4="5"] path { fill: none; }
:is(.kira-zolan-meter, .kira-card-fx, .kira-kunai-tooltip, [id="kira-kunai-workshop"])[data-ki-theme="bi4"] .ki-motif svg[data-bi4="2"] path { fill: #fff; stroke-width: 3; }
:is(.kira-zolan-meter, .kira-card-fx, .kira-kunai-tooltip, [id="kira-kunai-workshop"])[data-ki-theme="bi4"] .ki-motif svg text { fill: #fff; stroke: var(--m-tint, var(--ki-1)); stroke-width: 2.2; paint-order: stroke; }
:is(.kira-zolan-meter, .kira-card-fx, .kira-kunai-tooltip, [id="kira-kunai-workshop"])[data-ki-theme="bi4"] .ki-motif {
    width: 20px; height: 20px;
    filter: drop-shadow(0 0 3px #fff9) drop-shadow(0 0 7px var(--m-tint, var(--ki-1)));
}
.kira-zolan-meter[data-ki-theme="bi4"] .kira-zolan-meter__fx .ki-motif,
.kira-card-fx[data-ki-theme="bi4"] .kira-card-fx__motifs .ki-motif { left: -10px; top: -10px; }
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__vfx .ki-motif { width: 24px; height: 24px; }
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__vfx .ki-motif { width: 26px; height: 26px; }

/* --- Zolan-mérő a kártyán --- */
/* Forgó irizáló glória (a halo saját villanás-animációja érintetlen marad). */
.kira-zolan-meter[data-ki-theme="bi4"] .kira-zolan-meter__halo::before {
    content: ""; position: absolute; inset: -3px; border-radius: 50%;
    background: conic-gradient(from 0deg, #E171FD99, #4966F999, #7196FB99, #7E57E599, #E171FD99);
    -webkit-mask-image: radial-gradient(circle, transparent 40%, #000 54%, transparent 76%);
    mask-image: radial-gradient(circle, transparent 40%, #000 54%, transparent 76%);
    animation: kiBi4Spin 7s linear infinite;
}
.kira-zolan-meter[data-ki-theme="bi4"].is-awake .kira-zolan-meter__halo::before { animation-duration: 2.6s; }
.kira-zolan-meter[data-ki-theme="bi4"]:not(.is-awake) .kira-zolan-meter__icon {
    opacity: .62; filter: grayscale(.3) brightness(.82) drop-shadow(0 0 6px color-mix(in srgb, var(--ki-1) 55%, transparent));
}
.kira-zolan-meter[data-ki-theme="bi4"].is-awake .kira-zolan-meter__icon {
    filter: drop-shadow(0 0 3px #ffffffaa) drop-shadow(0 0 10px var(--ki-1)) drop-shadow(0 0 18px var(--ki-2));
}
/* Lézer-szaggatás villám helyett */
.kira-zolan-meter[data-ki-theme="bi4"] .kira-zolan-meter__arcs path,
.kira-card-fx[data-ki-theme="bi4"] .kira-card-fx__spark path,
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__bolts path {
    stroke: color-mix(in srgb, var(--ki-4) 55%, #fff); stroke-width: 1.5;
    filter: drop-shadow(0 0 2px var(--ki-1)) drop-shadow(0 0 5px var(--ki-2));
}
/* Alvás-jelzés: z betűk helyett hangjegyek (halk dúdolás). */
.kira-zolan-meter[data-ki-theme="bi4"] .kira-zolan-meter__sleep i:empty {
    width: auto; height: auto; border: 0; border-radius: 0; box-shadow: none; opacity: 0;
    font: 900 11px/1 system-ui, sans-serif; color: var(--ki-1); text-shadow: 0 0 5px var(--ki-1), 0 0 9px var(--ki-2);
}
.kira-zolan-meter[data-ki-theme="bi4"] .kira-zolan-meter__sleep i:nth-child(1)::before { content: "\266A"; }
.kira-zolan-meter[data-ki-theme="bi4"] .kira-zolan-meter__sleep i:nth-child(2)::before { content: "\266B"; }
.kira-zolan-meter[data-ki-theme="bi4"] .kira-zolan-meter__sleep i:nth-child(3)::before { content: "\266C"; }
.kira-zolan-meter[data-ki-theme="bi4"] .kira-zolan-meter__count {
    border-color: var(--ki-4);
    background: linear-gradient(180deg, color-mix(in srgb, var(--ki-3) 80%, #000), #12072a);
}
.kira-zolan-meter[data-ki-theme="bi4"] .kira-zolan-meter__count img { filter: drop-shadow(0 0 3px var(--ki-1)) drop-shadow(0 0 6px var(--ki-2)); }
.kira-zolan-meter[data-ki-theme="bi4"] .kira-zolan-meter__awake { border-color: var(--ki-1); box-shadow: 0 0 10px color-mix(in srgb, var(--ki-1) 60%, transparent); }
.kira-zolan-meter[data-ki-theme="bi4"] .kira-zolan-meter__awake b { text-shadow: 0 0 5px var(--ki-1); }

/* --- Kunai-gyűrű a kártyán --- */
.kira-card-fx[data-ki-theme="bi4"] .kira-card-fx__aura {
    box-shadow: 0 0 calc(6px + var(--ki-fill) * 14px) color-mix(in srgb, var(--ki-1) 45%, transparent), 0 0 30px color-mix(in srgb, var(--ki-2) 30%, transparent), inset 0 0 14px color-mix(in srgb, var(--ki-4) 25%, transparent);
}
.kira-card-fx[data-ki-theme="bi4"] .kira-card-fx__kunai img {
    filter: drop-shadow(0 2px 3px #000c) drop-shadow(0 0 4px color-mix(in srgb, var(--ki-1) 70%, transparent));
}
.kira-card-fx[data-ki-theme="bi4"] .kira-card-fx__kunai.is-upgraded img {
    filter: drop-shadow(0 2px 3px #000c) drop-shadow(0 0 4px #fff) drop-shadow(0 0 9px var(--ki-1)) drop-shadow(0 0 14px var(--ki-2));
}
/* Fejlesztett Kunai csillogó csillaga */
.kira-card-fx[data-ki-theme="bi4"] .kira-card-fx__kunai.is-upgraded::after {
    content: ""; position: absolute; right: -3px; top: -3px; width: 12px; height: 12px;
    background: radial-gradient(circle, #fff 0 25%, var(--ki-1) 45%, transparent 72%);
    animation: kiBi4Twinkle 1.4s ease-in-out infinite; animation-delay: calc(var(--k-i) * -.3s);
}

/* --- Tooltip: koncertszínpad + hologram-kijelző --- */
.kira-kunai-tooltip[data-ki-theme="bi4"], #kira-kunai-workshop[data-ki-theme="bi4"] {
    border: 2px solid transparent;
    outline-color: color-mix(in srgb, var(--ki-4) 45%, transparent);
    background:
        radial-gradient(circle at 10% 6%, color-mix(in srgb, var(--ki-1) 24%, transparent), transparent 36%) padding-box,
        radial-gradient(circle at 94% 92%, color-mix(in srgb, var(--ki-2) 42%, transparent), transparent 48%) padding-box,
        linear-gradient(155deg, #2b1252f5, #120826fa 55%, #3b1c68f2) padding-box,
        linear-gradient(135deg, var(--ki-1), var(--ki-4), var(--ki-2), var(--ki-5), var(--ki-1)) border-box;
    box-shadow: 0 24px 70px #000e, 0 0 26px color-mix(in srgb, var(--ki-1) 40%, transparent), 0 0 44px color-mix(in srgb, var(--ki-2) 28%, transparent), inset 0 0 48px #0008;
}
.kira-kunai-tooltip[data-ki-theme="bi4"].is-awake, #kira-kunai-workshop[data-ki-theme="bi4"].is-awake {
    border-color: transparent;
    box-shadow: 0 24px 70px #000e, 0 0 38px color-mix(in srgb, var(--ki-1) 60%, transparent), 0 0 58px color-mix(in srgb, var(--ki-4) 40%, transparent), inset 0 0 48px #000a;
}
/* Mintázat: reflektorkúpok a sarkokból, LED-pontrács, kottavonalak alul, csillogás */
.kira-kunai-tooltip[data-ki-theme="bi4"]::before, #kira-kunai-workshop[data-ki-theme="bi4"]::before {
    opacity: 1;
    background-image:
        conic-gradient(from 146deg at 6% -4%, transparent 0, #E171FD66 11deg, #E171FD1f 21deg, transparent 26deg),
        conic-gradient(from 190deg at 94% -4%, transparent 0, #7196FB66 11deg, #7196FB1f 21deg, transparent 26deg),
        radial-gradient(circle, #7196FB3d 0 0.9px, transparent 1.4px),
        repeating-linear-gradient(0deg, transparent 0 7px, #E171FD26 7px 8px),
        radial-gradient(1.6px 1.6px at 18% 30%, #fff, transparent 60%),
        radial-gradient(1.4px 1.4px at 46% 72%, #fff, transparent 60%),
        radial-gradient(1.8px 1.8px at 74% 36%, #fff, transparent 60%),
        radial-gradient(1.2px 1.2px at 88% 78%, #fff, transparent 60%);
    background-size: 100% 100%, 100% 100%, 10px 10px, 100% 46px, 140px 120px, 140px 120px, 140px 120px, 140px 120px;
    background-position: 0 0, 0 0, 0 0, 0 100%, 0 0, 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat, repeat, repeat, repeat, repeat;
}
/* Irizáló hologram-fénycsík, ami időnként átsöpör */
.kira-kunai-tooltip[data-ki-theme="bi4"]::after, #kira-kunai-workshop[data-ki-theme="bi4"]::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
    background: linear-gradient(115deg, transparent 38%, #ffffff1a 46%, #E171FD33 50%, #7196FB33 54%, transparent 62%) 100% 0 / 250% 100% no-repeat;
    mix-blend-mode: screen; animation: kiBi4HoloSweep 5.5s linear infinite;
}
#kira-kunai-workshop[data-ki-theme="bi4"]::after { z-index: 0; }
/* Lila lézervonal (villám helyett) a tooltipben és a műhelyben */
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__vfx em {
    top: 34%; height: 2px; rotate: -17deg; opacity: .45;
    background: linear-gradient(90deg, transparent, var(--ki-1), #fff, var(--ki-4), transparent);
    box-shadow: 0 0 8px var(--ki-1);
    animation: kiBi4LaserFade 3.2s ease-in-out infinite;
}
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__vfx em svg { display: none; }
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__vfx em::after {
    content: ""; position: absolute; left: 0; right: 0; top: 150px; height: 2px; rotate: 31deg;
    background: linear-gradient(90deg, transparent, var(--ki-4), #fff, var(--ki-2), transparent); box-shadow: 0 0 8px var(--ki-4);
}
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__bolts i {
    height: 2px; width: 280px; top: 30px;
    background: linear-gradient(90deg, transparent, var(--ki-1), #fff, var(--ki-4), transparent);
    box-shadow: 0 0 9px var(--ki-1); animation: kiBi4LaserFade 2.8s ease-in-out infinite;
}
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__bolts i:last-child { animation-delay: -1.3s; }
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__bolts svg { display: none; }
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__vfx b { border-color: color-mix(in srgb, var(--ki-4) 24%, transparent); }
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__vfx b:nth-of-type(2) { border-color: color-mix(in srgb, var(--ki-1) 34%, transparent); }

/* Címer: irizáló gyűrű a Zolan-ikon körül */
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__crest i:nth-child(1),
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__crest i:nth-child(1) {
    inset: 2px; border: 0;
    background: conic-gradient(from 0deg, #E171FD, #7196FB, #4966F9, #7E57E5, #E171FD);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation-duration: 5s;
}
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__crest i:nth-child(2),
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__crest i:nth-child(2) { border-color: var(--ki-4); }
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__crest img,
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__crest img {
    filter: drop-shadow(0 0 4px #ffffff88) drop-shadow(0 0 11px var(--ki-1)) drop-shadow(0 0 18px var(--ki-2));
}
.kira-kunai-tooltip[data-ki-theme="bi4"]:not(.is-awake) .kira-kunai-tooltip__crest img { filter: grayscale(.3) brightness(.88) drop-shadow(0 0 8px var(--ki-1)); }
/* Fejléc */
.kira-kunai-tooltip[data-ki-theme="bi4"] header { border-bottom-color: color-mix(in srgb, var(--ki-4) 36%, transparent); }
.kira-kunai-tooltip[data-ki-theme="bi4"] header strong,
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__title h2 {
    background: linear-gradient(90deg, #fff, var(--ki-1) 55%, var(--ki-4));
    -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ki-1) 60%, transparent));
}
.kira-kunai-tooltip[data-ki-theme="bi4"].is-awake header em {
    background: linear-gradient(90deg, var(--ki-1), #fff, var(--ki-4));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kira-kunai-tooltip[data-ki-theme="bi4"] header > b { border-color: color-mix(in srgb, var(--ki-4) 55%, transparent); background: linear-gradient(135deg, #7196FB22, #0007 60%); }
.kira-kunai-tooltip[data-ki-theme="bi4"] header > b em { background: var(--ki-1); color: #12072a; }
/* Kunai-helyek: kristály-keret */
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__slot,
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__slot {
    border-color: color-mix(in srgb, var(--ki-4) 45%, transparent);
    background: linear-gradient(135deg, #7196FB26, transparent 46%, #E171FD26), #1a0b3399;
}
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__slot img,
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__slot img { filter: drop-shadow(0 0 3px var(--ki-1)) drop-shadow(0 0 6px var(--ki-2)); }
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__slot.is-empty img,
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__slot.is-empty img { filter: grayscale(1) brightness(.5); }
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__slot.is-upgraded,
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__slot.is-upgraded {
    border-color: var(--ki-1);
    background: radial-gradient(circle, color-mix(in srgb, var(--ki-1) 38%, transparent), #0007 72%);
    box-shadow: inset 0 0 10px color-mix(in srgb, var(--ki-1) 50%, transparent), 0 0 9px color-mix(in srgb, var(--ki-4) 55%, transparent);
}
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__slot.is-upgraded img,
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__slot.is-upgraded img { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--ki-1)) drop-shadow(0 0 12px var(--ki-4)); }
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__facts span { border-color: color-mix(in srgb, var(--ki-4) 30%, transparent); background: linear-gradient(160deg, #7196FB1a, #0007 70%); }
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__zolan { border-left-color: var(--ki-1); }
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__zolan.is-active { border-left-color: var(--ki-1); background: linear-gradient(100deg, color-mix(in srgb, var(--ki-1) 22%, #0006), #0006 70%); }
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__zolan.is-active > img { filter: drop-shadow(0 0 5px var(--ki-1)) drop-shadow(0 0 9px var(--ki-2)); }
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__zolan > img { filter: grayscale(.25) drop-shadow(0 0 4px var(--ki-1)); }
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__hint { color: var(--ki-4); }
.kira-kunai-tooltip[data-ki-theme="bi4"] .kira-kunai-tooltip__badges .is-clone { border-color: var(--ki-4); background: color-mix(in srgb, var(--ki-4) 18%, #0008); }

/* --- Műhely-popup (Neonfészek) --- */
#kira-kunai-workshop[data-ki-theme="bi4"]::backdrop { background: radial-gradient(circle at 50% 0, #3b1c6866, transparent 60%), rgba(6, 2, 16, .88); }
#kira-kunai-workshop[data-ki-theme="bi4"] > header { border-bottom-color: color-mix(in srgb, var(--ki-4) 36%, transparent); }
#kira-kunai-workshop[data-ki-theme="bi4"] > header button { border-color: var(--ki-4); box-shadow: 0 0 8px color-mix(in srgb, var(--ki-1) 40%, transparent); }
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__abilities article > img { border-color: var(--ki-4); box-shadow: 0 0 13px color-mix(in srgb, var(--ki-1) 50%, transparent); }
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__abilities article { border-color: color-mix(in srgb, var(--ki-4) 26%, transparent); background: linear-gradient(150deg, #7196FB12, #ffffff05); }
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__ladder img { filter: drop-shadow(0 0 5px var(--ki-1)); }
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__gallery article.is-current,
#kira-kunai-workshop[data-ki-theme="bi4"] .kira-kunai-workshop__ladder article.is-overload { border-color: var(--ki-1); box-shadow: 0 0 12px color-mix(in srgb, var(--ki-1) 34%, transparent); }

/* --- Kulcsszó-ikonok a leírásokban (Kunai / Zolan, BI4 skin) --- */
.ability-inline-icon.is-kira-keyword[data-kira-theme~="bi4"] { filter: drop-shadow(0 0 3px #E171FDdd) drop-shadow(0 0 6px #4966F9aa); }

/* --- Hőskódex Kira-panel (js/ui/kiraCodexUI.js, data-kc-motif="bi4") --- */
.codex-kira-show[data-kc-motif="bi4"]::before {
    opacity: .5;
    background:
        conic-gradient(from 150deg at 4% -6%, transparent 0, #E171FD55 9deg, #E171FD1a 18deg, transparent 22deg),
        conic-gradient(from 188deg at 96% -6%, transparent 0, #7196FB55 9deg, #7196FB1a 18deg, transparent 22deg),
        radial-gradient(circle, #7196FB40 0 1px, transparent 1.6px) 0 0 / 12px 12px,
        repeating-linear-gradient(0deg, transparent 0 9px, #E171FD1f 9px 10px);
    animation: none;
}
.codex-kira-show[data-kc-motif="bi4"] .codex-kira-show__motif i {
    width: 9px; height: 9px;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    background: #fff;
    opacity: .6;
    filter: drop-shadow(0 0 3px var(--kc-glow)) drop-shadow(0 0 6px var(--kc-accent));
    animation-name: kcTwinkle;
}
.codex-kira-show[data-kc-motif="bi4"] .codex-kira-show__motif i:nth-child(3n) {
    clip-path: polygon(50% 0, 100% 36%, 50% 100%, 0 36%);
    background: linear-gradient(160deg, #fff, var(--kc-accent) 50%, var(--kc-glow));
}
.codex-kira-show[data-kc-motif="bi4"] .codex-kira-show__motif i:nth-child(5n+1) {
    clip-path: none; background: none; width: 12px; height: 12px;
    font: 900 12px/12px system-ui, sans-serif; color: var(--kc-glow); text-align: center;
}
.codex-kira-show[data-kc-motif="bi4"] .codex-kira-show__motif i:nth-child(5n+1)::before { content: "\266A"; }
.codex-kira-show[data-kc-motif="bi4"] .codex-kira-show__motif i:nth-child(10n+6)::before { content: "\266B"; }
.codex-kira-show[data-kc-motif="bi4"] .codex-kira-show__emblem i { border-top-color: #E171FD; border-right-color: #7196FB88; }

/* =======================================
   7) Kulcskockák
   ======================================= */
@keyframes kiBi4Spin { to { rotate: 360deg; } }
@keyframes kiBi4Shimmer { from { background-position: 0 0; } to { background-position: 220% 0; } }
@keyframes kiBi4Dangle { from { rotate: -16deg; } to { rotate: 16deg; } }
@keyframes kiBi4ShardTrail { from { opacity: .95; scale: 1; translate: 0 0; } to { opacity: 0; scale: .3; translate: -34% 0; } }
@keyframes kiBi4Neon { from { box-shadow: 0 0 6px var(--ki-1); opacity: .6; } to { box-shadow: 0 0 16px var(--ki-1), 0 0 26px var(--ki-2); opacity: 1; } }
@keyframes kiBi4ConeSweep { from { rotate: -17deg; } to { rotate: 17deg; } }
@keyframes kiBi4Laser { from { rotate: calc(var(--r) - 8deg); } to { rotate: calc(var(--r) + 8deg); } }
@keyframes kiBi4Float { from { translate: 0 5px; rotate: -7deg; } to { translate: 0 -9px; rotate: 9deg; } }
@keyframes kiBi4Wave { from { rotate: -14deg; } to { rotate: 14deg; } }
@keyframes kiBi4Twinkle { 0%, 100% { opacity: .15; scale: .4; } 50% { opacity: 1; scale: 1.2; } }
@keyframes kiBi4LedFlicker { 0%, 100% { opacity: .55; } 46% { opacity: .38; } 50% { opacity: .7; } 54% { opacity: .45; } }
@keyframes kiBi4HoloSweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes kiBi4LaserFade { 0%, 100% { opacity: .12; } 50% { opacity: .85; } }

@media (prefers-reduced-motion: reduce) {
    .kira-zolan-meter[data-ki-theme="bi4"] *, .kira-card-fx[data-ki-theme="bi4"] *,
    .kira-kunai-tooltip[data-ki-theme="bi4"], .kira-kunai-tooltip[data-ki-theme="bi4"] *,
    #kira-kunai-workshop[data-ki-theme="bi4"], #kira-kunai-workshop[data-ki-theme="bi4"] *,
    .kira-kunai-tooltip[data-ki-theme="bi4"]::after, #kira-kunai-workshop[data-ki-theme="bi4"]::after,
    .kira-zolan-meter[data-ki-theme="bi4"] .kira-zolan-meter__halo::before { animation: none !important; }
}
/* Kikapcsolt VFX: a díszítő rétegek eltűnnek, az információhordozó elemek maradnak. */
body.v3-vfx-disabled .kira-zolan-meter[data-ki-theme="bi4"] .kira-zolan-meter__halo::before,
body.v3-vfx-disabled .kira-card-fx[data-ki-theme="bi4"] .kira-card-fx__kunai::after { display: none; }