/* =======================================================
   HALLOWEEN – közös mechanika-tooltip VFX (js/ui/halloweenTooltipFx.js)
   =======================================================
   Paletta: --hw-1 töknarancs, --hw-2 mélylila, --hw-3 kísértetzöld,
   --hw-4 türkiz lélekfény, --hw-5 éjlila. A réteg a tartalom mögött,
   a tooltip háttere fölött fut (a .hw-tip isolation-je miatt). */

:where(.hw-tip) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.hw-tip {
    --hw-1: #F97425; --hw-2: #6B1885; --hw-3: #093D32; --hw-4: #22E5BB; --hw-5: #2E1338;
    /* Egységes Halloween alap minden hős tooltipjén (a hősök saját,
       palettából számolt díszítései fölötte maradnak). */
    background:
        radial-gradient(circle at 10% 3%, rgba(249, 116, 37, .26), transparent 36%),
        radial-gradient(circle at 92% 94%, rgba(34, 229, 187, .16), transparent 42%),
        linear-gradient(152deg, #2E1338 0%, #14081d 52%, #0a2a23 100%) !important;
    color: #fff4ea;
    border-color: color-mix(in srgb, var(--hw-1) 72%, transparent) !important;
    box-shadow: inset 0 0 0 1px rgba(34, 229, 187, .12), inset 0 0 34px rgba(107, 24, 133, .32), 0 0 26px rgba(249, 116, 37, .22);
}
/* Sok tooltip saját `> *` szabállyal emeli a gyerekeit (position/z-index),
   ezért a réteg helyét !important rögzíti. */
.hw-tip { isolation: isolate; }
.hw-tip > .hw-tip-fx {
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    margin: 0 !important;
}
.hw-tip-fx {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}
.hw-tip-fx i, .hw-tip-fx em, .hw-tip-fx b { position: absolute; display: block; font-style: normal; }
.hw-tip-fx svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Hangulati fények: töklámpás-derengés alul, lila köd fent, zöld pára. */
.hw-tip-fx__glow {
    inset: 0;
    background:
        radial-gradient(ellipse at 8% 104%, rgba(249, 116, 37, .3), transparent 38%),
        radial-gradient(ellipse at 94% 102%, rgba(249, 116, 37, .24), transparent 34%),
        radial-gradient(ellipse at 50% -10%, rgba(107, 24, 133, .42), transparent 55%),
        linear-gradient(0deg, rgba(9, 61, 50, .32), transparent 30%);
    animation: hwTipGlow 4.2s ease-in-out infinite alternate;
}

/* Pókhálók a két felső sarokban. */
.hw-tip-fx__web { top: -2px; width: 58px; height: 58px; opacity: .42; }
.hw-tip-fx__web.is-left { left: -2px; }
.hw-tip-fx__web.is-right { right: -2px; transform: scaleX(-1); }
.hw-tip-fx__web path { fill: none; stroke: #d7fff5; stroke-width: .7; stroke-linecap: round; }

/* Denevérek a felső sávban. */
.hw-tip-fx__bat {
    top: calc(12px + var(--hw-i) * 13px);
    left: -34px;
    width: calc(20px - var(--hw-i) * 3px);
    height: calc(10px - var(--hw-i) * 1.5px);
    opacity: .7;
    animation: hwTipBatFly calc(9s + var(--hw-i) * 2.6s) linear infinite;
    animation-delay: calc(var(--hw-i) * -3.4s);
}
.hw-tip-fx__bat svg { animation: hwTipBatFlap .28s ease-in-out infinite alternate; transform-origin: 50% 40%; }
.hw-tip-fx__bat path { fill: var(--hw-5); stroke: var(--hw-4); stroke-width: .7; filter: drop-shadow(0 0 3px rgba(34, 229, 187, .6)); }

/* Faragott töklámpások a két alsó sarokban. */
.hw-tip-fx__pumpkin { bottom: 4px; width: 34px; height: 31px; opacity: .72; animation: hwTipBob 3.4s ease-in-out infinite; }
.hw-tip-fx__pumpkin.is-left { left: 6px; }
.hw-tip-fx__pumpkin.is-right { right: 6px; width: 27px; height: 25px; animation-delay: -1.7s; }
.hw-tip-fx .hw-fill { fill: var(--hw-1); }
.hw-tip-fx__pumpkin .hw-fill { filter: drop-shadow(0 0 5px rgba(249, 116, 37, .7)); }
.hw-tip-fx .hw-rib { fill: none; stroke: rgba(46, 19, 56, .55); stroke-width: 1.1; }
.hw-tip-fx__pumpkin .hw-face { fill: #FFE27A; animation: hwTipFlicker 2.3s steps(1, end) infinite; filter: drop-shadow(0 0 3px #FFB347); }
.hw-tip-fx .hw-stem { fill: none; stroke: var(--hw-3); stroke-width: 2.4; stroke-linecap: round; }

/* Lebegő, áttetsző kísértetek. */
.hw-tip-fx__ghost {
    bottom: -40px;
    left: calc(24% + var(--hw-i) * 42%);
    width: 24px;
    height: 29px;
    opacity: 0;
    animation: hwTipGhostRise calc(8s + var(--hw-i) * 2s) ease-in-out infinite;
    animation-delay: calc(var(--hw-i) * -4.6s);
}
.hw-tip-fx__ghost .hw-fill { fill: color-mix(in srgb, var(--hw-4) 30%, #f4fffc); filter: drop-shadow(0 0 6px var(--hw-4)); }
.hw-tip-fx__ghost .hw-eye { fill: var(--hw-5); }
.hw-tip-fx__ghost .hw-eye:last-child { fill: none; }

/* Gyertyák a pumpkinok mellett. */
.hw-tip-fx__candle { bottom: 3px; width: 10px; height: 22px; opacity: .78; }
.hw-tip-fx__candle.is-left { left: 44px; }
.hw-tip-fx__candle.is-right { right: 38px; height: 18px; }
.hw-tip-fx .hw-wax { fill: #e9e0d0; }
.hw-tip-fx .hw-drip { fill: none; stroke: #fff6e6; stroke-width: 1.2; stroke-linecap: round; }
.hw-tip-fx .hw-wick { fill: none; stroke: #2a1a14; stroke-width: 1.2; }
.hw-tip-fx .hw-flame { fill: #FFC15A; transform-origin: 50% 100%; filter: drop-shadow(0 0 4px var(--hw-1)) drop-shadow(0 0 8px rgba(249, 116, 37, .6)); animation: hwTipFlame .9s ease-in-out infinite alternate; }
.hw-tip-fx__candle.is-right .hw-flame { fill: var(--hw-4); filter: drop-shadow(0 0 4px var(--hw-4)); animation-delay: -.45s; }

/* Halványan derengő koponya, boszorkánykalap, elátkozott szem és bájital. */
.hw-tip-fx__skull { top: 42%; right: 10px; width: 17px; height: 18px; opacity: .2; }
.hw-tip-fx__skull .hw-fill { fill: #efe6d6; }
.hw-tip-fx__skull .hw-eye { fill: var(--hw-5); }
.hw-tip-fx__skull .hw-eye { stroke: var(--hw-5); stroke-width: .8; }
.hw-tip-fx__hat { top: 36%; left: 8px; width: 24px; height: 19px; opacity: .24; transform: rotate(-12deg); }
.hw-tip-fx__hat .hw-fill { fill: var(--hw-2); stroke: var(--hw-4); stroke-width: .6; }
.hw-tip-fx__hat .hw-band { fill: var(--hw-1); }
.hw-tip-fx__eye { top: 14px; left: 50%; width: 22px; height: 13px; margin-left: -11px; opacity: .3; animation: hwTipBlink 5.5s ease-in-out infinite; transform-origin: 50% 50%; }
.hw-tip-fx__eye .hw-fill { fill: #f6efe8; }
.hw-tip-fx__eye .hw-iris { fill: var(--hw-2); }
.hw-tip-fx__eye .hw-pupil { fill: #0b0610; }
.hw-tip-fx__potion { top: 64%; left: 10px; width: 14px; height: 18px; opacity: .24; }
.hw-tip-fx__potion .hw-fill { fill: rgba(233, 250, 246, .5); stroke: var(--hw-4); stroke-width: .8; }
.hw-tip-fx__potion .hw-liquid { fill: var(--hw-4); }

/* Szellemfény-lidércek: türkiz és narancs szikrák szállnak fel. */
.hw-tip-fx__wisps { inset: 0; }
.hw-tip-fx__wisps b {
    bottom: -10px;
    left: calc(8% + var(--hw-i) * 13%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hw-4);
    box-shadow: 0 0 8px var(--hw-4), 0 0 14px rgba(34, 229, 187, .5);
    opacity: 0;
    animation: hwTipWisp calc(5.4s + var(--hw-i) * .55s) ease-in infinite;
    animation-delay: calc(var(--hw-i) * -.95s);
}
.hw-tip-fx__wisps b:nth-child(3n) { background: var(--hw-1); box-shadow: 0 0 8px var(--hw-1), 0 0 14px rgba(249, 116, 37, .5); }

@keyframes hwTipGlow { from { opacity: .72; } to { opacity: 1; } }
@keyframes hwTipBatFly {
    0% { left: -34px; transform: translateY(0); }
    25% { transform: translateY(8px); }
    50% { transform: translateY(-4px); }
    75% { transform: translateY(6px); }
    100% { left: calc(100% + 34px); transform: translateY(0); }
}
@keyframes hwTipBatFlap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@keyframes hwTipBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes hwTipFlicker { 0%, 100% { opacity: 1; } 37% { opacity: .5; } 40% { opacity: 1; } 71% { opacity: .78; } }
@keyframes hwTipFlame { from { transform: scale(.9, .94) rotate(-4deg); } to { transform: scale(1.06, 1.1) rotate(4deg); } }
@keyframes hwTipGhostRise {
    0% { opacity: 0; transform: translate(0, 0); }
    15% { opacity: .32; }
    50% { transform: translate(14px, -120px); opacity: .26; }
    85% { opacity: .2; }
    100% { opacity: 0; transform: translate(-8px, -260px); }
}
@keyframes hwTipBlink { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.08); } }
@keyframes hwTipWisp {
    0% { opacity: 0; transform: translateY(0) scale(.6); }
    20% { opacity: .9; }
    100% { opacity: 0; transform: translateY(-220px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .hw-tip-fx *, .hw-tip-fx *::before, .hw-tip-fx *::after { animation: none !important; }
    .hw-tip-fx__ghost, .hw-tip-fx__wisps { display: none; }
    .hw-tip-fx__bat { left: 20%; }
    .hw-tip-fx__bat:nth-of-type(2) { left: 55%; }
}

/* ---------- Koye: tökláng-víz helyett "kísértetvíz" ---------- */
.koye-flute-tooltip[data-koye-theme="halloween"] {
    --koye-c1: #FFB27D; --koye-c2: #F97425; --koye-c3: #6B1885; --koye-c4: #2E1338; --koye-c5: #12071A;
    outline-color: rgba(34, 229, 187, .4);
    background: radial-gradient(circle at 12% 6%, rgba(249, 116, 37, .3), transparent 35%), radial-gradient(circle at 90% 84%, rgba(107, 24, 133, .4), transparent 48%), linear-gradient(150deg, #2E1338f5, #12071Af7 55%, #093D32f2);
    box-shadow: 0 24px 70px #000e, 0 0 38px rgba(249, 116, 37, .45), inset 0 0 52px #0b0412bf;
}
.koye-flute-tooltip[data-koye-theme="halloween"] .koye-flute-tooltip__water { background: linear-gradient(180deg, rgba(34, 229, 187, .5), rgba(9, 61, 50, .75) 38%, rgba(46, 19, 56, .9)); box-shadow: 0 -8px 22px rgba(34, 229, 187, .45); }
.koye-flute-tooltip[data-koye-theme="halloween"] .koye-flute-tooltip__water > i { border-top-color: #c9fff1; filter: drop-shadow(0 0 7px #22E5BB); }
.koye-flute-tooltip[data-koye-theme="halloween"] .koye-flute-tooltip__water > b { border-color: #ffd9b8; box-shadow: inset 0 0 4px #fff, 0 0 8px #F97425; }
.koye-flute-tooltip[data-koye-theme="halloween"] header { border-bottom-color: rgba(249, 116, 37, .45); }
.koye-flute-tooltip[data-koye-theme="halloween"] .koye-flute-tooltip__icon i { border-color: #22E5BB; }
.koye-flute-tooltip[data-koye-theme="halloween"] .koye-flute-tooltip__track span.is-threshold,
.koye-flute-tooltip[data-koye-theme="halloween"] .koye-flute-tooltip__progress,
.koye-flute-tooltip[data-koye-theme="halloween"] footer span { border-color: rgba(249, 116, 37, .5); }
.koye-flute-meter[data-koye-theme="halloween"]::before { border-color: #ffb27d; box-shadow: inset 0 0 18px rgba(249, 116, 37, .45), 0 0 14px #F97425, 0 0 30px rgba(107, 24, 133, .7); }
.koye-flute-meter[data-koye-theme="halloween"] .koye-flute-aura i { background: #c9fff1; box-shadow: 0 0 8px 2px #22E5BB; }

/* ---------- Nunu: a Fagyfok-kristályok Halloween fénye ---------- */
.nunu-frost-orbit[data-nunu-theme="halloween"] .nunu-frost-crystal { --frost-rim: 249, 116, 37; --frost-core: 34, 229, 187; }
.nunu-frost-orbit[data-nunu-theme="halloween"] .nunu-frost-crystal { background: radial-gradient(circle at 50% 50%, rgba(46, 19, 56, .92) 0 42%, rgba(46, 19, 56, .6) 62%, rgba(46, 19, 56, 0) 78%); }

/* ---------- Fejlesztett Halloween: hőskártya-réteg (v3SkinMotifs "halloween-upgrade") ---------- */
.v3-skin-effect--halloween-upgrade { z-index: 2; opacity: .95; mix-blend-mode: screen; }
.v3-skin-effect--halloween-upgrade::before {
    inset: -8%; opacity: .7;
    background:
        radial-gradient(circle at 18% 18%, rgba(218, 103, 253, .34), transparent 28%),
        radial-gradient(circle at 82% 78%, rgba(76, 220, 130, .3), transparent 30%),
        conic-gradient(from 40deg at 50% 50%, rgba(127, 41, 234, .16), rgba(43, 91, 88, .12), rgba(218, 103, 253, .14), rgba(127, 41, 234, .16));
    animation: v3HalloweenUpgradePulse 4.6s ease-in-out infinite alternate;
}
.v3-skin-effect--halloween-upgrade::after {
    left: -75%; right: auto; width: 46%; opacity: .62;
    background: linear-gradient(105deg, transparent 10%, rgba(127, 41, 234, .3) 30%, rgba(253, 253, 255, .42) 48%, rgba(76, 220, 130, .34) 60%, transparent 80%);
    filter: blur(1.2px); transform: skewX(-14deg);
    animation: v3HalloweenSpiritSweep 5.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
.v3-skin-effect--halloween-upgrade .v3-skin-particle { --particle-color: #DA67FD; }
.v3-skin-effect--halloween-upgrade .v3-skin-particle:nth-child(3n+2) { --particle-color: #4CDC82; }
.v3-skin-effect--halloween-upgrade .v3-skin-particle:nth-child(3n) { --particle-color: #FDFDFF; }
.v3-skin-effect--halloween-upgrade .v3-skin-motif { filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 8px rgba(127, 41, 234, .6)); }
@keyframes v3HalloweenUpgradePulse { from { transform: scale(1) rotate(-1deg); opacity: .55; } to { transform: scale(1.06) rotate(1deg); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .v3-skin-effect--halloween-upgrade::before, .v3-skin-effect--halloween-upgrade::after { animation: none; } }

/* =======================================================
   VÁLTOZATOK
   ======================================================= */
/* Fejlesztett Halloween: #2B5B58 / #DA67FD / #7F29EA / #FDFDFF / #4CDC82,
   extra cukorkák, szemgolyók és agy. */
.hw-tip.is-hw-upgrade {
    --hw-1: #DA67FD; --hw-2: #7F29EA; --hw-3: #2B5B58; --hw-4: #4CDC82; --hw-5: #140a26;
    background:
        radial-gradient(circle at 10% 3%, rgba(218, 103, 253, .28), transparent 36%),
        radial-gradient(circle at 92% 94%, rgba(76, 220, 130, .2), transparent 42%),
        linear-gradient(152deg, #1f0f3d 0%, #120a24 52%, #12302d 100%) !important;
    color: #fdfdff;
    box-shadow: inset 0 0 0 1px rgba(253, 253, 255, .12), inset 0 0 34px rgba(127, 41, 234, .34), 0 0 26px rgba(218, 103, 253, .26);
}
.hw-tip-fx.is-upgrade .hw-tip-fx__glow {
    background:
        radial-gradient(ellipse at 8% 104%, rgba(218, 103, 253, .3), transparent 38%),
        radial-gradient(ellipse at 94% 102%, rgba(76, 220, 130, .26), transparent 34%),
        radial-gradient(ellipse at 50% -10%, rgba(127, 41, 234, .45), transparent 55%),
        linear-gradient(0deg, rgba(43, 91, 88, .34), transparent 30%);
}
.hw-tip-fx.is-upgrade .hw-tip-fx__pumpkin .hw-fill { fill: #7F29EA; filter: drop-shadow(0 0 5px rgba(218, 103, 253, .8)); }
.hw-tip-fx.is-upgrade .hw-tip-fx__pumpkin .hw-face { fill: #4CDC82; filter: drop-shadow(0 0 3px #4CDC82); }
.hw-tip-fx.is-upgrade .hw-flame { fill: #DA67FD; filter: drop-shadow(0 0 4px #DA67FD); }
.hw-tip-fx.is-upgrade .hw-tip-fx__web path { stroke: #efd9ff; }
.hw-tip-fx__candy { top: calc(22% + var(--hw-i) * 21%); right: calc(8px + var(--hw-i) * 14px); width: 22px; height: 11px; opacity: .6; animation: hwTipCandySpin calc(4s + var(--hw-i) * .8s) ease-in-out infinite; animation-delay: calc(var(--hw-i) * -1.3s); }
.hw-tip-fx__candy .hw-fill { fill: #FDFDFF; }
.hw-tip-fx__candy .hw-wrap { fill: #DA67FD; }
.hw-tip-fx__candy .hw-stripe { fill: none; stroke: #4CDC82; stroke-width: 2.2; }
.hw-tip-fx__candy:nth-of-type(2n) .hw-wrap { fill: #4CDC82; }
.hw-tip-fx__candy:nth-of-type(2n) .hw-stripe { stroke: #7F29EA; }
.hw-tip-fx__eyeball { width: 18px; height: 18px; opacity: .45; animation: hwTipEyeRoll 4.4s ease-in-out infinite; }
.hw-tip-fx__eyeball.is-a { top: 52%; left: 12px; }
.hw-tip-fx__eyeball.is-b { top: 30%; left: 46%; width: 13px; height: 13px; opacity: .28; animation-delay: -2.2s; }
.hw-tip-fx__eyeball .hw-fill { fill: #FDFDFF; }
.hw-tip-fx__eyeball .hw-vein { fill: none; stroke: #e0356b; stroke-width: 1; }
.hw-tip-fx__eyeball .hw-iris { fill: #4CDC82; }
.hw-tip-fx__eyeball .hw-pupil { fill: #0b0610; }
.hw-tip-fx__eyeball .hw-glint { fill: #fff; }
.hw-tip-fx__brain { bottom: 34px; right: 40%; width: 26px; height: 22px; opacity: .3; animation: hwTipBob 3.8s ease-in-out infinite; }
.hw-tip-fx__brain .hw-fill { fill: #DA67FD; stroke: #7F29EA; stroke-width: 1; }
.hw-tip-fx__brain .hw-fold { fill: none; stroke: #7F29EA; stroke-width: 1.2; stroke-linecap: round; }

/* VIP Halloween: arany-pezsgő tónus a Halloween motívumok megtartásával,
   csillogás, csillámlás, fényív és VIP felirat. */
.hw-tip.is-hw-vip {
    --hw-1: #F6D27A; --hw-2: #B98A3E; --hw-3: #3A2A10; --hw-4: #FFF1C9; --hw-5: #1C1206;
    background:
        radial-gradient(circle at 10% 3%, rgba(246, 210, 122, .3), transparent 36%),
        radial-gradient(circle at 92% 94%, rgba(255, 241, 201, .16), transparent 42%),
        linear-gradient(152deg, #2a1c0a 0%, #150e06 52%, #2a1f12 100%) !important;
    color: #fff8e6;
    box-shadow: inset 0 0 0 1px rgba(255, 241, 201, .16), inset 0 0 34px rgba(185, 138, 62, .3), 0 0 28px rgba(246, 210, 122, .32);
}
.hw-tip-fx.is-vip .hw-tip-fx__glow {
    background:
        radial-gradient(ellipse at 8% 104%, rgba(246, 210, 122, .32), transparent 38%),
        radial-gradient(ellipse at 94% 102%, rgba(255, 241, 201, .22), transparent 34%),
        radial-gradient(ellipse at 50% -10%, rgba(185, 138, 62, .4), transparent 55%);
}
.hw-tip-fx.is-vip .hw-tip-fx__pumpkin .hw-fill { fill: #E9B64E; filter: drop-shadow(0 0 5px rgba(246, 210, 122, .9)); }
.hw-tip-fx.is-vip .hw-tip-fx__pumpkin .hw-face { fill: #FFF8E1; }
.hw-tip-fx.is-vip .hw-flame { fill: #FFF1C9; filter: drop-shadow(0 0 4px #F6D27A); }
.hw-tip-fx.is-vip .hw-tip-fx__web path { stroke: #ffe9b0; }
.hw-tip-fx__sparkle { top: calc(10% + var(--hw-i) * 14%); width: 11px; height: 11px; opacity: 0; animation: hwTipSparkle 2.6s ease-in-out infinite; animation-delay: calc(var(--hw-i) * -.43s); }
.hw-tip-fx__sparkle:nth-of-type(odd) { left: auto; right: calc(10% + var(--hw-i) * 6%); }
.hw-tip-fx__sparkle:nth-of-type(even) { left: calc(8% + var(--hw-i) * 7%); }
.hw-tip-fx__sparkle .hw-fill { fill: #FFF1C9; filter: drop-shadow(0 0 4px #F6D27A); }
.hw-tip-fx__arc { top: -6px; left: 50%; width: 170px; height: 60px; margin-left: -85px; opacity: .5; animation: hwTipGlow 3.2s ease-in-out infinite alternate; }
.hw-tip-fx__arc .hw-arc { fill: none; stroke: #F6D27A; stroke-width: 1.4; filter: drop-shadow(0 0 4px #F6D27A); }
.hw-tip-fx__arc .hw-arc.is-thin { stroke: #FFF1C9; stroke-width: .8; }
.hw-tip-fx__vip { top: 48%; right: 12px; color: #F6D27A; font: 900 13px/1 Georgia, serif; letter-spacing: .12em; opacity: .28; text-shadow: 0 0 8px #F6D27A; transform: rotate(-8deg); }

@keyframes hwTipCandySpin { 0%, 100% { transform: rotate(-14deg) translateY(0); } 50% { transform: rotate(14deg) translateY(-4px); } }
@keyframes hwTipEyeRoll { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-35deg); } 60% { transform: rotate(25deg); } }
@keyframes hwTipSparkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 45% { opacity: .95; transform: scale(1.1) rotate(45deg); } }