/* =======================================================================
   ARIELLA (heroId 50) – VÉRKÉSZLET
   Vér-fiola mérő (mechanika-ikon), prémium full-bleed tooltip saját
   körvonallal, kártya körüli vér-aura, Vérkészlet-műhely, képesség-VFX
   (297-300), Vérpajzs HP-réteg, napló Vér-chip, leírás-lista.
   Skin-paletta: --ariella-c1..5 (alap: #0D1018 #7B1E29 #520b0b #881123
   #4D1E33). --ariella-fill (0..1) = Vér / 100.
   ======================================================================= */

/* --- Leírás-lista (ability tooltip, műhely) + inline ikonok (csak Ariella) --- */
.ability-progression.is-ariella-blood-details .ability-progression-step {
    grid-template-columns: 104px minmax(0, 1fr);
}
.ability-progression.is-ariella-blood-details .ability-progression-step.is-wide-label {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
}
.ability-progression.is-ariella-blood-details .ability-progression-step.is-wide-label .ability-progression-label {
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(136, 17, 35, .3);
}
.ability-progression.is-ariella-blood-details .ability-progression-step.is-current {
    border-color: rgba(200, 45, 66, .55);
    box-shadow: inset 0 0 14px rgba(136, 17, 35, .28), 0 0 10px rgba(136, 17, 35, .25);
}
.ability-progression.is-ariella-blood-details .ability-progression-step.is-ariella-moon-step .ability-progression-label {
    color: #ff9aa6;
    text-shadow: 0 0 8px rgba(200, 30, 50, .7);
}
.ability-progression.is-ariella-blood-details .ability-progression-step.is-ariella-moon-step.is-current {
    background: linear-gradient(100deg, rgba(123, 30, 41, .32), rgba(13, 16, 24, .35) 60%, rgba(77, 30, 51, .3));
    border-color: rgba(255, 90, 110, .6);
    box-shadow: inset 0 0 16px rgba(136, 17, 35, .4), 0 0 14px rgba(200, 30, 50, .35);
}
body.v3-body > .ability-tooltip-floating .ability-progression.is-ariella-blood-details .ability-progression-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 8px 10px 9px;
    border-radius: 10px;
}
.ability-inline-icon.is-ariella-mechanic { filter: drop-shadow(0 0 4px rgba(200, 30, 50, .75)); }
.ability-inline-icon.is-ariella-blood { filter: drop-shadow(0 0 4px rgba(170, 20, 40, .9)); }
.ability-inline-icon.is-ariella-moon { filter: drop-shadow(0 0 5px rgba(230, 50, 70, .9)); }
.ability-inline-icon.is-ariella-shadow-queen,
.ability-inline-icon.is-ariella-shadow-step { filter: drop-shadow(0 0 4px rgba(120, 40, 90, .9)); }
.ability-inline-icon.is-ariella-queen-shield,
.ability-inline-icon.is-ariella-crack { filter: drop-shadow(0 0 4px rgba(190, 40, 60, .85)); }

/* --- Napló: Vér erőforrás-chip --- */
.v3-log-stat-blood { color: #ff8f9c; background: rgba(136, 17, 35, .2); border: 1px solid rgba(200, 45, 66, .32); }

/* --- HP-sáv: Vérpajzs a jobb szélen (Ariella 2/0d abszorpciós lépése) --- */
.v3-bars .bar.has-v3-ariella-blood-shield .v3-hp-rune-shield-fill {
    border-left: 1px solid color-mix(in srgb, var(--ariella-c4, #881123) 60%, #ff8a98);
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    background:
        repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 180, 190, .16) 9px 10px),
        linear-gradient(115deg,
            var(--ariella-c3, #520b0b) 0%,
            var(--ariella-c2, #7B1E29) 38%,
            color-mix(in srgb, var(--ariella-c4, #881123) 65%, #ff4a5e) 64%,
            var(--ariella-c3, #520b0b) 100%);
    background-size: 19px 100%, 200% 100%;
    box-shadow: inset 0 0 8px rgba(255, 110, 125, .55), 0 0 11px var(--ariella-c4, #881123);
    animation: v3RuneShieldFlow 3.4s linear infinite;
}
.v3-bars .bar.has-v3-ariella-blood-shield .v3-hp-rune-shield-fill::after {
    opacity: .6;
    background: radial-gradient(circle at 50% 30%, rgba(255, 150, 160, .85) 0 1px, transparent 2px) 0 0 / 12px 9px;
    animation: ariellaShieldDrip 1.8s linear infinite;
}
.v3-bars .bar.has-v3-ariella-queen-shield .v3-hp-rune-shield-fill {
    background:
        repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 210, 215, .22) 7px 8px),
        linear-gradient(115deg,
            var(--ariella-c5, #4D1E33) 0%,
            color-mix(in srgb, var(--ariella-c4, #881123) 55%, #ff3048) 40%,
            #ffb3bd 58%,
            var(--ariella-c2, #7B1E29) 100%);
    background-size: 16px 100%, 200% 100%;
    box-shadow: inset 0 0 9px rgba(255, 160, 170, .8), 0 0 15px color-mix(in srgb, var(--ariella-c4, #881123) 70%, #ff3048);
}
.v3-bars .bar.has-v3-ariella-blood-shield .hp-bonus-fill,
.v3-bars .bar.has-v3-ariella-blood-shield .v3-hp-shield-fill {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.v3-hp-layer-value.is-ariella-blood-shield { color: #ff8f9c; text-shadow: 0 0 6px rgba(136, 17, 35, .9); }
@keyframes ariellaShieldDrip { to { background-position: 0 9px; } }

/* =======================================================================
   VÉR-FIOLA MÉRŐ (mechanika-ikon a kártyán)
   ======================================================================= */
.ariella-blood-meter {
    --ariella-c1: #0D1018; --ariella-c2: #7B1E29; --ariella-c3: #520b0b; --ariella-c4: #881123; --ariella-c5: #4D1E33;
    --ariella-fill: 0;
    --ariella-hi: color-mix(in srgb, var(--ariella-c4) 55%, #ff5468);
    position: absolute; left: 40px; bottom: 5px; z-index: 19;
    width: 100px; height: 88px; padding: 0; border: 0;
    background: transparent; color: #fff; cursor: pointer; isolation: isolate;
    filter: drop-shadow(0 7px 9px #000d);
}
.ariella-blood-meter::before {
    position: absolute; inset: 8px 14px 6px; z-index: -1; content: "";
    border: 1px solid color-mix(in srgb, var(--ariella-hi) 70%, transparent);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--ariella-c4) calc(18% + var(--ariella-fill) * 45%), transparent), transparent 70%),
        radial-gradient(circle, color-mix(in srgb, var(--ariella-c5) 40%, var(--ariella-c1)), color-mix(in srgb, var(--ariella-c1) 94%, #000));
    box-shadow:
        0 0 calc(10px + var(--ariella-fill) * 16px) color-mix(in srgb, var(--ariella-c4) calc(40% + var(--ariella-fill) * 50%), transparent),
        inset 0 0 20px #000c;
    animation: ariellaMeterBreath 2.8s ease-in-out infinite alternate;
}
.ariella-blood-meter__mist { position: absolute; inset: 8px 14px 6px; z-index: 0; overflow: hidden; border-radius: 50%; pointer-events: none; }
.ariella-blood-meter__mist i {
    position: absolute; bottom: -10px; left: 50%; width: 5px; height: 7px;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(circle at 40% 35%, #ff8f9c, var(--ariella-c4) 60%, var(--ariella-c3));
    opacity: 0; animation: ariellaMistRise 3.8s linear infinite;
}
.ariella-blood-meter__mist i:nth-child(1) { margin-left: -26px; animation-delay: -.4s; }
.ariella-blood-meter__mist i:nth-child(2) { margin-left: -14px; animation-delay: -1.8s; }
.ariella-blood-meter__mist i:nth-child(3) { margin-left: -2px; animation-delay: -3s; }
.ariella-blood-meter__mist i:nth-child(4) { margin-left: 10px; animation-delay: -1.1s; }
.ariella-blood-meter__mist i:nth-child(5) { margin-left: 21px; animation-delay: -2.5s; }
.ariella-blood-meter__mist i:nth-child(6) { margin-left: 4px; animation-delay: -3.5s; }
.ariella-blood-meter__ring { position: absolute; left: 50%; top: 50%; z-index: 1; width: 0; height: 0; pointer-events: none; }
.ariella-blood-meter__ring i {
    position: absolute; left: -3px; top: -4px; width: 6px; height: 8px;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: #1a0a0e; border: 1px solid color-mix(in srgb, var(--ariella-c2) 55%, transparent);
    transform: rotate(calc(var(--seg-i) * 36deg - 90deg)) translateX(37px) rotate(90deg) scale(.86);
    transition: background .35s, box-shadow .35s, transform .35s;
}
.ariella-blood-meter__ring i.is-on {
    background: radial-gradient(circle at 40% 35%, #ffb0ba, var(--ariella-hi) 45%, var(--ariella-c3));
    border-color: #ff9aa6;
    box-shadow: 0 0 6px var(--ariella-hi);
    transform: rotate(calc(var(--seg-i) * 36deg - 90deg)) translateX(37px) rotate(90deg) scale(1);
}
.ariella-blood-meter__shield {
    position: absolute; inset: 4px 10px 2px; z-index: 1; border-radius: 50%; pointer-events: none;
    border: 2px solid color-mix(in srgb, var(--ariella-hi) 80%, #fff);
    box-shadow: 0 0 12px var(--ariella-hi), inset 0 0 14px color-mix(in srgb, var(--ariella-c4) 70%, transparent);
    opacity: 0; transform: scale(.85); transition: opacity .35s, transform .35s;
}
.ariella-blood-meter.is-shielded .ariella-blood-meter__shield { opacity: .85; transform: scale(1); animation: ariellaShieldPulse 1.6s ease-in-out infinite alternate; }
.ariella-blood-meter.is-queen-shield .ariella-blood-meter__shield { border-color: #ffd0d6; box-shadow: 0 0 18px #ff4a5e, inset 0 0 18px var(--ariella-c4); }
.ariella-blood-meter__moon {
    position: absolute; left: 50%; top: 0; z-index: 0; width: 64px; height: 64px; margin-left: -32px;
    object-fit: contain; opacity: 0; pointer-events: none;
    filter: drop-shadow(0 0 10px #ff3048);
    transform: translateY(14px) scale(.6); transition: opacity .5s, transform .6s;
}
.ariella-blood-meter.is-moon .ariella-blood-meter__moon { opacity: .75; transform: translateY(-14px) scale(1); animation: ariellaMoonHover 4s ease-in-out infinite alternate; }
.ariella-blood-meter__vial {
    position: absolute; left: 50%; top: 50%; z-index: 2; width: 40px; height: 46px; margin: -25px 0 0 -20px;
    border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%; overflow: hidden;
    background: #0a0508e6;
    border: 1px solid color-mix(in srgb, var(--ariella-hi) 65%, transparent);
    box-shadow: inset 0 0 10px #000, 0 0 8px color-mix(in srgb, var(--ariella-c4) 55%, transparent);
}
.ariella-blood-meter__liquid {
    position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--ariella-fill) * 100%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--ariella-hi) 80%, #fff) 0, var(--ariella-c4) 12%, var(--ariella-c3) 100%);
    box-shadow: inset 0 2px 5px #ffffff40;
    transition: height .6s cubic-bezier(.2, .9, .3, 1.2);
}
.ariella-blood-meter__liquid::before {
    position: absolute; left: -20%; top: -3px; width: 140%; height: 6px; content: "";
    border-radius: 50%; background: color-mix(in srgb, var(--ariella-hi) 70%, #fff); opacity: .55;
    animation: ariellaLiquidWave 2.2s ease-in-out infinite alternate;
}
.ariella-blood-meter__drop {
    position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain;
    filter: drop-shadow(0 0 5px var(--ariella-hi)); opacity: .95;
}
.ariella-blood-meter__claw { position: absolute; left: 50%; bottom: 7px; z-index: 3; display: flex; gap: 3px; transform: translateX(-50%); pointer-events: none; }
.ariella-blood-meter__claw i { width: 5px; height: 5px; border-radius: 50%; background: #2a0f15; border: 1px solid color-mix(in srgb, var(--ariella-c2) 70%, transparent); }
.ariella-blood-meter__claw i.is-on { background: var(--ariella-hi); border-color: #ffb0ba; box-shadow: 0 0 5px var(--ariella-hi); }
.ariella-blood-meter.is-claw-ready .ariella-blood-meter__claw i { animation: ariellaClawReady .8s ease-in-out infinite alternate; }
.ariella-blood-meter__value {
    position: absolute; right: 6px; top: 4px; z-index: 4; min-width: 28px; padding: 2px 5px;
    border: 1px solid color-mix(in srgb, var(--ariella-hi) 70%, transparent); border-radius: 10px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ariella-c2) 70%, #000), var(--ariella-c1));
    box-shadow: 0 0 8px color-mix(in srgb, var(--ariella-c4) 60%, transparent);
    text-align: center;
}
.ariella-blood-meter__value b { font: 900 12px/1 Montserrat, sans-serif; text-shadow: 0 0 6px var(--ariella-hi); }
.ariella-blood-meter.is-shadow::before { border-color: color-mix(in srgb, var(--ariella-c5) 60%, #b87ab0); box-shadow: 0 0 18px color-mix(in srgb, var(--ariella-c5) 80%, #8a3a7a), inset 0 0 20px #000c; }
.ariella-blood-meter.is-moon::before {
    border-color: #ff9aa6;
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--ariella-hi) 55%, transparent), transparent 70%), radial-gradient(circle, var(--ariella-c2), var(--ariella-c1));
    box-shadow: 0 0 26px #ff3048, 0 0 44px var(--ariella-c4), inset 0 0 20px #000a;
}
.ariella-blood-meter.is-moon .ariella-blood-meter__value { border-color: #ffb0ba; }
.ariella-blood-meter:hover .ariella-blood-meter__vial, .ariella-blood-meter:focus-visible .ariella-blood-meter__vial { transform: scale(1.06); }
.ariella-blood-meter:focus-visible { outline: 2px solid #ff9aa6; outline-offset: 2px; border-radius: 50%; }

/* ---- Halloween Ariella: faragott töklámpás-fiola (vektoros, ld. ariellaBloodUI.js) ---- */
.ariella-blood-meter__lantern {
    position: absolute; left: 50%; top: 50%; z-index: 3; display: none;
    width: 50px; height: 54px; margin: -31px 0 0 -25px;
    overflow: visible; pointer-events: none;
}
.ariella-blood-meter[data-ariella-theme="halloween"] { --ariella-hi: #ffa25e; }
.ariella-blood-meter[data-ariella-theme="halloween"] .ariella-blood-meter__lantern { display: block; }
.ariella-blood-meter[data-ariella-theme="halloween"] .ariella-blood-meter__drop { display: none; }
.ariella-blood-meter[data-ariella-theme="halloween"] .ariella-blood-meter__vial {
    width: 46px; height: 42px; margin: -21px 0 0 -23px;
    border-radius: 48% 48% 46% 46% / 54% 54% 46% 46%;
    background: radial-gradient(circle at 50% 70%, #3a1606, #1a0a12 72%);
    border-color: transparent;
    box-shadow: inset 0 0 10px #000, 0 0 calc(6px + var(--ariella-fill) * 10px) color-mix(in srgb, var(--ariella-c4) 70%, transparent);
}
.ariella-blood-meter[data-ariella-theme="halloween"] .ariella-blood-meter__liquid {
    background: linear-gradient(180deg, #ffd0a0 0, #F97425 14%, #b4460f 70%, #6e2408 100%);
}
.ariella-blood-meter__lantern .is-body { fill: none; stroke: #ffb27d; stroke-width: 1.6; filter: drop-shadow(0 0 3px rgba(249, 116, 37, .7)); }
.ariella-blood-meter__lantern .is-rib { fill: none; stroke: rgba(46, 19, 56, .75); stroke-width: 1.3; }
.ariella-blood-meter__lantern .is-stem { fill: none; stroke: #22E5BB; stroke-width: 2.6; stroke-linecap: round; }
.ariella-blood-meter__lantern .is-leaf { fill: #093D32; stroke: #22E5BB; stroke-width: .8; }
.ariella-blood-meter__lantern .is-face {
    fill: #22E5BB;
    opacity: calc(.28 + var(--ariella-fill) * .72);
    filter: drop-shadow(0 0 calc(2px + var(--ariella-fill) * 5px) #22E5BB);
    animation: ariellaLanternFlicker 2.6s steps(1, end) infinite;
}
.ariella-blood-meter[data-ariella-theme="halloween"] .ariella-blood-meter__ring i.is-on {
    background: radial-gradient(circle at 40% 35%, #ffe0c0, #F97425 45%, #8A3A10);
    border-color: #ffb27d;
    box-shadow: 0 0 6px #F97425;
}
.ariella-blood-meter[data-ariella-theme="halloween"] .ariella-blood-meter__mist i {
    background: radial-gradient(circle at 40% 35%, #c9fff1, #22E5BB 60%, #093D32);
}
.ariella-blood-meter[data-ariella-theme="halloween"] .ariella-blood-meter__claw i.is-on { border-color: #ffb27d; }
.ariella-blood-meter[data-ariella-theme="halloween"] .ariella-blood-meter__moon { filter: drop-shadow(0 0 10px #22E5BB) hue-rotate(150deg); }
.ariella-blood-meter[data-ariella-theme="halloween"].is-moon::before {
    border-color: #ffb27d;
    box-shadow: 0 0 26px #F97425, 0 0 44px #6B1885, inset 0 0 20px #000a;
}
.ariella-blood-meter[data-ariella-theme="halloween"].is-moon .ariella-blood-meter__value { border-color: #ffb27d; }
.ariella-blood-meter[data-ariella-theme="halloween"].is-queen-shield .ariella-blood-meter__shield { border-color: #c9fff1; box-shadow: 0 0 18px #22E5BB, inset 0 0 18px var(--ariella-c4); }
@keyframes ariellaLanternFlicker { 0%, 100% { filter: drop-shadow(0 0 calc(2px + var(--ariella-fill) * 5px) #22E5BB); } 37% { filter: drop-shadow(0 0 1px #22E5BB); } 39% { filter: drop-shadow(0 0 calc(3px + var(--ariella-fill) * 6px) #22E5BB); } }
@media (prefers-reduced-motion: reduce) { .ariella-blood-meter__lantern .is-face { animation: none; } }
.ariella-blood-meter.is-gaining .ariella-blood-meter__vial { animation: ariellaVialGain .9s ease-out; }
.ariella-blood-meter.is-spending .ariella-blood-meter__vial { animation: ariellaVialSpend .9s ease-out; }
.ariella-blood-meter.is-moon-rising .ariella-blood-meter__moon { animation: ariellaMoonRise 1.8s cubic-bezier(.2, .8, .3, 1) both; }

/* V3 card: ruby glass reservoir with a quiet metal bezel and readable count. */
.v3-card .ariella-blood-meter {
    filter: drop-shadow(0 4px 5px #000b);
}
.v3-card .ariella-blood-meter::before {
    inset: 5px 13px 9px;
    border-color: color-mix(in srgb, var(--ariella-c2) 55%, #d8a697);
    background:
        radial-gradient(ellipse at 50% 90%, color-mix(in srgb, var(--ariella-hi) 28%, transparent), transparent 68%),
        linear-gradient(145deg, #30212b, var(--ariella-c1) 42%, #08080e);
    box-shadow: inset 0 0 0 3px #08090dcc, inset 0 0 0 4px #e9bcc21c,
        0 2px 8px #0009, 0 0 12px color-mix(in srgb, var(--ariella-hi) 22%, transparent);
    animation: none;
}
.v3-card .ariella-blood-meter__ring { top: 40px; }
.v3-card .ariella-blood-meter__ring i {
    width: 3px; height: 7px; left: -1.5px; top: -3.5px;
    border: 0; border-radius: 2px;
    background: #71505d;
    transform: rotate(calc(var(--seg-i) * 36deg - 90deg)) translateX(31px) rotate(90deg);
}
.v3-card .ariella-blood-meter__ring i.is-on {
    background: #ffd0d5;
    box-shadow: 0 0 4px var(--ariella-hi), 0 0 8px var(--ariella-c4);
}
.v3-card .ariella-blood-meter__vial {
    top: 14px; width: 34px; height: 43px; margin: 0 0 0 -17px;
    border-radius: 52% 52% 44% 44% / 68% 68% 32% 32%;
    border-color: #e4a0ad9c;
    background: linear-gradient(135deg, #f9c5d31c, #09080fe8 60%);
    box-shadow: inset 2px 0 4px #ffd6e12b, inset -2px -3px 6px #0009, 0 0 9px #000;
    transition: transform .2s ease;
}
.v3-card .ariella-blood-meter__vial::after {
    content: ""; position: absolute; inset: 3px; border-radius: inherit;
    background: linear-gradient(110deg, transparent 18%, #fff3 23%, #fff1 30%, transparent 36%);
    pointer-events: none;
}
.v3-card .ariella-blood-meter__liquid {
    background: linear-gradient(90deg, var(--ariella-c3), var(--ariella-hi) 48%, var(--ariella-c2));
    box-shadow: inset 0 2px 2px #ffc4cfaa, inset 0 -6px 9px #310911;
}
.v3-card .ariella-blood-meter__drop { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); opacity: .65; }
.v3-card .ariella-blood-meter__value {
    top: 55px; right: 50%; transform: translateX(50%);
    min-width: 47px; padding: 4px 7px; border-radius: 5px;
    border-color: #d698a46b;
    background: linear-gradient(180deg, #351924, #100d15);
    box-shadow: 0 2px 5px #000a, inset 0 1px #ffd5dc18;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.v3-card .ariella-blood-meter__value b { font: 800 15px/1 Outfit, sans-serif; color: #fff0f3; text-shadow: none; }
.v3-card .ariella-blood-meter__value::after { content: "/100"; margin-left: 2px; font: 500 9px/1 Outfit, sans-serif; color: #c79ba7; }
.v3-card .ariella-blood-meter__claw { bottom: 1px; gap: 4px; }
.v3-card .ariella-blood-meter__claw i { width: 4px; height: 4px; border-radius: 1px; transform: rotate(45deg); }
.v3-card .ariella-blood-meter__mist { inset: 9px 23px 27px; opacity: .45; }
.v3-card .ariella-blood-meter__shield { inset: 1px 9px 5px; border-width: 1px; }
.v3-card .ariella-blood-meter.is-shadow::before { border-color: #ba8ec8; box-shadow: inset 0 0 18px var(--ariella-c5), 0 0 12px #9f609f55; }
.v3-card .ariella-blood-meter.is-moon::before { border-color: #ffc2cd; box-shadow: inset 0 0 18px var(--ariella-c4), 0 0 17px #ff304870; }
.v3-card .ariella-blood-meter:focus-visible { outline-offset: 3px; border-radius: 12px; }

@keyframes ariellaMeterBreath { from { filter: brightness(.92); } to { filter: brightness(1.14); } }
@keyframes ariellaMistRise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-70px) scale(1.1); } }
@keyframes ariellaShieldPulse { from { opacity: .6; transform: scale(.98); } to { opacity: 1; transform: scale(1.03); } }
@keyframes ariellaMoonHover { from { transform: translateY(-14px) scale(1); } to { transform: translateY(-18px) scale(1.04); } }
@keyframes ariellaLiquidWave { from { transform: translateX(-6%) rotate(-3deg); } to { transform: translateX(6%) rotate(3deg); } }
@keyframes ariellaClawReady { from { transform: scale(1); } to { transform: scale(1.35); box-shadow: 0 0 9px #ff5468; } }
@keyframes ariellaVialGain { 0% { transform: scale(1); } 30% { transform: scale(1.16); box-shadow: 0 0 20px #ff4a5e, inset 0 0 10px #000; } 100% { transform: scale(1); } }
@keyframes ariellaVialSpend { 0% { transform: scale(1); } 25% { transform: scale(.86); filter: brightness(.6); } 100% { transform: scale(1); } }
@keyframes ariellaMoonRise { 0% { opacity: 0; transform: translateY(24px) scale(.4); } 60% { opacity: 1; transform: translateY(-20px) scale(1.15); } 100% { opacity: .75; transform: translateY(-14px) scale(1); } }

/* =======================================================================
   PRÉMIUM FULL-BLEED TOOLTIP (keret nélküli wrapper, saját körvonal)
   ======================================================================= */
body.v3-body > .item-tooltip-floating:has(.ariella-blood-tooltip),
body.v3-body > .v3-floating-tooltip:has(.ariella-blood-tooltip) {
    width: min(480px, calc(100vw - 20px)); max-width: 480px;
    padding: 0 !important; border: 0 !important; border-radius: 20px;
    background: transparent !important; box-shadow: none !important; overflow: visible;
}
.item-tooltip-floating .item-tooltip-desc:has(.ariella-blood-tooltip) { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.ariella-blood-tooltip {
    --ariella-c1: #0D1018; --ariella-c2: #7B1E29; --ariella-c3: #520b0b; --ariella-c4: #881123; --ariella-c5: #4D1E33;
    --ariella-fill: 0;
    --ariella-hi: color-mix(in srgb, var(--ariella-c4) 55%, #ff5468);
    position: relative; isolation: isolate; box-sizing: border-box; display: block; width: 100%;
    padding: 17px; overflow: hidden;
    border: 2px solid var(--ariella-c2); border-radius: 20px;
    outline: 1px solid color-mix(in srgb, var(--ariella-hi) 45%, transparent); outline-offset: -6px;
    background:
        radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--ariella-c4) calc(22% + var(--ariella-fill) * 22%), transparent), transparent 40%),
        radial-gradient(circle at 10% 92%, color-mix(in srgb, var(--ariella-c5) 55%, transparent), transparent 46%),
        linear-gradient(155deg, color-mix(in srgb, var(--ariella-c1) 90%, var(--ariella-c5)), var(--ariella-c1) 50%, color-mix(in srgb, var(--ariella-c3) 55%, #030102));
    box-shadow: 0 24px 70px #000e, 0 0 calc(22px + var(--ariella-fill) * 22px) color-mix(in srgb, var(--ariella-c4) 60%, transparent), inset 0 0 48px #0009;
    color: #fff; font-family: Outfit, sans-serif; text-align: left;
}
.ariella-blood-tooltip.is-moon {
    border-color: color-mix(in srgb, var(--ariella-hi) 80%, #fff);
    box-shadow: 0 24px 70px #000e, 0 0 50px color-mix(in srgb, var(--ariella-hi) 80%, transparent), 0 0 80px #000, inset 0 0 48px #000a;
}
.ariella-blood-tooltip > * { position: relative; z-index: 2; }
.ariella-blood-tooltip > .ariella-blood-tooltip__vfx { position: absolute; z-index: 0; inset: 0; pointer-events: none; overflow: hidden; }
/* Csöpögő vércseppek a tooltip tetejéről. */
.ariella-blood-tooltip__vfx i {
    position: absolute; top: -14px; width: 7px; height: 11px;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(circle at 40% 35%, #ff9aa6, var(--ariella-c4) 55%, var(--ariella-c3));
    opacity: 0; animation: ariellaTooltipDrip 6.5s cubic-bezier(.55, 0, .9, .6) infinite;
}
.ariella-blood-tooltip__vfx i:nth-child(1) { left: 7%; animation-delay: -.8s; }
.ariella-blood-tooltip__vfx i:nth-child(2) { left: 23%; animation-delay: -3.1s; }
.ariella-blood-tooltip__vfx i:nth-child(3) { left: 41%; animation-delay: -5.2s; }
.ariella-blood-tooltip__vfx i:nth-child(4) { left: 60%; animation-delay: -1.9s; }
.ariella-blood-tooltip__vfx i:nth-child(5) { left: 77%; animation-delay: -4.3s; }
.ariella-blood-tooltip__vfx i:nth-child(6) { left: 93%; animation-delay: -2.6s; }
.ariella-blood-tooltip__vfx b {
    position: absolute; inset: -45%; border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--ariella-hi) 20%, transparent);
    animation: ariellaRingSpin 26s linear infinite;
}
.ariella-blood-tooltip__vfx b:nth-of-type(2) { inset: -18%; border-style: dotted; border-color: color-mix(in srgb, var(--ariella-c5) 55%, transparent); animation-direction: reverse; animation-duration: 16s; }
.ariella-blood-tooltip__vfx em {
    position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--ariella-hi) 10%, transparent) 49%, transparent 68%);
    animation: ariellaTooltipScan 7s linear infinite;
}
.ariella-blood-tooltip__vfx s {
    position: absolute; left: -20%; width: 140%; height: 80px; text-decoration: none;
    background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--ariella-c3) 70%, transparent), transparent 70%);
    filter: blur(10px); opacity: calc(.25 + var(--ariella-fill) * .4); animation: ariellaTooltipMist 13s ease-in-out infinite alternate;
}
.ariella-blood-tooltip__vfx s:nth-of-type(1) { top: 22%; }
.ariella-blood-tooltip__vfx s:nth-of-type(2) { top: 72%; animation-delay: -5s; animation-duration: 16s; }
.ariella-blood-tooltip.is-moon .ariella-blood-tooltip__vfx i { animation-duration: 3.6s; }
.ariella-blood-tooltip header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 11px; padding-bottom: 11px;
    border-bottom: 1px solid color-mix(in srgb, var(--ariella-hi) 28%, transparent);
}
.ariella-blood-tooltip__vial {
    position: relative; display: grid; flex: 0 0 64px; width: 64px; height: 70px; place-items: center; overflow: visible;
}
.ariella-blood-tooltip__vial::before {
    position: absolute; inset: 6px 4px 2px; content: ""; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
    border: 1px solid color-mix(in srgb, var(--ariella-hi) 60%, transparent); background: #0a0508; box-shadow: inset 0 0 12px #000;
}
.ariella-blood-tooltip__vial > i {
    position: absolute; left: 5px; right: 5px; bottom: 3px; height: calc(var(--ariella-fill) * 61px);
    border-radius: 0 0 46% 46% / 0 0 42% 42%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ariella-hi) 80%, #fff), var(--ariella-c4) 14%, var(--ariella-c3));
}
.ariella-blood-tooltip__vial > img:not(.ariella-blood-tooltip__moon) {
    position: relative; z-index: 1; width: 58px; height: 58px; object-fit: contain;
    filter: drop-shadow(0 0 10px var(--ariella-hi));
    animation: ariellaVialFloat 3.2s ease-in-out infinite;
}
.ariella-blood-tooltip__moon {
    position: absolute; z-index: 0; left: 50%; top: -18px; width: 46px; height: 46px; margin-left: -23px; object-fit: contain;
    filter: drop-shadow(0 0 12px #ff3048); animation: ariellaMoonHoverSmall 4s ease-in-out infinite alternate;
}
.ariella-blood-tooltip header > div { display: grid; flex: 1; gap: 2px; min-width: 0; }
.ariella-blood-tooltip header small { color: #ff9aa6; font: 800 9px/1 Montserrat, sans-serif; letter-spacing: .16em; }
.ariella-blood-tooltip header strong { font: 900 21px/1.1 Montserrat, sans-serif; text-shadow: 0 0 15px var(--ariella-hi); }
.ariella-blood-tooltip header em { color: #ecd0d5; font: 700 10px/1.2 Outfit, sans-serif; font-style: normal; letter-spacing: .06em; }
.ariella-blood-tooltip.is-moon header em { color: #ffb0ba; text-shadow: 0 0 8px #ff3048; }
.ariella-blood-tooltip header > b { display: grid; justify-items: end; font: 900 27px/1 Montserrat, sans-serif; text-shadow: 0 0 10px var(--ariella-hi); }
.ariella-blood-tooltip header > b img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 0 6px var(--ariella-hi)); }
.ariella-blood-tooltip header > b small { margin-top: 3px; color: #fff; font-size: 9px; letter-spacing: .1em; }
.ariella-blood-tooltip__track { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin-bottom: 9px; }
.ariella-blood-tooltip__track span {
    display: grid; place-items: center; height: 26px;
    border: 1px solid #ffffff12; border-radius: 7px; background: #0006;
}
.ariella-blood-tooltip__track span.is-tier { border-color: color-mix(in srgb, var(--ariella-c5) 80%, #b06a90); }
.ariella-blood-tooltip__track img { width: 17px; height: 17px; object-fit: contain; opacity: .16; filter: grayscale(1); }
.ariella-blood-tooltip__track span.is-filled { border-color: color-mix(in srgb, var(--ariella-hi) 65%, transparent); background: color-mix(in srgb, var(--ariella-c4) 22%, #0007); box-shadow: inset 0 0 8px color-mix(in srgb, var(--ariella-c4) 50%, transparent); }
.ariella-blood-tooltip__track span.is-filled img { opacity: 1; filter: drop-shadow(0 0 4px var(--ariella-hi)); }
.ariella-blood-tooltip__tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-bottom: 8px; }
.ariella-blood-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;
}
.ariella-blood-tooltip__tiers span.is-reached { opacity: .82; }
.ariella-blood-tooltip__tiers span.is-current {
    opacity: 1; border-color: var(--ariella-hi);
    background: color-mix(in srgb, var(--ariella-c4) 18%, #0007);
    box-shadow: 0 0 12px color-mix(in srgb, var(--ariella-c4) 50%, transparent), inset 0 0 12px color-mix(in srgb, var(--ariella-hi) 22%, transparent);
}
.ariella-blood-tooltip__tiers span.is-moon.is-current { border-color: #ffb0ba; box-shadow: 0 0 16px #ff3048, inset 0 0 12px var(--ariella-c4); }
.ariella-blood-tooltip__tiers img { width: 30px; height: 30px; object-fit: contain; }
.ariella-blood-tooltip__tiers span.is-current img { filter: drop-shadow(0 0 7px var(--ariella-hi)); }
.ariella-blood-tooltip__tiers b { font: 800 8.5px/1.1 Montserrat, sans-serif; }
.ariella-blood-tooltip__tiers small { color: #d4b4ba; font: 600 8px/1 Outfit, sans-serif; }
.ariella-blood-tooltip__progress { position: relative; min-height: 15px; margin-bottom: 11px; border: 1px solid color-mix(in srgb, var(--ariella-hi) 40%, transparent); border-radius: 8px; background: #0009; overflow: hidden; }
.ariella-blood-tooltip__progress i {
    position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(var(--ariella-progress) - 4px); max-width: calc(100% - 4px);
    border-radius: 6px; background: linear-gradient(90deg, var(--ariella-c3), var(--ariella-c2), var(--ariella-hi));
}
.ariella-blood-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; }
.ariella-blood-tooltip__progress .ability-inline-icon { width: 1.35em; height: 1.35em; margin: -.3em .1em -.25em 0; }
.ariella-blood-tooltip__bonuses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-bottom: 10px; }
.ariella-blood-tooltip__bonuses span { display: grid; gap: 3px; padding: 6px 7px; border: 1px solid #ffffff10; border-radius: 8px; background: #0005; }
.ariella-blood-tooltip__bonuses small { color: #c9a9af; font: 600 8px/1.1 Outfit, sans-serif; }
.ariella-blood-tooltip__bonuses b { color: #ff9aa6; font: 900 11px/1 Montserrat, sans-serif; }
.ariella-blood-tooltip__status, .ariella-blood-tooltip__rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.ariella-blood-tooltip__status span, .ariella-blood-tooltip__rules 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;
}
.ariella-blood-tooltip__status span { opacity: .55; }
.ariella-blood-tooltip__status span.is-active {
    opacity: 1; border-color: var(--ariella-hi);
    background: color-mix(in srgb, var(--ariella-c4) 18%, #0006);
    box-shadow: 0 0 12px color-mix(in srgb, var(--ariella-c4) 45%, transparent);
}
.ariella-blood-tooltip__status span.is-queen { border-color: #ffb0ba; background: linear-gradient(120deg, color-mix(in srgb, var(--ariella-c5) 45%, #0006), color-mix(in srgb, var(--ariella-c4) 22%, #0006)); }
.ariella-blood-tooltip__status span.is-moon { border-color: #ffb0ba; box-shadow: 0 0 16px #ff304880; }
.ariella-blood-tooltip__status span.is-ready { animation: ariellaStatusGlow 1.2s ease-in-out infinite alternate; }
.ariella-blood-tooltip__status img, .ariella-blood-tooltip__rules img { grid-row: 1 / 3; width: 29px; height: 29px; object-fit: contain; border-radius: 6px; filter: drop-shadow(0 0 5px var(--ariella-c4)); }
.ariella-blood-tooltip__status b, .ariella-blood-tooltip__rules b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font: 800 9px/1.1 Montserrat, sans-serif; }
.ariella-blood-tooltip__status small, .ariella-blood-tooltip__rules small { color: #d2b7bd; font: 500 8.5px/1.25 Outfit, sans-serif; }
.ariella-blood-tooltip__pips { display: inline-flex; gap: 2px; margin-left: 2px; font-style: normal; }
.ariella-blood-tooltip__pips i { width: 5px; height: 5px; border-radius: 50%; background: #2a0f15; border: 1px solid color-mix(in srgb, var(--ariella-c2) 70%, transparent); }
.ariella-blood-tooltip__pips i.is-on { background: var(--ariella-hi); border-color: #ffb0ba; box-shadow: 0 0 4px var(--ariella-hi); }
.ariella-blood-tooltip .ability-inline-icon.is-ariella-mechanic { width: 1.4em; height: 1.4em; margin: -.3em .12em -.26em 0; }
.ariella-blood-tooltip footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ariella-blood-tooltip footer span {
    display: grid; gap: 3px; padding: 7px; border: 1px solid color-mix(in srgb, var(--ariella-hi) 24%, transparent);
    border-radius: 8px; background: #0006; color: #d2b7bd; font: 600 8.5px/1.2 Outfit, sans-serif; text-align: center;
}
.ariella-blood-tooltip footer b { color: #ff9aa6; font: 900 13px/1 Montserrat, sans-serif; }
.ariella-blood-tooltip__hint { display: block; margin-top: 9px; color: #ff9aa6; font: 700 8px/1.3 Montserrat, sans-serif; text-align: center; letter-spacing: .06em; }

@keyframes ariellaTooltipDrip { 0% { opacity: 0; transform: translateY(0) scaleY(.6); } 8% { opacity: .9; transform: translateY(6px) scaleY(1.15); } 100% { opacity: 0; transform: translateY(560px) scaleY(1); } }
@keyframes ariellaRingSpin { to { transform: rotate(360deg); } }
@keyframes ariellaTooltipScan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes ariellaTooltipMist { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
@keyframes ariellaVialFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ariellaMoonHoverSmall { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes ariellaStatusGlow { from { box-shadow: 0 0 6px color-mix(in srgb, var(--ariella-c4) 40%, transparent); } to { box-shadow: 0 0 18px var(--ariella-hi); } }

/* =======================================================================
   KÁRTYA KÖRÜLI VÉR-AURA
   ======================================================================= */
.ariella-blood-card-fx {
    --ariella-c1: #0D1018; --ariella-c2: #7B1E29; --ariella-c3: #520b0b; --ariella-c4: #881123; --ariella-c5: #4D1E33;
    --ariella-fill: 0;
    --ariella-hi: color-mix(in srgb, var(--ariella-c4) 55%, #ff5468);
    position: absolute; z-index: 31; pointer-events: none;
    transform: translate(-50%, -50%); overflow: visible;
}
.ariella-blood-card-fx > span { position: absolute; pointer-events: none; }
.ariella-blood-card-fx__aura {
    inset: 14px; border-radius: 17px;
    box-shadow: 0 0 calc(var(--ariella-fill) * 18px) color-mix(in srgb, var(--ariella-c4) calc(var(--ariella-fill) * 70%), transparent);
    opacity: calc(var(--ariella-fill) * .9);
    transition: opacity .6s, box-shadow .6s;
}
.ariella-blood-card-fx.is-empty .ariella-blood-card-fx__aura { opacity: 0; }
.ariella-blood-card-fx__rim {
    inset: 14px; border-radius: 17px; opacity: 0;
    border: 2px solid color-mix(in srgb, var(--ariella-hi) 85%, #fff);
    box-shadow: inset 0 0 14px var(--ariella-hi), inset 0 0 36px color-mix(in srgb, var(--ariella-c4) 60%, transparent), 0 0 20px #ff3048;
    transition: opacity .6s;
}
.ariella-blood-card-fx.is-moon .ariella-blood-card-fx__rim { opacity: 1; animation: ariellaRimBreath 1.4s ease-in-out infinite alternate; }
.ariella-blood-card-fx.is-shadow .ariella-blood-card-fx__aura {
    opacity: 1;
    box-shadow: 0 0 22px color-mix(in srgb, var(--ariella-c5) 90%, #8a3a7a), inset 0 0 30px color-mix(in srgb, var(--ariella-c5) 55%, transparent);
}
.ariella-blood-card-fx__drops { inset: 14px; overflow: hidden; border-radius: 17px; opacity: 0; transition: opacity .6s; }
.ariella-blood-card-fx.is-moon .ariella-blood-card-fx__drops { opacity: 1; }
.ariella-blood-card-fx__drops i {
    position: absolute; top: -12px; left: var(--ariella-drop-x);
    width: var(--ariella-drop-size); height: calc(var(--ariella-drop-size) * 1.45);
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(circle at 40% 35%, #ffb0ba, var(--ariella-hi) 45%, var(--ariella-c3));
    opacity: 0; animation: ariellaCardDrop var(--ariella-drop-duration) cubic-bezier(.55, 0, .9, .6) var(--ariella-drop-delay) infinite;
}
.ariella-blood-card-fx__moon { left: 50%; top: 0; width: 86px; height: 86px; margin-left: -43px; opacity: 0; transform: translateY(20px) scale(.5); transition: opacity .6s, transform .8s; }
.ariella-blood-card-fx__moon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 16px #ff3048); }
.ariella-blood-card-fx__moon b { position: absolute; inset: 20%; border-radius: 50%; box-shadow: 0 0 40px 10px color-mix(in srgb, var(--ariella-hi) 50%, transparent); }
.ariella-blood-card-fx.is-moon .ariella-blood-card-fx__moon { opacity: .9; transform: translateY(-34px) scale(1); }
.ariella-blood-card-fx.is-moon-rising .ariella-blood-card-fx__moon { animation: ariellaCardMoonRise 2s cubic-bezier(.2, .8, .3, 1) both; }
.ariella-blood-card-fx.is-moon-rising .ariella-blood-card-fx__rim { animation: ariellaRimFlash 2s ease-out both; }
.ariella-blood-card-fx.is-moon-setting .ariella-blood-card-fx__moon { animation: ariellaCardMoonSet 1.4s ease-in both; }
.ariella-blood-card-fx__shield { inset: 6px; border-radius: 22px; opacity: 0; transition: opacity .4s; }
.ariella-blood-card-fx__shield i {
    position: absolute; inset: 0; border-radius: inherit;
    border: 2px solid color-mix(in srgb, var(--ariella-hi) 70%, #fff);
    background: radial-gradient(ellipse at 50% 40%, transparent 55%, color-mix(in srgb, var(--ariella-c4) 35%, transparent));
    box-shadow: 0 0 16px var(--ariella-hi), inset 0 0 22px color-mix(in srgb, var(--ariella-c4) 60%, transparent);
}
.ariella-blood-card-fx.is-shielded .ariella-blood-card-fx__shield { opacity: .8; animation: ariellaCardShield 2s ease-in-out infinite alternate; }
.ariella-blood-card-fx.is-queen-shield .ariella-blood-card-fx__shield i { border-color: #ffd0d6; box-shadow: 0 0 24px #ff3048, inset 0 0 28px var(--ariella-c4); }
.ariella-blood-card-fx.is-absorbing .ariella-blood-card-fx__shield { animation: ariellaShieldHit .7s ease-out; }
.ariella-blood-card-fx__shatter { left: 50%; top: 50%; width: 0; height: 0; }
.ariella-blood-card-fx__shatter i {
    position: absolute; left: -9px; top: -12px; width: 18px; height: 24px; opacity: 0;
    clip-path: polygon(50% 0, 100% 40%, 70% 100%, 10% 80%, 0 30%);
    background: linear-gradient(135deg, #ffd0d6, var(--ariella-hi) 45%, var(--ariella-c3));
}
.ariella-blood-card-fx.is-shattering .ariella-blood-card-fx__shatter i { animation: ariellaShard 1.2s cubic-bezier(.2, .8, .3, 1) both; }
.ariella-blood-card-fx.is-shattering .ariella-blood-card-fx__shield { animation: ariellaShieldBreak .6s ease-out both; }
.ariella-blood-card-fx.is-cracking .ariella-blood-card-fx__rim { animation: ariellaRimFlash 1.2s ease-out both; }
.ariella-blood-card-fx.is-cracking .ariella-blood-card-fx__shatter i { animation: ariellaShard 1.1s cubic-bezier(.2, .8, .3, 1) both; filter: hue-rotate(-10deg) brightness(1.2); }
.ariella-blood-card-fx__gain { left: 50%; top: 42%; display: flex; align-items: center; gap: 3px; opacity: 0; transform: translateX(-50%); }
.ariella-blood-card-fx__gain img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 0 6px var(--ariella-hi)); }
.ariella-blood-card-fx__gain b { color: #ffb0ba; font: 900 17px/1 Montserrat, sans-serif; text-shadow: 0 0 8px #ff3048, 0 2px 3px #000; }
.ariella-blood-card-fx.is-gaining .ariella-blood-card-fx__gain { animation: ariellaGainFloat 1.1s ease-out both; }
.ariella-blood-card-fx.is-spending .ariella-blood-card-fx__aura { animation: ariellaSpendFlash 1s ease-out; }

@keyframes ariellaRimBreath { from { opacity: .7; } to { opacity: 1; } }
@keyframes ariellaCardDrop { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: .9; } 100% { opacity: 0; transform: translateY(340px); } }
@keyframes ariellaCardMoonRise { 0% { opacity: 0; transform: translateY(60px) scale(.3); } 55% { opacity: 1; transform: translateY(-44px) scale(1.25); } 100% { opacity: .9; transform: translateY(-34px) scale(1); } }
@keyframes ariellaCardMoonSet { 0% { opacity: .9; transform: translateY(-34px) scale(1); } 100% { opacity: 0; transform: translateY(40px) scale(.4); } }
@keyframes ariellaRimFlash { 0% { opacity: 0; } 18% { opacity: 1; filter: brightness(1.8); } 100% { opacity: 0; } }
@keyframes ariellaCardShield { from { opacity: .6; } to { opacity: .95; } }
@keyframes ariellaShieldHit { 0% { opacity: 1; filter: brightness(2); transform: scale(1.03); } 100% { opacity: .8; filter: none; transform: scale(1); } }
@keyframes ariellaShieldBreak { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes ariellaShard { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--spin)) scale(.5); } }
@keyframes ariellaGainFloat { 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%, -36px) scale(1); } }
@keyframes ariellaSpendFlash { 0% { opacity: 1; box-shadow: 0 0 30px #ff3048; } 100% { opacity: calc(var(--ariella-fill) * .9); } }

/* =======================================================================
   VÉRKÉSZLET-MŰHELY
   ======================================================================= */
#ariella-blood-workshop {
    --ariella-c1: #0D1018; --ariella-c2: #7B1E29; --ariella-c3: #520b0b; --ariella-c4: #881123; --ariella-c5: #4D1E33;
    --ariella-fill: 0;
    --ariella-hi: color-mix(in srgb, var(--ariella-c4) 55%, #ff5468);
    position: fixed; width: min(1120px, 95vw); max-width: 95vw; max-height: 92vh; padding: 0; overflow: hidden;
    border: 1px solid var(--ariella-hi); border-radius: 22px;
    outline: 1px solid color-mix(in srgb, var(--ariella-c2) 60%, transparent); outline-offset: -7px;
    background:
        radial-gradient(circle at 85% 0, color-mix(in srgb, var(--ariella-c4) 26%, transparent), transparent 38%),
        radial-gradient(circle at 10% 100%, color-mix(in srgb, var(--ariella-c5) 55%, transparent), transparent 46%),
        linear-gradient(145deg, var(--ariella-c1), #070305 60%, color-mix(in srgb, var(--ariella-c3) 55%, #020001));
    box-shadow: 0 30px 100px #000f, 0 0 45px color-mix(in srgb, var(--ariella-c4) 50%, transparent);
    color: #fff;
}
#ariella-blood-workshop.is-moon { border-color: #ffb0ba; box-shadow: 0 30px 100px #000f, 0 0 60px #ff304890; }
#ariella-blood-workshop::backdrop { background: rgba(10, 0, 3, .85); backdrop-filter: blur(8px); }
.ariella-blood-workshop__vfx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ariella-blood-workshop__vfx i {
    position: absolute; top: -20px; width: 8px; height: 12px;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(circle at 40% 35%, #ff9aa6, var(--ariella-c4) 55%, var(--ariella-c3));
    opacity: 0; animation: ariellaWorkshopDrip 10s cubic-bezier(.55, 0, .9, .6) infinite;
}
.ariella-blood-workshop__vfx i:nth-child(1) { left: 4%; animation-delay: -1s; }
.ariella-blood-workshop__vfx i:nth-child(2) { left: 14%; animation-delay: -6s; }
.ariella-blood-workshop__vfx i:nth-child(3) { left: 25%; animation-delay: -3s; }
.ariella-blood-workshop__vfx i:nth-child(4) { left: 37%; animation-delay: -8s; }
.ariella-blood-workshop__vfx i:nth-child(5) { left: 48%; animation-delay: -5s; }
.ariella-blood-workshop__vfx i:nth-child(6) { left: 59%; animation-delay: -9.5s; }
.ariella-blood-workshop__vfx i:nth-child(7) { left: 70%; animation-delay: -2s; }
.ariella-blood-workshop__vfx i:nth-child(8) { left: 80%; animation-delay: -7s; }
.ariella-blood-workshop__vfx i:nth-child(9) { left: 89%; animation-delay: -4s; }
.ariella-blood-workshop__vfx i:nth-child(10) { left: 96%; animation-delay: -8.8s; }
#ariella-blood-workshop > header, .ariella-blood-workshop__content { position: relative; z-index: 1; }
#ariella-blood-workshop > header { display: flex; align-items: center; gap: 14px; padding: 16px 25px 12px; border-bottom: 1px solid color-mix(in srgb, var(--ariella-hi) 30%, transparent); }
#ariella-blood-workshop > header > div { flex: 1; }
.ariella-blood-workshop__drop { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 10px var(--ariella-hi)) drop-shadow(0 0 18px var(--ariella-c4)); animation: ariellaVialFloat 3.2s ease-in-out infinite; }
#ariella-blood-workshop > header small { color: #ff9aa6; font: 800 9px/1 Montserrat, sans-serif; letter-spacing: .2em; }
#ariella-blood-workshop > header h2 { margin: 5px 0 0; font: 900 25px/1 Montserrat, sans-serif; text-shadow: 0 0 16px var(--ariella-hi); }
#ariella-blood-workshop > header button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--ariella-hi); border-radius: 50%; background: #0007; color: #fff; font-size: 22px; cursor: pointer; }
#ariella-blood-workshop > header button:hover { background: color-mix(in srgb, var(--ariella-c4) 40%, #000); }
.ariella-blood-workshop__content { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(460px, 1.1fr); gap: 15px; max-height: calc(92vh - 86px); padding: 18px 22px 24px; overflow: auto; }
.ariella-blood-workshop__overview { display: grid; align-content: start; gap: 10px; }
.ariella-blood-workshop__passive { display: grid; gap: 8px; }
.ariella-blood-workshop__passive article,
.ariella-blood-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(--ariella-hi) 24%, transparent); border-radius: 13px; background: #ffffff07;
}
.ariella-blood-workshop__abilities article { grid-template-columns: 68px 1fr; }
.ariella-blood-workshop__passive article > img { width: 56px; height: 56px; object-fit: contain; border-radius: 11px; filter: drop-shadow(0 0 8px var(--ariella-c4)); }
.ariella-blood-workshop__abilities article > img { width: 66px; height: 66px; object-fit: cover; border: 1px solid var(--ariella-hi); border-radius: 11px; box-shadow: 0 0 13px color-mix(in srgb, var(--ariella-c4) 50%, transparent); }
.ariella-blood-workshop__passive small { color: #ff9aa6; font: 800 8px/1 Montserrat, sans-serif; letter-spacing: .14em; }
.ariella-blood-workshop__passive strong { display: block; margin-top: 3px; font: 900 14px/1.15 Montserrat, sans-serif; }
.ariella-blood-workshop__passive p { margin: 5px 0 6px; color: #dcc3c8; font: 500 10px/1.35 Outfit, sans-serif; }
.ariella-blood-workshop__passive ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ariella-blood-workshop__passive li { display: grid; grid-template-columns: 112px 1fr; gap: 8px; padding: 5px 7px; border: 1px solid #ffffff0e; border-radius: 8px; background: #0005; font: 500 9.5px/1.3 Outfit, sans-serif; }
.ariella-blood-workshop__passive li b { color: #ffb0ba; font: 800 9px/1.25 Montserrat, sans-serif; }
.ariella-blood-workshop__passive li span { color: #dcc3c8; }
.ariella-blood-workshop__passive .ability-inline-icon.is-ariella-mechanic,
.ariella-blood-workshop__abilities .ability-inline-icon.is-ariella-mechanic { width: 1.4em; height: 1.4em; margin: -.3em .12em -.26em 0; }
.ariella-blood-workshop__abilities { display: grid; align-content: start; gap: 9px; }
.ariella-blood-workshop__abilities .ability-progression { margin-top: 7px; }
@keyframes ariellaWorkshopDrip { 0% { opacity: 0; transform: translateY(0); } 8% { opacity: .6; } 100% { opacity: 0; transform: translateY(95vh); } }

/* V3 blood intensity: 25 / 50 / 75 blood unlock additional layers. */
.v3-card .ariella-blood-meter,
.ariella-blood-card-fx.is-v3 {
    --blood-tempo: 3.8s;
    --blood-corona: 0;
    --blood-embers: 0;
}
.v3-card .ariella-blood-meter[data-ariella-tier="t25"],
.ariella-blood-card-fx.is-v3[data-ariella-tier="t25"] { --blood-tempo: 3s; --blood-embers: .4; }
.v3-card .ariella-blood-meter[data-ariella-tier="t50"],
.ariella-blood-card-fx.is-v3[data-ariella-tier="t50"] { --blood-tempo: 2.4s; --blood-embers: .65; --blood-corona: .35; }
.v3-card .ariella-blood-meter[data-ariella-tier="t75"],
.ariella-blood-card-fx.is-v3[data-ariella-tier="t75"] { --blood-tempo: 1.8s; --blood-embers: .85; --blood-corona: .65; }
.v3-card .ariella-blood-meter[data-ariella-tier="hold"],
.ariella-blood-card-fx.is-v3[data-ariella-tier="hold"] { --blood-tempo: 1.4s; --blood-embers: 1; --blood-corona: 1; }

.v3-card .ariella-blood-meter::after {
    content: ""; position: absolute; inset: 1px 10px 7px; z-index: 1;
    border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 0deg, transparent 12%, var(--ariella-hi) 25%, #ffe0e6 28%, transparent 32%, transparent 65%, var(--ariella-hi) 78%, transparent 82%);
    mask-image: radial-gradient(ellipse, transparent 62%, #000 65%, #000 69%, transparent 72%);
    opacity: var(--blood-corona);
    animation: ariellaRingSpin calc(var(--blood-tempo) * 2) linear infinite;
    transition: opacity .7s;
}
.v3-card .ariella-blood-meter__vial {
    box-shadow: inset 2px 0 4px #ffd6e12b, inset -2px -3px 6px #0009,
        0 0 calc(3px + var(--ariella-fill) * 18px) color-mix(in srgb, var(--ariella-hi) calc(var(--ariella-fill) * 85%), transparent);
    transition: box-shadow .6s, transform .2s;
}
.v3-card .ariella-blood-meter__mist { opacity: calc(.15 + var(--ariella-fill) * .85); }
.v3-card .ariella-blood-meter__mist i { animation-duration: calc(var(--blood-tempo) + .5s); }
.v3-card .ariella-blood-meter__liquid::before { animation-duration: var(--blood-tempo); }
.v3-card .ariella-blood-meter__moon,
.ariella-blood-card-fx.is-v3 .ariella-blood-card-fx__moon img { mask-image: radial-gradient(circle, #000 48%, #0009 59%, transparent 71%); }
.v3-card .ariella-blood-meter__ring i.is-on { animation: ariellaBloodTick var(--blood-tempo) ease-in-out calc(var(--seg-i) * -.18s) infinite; }
.v3-card .ariella-blood-meter[data-ariella-tier="t75"] .ariella-blood-meter__value,
.v3-card .ariella-blood-meter.is-moon .ariella-blood-meter__value { border-color: #ffc0cb; box-shadow: 0 0 12px color-mix(in srgb, var(--ariella-hi) 50%, transparent), inset 0 1px #ffd5dc38; }

/* Edge-only layers keep the portrait, values and controls readable. */
.ariella-blood-card-fx__corona,
.ariella-blood-card-fx__embers { display: none; }
.ariella-blood-card-fx.is-v3 .ariella-blood-card-fx__aura {
    box-shadow: 0 0 calc(4px + var(--ariella-fill) * 30px) color-mix(in srgb, var(--ariella-hi) 65%, transparent),
        inset 0 0 calc(var(--ariella-fill) * 24px) color-mix(in srgb, var(--ariella-c4) 55%, transparent);
    opacity: var(--ariella-fill);
}
.ariella-blood-card-fx.is-v3 .ariella-blood-card-fx__aura::after {
    content: ""; position: absolute; inset: -3px; border-radius: inherit;
    opacity: .25;
    box-shadow: 0 0 20px var(--ariella-c4), inset 0 0 10px var(--ariella-hi);
    animation: ariellaBloodHeartbeat var(--blood-tempo) ease-in-out infinite;
}
.ariella-blood-card-fx.is-v3.is-shadow .ariella-blood-card-fx__aura {
    opacity: 1;
    box-shadow: 0 0 calc(18px + var(--ariella-fill) * 18px) color-mix(in srgb, var(--ariella-c5) 70%, #8a3a7a), inset 0 0 24px color-mix(in srgb, var(--ariella-c5) 55%, transparent);
}
.ariella-blood-card-fx.is-v3 .ariella-blood-card-fx__corona {
    display: block; inset: 9px; border-radius: 21px; padding: 2px;
    background: conic-gradient(from var(--ariella-orbit), transparent 0 12%, var(--ariella-c4) 20%, #ffd1db 25%, transparent 30% 62%, var(--ariella-hi) 70%, #ffd1db 75%, transparent 80%);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: var(--blood-corona); transition: opacity .7s;
    animation: ariellaBloodOrbit calc(var(--blood-tempo) * 3) linear infinite;
}
.ariella-blood-card-fx.is-v3 .ariella-blood-card-fx__embers {
    display: block; inset: 14px; opacity: var(--blood-embers); transition: opacity .7s;
}
.ariella-blood-card-fx__embers i {
    position: absolute; left: var(--ember-x); bottom: 3%; width: 3px; height: 7px;
    border-radius: 60% 40% 60% 40%; background: #ffd2dc;
    box-shadow: 0 0 5px var(--ariella-hi), 0 0 10px var(--ariella-c4);
    opacity: 0; animation: ariellaBloodEmber calc(var(--blood-tempo) + 1.2s) linear calc(var(--ember-i) * -.47s) infinite;
    animation-play-state: paused;
}
.ariella-blood-card-fx.is-v3:not([data-ariella-tier="alap"]) .ariella-blood-card-fx__embers i { animation-play-state: running; }
.ariella-blood-card-fx.is-v3[data-ariella-tier="t25"] .ariella-blood-card-fx__embers i:nth-child(n+5),
.ariella-blood-card-fx.is-v3[data-ariella-tier="t50"] .ariella-blood-card-fx__embers i:nth-child(n+9) { display: none; }
.ariella-blood-card-fx.is-v3[data-ariella-tier="t75"] .ariella-blood-card-fx__rim { opacity: .35; }
.ariella-blood-card-fx.is-v3[data-ariella-tier="t75"] .ariella-blood-card-fx__drops { opacity: .35; }
.ariella-blood-card-fx.is-v3:not(.is-moon) .ariella-blood-card-fx__drops i:nth-child(n+7) { display: none; }
.ariella-blood-card-fx.is-v3:not(.is-moon):not([data-ariella-tier="t75"]) .ariella-blood-card-fx__drops i { animation-play-state: paused; }
.ariella-blood-card-fx.is-v3.is-moon .ariella-blood-card-fx__drops i { animation-duration: calc(var(--ariella-drop-duration) * .75); }
.ariella-blood-card-fx.is-v3::after {
    content: ""; position: absolute; inset: 14px; border-radius: 17px;
    border: 2px solid #ffc0ce; box-shadow: 0 0 18px var(--ariella-hi), inset 0 0 12px var(--ariella-c4);
    opacity: 0; pointer-events: none;
}
.ariella-blood-card-fx.is-v3.is-tier-rising::after { animation: ariellaBloodAscend 1.2s ease-out both; }
@property --ariella-orbit { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes ariellaBloodOrbit { to { --ariella-orbit: 360deg; } }
@keyframes ariellaBloodTick { 0%, 100% { opacity: .65; } 45% { opacity: 1; } }
@keyframes ariellaBloodHeartbeat { 0%, 100% { opacity: .15; } 35% { opacity: .6; } 50% { opacity: .25; } 65% { opacity: .45; } }
@keyframes ariellaBloodEmber {
    0% { opacity: 0; transform: translate(0, 0) scale(.5); }
    15% { opacity: .9; }
    65% { opacity: .65; }
    100% { opacity: 0; transform: translate(var(--ember-drift), -190px) scale(.15); }
}
@keyframes ariellaBloodAscend {
    0% { opacity: 0; transform: scale(.98); }
    20% { opacity: .85; }
    100% { opacity: 0; transform: scale(1.13); }
}

/* Persistent Shadow Magic: tapered smoke snakes along an open, winding SVG
   perimeter. No rectangular mask/clip or hard-edged particle container. */
.ariella-blood-card-fx__shadow-smoke { display: none; }
.ariella-blood-card-fx.is-v3 .ariella-blood-card-fx__shadow-smoke {
    --ariella-smoke: color-mix(in srgb, var(--ariella-c1) 18%, #000);
    --ariella-smoke-rim: color-mix(in srgb, var(--ariella-c5) 35%, #17171e);
    display: block; inset: 0; overflow: visible; pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity .45s ease-out, visibility 0s linear .45s;
}
.ariella-blood-card-fx.is-v3.is-shadow .ariella-blood-card-fx__shadow-smoke {
    opacity: 1; visibility: visible;
    transition: opacity .3s ease-out, visibility 0s;
}
.ariella-blood-card-fx__shadow-smoke svg {
    display: block; width: 100%; height: 100%; overflow: visible;
}
.ariella-shadow-serpent {
    fill: none; stroke: var(--ariella-smoke); stroke-linecap: round;
    filter: blur(.8px) drop-shadow(0 0 2px var(--ariella-smoke-rim));
}
.ariella-shadow-serpent path {
    stroke-width: var(--smoke-width); opacity: var(--smoke-alpha);
    stroke-dasharray: 1.4 98.6; stroke-dashoffset: var(--smoke-offset);
    animation: ariellaShadowSerpent 4.6s linear infinite;
    animation-play-state: paused;
}
.ariella-shadow-serpent.is-trailing {
    filter: blur(1.4px) drop-shadow(0 0 3px var(--ariella-smoke));
}
.ariella-shadow-serpent.is-trailing path { animation-duration: 6.2s; }
.ariella-blood-card-fx.is-v3.is-shadow .ariella-shadow-serpent path { animation-play-state: running; }
@keyframes ariellaShadowSerpent {
    from { stroke-dashoffset: var(--smoke-offset); }
    to { stroke-dashoffset: var(--smoke-end); }
}

/* --- Reszponzív + csökkentett mozgás --- */
@media (max-width: 900px) {
    .ariella-blood-workshop__content { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .ariella-blood-tooltip__status, .ariella-blood-tooltip__rules { grid-template-columns: 1fr; }
    .ariella-blood-tooltip__bonuses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ariella-blood-tooltip__tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ariella-blood-workshop__passive li { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .ariella-blood-card-fx.is-v3.is-shadow .ariella-blood-card-fx__shadow-smoke { opacity: .6; }
    .ariella-blood-meter, .ariella-blood-meter *, .ariella-blood-meter::before,
    .ariella-blood-meter::after, .ariella-blood-meter__liquid::before,
    .ariella-blood-card-fx::after, .ariella-blood-card-fx__aura::after,
    .ariella-blood-card-fx, .ariella-blood-card-fx *,
    .ariella-blood-tooltip *, #ariella-blood-workshop *,
    .v3-bars .bar.has-v3-ariella-blood-shield .v3-hp-rune-shield-fill,
    .v3-bars .bar.has-v3-ariella-blood-shield .v3-hp-rune-shield-fill::after { animation: none !important; transition: none !important; }

}