/* =======================================================================
   ABRA (heroId 55) – AZ ÜRESSÉG ÉS A HALÁL KASZÁJA
   Forgó fekete lyuk mérő (skin-kasza előtérben), prémium full-bleed
   tooltip saját körvonallal, Üresség Szentélye, kártya körüli ürességaura,
   Ürességszakadás alatti gravitációs torzulás az ellenséges kártyák mögött,
   képesség-VFX (317-320), napló-chipek, leírás-lista.
   Témák (data-abra-theme): alap / jeg / vip – szemantikus tokenek:
   --abra-deep (háttér), --abra-core (lyuk), --abra-accent (akkréciós korong),
   --abra-glow (fény), --abra-mist (köd), --abra-edge (keret).
   --abra-fill (0..1) = Üresség / 100.
   ======================================================================= */

:where(.abra-void-meter, .abra-void-tooltip, .abra-void-card-fx, .abra-gravity-well,
#abra-void-workshop, .v3-card[data-abra-theme]) {
    --abra-deep: #0b0f18;
    --abra-core: #000;
    --abra-accent: #4E5693;
    --abra-glow: #F0FFFF;
    --abra-mist: #797D97;
    --abra-edge: #364559;
    --abra-fill: 0;
    --abra-hi: color-mix(in srgb, var(--abra-accent) 55%, var(--abra-glow));
}
[data-abra-theme="jeg"] {
    --abra-deep: #0D1431;
    --abra-core: #03061a;
    --abra-accent: #63E2FF;
    --abra-glow: #D8DBFF;
    --abra-mist: #8FA6DC;
    --abra-edge: #2E4C8D;
}
[data-abra-theme="vip"] {
    --abra-deep: #0C0C06;
    --abra-core: #050402;
    --abra-accent: #CCA285;
    --abra-glow: #f6e2c9;
    --abra-mist: #918D99;
    --abra-edge: #3B2616;
}
[data-abra-theme="rend"] {
    --abra-deep: #1C1315;
    --abra-core: #2D0000;
    --abra-accent: #B41D26;
    --abra-glow: #B1695E;
    --abra-mist: #8c809e;
    --abra-edge: #4F0008;
}

/* Crimson Eclipse: the scythe remains legible against a blood moon and silver chains. */
[data-abra-theme="rend"] .abra-void-meter__core,
[data-abra-theme="rend"] .abra-void-tooltip__hole em {
    background: radial-gradient(circle at 66% 40%, #1c1315 0 57%, #4f0008 59%, #b41d26 74%, #b1695e 100%);
    box-shadow: 0 0 0 1px #b1695e, 0 0 16px #b41d26, 0 0 30px #4f0008;
}
[data-abra-theme="rend"] .abra-void-meter__seals i {
    border-color: #b8a9bd;
    height: 11px;
    background: #2d0000;
}
[data-abra-theme="rend"] .abra-void-meter__seals i.is-on {
    background: linear-gradient(135deg, #b1695e, #b41d26 45%, #4f0008);
    box-shadow: 0 0 8px #b41d26;
}
.abra-void-tooltip[data-abra-theme="rend"], #abra-void-workshop[data-abra-theme="rend"] {
    background: radial-gradient(ellipse at 85% 0, #4f000899, transparent 52%), linear-gradient(140deg, #1c1315, #12090d 68%, #2d0000);
    border-color: #b41d26;
}
[data-abra-theme="rend"] .abra-void-tooltip__vfx b {
    background: radial-gradient(circle at 57% 42%, #1c1315 0 42%, #4f0008 45%, #b41d26 53%, #b1695e 55%, transparent 57%);
    filter: drop-shadow(0 0 14px #b41d26);
}
[data-abra-theme="rend"] .abra-void-tooltip__vfx em,
[data-abra-theme="rend"] .abra-void-workshop__vfx span {
    background: radial-gradient(ellipse at 24% 70%, #b41d2655, transparent 39%), radial-gradient(ellipse at 78% 34%, #4f0008aa, transparent 48%);
}
[data-abra-theme="rend"] .abra-void-tooltip__hole::after,
[data-abra-theme="rend"] .abra-void-workshop__emblem::after {
    content: ""; position: absolute; right: 2px; top: 12px; width: 7px; height: 43px;
    border-left: 2px dotted #b8a9bd; border-right: 1px dotted #b1695e;
    transform-origin: top; animation: abraRendChain 4s ease-in-out infinite alternate;
    pointer-events: none;
}
[data-abra-theme="rend"] .abra-void-tooltip__hole::before {
    content: ""; position: absolute; right: 0; bottom: 0; width: 10px; height: 16px;
    background: linear-gradient(90deg,#4f0008,#b41d26,#b1695e);
    clip-path: polygon(50% 0,100% 35%,50% 100%,0 35%);
    filter: drop-shadow(0 0 5px #b41d26); pointer-events: none;
}
.abra-vfx-stage[data-abra-theme="rend"] .abra-vfx-lens {
    background: repeating-radial-gradient(ellipse, transparent 0 12%, #b41d2633 14%, transparent 16% 20%);
}
@keyframes abraRendChain { from { rotate: -7deg; } to { rotate: 7deg; } }
@media (prefers-reduced-motion: reduce) {
    [data-abra-theme="rend"] .abra-void-tooltip__hole::after,
    [data-abra-theme="rend"] .abra-void-workshop__emblem::after { animation: none; }
}

/* --- Leírás-lista (ability tooltip, szentély) + inline ikonok (csak Abra) --- */
.ability-progression.is-abra-void-details .ability-progression-step {
    grid-template-columns: 112px minmax(0, 1fr);
}
.ability-progression.is-abra-void-details .ability-progression-step.is-wide-label {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
}
.ability-progression.is-abra-void-details .ability-progression-step.is-wide-label .ability-progression-label {
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(120, 130, 200, .3);
}
.ability-progression.is-abra-void-details .ability-progression-step.is-current {
    border-color: rgba(150, 160, 235, .55);
    box-shadow: inset 0 0 14px rgba(78, 86, 147, .32), 0 0 10px rgba(78, 86, 147, .28);
}
.ability-progression.is-abra-void-details .ability-progression-step.is-abra-rift-step .ability-progression-label {
    color: #e6ecff;
    text-shadow: 0 0 8px rgba(150, 160, 255, .8);
}
.ability-progression.is-abra-void-details .ability-progression-step.is-abra-rift-step.is-current {
    background: linear-gradient(100deg, rgba(78, 86, 147, .34), rgba(0, 0, 0, .45) 60%, rgba(54, 69, 89, .34));
    border-color: rgba(220, 230, 255, .6);
    box-shadow: inset 0 0 16px rgba(78, 86, 147, .45), 0 0 14px rgba(160, 170, 255, .35);
}
.ability-progression.is-abra-void-details .ability-progression-step.is-abra-scythe-step .ability-progression-label { color: #c9cff5; }
body.v3-body > .ability-tooltip-floating .ability-progression.is-abra-void-details .ability-progression-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 8px 10px 9px;
    border-radius: 10px;
}
.ability-inline-icon.is-abra-mechanic { filter: drop-shadow(0 0 4px rgba(120, 130, 220, .8)); }
.ability-inline-icon.is-abra-void { filter: drop-shadow(0 0 4px rgba(90, 100, 190, .95)); }
.ability-inline-icon.is-abra-rift,
.ability-inline-icon.is-abra-death { filter: drop-shadow(0 0 5px rgba(200, 210, 255, .9)); }
.ability-inline-icon.is-abra-scythe { filter: drop-shadow(0 0 4px rgba(170, 180, 230, .85)); }

/* --- Napló: Üresség / Lélekpecsét erőforrás-chip --- */
.v3-log-stat-void { color: #c9cfff; background: rgba(78, 86, 147, .22); border: 1px solid rgba(140, 150, 230, .34); }
.v3-log-stat-seal { color: #eef2ff; background: rgba(54, 69, 89, .32); border: 1px solid rgba(200, 210, 255, .38); }

/* =======================================================================
   FEKETE LYUK MÉRŐ (mechanika-ikon a kártyán)
   ======================================================================= */
.abra-void-meter {
    position: absolute; left: 40px; bottom: 5px; z-index: 19;
    width: 100px; height: 100px; padding: 0; border: 0;
    background: transparent; color: #fff; cursor: pointer; isolation: isolate;
    filter: drop-shadow(0 7px 12px #000e);
}
.abra-void-meter::before {
    position: absolute; inset: 5px; z-index: -1; content: "";
    border-radius: 50%;
    background:
        radial-gradient(circle, #000 0 27%, transparent 48%),
        radial-gradient(circle, transparent 38%, color-mix(in srgb, var(--abra-accent) 60%, transparent) 57%, transparent 77%),
        conic-gradient(from 15deg, transparent, color-mix(in srgb, var(--abra-edge) 75%, transparent), transparent 42%, color-mix(in srgb, var(--abra-glow) 28%, transparent), transparent 75%);
    filter: blur(8px);
    scale: calc(.8 + var(--abra-fill) * .5);
    animation: abraHaloBreath calc(4s - var(--abra-fill) * 2.4s) ease-in-out infinite alternate;
    transition: scale .6s ease;
}
.abra-void-meter__halo {
    position: absolute; inset: -12px; z-index: 0; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 35deg, transparent 0 12%, color-mix(in srgb, var(--abra-accent) 45%, transparent) 21%, transparent 34% 51%, color-mix(in srgb, var(--abra-glow) 35%, transparent) 60%, transparent 74%);
    -webkit-mask: radial-gradient(circle, transparent 34%, #000 45%, transparent 75%);
    mask: radial-gradient(circle, transparent 34%, #000 45%, transparent 75%);
    opacity: calc(.2 + var(--abra-fill) * .8);
    scale: calc(.75 + var(--abra-fill) * .55);
    filter: blur(7px); animation: abraSpin calc(12s - var(--abra-fill) * 9s) linear infinite reverse;
    transition: opacity .6s ease, scale .6s ease;
}
.abra-void-meter__motes { position: absolute; left: 50%; top: 50px; z-index: 3; width: 0; height: 0; pointer-events: none; }
.abra-void-meter__motes i {
    position: absolute; left: -1.5px; top: -1.5px; width: 3px; height: 3px; border-radius: 50%;
    background: var(--abra-glow); box-shadow: 0 0 5px var(--abra-glow), 0 0 11px var(--abra-accent);
    opacity: 0; animation: abraMoteSpiral calc(4.5s - var(--abra-fill) * 3s) linear infinite;
    animation-delay: calc(var(--mote-i) * -.18s);
    --mote-a: calc(var(--mote-i) * 137.5deg);
}
.abra-void-meter__motes i[hidden] { display: none; }
.abra-void-meter__hole {
    position: absolute; left: 50%; top: 50px; z-index: 2; width: 72px; height: 72px; margin: -36px 0 0 -36px;
    border-radius: 50%; pointer-events: none;
    scale: calc(.85 + var(--abra-fill) * .3);
    transition: scale .6s ease;
}
.abra-void-meter__disk {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0deg 22deg, var(--abra-accent) 48deg, var(--abra-glow) 69deg,
        color-mix(in srgb, var(--abra-accent) 65%, transparent) 94deg, transparent 133deg,
        color-mix(in srgb, var(--abra-mist) 75%, transparent) 178deg, var(--abra-glow) 217deg,
        transparent 251deg, var(--abra-accent) 292deg, transparent 340deg);
    -webkit-mask: radial-gradient(circle, transparent 30%, #000 35%, #000 62%, transparent 73%);
    mask: radial-gradient(circle, transparent 30%, #000 35%, #000 62%, transparent 73%);
    filter: blur(1px) drop-shadow(0 0 calc(3px + var(--abra-fill) * 12px) var(--abra-hi));
    opacity: calc(.35 + var(--abra-fill) * .65);
    animation: abraSpin calc(8s - var(--abra-fill) * 6.4s) linear infinite;
    transition: opacity .6s ease, filter .6s ease;
}
.abra-void-meter__accretion {
    position: absolute; inset: 8px -5px; border-radius: 50%;
    background: conic-gradient(from 45deg, transparent 0 11%, var(--abra-glow) 18%, var(--abra-accent) 28%, transparent 38% 55%, color-mix(in srgb, var(--abra-mist) 80%, transparent) 68%, var(--abra-glow) 79%, transparent 89%);
    -webkit-mask: radial-gradient(ellipse, transparent 31%, #000 39%, #000 56%, transparent 67%);
    mask: radial-gradient(ellipse, transparent 31%, #000 39%, #000 56%, transparent 67%);
    opacity: calc(.15 + var(--abra-fill) * .85);
    filter: blur(1px) drop-shadow(0 0 calc(2px + var(--abra-fill) * 10px) var(--abra-accent));
    transform: rotate(-22deg); animation: abraAccretionSpin calc(7s - var(--abra-fill) * 5.6s) linear infinite;
    transition: opacity .6s ease, filter .6s ease;
}
.abra-void-meter__lens {
    position: absolute; inset: 11px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--abra-glow) 80%, transparent);
    box-shadow: 0 0 6px var(--abra-glow), 0 0 16px var(--abra-accent), inset 0 0 12px var(--abra-accent);
    opacity: calc(.2 + var(--abra-fill) * .8);
    transform: rotateX(68deg) rotate(-22deg); animation: abraLensOrbit calc(6s - var(--abra-fill) * 4s) linear infinite;
    transition: opacity .6s ease;
}
.abra-void-meter__core {
    position: absolute; inset: 19px; border-radius: 50%;
    background: #000;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--abra-glow) 80%, transparent), 0 0 calc(3px + var(--abra-fill) * 10px) var(--abra-glow), 0 0 calc(8px + var(--abra-fill) * 24px) var(--abra-accent), inset 0 0 14px #000;
    animation: abraCorePulse calc(4s - var(--abra-fill) * 2.7s) ease-in-out infinite alternate;
    transition: box-shadow .6s ease;
}
.abra-void-meter__scythe {
    position: absolute; left: 50%; top: 15px; z-index: 4; width: 64px; height: 64px; margin-left: -32px;
    object-fit: contain; pointer-events: none;
    filter: drop-shadow(0 0 4px #000) drop-shadow(0 0 calc(3px + var(--abra-fill) * 6px) var(--abra-hi));
    transform: rotate(-14deg); transition: transform .25s ease;
    animation: abraScytheSway 3.4s ease-in-out infinite alternate;
}
.abra-void-meter__seals { position: absolute; left: 50%; top: 0; z-index: 5; display: flex; gap: 4px; transform: translateX(-50%); pointer-events: none; }
.abra-void-meter__seals i {
    width: 7px; height: 7px; transform: rotate(45deg); border-radius: 1px;
    background: #0a0c14; border: 1px solid color-mix(in srgb, var(--abra-mist) 60%, transparent);
}
.abra-void-meter__seals i.is-on {
    background: radial-gradient(circle, var(--abra-glow), var(--abra-accent) 70%);
    border-color: var(--abra-glow); box-shadow: 0 0 6px var(--abra-hi);
}
.abra-void-meter:hover .abra-void-meter__scythe, .abra-void-meter:focus-visible .abra-void-meter__scythe { transform: rotate(-4deg) scale(1.06); }
.abra-void-meter:focus-visible { outline: 2px solid var(--abra-glow); outline-offset: 3px; border-radius: 12px; }
.abra-void-meter.is-rend-ready .abra-void-meter__scythe { filter: drop-shadow(0 0 4px #000) drop-shadow(0 0 9px var(--abra-glow)); }
.abra-void-meter.is-pending .abra-void-meter__core { box-shadow: 0 0 0 2px var(--abra-glow), 0 0 calc(6px + var(--abra-fill) * 10px) var(--abra-glow), 0 0 calc(12px + var(--abra-fill) * 24px) var(--abra-accent); }
.abra-void-meter.is-rift::before {
    animation-duration: 1.1s;
}
.abra-void-meter.is-rift .abra-void-meter__disk { animation-duration: 1.6s; }
.abra-void-meter.is-rift .abra-void-meter__accretion { animation-duration: 1.4s; }
.abra-void-meter.is-death .abra-void-meter__core { box-shadow: 0 0 0 2px var(--abra-glow), 0 0 18px var(--abra-glow), 0 0 38px var(--abra-accent); }
.abra-void-meter.is-gaining .abra-void-meter__hole { animation: abraHoleGulp .9s ease-out; }
.abra-void-meter.is-sealing .abra-void-meter__seals i.is-on:last-of-type { animation: abraSealFlash 1.2s ease-out; }
.abra-void-meter.is-rift-opening .abra-void-meter__hole { animation: abraRiftOpen 1.8s cubic-bezier(.2, .8, .3, 1); }

@keyframes abraSpin { to { transform: rotate(360deg); } }
@keyframes abraAccretionSpin { from { transform: rotate(-22deg); } to { transform: rotate(338deg); } }
@keyframes abraLensOrbit { from { transform: rotateX(68deg) rotate(-22deg); } to { transform: rotateX(68deg) rotate(338deg); } }
@keyframes abraHaloBreath { from { opacity: calc(.15 + var(--abra-fill) * .4); } to { opacity: calc(.3 + var(--abra-fill) * .7); } }
@keyframes abraCorePulse { from { transform: scale(calc(.98 - var(--abra-fill) * .08)); } to { transform: scale(calc(1.02 + var(--abra-fill) * .1)); } }
@keyframes abraScytheSway { from { rotate: -3deg; } to { rotate: 3deg; } }
@keyframes abraMoteSpiral {
    0% { opacity: 0; transform: rotate(var(--mote-a)) translateY(calc(-38px - var(--abra-fill) * 24px)) scale(calc(.6 + var(--abra-fill) * .7)); }
    18% { opacity: calc(.35 + var(--abra-fill) * .65); }
    65% { opacity: calc(.25 + var(--abra-fill) * .65); }
    100% { opacity: 0; transform: rotate(calc(var(--mote-a) + 300deg)) translateY(-15px) scale(.15); }
}
@keyframes abraHoleGulp { 0% { transform: scale(1); } 30% { transform: scale(1.18); filter: brightness(1.5); } 100% { transform: scale(1); } }
@keyframes abraSealFlash { 0% { transform: rotate(45deg) scale(1); } 30% { transform: rotate(225deg) scale(1.8); box-shadow: 0 0 14px var(--abra-glow); } 100% { transform: rotate(405deg) scale(1); } }
@keyframes abraRiftOpen { 0% { transform: scale(.4); filter: brightness(2); } 55% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* =======================================================================
   PRÉMIUM FULL-BLEED TOOLTIP (keret nélküli wrapper, saját körvonal)
   ======================================================================= */
body.v3-body > .item-tooltip-floating:has(.abra-void-tooltip),
body.v3-body > .v3-floating-tooltip:has(.abra-void-tooltip) {
    width: min(500px, calc(100vw - 20px)); max-width: 500px;
    padding: 0 !important; border: 0 !important; border-radius: 20px;
    background: transparent !important; box-shadow: none !important; overflow: visible;
}
body.v3-body > .item-tooltip-floating:has(.abra-void-tooltip.is-compact),
body.v3-body > .v3-floating-tooltip:has(.abra-void-tooltip.is-compact) {
    width: min(390px, calc(100vw - 20px)); max-width: 390px;
}
.item-tooltip-floating .item-tooltip-desc:has(.abra-void-tooltip) { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.abra-void-tooltip {
    position: relative; isolation: isolate; box-sizing: border-box; display: block; width: 100%;
    padding: 17px; overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--abra-accent) 80%, var(--abra-edge)); border-radius: 20px;
    outline: 1px solid color-mix(in srgb, var(--abra-glow) 38%, transparent); outline-offset: -6px;
    background:
        radial-gradient(circle at 86% 6%, color-mix(in srgb, var(--abra-accent) calc(18% + var(--abra-fill) * 22%), transparent), transparent 40%),
        radial-gradient(circle at 8% 94%, color-mix(in srgb, var(--abra-edge) 60%, transparent), transparent 46%),
        linear-gradient(155deg, color-mix(in srgb, var(--abra-deep) 88%, var(--abra-edge)), var(--abra-deep) 48%, #010103);
    box-shadow: 0 24px 70px #000e, 0 0 calc(20px + var(--abra-fill) * 22px) color-mix(in srgb, var(--abra-accent) 55%, transparent), inset 0 0 48px #000a;
    color: #fff; font-family: Outfit, sans-serif; text-align: left;
}
.abra-void-tooltip.is-rift { border-color: var(--abra-glow); }
.abra-void-tooltip > * { position: relative; z-index: 2; }
.abra-void-tooltip > .abra-void-tooltip__vfx { position: absolute; z-index: 0; inset: 0; pointer-events: none; overflow: hidden; }
.abra-void-tooltip__vfx i {
    position: absolute; left: calc(4% + var(--abra-star-i) * 6.8%); top: calc(8% + var(--abra-star-i) * 5.8%); top: calc(8% + mod(var(--abra-star-i) * 37, 84) * 1%);
    width: 2px; height: 2px; border-radius: 50%; background: var(--abra-glow);
    box-shadow: 0 0 4px var(--abra-glow); opacity: .2;
    animation: abraStarTwinkle 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--abra-star-i) * -.41s);
}
.abra-void-tooltip__vfx b {
    position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--abra-accent) 55%, transparent), transparent 40%, color-mix(in srgb, var(--abra-mist) 40%, transparent), transparent 75%);
    -webkit-mask: radial-gradient(circle, transparent 30%, #000 34%, #000 58%, transparent 70%);
    mask: radial-gradient(circle, transparent 30%, #000 34%, #000 58%, transparent 70%);
    opacity: calc(.3 + var(--abra-fill) * .45); animation: abraSpin 18s linear infinite;
}
.abra-void-tooltip__vfx em {
    position: absolute; right: -8px; top: -8px; width: 96px; height: 96px; border-radius: 50%;
    background: radial-gradient(circle, #000 55%, transparent 72%); opacity: .8;
}
.abra-void-tooltip__vfx s {
    position: absolute; left: -20%; top: 55%; width: 140%; height: 90px; text-decoration: none;
    background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--abra-edge) 70%, transparent), transparent 70%);
    filter: blur(12px); opacity: calc(.2 + var(--abra-fill) * .35); animation: abraMistDrift 14s ease-in-out infinite alternate;
}
.abra-void-tooltip.is-rift .abra-void-tooltip__vfx b { animation-duration: 5s; opacity: .85; }
.abra-void-tooltip header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 11px; padding-bottom: 11px;
    border-bottom: 1px solid color-mix(in srgb, var(--abra-hi) 28%, transparent);
}
.abra-void-tooltip__hole { position: relative; display: grid; flex: 0 0 70px; width: 70px; height: 70px; place-items: center; }
.abra-void-tooltip__hole i {
    position: absolute; inset: 2px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, var(--abra-accent), var(--abra-glow) 20%, transparent 45%, var(--abra-mist) 70%, transparent);
    -webkit-mask: radial-gradient(circle, transparent 38%, #000 42%, #000 64%, transparent 72%);
    mask: radial-gradient(circle, transparent 38%, #000 42%, #000 64%, transparent 72%);
    animation: abraSpin calc(6s - var(--abra-fill) * 3.5s) linear infinite;
}
.abra-void-tooltip__hole em {
    position: absolute; inset: 20px; border-radius: 50%; background: var(--abra-core);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--abra-glow) 55%, transparent), 0 0 14px var(--abra-hi);
}
.abra-void-tooltip__hole img {
    position: relative; z-index: 1; width: 62px; height: 62px; object-fit: contain;
    filter: drop-shadow(0 0 3px #000) drop-shadow(0 0 9px var(--abra-hi)); transform: rotate(-12deg);
    animation: abraScytheSway 3.4s ease-in-out infinite alternate;
}
.abra-void-tooltip header > div { display: grid; flex: 1; gap: 2px; min-width: 0; }
.abra-void-tooltip header small { color: color-mix(in srgb, var(--abra-glow) 70%, var(--abra-accent)); font: 800 9px/1 Montserrat, sans-serif; letter-spacing: .16em; }
.abra-void-tooltip header strong { font: 900 20px/1.1 Montserrat, sans-serif; text-shadow: 0 0 15px var(--abra-hi); }
.abra-void-tooltip header em { color: #d6dbf0; font: 700 10px/1.2 Outfit, sans-serif; font-style: normal; letter-spacing: .06em; }
.abra-void-tooltip.is-rift header em { color: var(--abra-glow); text-shadow: 0 0 8px var(--abra-accent); }
.abra-void-tooltip header > b { display: grid; justify-items: end; font: 900 27px/1 Montserrat, sans-serif; text-shadow: 0 0 10px var(--abra-hi); }
.abra-void-tooltip header > b img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 0 6px var(--abra-hi)); }
.abra-void-tooltip header > b small { margin-top: 3px; color: #fff; font-size: 9px; letter-spacing: .1em; }
.abra-void-tooltip__heading {
    display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
    color: color-mix(in srgb, var(--abra-glow) 75%, var(--abra-mist)); font: 800 9px/1 Montserrat, sans-serif; letter-spacing: .16em; text-transform: uppercase;
}
.abra-void-tooltip__tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-bottom: 8px; }
.abra-void-tooltip__tiers.is-scythe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.abra-void-tooltip__tiers span {
    display: grid; justify-items: center; gap: 2px; padding: 6px 3px;
    border: 1px solid #ffffff12; border-radius: 10px; background: #0006; opacity: .45; text-align: center;
}
.abra-void-tooltip__tiers span.is-reached { opacity: .82; }
.abra-void-tooltip__tiers span.is-current {
    opacity: 1; border-color: var(--abra-hi);
    background: color-mix(in srgb, var(--abra-accent) 18%, #0007);
    box-shadow: 0 0 12px color-mix(in srgb, var(--abra-accent) 50%, transparent), inset 0 0 12px color-mix(in srgb, var(--abra-hi) 22%, transparent);
}
.abra-void-tooltip__tiers span.is-rift.is-current, .abra-void-tooltip__tiers span.is-death.is-current { border-color: var(--abra-glow); box-shadow: 0 0 16px var(--abra-accent), inset 0 0 12px color-mix(in srgb, var(--abra-glow) 30%, transparent); }
.abra-void-tooltip__tiers img { width: 30px; height: 30px; object-fit: contain; }
.abra-void-tooltip__tiers span.is-current img { filter: drop-shadow(0 0 7px var(--abra-hi)); }
.abra-void-tooltip__tiers b { font: 800 8.5px/1.1 Montserrat, sans-serif; }
.abra-void-tooltip__tiers small { color: #b9bfd6; font: 600 8px/1 Outfit, sans-serif; }
.abra-void-tooltip__progress { position: relative; min-height: 15px; margin-bottom: 11px; border: 1px solid color-mix(in srgb, var(--abra-hi) 40%, transparent); border-radius: 8px; background: #0009; overflow: hidden; }
.abra-void-tooltip__progress i {
    position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(var(--abra-progress) - 4px); max-width: calc(100% - 4px);
    border-radius: 6px; background: linear-gradient(90deg, var(--abra-edge), var(--abra-accent), var(--abra-glow));
}
.abra-void-tooltip__progress span { position: relative; display: block; padding: 1px 6px; font: 800 8px/13px Montserrat, sans-serif; text-align: center; text-shadow: 0 1px 2px #000; }
.abra-void-tooltip__progress .ability-inline-icon { width: 1.35em; height: 1.35em; margin: -.3em .1em -.25em 0; }
.abra-void-tooltip__bonuses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-bottom: 10px; }
.abra-void-tooltip__bonuses span { display: grid; gap: 3px; padding: 6px 7px; border: 1px solid #ffffff10; border-radius: 8px; background: #0005; }
.abra-void-tooltip__bonuses small { color: #aeb4cc; font: 600 8px/1.1 Outfit, sans-serif; }
.abra-void-tooltip__bonuses b { color: color-mix(in srgb, var(--abra-glow) 80%, var(--abra-accent)); font: 900 11px/1 Montserrat, sans-serif; }
.abra-void-tooltip__status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.abra-void-tooltip__status span {
    display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 7px;
    padding: 7px; border: 1px solid #ffffff11; border-radius: 9px; background: #0005; opacity: .55;
}
.abra-void-tooltip__status span.is-active {
    opacity: 1; border-color: var(--abra-hi);
    background: color-mix(in srgb, var(--abra-accent) 16%, #0006);
    box-shadow: 0 0 12px color-mix(in srgb, var(--abra-accent) 45%, transparent);
}
.abra-void-tooltip__status span.is-rift { border-color: var(--abra-glow); box-shadow: 0 0 16px color-mix(in srgb, var(--abra-accent) 70%, transparent); }
.abra-void-tooltip__status span.is-ready { animation: abraStatusGlow 1.2s ease-in-out infinite alternate; }
.abra-void-tooltip__status img { grid-row: 1 / 3; width: 29px; height: 29px; object-fit: contain; border-radius: 6px; filter: drop-shadow(0 0 5px var(--abra-accent)); }
.abra-void-tooltip__status b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font: 800 9px/1.1 Montserrat, sans-serif; }
.abra-void-tooltip__status small { color: #c4c9dc; font: 500 8.5px/1.25 Outfit, sans-serif; }
.abra-void-tooltip__pips { display: inline-flex; gap: 3px; margin-left: 2px; font-style: normal; }
.abra-void-tooltip__pips i { width: 5px; height: 5px; transform: rotate(45deg); border-radius: 1px; background: #0c0e18; border: 1px solid color-mix(in srgb, var(--abra-mist) 60%, transparent); }
.abra-void-tooltip__pips.is-seal i { width: 7px; height: 7px; }
.abra-void-tooltip__pips i.is-on { background: var(--abra-glow); border-color: var(--abra-glow); box-shadow: 0 0 5px var(--abra-hi); }
.abra-void-tooltip .ability-inline-icon.is-abra-mechanic { width: 1.4em; height: 1.4em; margin: -.3em .12em -.26em 0; }
.abra-void-tooltip footer { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 6px; }
.abra-void-tooltip footer span {
    display: grid; gap: 3px; padding: 7px; border: 1px solid color-mix(in srgb, var(--abra-hi) 24%, transparent);
    border-radius: 8px; background: #0006; color: #c4c9dc; font: 600 8.5px/1.2 Outfit, sans-serif; text-align: center;
}
.abra-void-tooltip footer span.is-active { border-color: var(--abra-glow); }
.abra-void-tooltip footer b { color: color-mix(in srgb, var(--abra-glow) 80%, var(--abra-accent)); font: 900 13px/1 Montserrat, sans-serif; }
.abra-void-tooltip__hint { display: block; margin-top: 9px; color: color-mix(in srgb, var(--abra-glow) 65%, var(--abra-mist)); font: 700 8px/1.3 Montserrat, sans-serif; text-align: center; letter-spacing: .06em; }
.abra-void-tooltip.is-compact { padding: 14px; }
.abra-void-tooltip.is-compact header { gap: 10px; margin-bottom: 10px; padding-bottom: 10px; }
.abra-void-tooltip.is-compact .abra-void-tooltip__hole { flex-basis: 54px; width: 54px; height: 54px; }
.abra-void-tooltip.is-compact .abra-void-tooltip__hole em { inset: 16px; }
.abra-void-tooltip.is-compact .abra-void-tooltip__hole img { width: 50px; height: 50px; }
.abra-void-tooltip.is-compact header strong { font-size: 16px; }
.abra-void-tooltip.is-compact header > b { font-size: 22px; }
.abra-void-tooltip__summary { display: grid; gap: 6px; }
.abra-void-tooltip__summary span { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--abra-hi) 24%, transparent); border-radius: 9px; background: #0006; }
.abra-void-tooltip__summary small { color: color-mix(in srgb, var(--abra-glow) 70%, var(--abra-mist)); font: 800 9px/1 Montserrat, sans-serif; letter-spacing: .1em; }
.abra-void-tooltip__summary b { color: #fff; font: 700 11px/1.3 Outfit, sans-serif; }
.abra-void-tooltip__active-effects { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.abra-void-tooltip__active-effects span { padding: 5px 7px; border: 1px solid var(--abra-hi); border-radius: 7px; background: color-mix(in srgb, var(--abra-accent) 20%, #000); color: #fff; font: 700 9px/1.2 Outfit, sans-serif; }
.abra-void-tooltip.is-compact .abra-void-tooltip__hint { margin-top: 10px; }

@keyframes abraStarTwinkle { from { opacity: .1; transform: scale(.7); } to { opacity: .85; transform: scale(1.25); } }
@keyframes abraMistDrift { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
@keyframes abraStatusGlow { from { box-shadow: 0 0 6px color-mix(in srgb, var(--abra-accent) 40%, transparent); } to { box-shadow: 0 0 18px var(--abra-hi); } }

/* =======================================================================
   KÁRTYA KÖRÜLI ÜRESSÉGAURA
   ======================================================================= */
.abra-void-card-fx {
    position: absolute; z-index: 31; pointer-events: none;
    transform: translate(-50%, -50%); overflow: visible;
}
.abra-void-card-fx > span { position: absolute; pointer-events: none; }
.abra-void-card-fx__aura {
    inset: 14px; border-radius: 17px;
    box-shadow: 0 0 calc(var(--abra-fill) * 20px) color-mix(in srgb, var(--abra-accent) calc(var(--abra-fill) * 75%), transparent),
        inset 0 0 calc(var(--abra-fill) * 26px) color-mix(in srgb, var(--abra-core) calc(var(--abra-fill) * 70%), transparent);
    opacity: calc(var(--abra-fill) * .95); transition: opacity .6s, box-shadow .6s;
}
.abra-void-card-fx.is-empty .abra-void-card-fx__aura { opacity: 0; }
.abra-void-card-fx__orbit { inset: 14px; border-radius: 17px; opacity: calc(var(--abra-fill) * .9); transition: opacity .6s; }
.abra-void-card-fx__orbit i {
    position: absolute; width: 4px; height: 4px; border-radius: 50%;
    background: var(--abra-glow); box-shadow: 0 0 6px var(--abra-accent), 0 0 12px var(--abra-accent);
    offset-path: inset(0 round 17px); offset-rotate: 0deg;
    animation: abraOrbitTrail 9s linear infinite; animation-delay: var(--orbit-delay);
}
.abra-void-card-fx.is-rift .abra-void-card-fx__orbit i { animation-duration: 3.4s; width: 5px; height: 5px; }
.abra-void-card-fx__rim {
    inset: 14px; border-radius: 17px; opacity: 0;
    border: 2px solid color-mix(in srgb, var(--abra-glow) 80%, var(--abra-accent));
    box-shadow: inset 0 0 16px var(--abra-accent), inset 0 0 40px color-mix(in srgb, var(--abra-core) 80%, transparent), 0 0 22px var(--abra-accent);
    transition: opacity .6s;
}
.abra-void-card-fx.is-rift .abra-void-card-fx__rim { opacity: 1; animation: abraRimBreath 1.4s ease-in-out infinite alternate; }
.abra-void-card-fx.is-death .abra-void-card-fx__rim { border-width: 3px; box-shadow: inset 0 0 20px var(--abra-glow), inset 0 0 50px #000, 0 0 30px var(--abra-glow); }
.abra-void-card-fx__rift { left: 50%; top: -12px; width: 0; height: 0; opacity: 0; transition: opacity .6s; }
.abra-void-card-fx.is-rift .abra-void-card-fx__rift { opacity: 1; }
.abra-void-card-fx__rift i {
    position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, var(--abra-accent), var(--abra-glow) 18%, transparent 40%, var(--abra-mist) 65%, transparent);
    -webkit-mask: radial-gradient(circle, transparent 34%, #000 38%, #000 60%, transparent 70%);
    mask: radial-gradient(circle, transparent 34%, #000 38%, #000 60%, transparent 70%);
    animation: abraSpin 2.4s linear infinite;
}
.abra-void-card-fx__rift i + i {
    inset: auto; left: -14px; top: -14px; width: 28px; height: 28px; -webkit-mask: none; mask: none;
    background: var(--abra-core); box-shadow: 0 0 0 1px var(--abra-glow), 0 0 16px var(--abra-accent); animation: none;
}
.abra-void-card-fx__seal, .abra-void-card-fx__gain {
    left: 50%; top: 42%; display: grid; justify-items: center; gap: 2px; opacity: 0; transform: translate(-50%, 0);
}
.abra-void-card-fx__seal img { width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 0 10px var(--abra-glow)); }
.abra-void-card-fx__seal b { color: #fff; font: 900 12px/1 Montserrat, sans-serif; letter-spacing: .14em; text-shadow: 0 0 10px var(--abra-accent), 0 2px 3px #000; white-space: nowrap; }
.abra-void-card-fx__gain img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 6px var(--abra-accent)); }
.abra-void-card-fx__gain b { color: var(--abra-glow); font: 900 15px/1 Montserrat, sans-serif; text-shadow: 0 0 8px var(--abra-accent), 0 2px 3px #000; }
.abra-void-card-fx.is-gaining .abra-void-card-fx__gain { animation: abraGainFloat 1.05s ease-out both; }
.abra-void-card-fx.is-sealing .abra-void-card-fx__seal { animation: abraSealReveal 1.5s cubic-bezier(.2, .8, .3, 1) both; }
.abra-void-card-fx.is-tier-rising .abra-void-card-fx__aura { animation: abraTierFlash 1.2s ease-out; }
.abra-void-card-fx.is-rift-opening .abra-void-card-fx__aura { animation: abraRiftBurst 2s ease-out; }
.abra-void-card-fx.is-rift-closing .abra-void-card-fx__rim { animation: abraRiftFade 1.3s ease-in both; }
.abra-void-card-fx.is-reborn .abra-void-card-fx__aura { animation: abraRiftBurst 1.8s ease-out; }

@keyframes abraOrbitTrail { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes abraRimBreath { from { filter: brightness(.9); } to { filter: brightness(1.3); } }
@keyframes abraGainFloat { 0% { opacity: 0; transform: translate(-50%, 16px) scale(.6); } 25% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -38px) scale(1); } }
@keyframes abraSealReveal { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.4) rotate(-40deg); } 35% { opacity: 1; transform: translate(-50%, -6px) scale(1.15) rotate(6deg); } 75% { opacity: 1; transform: translate(-50%, -10px) scale(1) rotate(0); } 100% { opacity: 0; transform: translate(-50%, -26px) scale(.9); } }
@keyframes abraTierFlash { 0% { opacity: 1; box-shadow: 0 0 34px var(--abra-glow), inset 0 0 30px var(--abra-accent); } 100% { opacity: calc(var(--abra-fill) * .95); } }
@keyframes abraRiftBurst { 0% { opacity: 1; box-shadow: 0 0 60px var(--abra-glow), inset 0 0 60px #000; } 100% { opacity: calc(var(--abra-fill) * .95); } }
@keyframes abraRiftFade { from { opacity: 1; } to { opacity: 0; } }

/* =======================================================================
   ÜRESSÉGSZAKADÁS – GRAVITÁCIÓS TORZULÁS AZ ELLENSÉGES KÁRTYÁK MÖGÖTT
   ======================================================================= */
.abra-gravity-well {
    position: absolute; z-index: 0; pointer-events: none;
    transform: translate(-50%, -50%) scale(.6); opacity: 0;
    transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .3, 1);
}
.abra-gravity-well.is-active { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.abra-gravity-well > span { position: absolute; pointer-events: none; }
.abra-gravity-well__lens {
    inset: 8%; border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%, var(--abra-core) 0 22%, color-mix(in srgb, var(--abra-core) 70%, var(--abra-accent)) 32%, color-mix(in srgb, var(--abra-accent) 30%, transparent) 50%, transparent 70%);
    filter: blur(6px); opacity: .9;
    animation: abraWellBreath 3.2s ease-in-out infinite alternate;
}
.abra-gravity-well__disk {
    inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--abra-accent) 70%, transparent) 40deg, color-mix(in srgb, var(--abra-glow) 60%, transparent) 70deg, transparent 130deg, color-mix(in srgb, var(--abra-mist) 55%, transparent) 220deg, transparent 290deg);
    -webkit-mask: radial-gradient(ellipse, transparent 30%, #000 40%, #000 56%, transparent 70%);
    mask: radial-gradient(ellipse, transparent 30%, #000 40%, #000 56%, transparent 70%);
    filter: blur(2px); animation: abraSpin 6s linear infinite;
}
.abra-gravity-well__rings { inset: 0; }
.abra-gravity-well__rings i {
    position: absolute; inset: calc(4% + var(--ring-i) * 9%); border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--abra-glow) 35%, transparent);
    opacity: 0; animation: abraRingCollapse 2.8s ease-in infinite; animation-delay: calc(var(--ring-i) * -.93s);
}
.abra-gravity-well__dust { left: 50%; top: 50%; width: 0; height: 0; }
.abra-gravity-well__dust i {
    position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%;
    background: var(--abra-glow); box-shadow: 0 0 6px var(--abra-accent);
    --dust-a: calc(var(--dust-i) * 40deg);
    opacity: 0; animation: abraDustFall 2.6s ease-in infinite; animation-delay: calc(var(--dust-i) * -.29s);
}
.abra-gravity-well.is-death .abra-gravity-well__disk { animation-duration: 3s; }

@keyframes abraWellBreath { from { transform: scale(.94); } to { transform: scale(1.06); } }
@keyframes abraRingCollapse { 0% { opacity: 0; transform: scale(1.15); } 30% { opacity: .8; } 100% { opacity: 0; transform: scale(.25); } }
@keyframes abraDustFall {
    0% { opacity: 0; transform: rotate(var(--dust-a)) translateY(-120px) scale(1); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: rotate(calc(var(--dust-a) + 160deg)) translateY(-6px) scale(.2); }
}

/* =======================================================================
   AZ ÜRESSÉG SZENTÉLYE (részletes popup)
   ======================================================================= */
#abra-void-workshop {
    position: fixed; width: min(1140px, 95vw); max-width: 95vw; max-height: 92vh; padding: 0; overflow: hidden;
    border: 1px solid var(--abra-hi); border-radius: 22px;
    outline: 1px solid color-mix(in srgb, var(--abra-accent) 55%, transparent); outline-offset: -7px;
    background:
        radial-gradient(circle at 86% 0, color-mix(in srgb, var(--abra-accent) 24%, transparent), transparent 38%),
        radial-gradient(circle at 10% 100%, color-mix(in srgb, var(--abra-edge) 60%, transparent), transparent 46%),
        linear-gradient(145deg, var(--abra-deep), #010103 60%, color-mix(in srgb, var(--abra-edge) 45%, #000));
    box-shadow: 0 30px 100px #000f, 0 0 45px color-mix(in srgb, var(--abra-accent) 50%, transparent);
    color: #fff;
}
#abra-void-workshop.is-rift { border-color: var(--abra-glow); box-shadow: 0 30px 100px #000f, 0 0 60px var(--abra-accent); }
#abra-void-workshop::backdrop { background: rgba(0, 0, 6, .86); backdrop-filter: blur(8px); }
.abra-void-workshop__vfx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.abra-void-workshop__vfx span {
    position: absolute; right: -180px; top: -180px; width: 520px; height: 520px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--abra-accent) 45%, transparent), transparent 35%, color-mix(in srgb, var(--abra-mist) 35%, transparent), transparent 70%);
    -webkit-mask: radial-gradient(circle, transparent 26%, #000 30%, #000 55%, transparent 68%);
    mask: radial-gradient(circle, transparent 26%, #000 30%, #000 55%, transparent 68%);
    opacity: .45; animation: abraSpin 30s linear infinite;
}
.abra-void-workshop__vfx i {
    position: absolute; left: calc(3% + var(--abra-star-i) * 7%); top: calc(6% + var(--abra-star-i) * 6.2%); top: calc(6% + mod(var(--abra-star-i) * 29, 88) * 1%);
    width: 2px; height: 2px; border-radius: 50%; background: var(--abra-glow); box-shadow: 0 0 5px var(--abra-glow);
    animation: abraStarTwinkle 3.6s ease-in-out infinite alternate; animation-delay: calc(var(--abra-star-i) * -.37s);
}
#abra-void-workshop > header, .abra-void-workshop__content { position: relative; z-index: 1; }
#abra-void-workshop > header { display: flex; align-items: center; gap: 14px; padding: 16px 25px 12px; border-bottom: 1px solid color-mix(in srgb, var(--abra-hi) 30%, transparent); }
#abra-void-workshop > header > div { flex: 1; }
.abra-void-workshop__emblem { position: relative; display: grid; width: 60px; height: 60px; place-items: center; }
.abra-void-workshop__emblem i {
    position: absolute; inset: 4px; border-radius: 50%;
    background: radial-gradient(circle, var(--abra-core) 45%, transparent 47%), conic-gradient(from 0deg, transparent, var(--abra-accent), var(--abra-glow) 20%, transparent 45%, var(--abra-mist) 70%, transparent);
    animation: abraSpin 5s linear infinite;
}
.abra-void-workshop__scythe { position: relative; width: 56px; height: 56px; object-fit: contain; transform: rotate(-12deg); filter: drop-shadow(0 0 3px #000) drop-shadow(0 0 10px var(--abra-hi)); }
#abra-void-workshop > header small { color: color-mix(in srgb, var(--abra-glow) 70%, var(--abra-accent)); font: 800 9px/1 Montserrat, sans-serif; letter-spacing: .2em; }
#abra-void-workshop > header h2 { margin: 5px 0 0; font: 900 25px/1 Montserrat, sans-serif; text-shadow: 0 0 16px var(--abra-hi); }
#abra-void-workshop > header button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--abra-hi); border-radius: 50%; background: #0007; color: #fff; font-size: 22px; cursor: pointer; }
#abra-void-workshop > header button:hover { background: color-mix(in srgb, var(--abra-accent) 40%, #000); }
.abra-void-workshop__content { display: grid; grid-template-columns: minmax(380px, .95fr) minmax(460px, 1.05fr); gap: 15px; max-height: calc(92vh - 92px); padding: 18px 22px 24px; overflow: auto; }
.abra-void-workshop__overview, .abra-void-workshop__passive, .abra-void-workshop__abilities { display: grid; align-content: start; gap: 9px; }
.abra-void-workshop__passive article,
.abra-void-workshop__abilities article {
    display: grid; grid-template-columns: 58px 1fr; align-items: start; gap: 11px; padding: 11px;
    border: 1px solid color-mix(in srgb, var(--abra-hi) 24%, transparent); border-radius: 13px; background: #ffffff07;
}
.abra-void-workshop__passive article.is-tiers { grid-template-columns: 1fr; }
.abra-void-workshop__abilities article { grid-template-columns: 68px 1fr; }
.abra-void-workshop__passive article > img { width: 56px; height: 56px; object-fit: contain; border-radius: 11px; filter: drop-shadow(0 0 8px var(--abra-accent)); }
.abra-void-workshop__abilities article > img { width: 66px; height: 66px; object-fit: cover; border: 1px solid var(--abra-hi); border-radius: 11px; box-shadow: 0 0 13px color-mix(in srgb, var(--abra-accent) 50%, transparent); }
.abra-void-workshop__passive small { color: color-mix(in srgb, var(--abra-glow) 70%, var(--abra-accent)); font: 800 8px/1 Montserrat, sans-serif; letter-spacing: .14em; }
.abra-void-workshop__passive strong { display: block; margin: 3px 0 5px; font: 900 14px/1.15 Montserrat, sans-serif; }
.abra-void-workshop__passive p { margin: 0 0 6px; color: #cdd2e6; font: 500 10px/1.35 Outfit, sans-serif; }
.abra-void-workshop__passive ul { display: grid; gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; }
.abra-void-workshop__passive li { display: grid; grid-template-columns: 118px 1fr; gap: 8px; padding: 5px 7px; border: 1px solid #ffffff0e; border-radius: 8px; background: #0005; font: 500 9.5px/1.3 Outfit, sans-serif; }
.abra-void-workshop__passive li b { color: color-mix(in srgb, var(--abra-glow) 80%, var(--abra-accent)); font: 800 9px/1.25 Montserrat, sans-serif; }
.abra-void-workshop__passive li span { color: #cdd2e6; }
.abra-void-workshop__tierlist li { grid-template-columns: 28px 128px 1fr; align-items: center; opacity: .55; }
.abra-void-workshop__tierlist li.is-reached { opacity: .85; }
.abra-void-workshop__tierlist li.is-current { opacity: 1; border-color: var(--abra-hi); box-shadow: 0 0 10px color-mix(in srgb, var(--abra-accent) 45%, transparent); }
.abra-void-workshop__tierlist img { width: 26px; height: 26px; object-fit: contain; }
.abra-void-workshop__tierlist b small { display: block; margin-top: 2px; color: #9aa1bd; font: 600 8px/1 Outfit, sans-serif; letter-spacing: 0; }
.abra-void-workshop__passive .ability-inline-icon.is-abra-mechanic,
.abra-void-workshop__abilities .ability-inline-icon.is-abra-mechanic { width: 1.4em; height: 1.4em; margin: -.3em .12em -.26em 0; }
.abra-void-workshop__abilities .ability-progression { margin-top: 7px; }

/* =======================================================================
   KÉPESSÉG- ÉS ALAPTÁMADÁS-VFX (abraCombatVfx.js)
   ======================================================================= */
/* Full viewport V3 choreography, including viewport-scaled cards. */
.abra-vfx-stage { position: fixed; inset: 0; z-index: 10050; pointer-events: none; overflow: hidden; isolation: isolate; }
.abra-vfx-veil { position: absolute; inset: 0; background: radial-gradient(ellipse, #090b18aa, #000); pointer-events: none; }
.abra-vfx-canvas, .abra-vfx-resource { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
.abra-vfx-canvas { z-index: 3; }
.abra-vfx-resource { z-index: 10055; }
.abra-vfx-fragment { position: absolute; z-index: 2; pointer-events: none; transform-origin: center; will-change: transform, opacity; }
.abra-vfx-card-copy, .abra-vfx-card-copy * { pointer-events: none !important; }
.abra-vfx-concealed { opacity: 0 !important; }
.abra-vfx-lens { position: absolute; inset: -10%; z-index: 1; border-radius: 45%;
    background: repeating-radial-gradient(ellipse at center, transparent 0 9%, #8993db12 10%, transparent 12% 18%);
    backdrop-filter: blur(1.5px) contrast(1.3) saturate(.7);
    box-shadow: inset 0 0 140px #0009;
    animation: abraLensWarp 4.2s ease-in-out both;
}
.abra-vfx-stage[data-abra-theme="jeg"] .abra-vfx-lens { background: repeating-radial-gradient(ellipse, transparent 0 12%, #63e2ff22 14%, transparent 16% 20%); }
.abra-vfx-stage[data-abra-theme="vip"] .abra-vfx-lens { background: repeating-radial-gradient(ellipse, transparent 0 12%, #cca28522 14%, transparent 16% 20%); }
@keyframes abraLensWarp { 0%,100% { opacity:0; transform:scale(1); } 30% { opacity:1; transform:scale(1.12,.86) rotate(-3deg); } 65% { opacity:1; transform:scale(.93,1.1) rotate(3deg); } }

/* --- Reszponzív + csökkentett mozgás --- */
@media (max-width: 900px) {
    .abra-void-workshop__content { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .abra-void-tooltip__status { grid-template-columns: 1fr; }
    .abra-void-tooltip__bonuses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .abra-void-tooltip__tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .abra-void-tooltip__tiers.is-scythe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .abra-void-tooltip footer { grid-template-columns: 1fr; }
    .abra-void-workshop__passive li, .abra-void-workshop__tierlist li { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .abra-void-meter, .abra-void-meter *, .abra-void-meter::before,
    .abra-void-card-fx, .abra-void-card-fx *,
    .abra-gravity-well, .abra-gravity-well *,
    .abra-void-tooltip *, #abra-void-workshop * { animation: none !important; transition: none !important; }
    .abra-vfx-lens { display: none; }
}