/* =======================================
   FRANK (heroId 80) – TRUTYMÓ-TARTÁLY
   =======================================
   Paletta (skin szerint, a JS írja felül inline változókkal; a spec
   --color-1 ... --color-5 sorrendje):
   Alap:         #341E4C, #583730, #FFFFFF, #949396, #B7EB41 – neonzöld élő trutymó, bugyogó üvegtartály.
   Rém Akadémia: #301B70, #5B6FD3, #9A5AED, #511DD0, #461D7F – lila nyálka, pókok, denevérek.
   Jég:          #3457EA, #738FC3, #002460, #071731, #5A8CEF – jeges kék fagyott trutymó, hókristályok.
   --fk-fill: Trutymó töltet 0..5 -> 0..1.
   data-stage: empty / low (1-2) / mid (3-4) / full (5).
   --fk-slime: folyadék, --fk-deep: mély folyadék, --fk-glass: üveg,
   --fk-glow: háttérfény, --fk-accent: kiemelő szín. */

:root {
    --fk-1: #341E4C; --fk-2: #583730; --fk-3: #FFFFFF; --fk-4: #949396; --fk-5: #B7EB41;
    --fk-slime: #B7EB41; --fk-deep: #5E8F14; --fk-glass: #949396;
    --fk-glow: #B7EB41; --fk-accent: #341E4C;
    --fk-night: #0b0712;
}
.frank-slime-meter, .frank-slime-tooltip, #frank-slime-workshop, .frank-card-fx { --fk-fill: 0; }

/* ---------------------------------------
   Vektoros üvegtartály (SVG)
   --------------------------------------- */
.frank-tank-svg { display: block; overflow: visible; }
.fk-tank__back { fill: color-mix(in srgb, var(--fk-night) 80%, var(--fk-1)); }
.fk-tank__liquid {
    transform: translateY(calc((1 - var(--fk-fill)) * 74px));
    transition: transform .8s cubic-bezier(.2, 1.3, .4, 1);
}
.fk-tank__fluid { opacity: .95; }
.fk-tank__wave {
    fill: color-mix(in srgb, var(--fk-slime) 70%, #fff);
    opacity: .85;
    animation: fkWave 1.8s linear infinite;
}
.fk-tank__bubble { fill: none; stroke: color-mix(in srgb, var(--fk-slime) 45%, #fff); stroke-width: .7; opacity: 0; }
[data-charges]:not([data-charges="0"]) .fk-tank__bubble {
    animation: fkTankBubble calc(1.6s + var(--b-i) * .27s) ease-in infinite;
    animation-delay: calc(var(--b-i) * -.41s);
}
.fk-tank__divider { stroke: color-mix(in srgb, var(--fk-glass) 55%, #fff); stroke-width: .8; stroke-dasharray: 2 2; opacity: .55; }
.fk-tank__glass {
    fill: none;
    stroke: color-mix(in srgb, var(--fk-glass) 70%, #fff);
    stroke-width: 1.8;
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--fk-glow) 60%, transparent));
}
.fk-tank__shine { fill: none; stroke: #ffffffb0; stroke-width: 2; stroke-linecap: round; }
.fk-tank__frost { display: none; fill: none; stroke: #eaf3ff; stroke-width: .9; stroke-linecap: round; opacity: .85; }
[data-fk-motif="ice"] .fk-tank__frost { display: inline; stroke-width: .75; filter: drop-shadow(0 0 1.5px #9fc2ff); }
[data-fk-motif="ice"] .fk-tank__glass { stroke: #dfeaff; stroke-width: 2.2; filter: drop-shadow(0 0 2.5px rgba(159, 194, 255, .8)); }
/* Jég: hósapka a kupakokon, jégcsapok, deres üvegszélek, csillanó
   hókristályok; 5/5-nél a csápok fagyott jégkristály-csápok. */
.fk-tank__ice { display: none; }
[data-fk-motif="ice"] .fk-tank__ice { display: inline; }
.fk-tank__rime { fill: #eaf3ff; opacity: .26; }
.fk-tank__icicles { fill: #cfe2ff; stroke: #f4f9ff; stroke-width: .5; stroke-linejoin: round; opacity: .92; filter: drop-shadow(0 0 1.5px #5A8CEF); }
.fk-tank__snowcap { fill: #f4f9ff; stroke: #b9d0f5; stroke-width: .6; filter: drop-shadow(0 1px 1px rgba(0, 36, 96, .6)); }
.fk-tank__sparkle { fill: #ffffff; filter: drop-shadow(0 0 2px #9fc2ff); animation: fkIceSparkle 2.6s ease-in-out infinite; }
[data-fk-motif="ice"] .fk-tank__cap { stroke: #dfeaff; }
[data-fk-motif="ice"] .fk-tank__tentacle { stroke: color-mix(in srgb, var(--fk-slime) 45%, #fff); stroke-linecap: square; filter: drop-shadow(0 0 2px #dfeaff) drop-shadow(0 0 4px var(--fk-glow)); }
/* Rém Akadémia: pókhálós sarkok az üvegben és a talp alatt, a kupakról
   selyemszálon lengő pók, egy kis pók mászik az üvegen. */
.fk-tank__spooky { display: none; }
[data-fk-motif="spooky"] .fk-tank__spooky { display: inline; }
[data-fk-motif="spooky"] .fk-tank__glass { stroke: #c9b2ff; stroke-width: 2; filter: drop-shadow(0 0 2.5px rgba(154, 90, 237, .85)); }
[data-fk-motif="spooky"] .fk-tank__cap { stroke: #9A5AED; }
.fk-tank__web { fill: none; stroke: #e4d8ff; stroke-width: .45; stroke-linecap: round; opacity: .6; filter: drop-shadow(0 0 1px #9A5AED); }
.fk-tank__spider-body { fill: #140a2b; stroke: #9A5AED; stroke-width: .55; }
.fk-tank__spider-legs { fill: none; stroke: #1d1040; stroke-width: .75; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 .8px #b58cff); }
.fk-tank__spider-eyes { stroke: #ff7ae0; stroke-width: .75; stroke-linecap: round; filter: drop-shadow(0 0 1px #ff7ae0); }
.fk-tank__dangle { animation: fkTankSpiderDangle 3.4s ease-in-out infinite; }
.fk-tank__spider.is-crawl .fk-tank__spider-legs { animation: fkTankSpiderTwitch .9s steps(2, end) infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes fkTankSpiderDangle { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes fkTankSpiderTwitch { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.9); } }
@media (prefers-reduced-motion: reduce) { .fk-tank__dangle, .fk-tank__spider.is-crawl .fk-tank__spider-legs { animation: none; } }
@keyframes fkIceSparkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fk-tank__sparkle { animation: none; } }
/* Halloween: töklámpássá faragott tartály (izzó arc az üvegen), indák és
   tökszár a kupakon; a folyadék kísértetzöld lélektrutymó. */
.fk-tank__lantern, .fk-tank__vine, .fk-tank__pumpkin-stem { display: none; }
[data-fk-motif="halloween"] .fk-tank__lantern, [data-fk-motif="halloween"] .fk-tank__vine, [data-fk-motif="halloween"] .fk-tank__pumpkin-stem { display: inline; }
[data-fk-motif="halloween"] .fk-tank__glass { stroke: #ffa25e; stroke-width: 2.1; filter: drop-shadow(0 0 2.5px rgba(249, 116, 37, .75)); }
.fk-tank__lantern-face {
    fill: #FFB347; stroke: #8A3A10; stroke-width: .5; stroke-linejoin: round;
    opacity: calc(.45 + var(--fk-fill, 0) * .55);
    filter: drop-shadow(0 0 2px #F97425) drop-shadow(0 0 5px rgba(249, 116, 37, .6));
    animation: fkLanternFlicker 2.4s steps(1, end) infinite;
}
.fk-tank__vine-stem { fill: none; stroke: #0f5a47; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 1.5px #22E5BB); }
.fk-tank__vine-leaf { fill: #093D32; stroke: #22E5BB; stroke-width: .6; }
.fk-tank__pumpkin-stem { fill: none; stroke: #093D32; stroke-width: 3; stroke-linecap: round; }
[data-fk-motif="halloween"] .fk-tank__tentacle { stroke: color-mix(in srgb, var(--fk-slime) 60%, #fff); opacity: .9; }
@keyframes fkLanternFlicker { 0%, 100% { filter: drop-shadow(0 0 2px #F97425) drop-shadow(0 0 5px rgba(249, 116, 37, .6)); } 43% { filter: drop-shadow(0 0 1px #F97425); } 46% { filter: drop-shadow(0 0 3px #F97425) drop-shadow(0 0 8px rgba(249, 116, 37, .8)); } }
@media (prefers-reduced-motion: reduce) { .fk-tank__lantern-face { animation: none; } }
.fk-tank__cap { stroke: #0009; stroke-width: .8; }
.fk-tank__bolt { stroke: #fffc; stroke-width: 2.2; stroke-linecap: round; }
.fk-tank__pip { fill: #0009; stroke: color-mix(in srgb, var(--fk-glass) 70%, transparent); stroke-width: .6; transition: fill .3s; }
.fk-tank__pip.is-filled { fill: var(--fk-slime); stroke: #fff; filter: drop-shadow(0 0 2px var(--fk-glow)); }
/* 5/5: csápok a tartály tetejéből. */
.fk-tank__tentacle {
    fill: none; stroke: var(--fk-slime); stroke-width: 3.2; stroke-linecap: round;
    stroke-dasharray: 40; stroke-dashoffset: 40; opacity: 0;
    transform-box: fill-box; transform-origin: 50% 100%;
    filter: drop-shadow(0 0 2px var(--fk-glow));
    transition: stroke-dashoffset .8s ease-out, opacity .4s;
}
.is-full .fk-tank__tentacle, [data-charges="5"] .fk-tank__tentacle {
    stroke-dashoffset: 0; opacity: 1;
    animation: fkTentacle 1.6s ease-in-out infinite alternate;
}
.fk-tank__tentacle.is-b { animation-delay: -.5s !important; stroke-width: 2.6; }
.fk-tank__tentacle.is-c { animation-delay: -1s !important; }
.is-full .fk-tank__back, [data-charges="5"] .fk-tank__back { fill: color-mix(in srgb, var(--fk-deep) 40%, var(--fk-night)); }

/* ---------------------------------------
   Témafüggő motívumok (inline SVG)
   --------------------------------------- */
.fk-motif { position: absolute; display: block; width: 12px; height: 12px; opacity: 0; pointer-events: none; font-style: normal; }
.fk-motif svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fk-motif svg * { fill: var(--m-tint, var(--fk-slime)); }
.fk-motif svg .is-line { fill: none; stroke: var(--m-tint, var(--fk-slime)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fk-motif svg .is-thin { stroke-width: 1.2; }
.fk-motif svg .is-hi { fill: none; stroke: #ffffffc0; stroke-width: 1.6; stroke-linecap: round; }
.fk-motif svg .is-eye { fill: var(--fk-night); }
.fk-motif.is-drop { width: 10px; height: 13px; }
.fk-motif.is-drop svg path:first-child { filter: drop-shadow(0 0 3px var(--fk-glow)); }
.fk-motif.is-bubble { width: 11px; height: 11px; }
.fk-motif.is-bubble svg .is-line { stroke: color-mix(in srgb, var(--fk-slime) 55%, #fff); }
.fk-motif.is-blob { width: 15px; height: 15px; }
.fk-motif.is-blob svg path { filter: drop-shadow(0 0 3px var(--fk-glow)); }
.fk-motif.is-spider { width: 13px; height: 15px; }
.fk-motif.is-spider svg ellipse, .fk-motif.is-spider svg circle { fill: color-mix(in srgb, var(--fk-1) 70%, #000); stroke: var(--fk-3); stroke-width: .8; }
.fk-motif.is-spider svg .is-line { stroke: color-mix(in srgb, var(--fk-3) 80%, #fff); }
.fk-motif.is-bat { width: 20px; height: 11px; }
.fk-motif.is-bat svg path { fill: color-mix(in srgb, var(--fk-1) 60%, #000); stroke: var(--fk-3); stroke-width: .7; filter: drop-shadow(0 0 3px var(--fk-3)); }
.fk-motif.is-web { width: 16px; height: 16px; }
.fk-motif.is-web svg .is-line { stroke: color-mix(in srgb, var(--fk-2) 70%, #fff); }
.fk-motif.is-pumpkin { width: 14px; height: 13px; }
.fk-motif.is-pumpkin svg path:first-child { fill: #F97425; filter: drop-shadow(0 0 3px #F97425); }
.fk-motif.is-pumpkin svg .is-eye { fill: #FFE27A; }
.fk-motif.is-pumpkin svg .is-line { stroke: #22E5BB; }
.fk-motif.is-snowflake { width: 13px; height: 13px; }
.fk-motif.is-snowflake svg .is-line { stroke: #eaf3ff; filter: drop-shadow(0 0 3px var(--fk-glow)); }
.fk-motif.is-shard svg path:first-child, .fk-motif.is-crystal svg path:first-child { fill: color-mix(in srgb, var(--fk-glow) 45%, #fff); filter: drop-shadow(0 0 3px var(--fk-glow)); }
.fk-motif.is-shard svg .is-line, .fk-motif.is-crystal svg .is-line { stroke: var(--fk-1); }

/* ---------------------------------------
   Trutymó-tartály mérő a kártyán (mechanika-ikon)
   --------------------------------------- */
.frank-slime-meter {
    position: absolute; left: 36px; bottom: 4px; z-index: 19;
    width: 92px; height: 88px; padding: 0; border: 0;
    background: transparent; color: #fff; cursor: pointer; isolation: isolate;
    filter: drop-shadow(0 7px 9px #000d);
}
.frank-slime-meter[hidden] { display: none; }
.frank-slime-meter:focus-visible { outline: 2px solid var(--fk-glow); outline-offset: 2px; border-radius: 16px; }
.frank-slime-meter__halo {
    position: absolute; left: 50%; top: 46px; z-index: -2; width: 70px; height: 86px; border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, color-mix(in srgb, var(--fk-glow) 55%, transparent), color-mix(in srgb, var(--fk-deep) 35%, transparent) 46%, transparent 72%);
    opacity: calc(.2 + var(--fk-fill) * .8);
    animation: fkHaloPulse 2.4s ease-in-out infinite alternate;
}
.frank-slime-meter.is-full .frank-slime-meter__halo { width: 86px; height: 98px; animation-duration: 1.1s; }
.frank-slime-meter .frank-tank-svg.is-meter {
    position: absolute; left: 50%; top: 50%; width: 48px; height: 84px;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 calc(3px + var(--fk-fill) * 8px) color-mix(in srgb, var(--fk-glow) 75%, transparent));
}
.frank-slime-meter.is-full .frank-tank-svg.is-meter { animation: fkTankWobble 1.4s ease-in-out infinite; }
.frank-slime-meter__motifs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.frank-slime-meter__motifs .fk-motif { left: calc(12% + var(--m-i) * 30%); bottom: 12px; animation: fkMotifRise calc(3.4s + var(--m-i) * .6s) linear infinite; animation-delay: calc(var(--m-i) * -1.2s); }
.frank-slime-meter[data-charges="0"] .frank-slime-meter__motifs { display: none; }
.frank-slime-meter__count {
    position: absolute; right: 2px; bottom: 4px; z-index: 4; display: inline-flex; align-items: baseline; gap: 2px;
    padding: 2px 6px;
    border: 1px solid var(--fk-glow); border-radius: 9px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--fk-deep) 60%, #000), #070410f0);
    box-shadow: 0 0 8px color-mix(in srgb, var(--fk-glow) 50%, transparent);
    font: 900 13px/1 Montserrat, sans-serif; white-space: nowrap;
}
.frank-slime-meter__count small { color: color-mix(in srgb, var(--fk-slime) 45%, #fff); font: 800 7.5px/1 Montserrat, sans-serif; }
.frank-slime-meter.is-full .frank-slime-meter__count { border-color: #fff; box-shadow: 0 0 10px var(--fk-glow), 0 0 18px color-mix(in srgb, var(--fk-glow) 60%, transparent); }
.frank-slime-meter.is-saturated .frank-slime-meter__count { border-color: var(--fk-slime); }
.frank-slime-meter.is-gain .frank-tank-svg.is-meter { animation: fkPop .55s cubic-bezier(.2, 1.6, .4, 1); }
.frank-slime-meter.is-overflow .frank-slime-meter__halo { animation: fkGainFlash 1s ease-out; }
.frank-slime-meter.is-overflow .frank-tank-svg.is-meter { animation: fkPop .7s cubic-bezier(.2, 1.6, .4, 1); }
.frank-slime-meter.is-feast .frank-tank-svg.is-meter { animation: fkGulp 1s ease-in-out; }
.frank-slime-meter.is-feast .frank-slime-meter__halo { animation: fkGainFlash 1.1s ease-out; }
.v3-card.frank-slime-full {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--fk-glow) 60%, transparent), 0 0 18px color-mix(in srgb, var(--fk-glow) 45%, transparent);
}

/* ---------------------------------------
   Trutymó a kártya körül (háttérfény, csöpögés, buborék, csáp)
   --------------------------------------- */
.frank-card-fx { position: absolute; z-index: 31; pointer-events: none; transform: translate(-50%, -50%); overflow: visible; }
/* ---------------------------------------
   Prémium tooltip (full-bleed, saját körvonal)
   --------------------------------------- */
body.v3-body > .item-tooltip-floating:has(.frank-slime-tooltip),
body.v3-body > .v3-floating-tooltip:has(.frank-slime-tooltip) {
    width: min(430px, calc(100vw - 20px)) !important; max-width: 430px !important; max-height: none !important;
    padding: 0 !important; border: 0 !important; border-radius: 20px;
    background: transparent !important; box-shadow: none !important; overflow: visible !important;
}
.item-tooltip-floating .item-tooltip-desc:has(.frank-slime-tooltip) { margin: 0 !important; color: inherit; font-size: inherit; line-height: inherit; }
.frank-slime-tooltip {
    position: relative; isolation: isolate; box-sizing: border-box; display: block; width: 100%;
    padding: 16px; overflow: hidden;
    border: 2px solid var(--fk-glow); border-radius: 20px;
    outline: 1px solid color-mix(in srgb, var(--fk-glass) 60%, transparent); outline-offset: -6px;
    background:
        radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--fk-glow) 22%, transparent), transparent 34%),
        radial-gradient(ellipse 70% 40% at 50% 108%, color-mix(in srgb, var(--fk-slime) 30%, transparent), transparent 70%),
        linear-gradient(155deg, color-mix(in srgb, var(--fk-1) 75%, #000), color-mix(in srgb, var(--fk-night) 94%, #000) 55%, color-mix(in srgb, var(--fk-deep) 35%, #000));
    box-shadow: 0 24px 70px #000e, 0 0 26px color-mix(in srgb, var(--fk-glow) 38%, transparent), inset 0 0 48px #0008;
    color: #fff; font-family: Outfit, sans-serif; text-align: left;
}
.frank-slime-tooltip.is-full {
    border-color: #fff;
    box-shadow: 0 24px 70px #000e, 0 0 34px color-mix(in srgb, var(--fk-glow) 65%, transparent), 0 0 0 3px color-mix(in srgb, var(--fk-slime) 45%, transparent), inset 0 0 48px #0008;
}
/* Alap: trutymó-foltok és buborékok. */
.frank-slime-tooltip::before, #frank-slime-workshop::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .28;
    background:
        radial-gradient(circle at 86% 16%, transparent 0 7px, color-mix(in srgb, var(--fk-slime) 70%, transparent) 8px 9px, transparent 10px),
        radial-gradient(circle at 76% 28%, transparent 0 4px, color-mix(in srgb, var(--fk-slime) 60%, transparent) 5px 6px, transparent 7px),
        radial-gradient(ellipse 30% 14% at 12% 100%, color-mix(in srgb, var(--fk-slime) 55%, transparent), transparent 70%),
        radial-gradient(ellipse 18% 10% at 40% 100%, color-mix(in srgb, var(--fk-deep) 60%, transparent), transparent 70%),
        radial-gradient(2px 2px at 20% 30%, var(--fk-slime), transparent 60%),
        radial-gradient(1.5px 1.5px at 60% 60%, #fff, transparent 60%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 130px 110px, 130px 110px;
}
/* Rém Akadémia: pókháló a sarokban, lila köd. */
.frank-slime-tooltip[data-fk-theme="remakademia"]::before, #frank-slime-workshop[data-fk-theme="remakademia"]::before {
    opacity: .3;
    background:
        repeating-radial-gradient(circle at 100% 0, transparent 0 13px, color-mix(in srgb, var(--fk-2) 80%, transparent) 13px 14px),
        repeating-conic-gradient(from 180deg at 100% 0, color-mix(in srgb, var(--fk-2) 80%, transparent) 0 1deg, transparent 1deg 15deg),
        radial-gradient(ellipse 60% 30% at 20% 100%, color-mix(in srgb, var(--fk-3) 40%, transparent), transparent 70%);
    background-size: 150px 150px, 150px 150px, 100% 100%;
    background-position: 100% 0, 100% 0, 0 0;
    background-repeat: no-repeat;
}
/* Jég: dér-csíkok és kristályfény. */
.frank-slime-tooltip[data-fk-theme="jeg"]::before, #frank-slime-workshop[data-fk-theme="jeg"]::before {
    opacity: .3;
    background:
        repeating-linear-gradient(125deg, transparent 0 18px, #eaf3ff22 18px 19px),
        repeating-linear-gradient(55deg, transparent 0 26px, #eaf3ff18 26px 27px),
        radial-gradient(2px 2px at 14% 22%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 66% 48%, #fff, transparent 60%),
        radial-gradient(ellipse 50% 22% at 90% 0, #eaf3ff44, transparent 70%);
    background-size: 100% 100%, 100% 100%, 110px 90px, 110px 90px, 100% 100%;
}
.frank-slime-tooltip > * { position: relative; z-index: 2; }
.frank-slime-tooltip > .frank-slime-tooltip__vfx { position: absolute; z-index: 0; inset: 0; pointer-events: none; overflow: hidden; }
.frank-slime-tooltip__vfx .fk-motif { top: 104%; left: calc(4% + var(--m-i) * 12%); animation: fkMotifRiseFar 8s linear infinite; animation-delay: calc(var(--m-i) * -.95s); }
.frank-slime-tooltip[data-fk-motif="ice"] .frank-slime-tooltip__vfx .fk-motif { top: -16px; animation-name: fkSnowFallFar; }
.frank-slime-tooltip header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 11px; padding-bottom: 11px;
    border-bottom: 1px solid color-mix(in srgb, var(--fk-glow) 28%, transparent);
}
.frank-slime-tooltip__crest, .frank-slime-workshop__crest { position: relative; flex: 0 0 52px; width: 52px; height: 74px; }
.frank-slime-tooltip__crest i, .frank-slime-workshop__crest i {
    position: absolute; inset: 4px -4px; border-radius: 50%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--fk-glow) 45%, transparent), transparent 70%);
    animation: fkHaloSimple 2.2s ease-in-out infinite alternate;
}
.frank-tank-svg.is-crest {
    position: absolute; left: 50%; top: 50%; width: 40px; height: 70px; transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--fk-glow) 70%, transparent));
}
.frank-slime-tooltip header > div { display: grid; flex: 1; gap: 2px; min-width: 0; }
.frank-slime-tooltip header small { color: var(--fk-glow); font: 800 9px/1 Montserrat, sans-serif; letter-spacing: .16em; }
.frank-slime-tooltip header strong { font: 900 21px/1.1 Montserrat, sans-serif; text-shadow: 0 0 15px var(--fk-glow); }
.frank-slime-tooltip header em { color: color-mix(in srgb, var(--fk-slime) 45%, #fff); font: 800 10.5px/1.2 Outfit, sans-serif; font-style: normal; letter-spacing: .06em; }
.frank-slime-tooltip.is-full header em { color: var(--fk-slime); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 8px var(--fk-glow); }
.frank-slime-tooltip header > b { display: grid; justify-items: center; gap: 2px; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--fk-glow) 45%, transparent); border-radius: 11px; background: #0006; }
.frank-slime-tooltip header > b span { color: #fff; font: 900 22px/1 Montserrat, sans-serif; text-shadow: 0 0 10px var(--fk-glow); }
.frank-slime-tooltip header > b small { color: #fff; font: 800 7.5px/1 Montserrat, sans-serif; letter-spacing: .1em; }
.frank-slime-tooltip.is-full header > b { border-color: #fff; box-shadow: 0 0 10px color-mix(in srgb, var(--fk-glow) 60%, transparent); }
/* 5 szegmenses töltet-sáv. */
.frank-slime-tooltip__segments, .frank-slime-workshop__segments { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-bottom: 9px; }
.frank-slime-tooltip__segments i, .frank-slime-workshop__segments i {
    position: relative; display: grid; height: 16px; place-items: center; overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--fk-glass) 60%, transparent); border-radius: 8px;
    background: #0008; font-style: normal;
}
.frank-slime-tooltip__segments small, .frank-slime-workshop__segments small { position: relative; z-index: 1; color: #fff9; font: 900 8px/1 Montserrat, sans-serif; }
.frank-slime-tooltip__segments i.is-filled, .frank-slime-workshop__segments i.is-filled {
    border-color: color-mix(in srgb, var(--fk-slime) 80%, #fff);
    background: radial-gradient(circle at 30% 30%, #ffffff66 0 2px, transparent 3px), radial-gradient(circle at 72% 64%, #ffffff44 0 1.5px, transparent 2.5px), linear-gradient(180deg, var(--fk-slime), var(--fk-deep));
    box-shadow: 0 0 7px color-mix(in srgb, var(--fk-glow) 60%, transparent);
}
.frank-slime-tooltip__segments i.is-filled small, .frank-slime-workshop__segments i.is-filled small { color: var(--fk-night); }
.frank-slime-tooltip__segments i.is-top, .frank-slime-workshop__segments i.is-top { animation: fkSegGlow 1.4s ease-in-out infinite alternate; }
.frank-slime-tooltip__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 8px; }
.frank-slime-tooltip__facts span { display: grid; justify-items: center; gap: 3px; padding: 6px 4px; border: 1px solid color-mix(in srgb, var(--fk-glow) 22%, transparent); border-radius: 9px; background: #0006; text-align: center; }
.frank-slime-tooltip__facts small { color: color-mix(in srgb, var(--fk-slime) 40%, #fff); font: 700 8px/1.1 Montserrat, sans-serif; letter-spacing: .05em; }
.frank-slime-tooltip__facts b { color: #fff; font: 900 13px/1 Montserrat, sans-serif; text-shadow: 0 0 7px var(--fk-glow); }
.frank-slime-tooltip__badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.frank-slime-tooltip__badges span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 2px; border: 1px solid var(--fk-glow); border-radius: 10px; background: color-mix(in srgb, var(--fk-deep) 30%, #0008); font: 800 9px/1.2 Montserrat, sans-serif; }
.frank-slime-tooltip__badges img { width: 18px; height: 18px; border-radius: 6px; object-fit: cover; }
.frank-slime-tooltip__badges .is-feast { border-color: #fff; box-shadow: 0 0 8px color-mix(in srgb, var(--fk-glow) 55%, transparent); }
.frank-slime-tooltip__badges .is-wait { border-color: var(--fk-glass); opacity: .85; }
.frank-slime-tooltip__line { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 7px 9px; border-left: 2px solid color-mix(in srgb, var(--fk-glow) 45%, transparent); border-radius: 0 8px 8px 0; background: #0005; color: color-mix(in srgb, var(--fk-slime) 25%, #fff); font: 500 10.5px/1.4 Outfit, sans-serif; }
.frank-slime-tooltip__line > img { flex: 0 0 26px; width: 26px; height: 26px; object-fit: contain; opacity: .7; }
.frank-slime-tooltip__line.is-active, .frank-slime-tooltip__line.is-full { border-left-color: var(--fk-glow); background: color-mix(in srgb, var(--fk-deep) 28%, #0006); color: #fff; }
.frank-slime-tooltip__line.is-active > img, .frank-slime-tooltip__line.is-full > img { opacity: 1; filter: drop-shadow(0 0 5px var(--fk-glow)); }
.frank-slime-tooltip__hint { display: block; margin-top: 9px; color: var(--fk-glow); font: 700 8px/1.3 Montserrat, sans-serif; text-align: center; letter-spacing: .06em; }

/* ---------------------------------------
   Trutymó-konyha popup (dialog)
   --------------------------------------- */
#frank-slime-workshop {
    position: fixed; width: min(1140px, 95vw); max-width: 95vw; max-height: 92vh; padding: 0; overflow: hidden;
    border: 2px solid var(--fk-glow); border-radius: 22px;
    outline: 1px solid color-mix(in srgb, var(--fk-glass) 55%, transparent); outline-offset: -7px;
    background:
        radial-gradient(circle at 8% 0, color-mix(in srgb, var(--fk-glow) 18%, transparent), transparent 34%),
        radial-gradient(ellipse 60% 30% at 50% 104%, color-mix(in srgb, var(--fk-slime) 26%, transparent), transparent 70%),
        linear-gradient(145deg, color-mix(in srgb, var(--fk-1) 70%, #000), color-mix(in srgb, var(--fk-night) 95%, #000) 60%, color-mix(in srgb, var(--fk-deep) 30%, #000));
    box-shadow: 0 30px 100px #000f, 0 0 45px color-mix(in srgb, var(--fk-glow) 34%, transparent);
    color: #fff;
}
#frank-slime-workshop.is-full { border-color: #fff; box-shadow: 0 30px 100px #000f, 0 0 60px color-mix(in srgb, var(--fk-glow) 55%, transparent); }
#frank-slime-workshop::backdrop { background: rgba(4, 3, 8, .86); backdrop-filter: blur(8px); }
.frank-slime-workshop__vfx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.frank-slime-workshop__vfx .fk-motif {
    bottom: -24px; left: calc(2% + var(--m-i) * 7%); width: 16px; height: 16px;
    animation: fkWorkshopRise 14s linear infinite; animation-delay: calc(var(--m-i) * -1s);
}
#frank-slime-workshop[data-fk-motif="ice"] .frank-slime-workshop__vfx .fk-motif { top: -24px; bottom: auto; animation-name: fkWorkshopFall; }
.frank-slime-workshop__bubble {
    position: absolute; bottom: -20px; left: calc(4% + var(--b-i) * 9.5%); width: calc(var(--b-s) * 1.6); height: calc(var(--b-s) * 1.6);
    border: 1px solid color-mix(in srgb, var(--fk-slime) 60%, #fff); border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff66, transparent 60%);
    opacity: 0; animation: fkWorkshopRise calc(10s + var(--b-i) * .7s) linear infinite; animation-delay: calc(var(--b-i) * -1.4s);
}
#frank-slime-workshop > header, .frank-slime-workshop__content { position: relative; z-index: 1; }
#frank-slime-workshop > header { display: flex; align-items: center; gap: 14px; padding: 14px 25px 12px; border-bottom: 1px solid color-mix(in srgb, var(--fk-glow) 28%, transparent); }
.frank-slime-workshop__title { flex: 1; }
.frank-slime-workshop__title small { color: var(--fk-glow); font: 800 9px/1 Montserrat, sans-serif; letter-spacing: .2em; }
.frank-slime-workshop__title h2 { margin: 5px 0 0; font: 900 25px/1 Montserrat, sans-serif; text-shadow: 0 0 16px var(--fk-glow); }
#frank-slime-workshop > header button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--fk-glow); border-radius: 50%; background: #0007; color: #fff; font-size: 22px; cursor: pointer; }
.frank-slime-workshop__content { display: grid; grid-template-columns: minmax(380px, .9fr) minmax(460px, 1.1fr); gap: 15px; max-height: calc(92vh - 100px); padding: 18px 22px 24px; overflow: auto; }
.frank-slime-workshop__overview h3 { margin: 14px 0 0; color: var(--fk-glow); font: 900 11px/1 Montserrat, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.frank-slime-workshop__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.frank-slime-workshop__stats span { display: grid; justify-items: center; gap: 3px; padding: 8px 5px; border: 1px solid color-mix(in srgb, var(--fk-glow) 22%, transparent); border-radius: 10px; background: #0006; text-align: center; }
.frank-slime-workshop__stats b { color: #fff; font: 900 16px/1 Montserrat, sans-serif; text-shadow: 0 0 8px var(--fk-glow); }
.frank-slime-workshop__stats small { color: color-mix(in srgb, var(--fk-slime) 35%, #fff); font: 600 8.5px/1.2 Outfit, sans-serif; }
.frank-slime-workshop__state { margin-top: 9px; }
.frank-slime-workshop__state ul, .frank-slime-workshop__rules { display: grid; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.frank-slime-workshop__state li, .frank-slime-workshop__rules li, .frank-slime-workshop__basic li { padding: 6px 9px; border-left: 2px solid var(--fk-glow); border-radius: 0 8px 8px 0; background: #0005; color: color-mix(in srgb, var(--fk-slime) 25%, #fff); font: 500 10px/1.35 Outfit, sans-serif; }
.frank-slime-workshop__state b, .frank-slime-workshop__rules b, .frank-slime-workshop__basic li b { color: #fff; }
.frank-slime-workshop__ladder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.frank-slime-workshop__ladder article { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 9px; padding: 8px; border: 1px solid color-mix(in srgb, var(--fk-glass) 30%, transparent); border-radius: 10px; background: #0005; opacity: .62; }
.frank-slime-workshop__ladder article.is-reached { opacity: .9; }
.frank-slime-workshop__ladder article.is-current { opacity: 1; border-color: var(--fk-glow); background: color-mix(in srgb, var(--fk-glow) 12%, #0006); box-shadow: 0 0 12px color-mix(in srgb, var(--fk-glow) 32%, transparent); }
.frank-slime-workshop__ladder article.is-full.is-current { border-color: #fff; box-shadow: 0 0 16px color-mix(in srgb, var(--fk-glow) 55%, transparent); }
.frank-slime-workshop__vial {
    position: relative; display: block; width: 18px; height: 40px; margin: 0 auto; overflow: hidden;
    border: 1.5px solid color-mix(in srgb, var(--fk-glass) 70%, #fff); border-radius: 9px; background: #0009;
}
.frank-slime-workshop__vial i {
    position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--st-fill) * 100%);
    background: linear-gradient(180deg, var(--fk-slime), var(--fk-deep)); box-shadow: 0 0 6px var(--fk-glow);
}
.frank-slime-workshop__ladder small { color: var(--fk-glow); font: 800 8px/1 Montserrat, sans-serif; letter-spacing: .12em; }
.frank-slime-workshop__ladder strong { display: block; margin-top: 2px; font: 900 12px/1.1 Montserrat, sans-serif; }
.frank-slime-workshop__ladder p { margin: 3px 0 0; color: color-mix(in srgb, var(--fk-slime) 30%, #fff); font: 500 9px/1.3 Outfit, sans-serif; }
.frank-slime-workshop__summary { margin: 10px 0 0; color: color-mix(in srgb, var(--fk-slime) 25%, #fff); font: 500 10.5px/1.45 Outfit, sans-serif; }
.frank-slime-workshop__gallery { display: grid; gap: 6px; margin-top: 9px; }
.frank-slime-workshop__gallery article { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--fk-glow) 16%, transparent); border-radius: 11px; background: #0005; opacity: .8; }
.frank-slime-workshop__gallery article.is-current { opacity: 1; border-color: var(--fk-glow); box-shadow: inset 0 0 16px color-mix(in srgb, var(--fk-deep) 35%, transparent), 0 0 12px color-mix(in srgb, var(--fk-glow) 32%, transparent); }
.frank-slime-workshop__gallery img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 6px var(--fk-glow)); }
.frank-slime-workshop__gallery small { color: var(--fk-glow); font: 800 8px/1 Montserrat, sans-serif; letter-spacing: .12em; }
.frank-slime-workshop__gallery strong { display: block; margin-top: 2px; font: 900 14px/1.1 Montserrat, sans-serif; }
.frank-slime-workshop__gallery p { margin: 3px 0 0; color: color-mix(in srgb, var(--fk-slime) 30%, #fff); font: 500 9.5px/1.3 Outfit, sans-serif; }
.frank-slime-workshop__overview .frank-slime-tooltip { box-shadow: 0 0 18px color-mix(in srgb, var(--fk-glow) 30%, transparent), inset 0 0 40px #0008; }
.frank-slime-workshop__overview .frank-slime-tooltip__hint { display: none; }
.frank-slime-workshop__abilities { display: grid; align-content: start; gap: 9px; }
.frank-slime-workshop__abilities article { display: grid; grid-template-columns: 68px 1fr; align-items: start; gap: 11px; padding: 11px; border: 1px solid color-mix(in srgb, var(--fk-glow) 22%, transparent); border-radius: 13px; background: #ffffff07; }
.frank-slime-workshop__abilities article > img { width: 66px; height: 66px; object-fit: cover; border: 1px solid var(--fk-glow); border-radius: 11px; box-shadow: 0 0 13px color-mix(in srgb, var(--fk-glow) 40%, transparent); }
.frank-slime-workshop__basic small { color: var(--fk-glow); font: 800 8px/1 Montserrat, sans-serif; letter-spacing: .14em; }
.frank-slime-workshop__basic strong { display: block; margin-top: 3px; font: 900 15px/1.1 Montserrat, sans-serif; }
.frank-slime-workshop__basic p { margin: 4px 0 6px; color: color-mix(in srgb, var(--fk-slime) 25%, #fff); font: 500 10.5px/1.4 Outfit, sans-serif; }
.frank-slime-workshop__basic ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.frank-slime-workshop__abilities .ability-progression { margin-top: 7px; }
@media (max-width: 900px) {
    .frank-slime-workshop__content { grid-template-columns: minmax(0, 1fr); }
    .frank-slime-workshop__ladder { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------
   Harci napló: Trutymó chip
   --------------------------------------- */
.v3-log-stat-frank {
    border-color: #B7EB4199 !important;
    background: linear-gradient(135deg, #341E4C88, #B7EB4133) !important;
    color: #F2FFD6 !important;
    box-shadow: 0 0 8px #B7EB4155;
}

/* ---------------------------------------
   Kulcsszó-ikonok (csak Frank szövegeiben)
   --------------------------------------- */
.ability-inline-icon.is-frank-keyword {
    width: 1.4em; height: 1.4em; margin: -.3em .14em -.28em 0;
    object-fit: contain;
    filter: drop-shadow(0 0 3px #B7EB41aa);
}
.ability-inline-icon.is-frank-keyword[data-frank-theme="remakademia"] { filter: drop-shadow(0 0 3px #9A5AEDcc); }
.ability-inline-icon.is-frank-keyword[data-frank-theme="jeg"] { filter: drop-shadow(0 0 3px #5A8CEFcc); }
.ability-inline-icon.is-frank-keyword[data-frank-keyword="kitores"] { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #B7EB41cc); }
.frank-slime-tooltip .ability-inline-icon.is-frank-keyword { width: 1.45em; height: 1.45em; }
/* Részletező leírás-lista (ability tooltip, Trutymó-konyha): a "N / N+ /
   N–M Trutymó töltet" sorok az aktuális töltet szerint elértek, a legmagasabb
   elért sor kiemelt. */
.ability-progression.is-frank-details .ability-progression-step {
    grid-template-columns: 124px minmax(0, 1fr);
}
.ability-progression.is-frank-details .ability-progression-step.is-wide-label {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
}
.ability-progression.is-frank-details .ability-progression-step.is-wide-label .ability-progression-label {
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(183, 235, 65, .3);
}
.ability-progression.is-frank-details .ability-progression-step.is-reached .ability-progression-label { color: #eeffcf; }
.ability-progression.is-frank-details .ability-progression-step.is-current {
    background: linear-gradient(100deg, rgba(52, 30, 76, .6), rgba(0, 0, 0, .42) 62%, rgba(183, 235, 65, .18));
    border-color: rgba(183, 235, 65, .75);
    box-shadow: inset 0 0 14px rgba(52, 30, 76, .55), 0 0 10px rgba(183, 235, 65, .35);
}
.ability-progression.is-frank-details .ability-progression-step.is-current .ability-progression-label {
    color: #f7ffe6;
    text-shadow: 0 0 8px rgba(183, 235, 65, .85);
}
.ability-progression.is-frank-details .ability-progression-step.is-frank-tier-5.is-current {
    background: linear-gradient(100deg, rgba(183, 235, 65, .32), rgba(52, 30, 76, .5) 55%, rgba(255, 255, 255, .12));
    border-color: rgba(255, 255, 255, .8);
    box-shadow: inset 0 0 14px rgba(183, 235, 65, .45), 0 0 12px rgba(183, 235, 65, .45);
}
body.v3-body > .ability-tooltip-floating .ability-progression.is-frank-details .ability-progression-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 8px 10px 9px;
    border-radius: 10px;
}

@keyframes fkWave { from { transform: translateX(0); } to { transform: translateX(-20px); } }
@keyframes fkTankBubble { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(calc(var(--fk-fill) * -68px)); } }
@keyframes fkTentacle { from { transform: rotate(-9deg) scaleY(.94); } to { transform: rotate(9deg) scaleY(1.05); } }
@keyframes fkHaloPulse { from { transform: translate(-50%, -50%) scale(.9); } to { transform: translate(-50%, -50%) scale(1.08); } }
@keyframes fkHaloSimple { from { opacity: .5; transform: scale(.88); } to { opacity: 1; transform: scale(1.08); } }
@keyframes fkTankWobble { 0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); } 50% { transform: translate(-50%, -50%) rotate(2deg) scale(1.03); } }
@keyframes fkPop { 0% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.22); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes fkGulp { 0% { transform: translate(-50%, -50%) scale(1); } 25% { transform: translate(-50%, -50%) scale(1.15, .85); } 50% { transform: translate(-50%, -50%) scale(.9, 1.12); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes fkGainFlash { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); filter: brightness(1.8); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes fkAuraBreath { from { filter: brightness(.85); } to { filter: brightness(1.25); } }
@keyframes fkIcicle { 0%, 100% { transform: scaleY(.9); } 50% { transform: scaleY(1.05); } }
@keyframes fkBubbleRise { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: .9; } 50% { transform: translate(5px, -110px) scale(1); } 100% { opacity: 0; transform: translate(-4px, -230px) scale(1.15); } }
@keyframes fkMotifRise { 0% { opacity: 0; transform: translateY(0) rotate(0); } 15% { opacity: .85; } 100% { opacity: 0; transform: translateY(-80px) rotate(30deg); } }
@keyframes fkMotifRiseFar { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 12% { opacity: .7; } 50% { transform: translate(12px, -200px) rotate(30deg); } 100% { opacity: 0; transform: translate(-10px, -420px) rotate(-20deg); } }
@keyframes fkSnowFallFar { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 12% { opacity: .8; } 100% { opacity: 0; transform: translate(-16px, 440px) rotate(200deg); } }
@keyframes fkSpiderDangle { from { opacity: .9; transform: translateY(0); } to { opacity: .9; transform: translateY(34px); } }
@keyframes fkBatFlit { 0% { opacity: 0; transform: translate(-10px, 0) scaleX(1); } 15% { opacity: .9; } 50% { transform: translate(60px, -14px) scaleX(-1); } 85% { opacity: .9; } 100% { opacity: 0; transform: translate(-10px, 0) scaleX(1); } }
@keyframes fkWorkshopRise { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: .6; } 100% { opacity: 0; transform: translate(30px, -95vh) rotate(140deg); } }
@keyframes fkWorkshopFall { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: .7; } 100% { opacity: 0; transform: translate(-30px, 95vh) rotate(220deg); } }
@keyframes fkSegGlow { from { box-shadow: 0 0 5px color-mix(in srgb, var(--fk-glow) 50%, transparent); } to { box-shadow: 0 0 12px var(--fk-glow); } }

@media (prefers-reduced-motion: reduce) {
    .frank-card-fx *, .frank-slime-meter *, .frank-slime-tooltip *, #frank-slime-workshop * { animation-duration: 0s !important; animation-iteration-count: 1 !important; }
}