/* April V3: translucent soap film, themed cores and pressure-wave pops. */
.v3-april-vfx-layer {
    --soap-light: #edffff;
    --soap-main: #64e9ef;
    --soap-accent: #edb5ff;
    --soap-deep: #279cab;
    --soap-motif: #ffefac;
}
.v3-april-vfx-layer[data-april-theme="jeg"] {
    --soap-light: #f1fbff;
    --soap-main: #5dbfff;
    --soap-accent: #6989ee;
    --soap-deep: #123d8a;
    --soap-motif: #ceefff;
}
.v3-april-vfx-layer[data-april-theme="mesekonyv"] {
    --soap-light: #fff0fc;
    --soap-main: #fe73cb;
    --soap-accent: #72baff;
    --soap-deep: #671d83;
    --soap-motif: #ffe59b;
}
.v3-april-vfx-layer .v3-april-bubble-flight img {
    inset: 13%; width: 74%; height: 74%; opacity: .58;
    filter: drop-shadow(0 0 5px var(--soap-main));
}
.v3-april-vfx-layer .v3-april-bubble-halo {
    background: radial-gradient(circle, color-mix(in srgb, var(--soap-main) 32%, transparent), transparent 70%);
    filter: none;
}
.april-soap-shell, .april-soap-glint, .april-flight-motif, .april-satellite {
    position: absolute; pointer-events: none; z-index: 3;
}
.april-soap-shell {
    inset: 0; border-radius: 50%; border: 1.5px solid var(--soap-light);
    background: radial-gradient(circle at 30% 22%, #ffffffb8 0, #ffffff28 12%, transparent 36%),
        radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--soap-accent) 48%, transparent), transparent 57%);
    box-shadow: inset 3px 0 7px var(--soap-main), inset -3px -2px 8px var(--soap-accent),
        0 0 12px color-mix(in srgb, var(--soap-main) 45%, transparent);
    animation: aprilSoapFlex 850ms ease-in-out infinite alternate;
}
.april-soap-glint {
    top: 15%; left: 17%; width: 33%; height: 19%; border-top: 3px solid #fff;
    border-radius: 50%; transform: rotate(-38deg);
}
.april-flight-motif {
    width: 16%; height: 16%; right: 12%; bottom: 18%; background: var(--soap-motif);
    clip-path: polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%);
}
.april-satellite {
    left: -30%; top: 64%; width: 21%; height: 21%; border: 1px solid var(--soap-light);
    border-radius: 50%; box-shadow: inset 2px -2px 5px var(--soap-accent);
    animation: aprilSoapFlex 600ms ease-in-out infinite alternate;
}
.april-satellite.is-second { left: 72%; top: -18%; width: 13%; height: 13%; animation-delay: -300ms; }
.v3-april-vfx-layer[data-april-theme="jeg"] .april-soap-shell {
    background: repeating-conic-gradient(from 15deg, transparent 0deg 56deg, #c9f0ff55 58deg 60deg),
        radial-gradient(circle, #10387908 45%, #5dbfff66 95%);
}
.v3-april-vfx-layer[data-april-theme="mesekonyv"] .april-soap-shell {
    border-width: 2px;
    box-shadow: inset 3px -3px 0 #671d8370, inset -4px 3px 9px #fe73cb99, 0 0 14px #72baff80;
}
.v3-april-vfx-layer .v3-april-ward-sphere {
    border: 2px solid var(--soap-light);
    background: radial-gradient(ellipse at 30% 20%, #ffffff50, transparent 28%),
        radial-gradient(circle, transparent 48%, color-mix(in srgb, var(--soap-main) 22%, transparent) 75%, color-mix(in srgb, var(--soap-accent) 60%, transparent) 99%);
    box-shadow: inset 10px 0 28px color-mix(in srgb, var(--soap-main) 55%, transparent),
        inset -10px -5px 32px color-mix(in srgb, var(--soap-accent) 55%, transparent), 0 0 35px color-mix(in srgb, var(--soap-main) 45%, transparent);
    animation-delay: 850ms;
}
.v3-april-vfx-layer .v3-april-ward-rim { border-color: var(--soap-main); box-shadow: inset 0 0 18px var(--soap-accent); }
.april-ward-orbit {
    position: absolute; inset: -8%; border: 2px solid var(--soap-accent); border-radius: 50%;
    transform: rotate(-30deg) scaleY(.38); box-shadow: 0 0 9px var(--soap-main);
    animation: aprilOrbitIncline 1800ms ease-in-out infinite alternate;
}
.april-ward-orbit.is-cross { transform: rotate(55deg) scaleY(.4); animation-direction: alternate-reverse; }
.april-ward-orbit::before { content: ""; position: absolute; top: 50%; left: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--soap-light); box-shadow: 0 0 16px var(--soap-main); }
.april-ward-sigil { position: absolute; width: 36px; height: 36px; top: 5%; left: calc(50% - 18px); background: var(--soap-motif); clip-path: polygon(50% 0,61% 35%,98% 38%,69% 61%,80% 98%,50% 75%,20% 98%,31% 61%,2% 38%,39% 35%); }
.v3-april-vfx-layer[data-april-theme="jeg"] .april-ward-sigil,
.v3-april-vfx-layer[data-april-theme="jeg"] .is-motif,
.v3-april-vfx-layer[data-april-theme="jeg"] .april-flight-motif {
    clip-path: polygon(45% 0,55% 0,55% 35%,85% 17%,92% 27%,62% 45%,100% 45%,100% 55%,62% 55%,92% 73%,85% 83%,55% 65%,55% 100%,45% 100%,45% 65%,15% 83%,8% 73%,38% 55%,0 55%,0 45%,38% 45%,8% 27%,15% 17%,45% 35%);
}
.april-bloom-pearl, .april-pressure-ring, .v3-april-bloom { position: absolute; pointer-events: none; }
.v3-april-bloom { width: 0; height: 0; }
.april-pressure-ring {
    width: var(--bloom-size); height: var(--bloom-size); border: 2px solid var(--soap-main); border-radius: 50%;
    box-shadow: inset 0 0 12px color-mix(in srgb, var(--soap-accent) 40%, transparent), 0 0 12px color-mix(in srgb, var(--soap-main) 35%, transparent);
    animation: aprilPressure 800ms ease-out var(--bloom-delay) both;
}
.april-pressure-ring.is-echo { border-color: var(--soap-accent); animation-delay: calc(var(--bloom-delay) + 130ms); }
.april-bloom-pearl {
    width: var(--pearl-size); height: var(--pearl-size); border-radius: 50%; border: 1px solid var(--soap-light);
    background: radial-gradient(circle at 28% 23%, #ffffffcc, transparent 30%, color-mix(in srgb, var(--soap-main) 28%, transparent) 65%, var(--soap-accent));
    animation: aprilPearlScatter 900ms cubic-bezier(.12,.6,.3,1) var(--pearl-delay) both;
}
.april-bloom-pearl.is-motif { background: var(--soap-motif); border: 0; border-radius: 0; clip-path: polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%); }
.v3-april-vfx-layer[data-april-theme="mesekonyv"] .is-motif { clip-path: polygon(50% 0,61% 35%,98% 38%,69% 61%,80% 98%,50% 75%,20% 98%,31% 61%,2% 38%,39% 35%); }
.is-ward .april-pressure-ring { animation-duration: 1100ms; border-width: 3px; }
.v3-april-vfx-layer .v3-april-bubble-pop { border-color: var(--soap-light); box-shadow: 0 0 18px var(--soap-main), inset 0 0 14px var(--soap-accent); }
.v3-april-vfx-layer .v3-april-starfield { border-radius: 48%; animation-duration: 3400ms; }
.v3-april-vfx-layer .v3-april-starfield-skin {
    background: radial-gradient(ellipse at 30% 15%, #ffffff35, transparent 30%),
        radial-gradient(ellipse, transparent 45%, color-mix(in srgb, var(--soap-main) 18%, transparent) 75%, color-mix(in srgb, var(--soap-accent) 40%, transparent));
    box-shadow: inset 0 -12px 40px color-mix(in srgb, var(--soap-accent) 42%, transparent);
}
.v3-april-vfx-layer .v3-april-starfield-rim { border-color: var(--soap-light); box-shadow: 0 0 22px var(--soap-main), inset 0 0 24px var(--soap-accent); }
.v3-april-vfx-layer .v3-april-starfield-star {
    width: 22px; height: 22px; background: transparent; border: 1px solid var(--soap-light);
    box-shadow: inset 2px -2px 6px var(--soap-accent), 0 0 8px var(--soap-main);
}
.v3-april-starfield-star::after { content: ""; position: absolute; inset: 28%; background: var(--soap-motif); clip-path: polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%); }
@keyframes aprilSoapFlex { from { transform: scale(.96,1.04) rotate(-8deg); } to { transform: scale(1.04,.96) rotate(8deg); } }
@keyframes aprilOrbitIncline { to { transform: rotate(140deg) scaleY(.38); } }
@keyframes aprilPressure {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(.15); }
    15% { opacity: .85; }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(1.15); }
}
@keyframes aprilPearlScatter {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
    15% { opacity: .95; }
    70% { opacity: .8; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--pearl-x)),calc(-50% + var(--pearl-y))) scale(.5) rotate(85deg); }
}
/* Basic attack: a brief elastic contact bubble, then a clear outward pop. */
.v3-april-vfx-layer.is-basic .is-leading .april-soap-shell {
    border-width: 2px;
    box-shadow: inset 4px 0 10px var(--soap-main), inset -4px -3px 10px var(--soap-accent), 0 0 20px color-mix(in srgb, var(--soap-main) 60%, transparent);
}
.v3-april-vfx-layer.is-basic .is-trailing img,
.v3-april-vfx-layer.is-basic .is-trailing .april-satellite { display: none; }
.april-basic-impact {
    position: absolute; width: var(--impact-size); height: var(--impact-size);
    pointer-events: none; opacity: 0;
    animation: aprilBasicContact 600ms cubic-bezier(.15,.65,.3,1) var(--impact-delay) both;
}
.april-basic-impact .april-soap-shell { border-width: 3px; }
.april-basic-seal {
    position: absolute; inset: 28%; background: var(--soap-motif); opacity: .9;
    clip-path: polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%);
}
.v3-april-vfx-layer[data-april-theme="jeg"] .april-basic-seal {
    clip-path: polygon(45% 0,55% 0,55% 35%,85% 17%,92% 27%,62% 45%,100% 45%,100% 55%,62% 55%,92% 73%,85% 83%,55% 65%,55% 100%,45% 100%,45% 65%,15% 83%,8% 73%,38% 55%,0 55%,0 45%,38% 45%,8% 27%,15% 17%,45% 35%);
}
.v3-april-vfx-layer[data-april-theme="mesekonyv"] .april-basic-seal {
    clip-path: polygon(50% 0,61% 35%,98% 38%,69% 61%,80% 98%,50% 75%,20% 98%,31% 61%,2% 38%,39% 35%);
}
@keyframes aprilBasicContact {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(.45,.7); }
    16% { opacity: 1; transform: translate(-50%,-50%) scale(1.12,.86); }
    34% { opacity: .9; transform: translate(-50%,-50%) scale(.92,1.08); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(1.55); }
}
/* Halloween: the supplied pumpkin bubble stays the main visual in flight,
   at impact and in the team's tanks. Decorations never cover its face. */
.v3-april-vfx-layer[data-april-theme="halloween"],
.april-bubble-rack[data-april-theme="halloween"] {
    --april-hw-bubble: url("../image/ui/battlev3/april/buborek_icon_skin_halloween.webp");
    --april-hw-ghost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36'%3E%3Cpath fill='%2322E5BB' stroke='%23093D32' stroke-width='1.5' d='M5 32V15C5-2 27-2 27 15v17l-6-4-5 5-5-5Z'/%3E%3Cellipse fill='%232E1338' cx='12' cy='15' rx='2' ry='3'/%3E%3Cellipse fill='%232E1338' cx='21' cy='15' rx='2' ry='3'/%3E%3Cpath fill='none' stroke='%232E1338' stroke-width='2' stroke-linecap='round' d='M12 23q4 5 8-1'/%3E%3C/svg%3E");
    --april-hw-bat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath fill='%232E1338' stroke='%23F97425' stroke-width='1.4' stroke-linejoin='round' d='m17 10-1-7 5 5 4-5-1 7Q33 1 39 6q-7 5-4 13-7-4-9 3l-6 6-6-6q-2-7-9-3Q8 11 1 6q7-5 16 4Z'/%3E%3Cpath stroke='%2322E5BB' stroke-width='2' d='M17 14h2m3 0h2'/%3E%3C/svg%3E");
}
.v3-april-vfx-layer[data-april-theme="halloween"] {
    --soap-light: #22E5BB;
    --soap-main: #F97425;
    --soap-accent: #6B1885;
    --soap-deep: #093D32;
    --soap-motif: #22E5BB;
}
.v3-april-vfx-layer[data-april-theme="halloween"] .v3-april-bubble-flight img {
    display: block; inset: -5%; width: 110%; height: 110%; opacity: 1;
    filter: drop-shadow(0 0 5px #F9742580) drop-shadow(0 0 10px #6B188580);
}
.v3-april-vfx-layer[data-april-theme="halloween"] .april-soap-shell {
    background: radial-gradient(circle at 70% 80%, #6B188520, transparent 62%);
    border-color: #22E5BB88;
    box-shadow: inset 0 0 6px #6B188580, 0 0 13px #F9742560;
}
.v3-april-vfx-layer[data-april-theme="halloween"] .april-soap-glint { border-color: #22E5BB; opacity: .45; }
.v3-april-vfx-layer[data-april-theme="halloween"] .april-flight-motif {
    width: 38%; height: 30%; right: -18%; bottom: 74%;
    clip-path: none; background: var(--april-hw-bat) center / contain no-repeat;
}
.v3-april-vfx-layer[data-april-theme="halloween"] .april-satellite {
    border: 0; box-shadow: none; border-radius: 0;
    width: 26%; height: 30%; background: var(--april-hw-ghost) center / contain no-repeat;
}
.v3-april-vfx-layer[data-april-theme="halloween"] .april-satellite.is-second { background-image: var(--april-hw-bubble); }
.v3-april-vfx-layer[data-april-theme="halloween"] .april-bloom-pearl {
    border: 0; border-radius: 0; clip-path: none;
    background: var(--april-hw-bubble) center / contain no-repeat;
    filter: drop-shadow(0 0 4px #F9742570);
}
.v3-april-vfx-layer[data-april-theme="halloween"] .april-bloom-pearl.is-motif {
    width: calc(var(--pearl-size) + 12px); height: calc(var(--pearl-size) + 12px);
    background-image: var(--april-hw-ghost); filter: drop-shadow(0 0 4px #22E5BB70);
}
.v3-april-vfx-layer[data-april-theme="halloween"] .april-bloom-pearl.is-motif:nth-child(even) { background-image: var(--april-hw-bat); }
.v3-april-vfx-layer[data-april-theme="halloween"] .april-basic-seal {
    inset: 15%; background: var(--april-hw-bubble) center / contain no-repeat;
    clip-path: none; opacity: 1; filter: drop-shadow(0 0 8px #F97425);
}
.v3-april-vfx-layer[data-april-theme="halloween"] .v3-april-bubble-pop::after {
    content: ""; position: absolute; inset: -12%;
    background: var(--april-hw-bat) center / contain no-repeat;
}
.v3-april-vfx-layer[data-april-theme="halloween"] .v3-april-ward-sphere {
    background: radial-gradient(circle, #093D320a 40%, #6B188538 72%, #F9742570 98%);
}
.v3-april-vfx-layer[data-april-theme="halloween"] .april-ward-sigil {
    width: 62px; height: 62px; top: 0; left: calc(50% - 31px);
    clip-path: none; background: var(--april-hw-bubble) center / contain no-repeat;
    filter: drop-shadow(0 0 9px #F9742590);
}
.v3-april-vfx-layer[data-april-theme="halloween"] .april-ward-orbit::before {
    width: 27px; height: 30px; left: -14px; border-radius: 0; box-shadow: none;
    background: var(--april-hw-ghost) center / contain no-repeat;
    filter: drop-shadow(0 0 6px #22E5BB80);
}
.v3-april-vfx-layer[data-april-theme="halloween"] .april-ward-orbit.is-cross::before { background-image: var(--april-hw-bat); }
.v3-april-vfx-layer[data-april-theme="halloween"] .v3-april-ward-shine,
.v3-april-vfx-layer[data-april-theme="halloween"] .v3-april-starfield-sheen { background: radial-gradient(circle, #22E5BB70, transparent 72%); }
.v3-april-vfx-layer[data-april-theme="halloween"] .v3-april-starfield-skin {
    background: radial-gradient(ellipse at 25% 70%, #F9742530, transparent 55%),
        radial-gradient(ellipse at 80% 20%, #22E5BB28, transparent 50%),
        radial-gradient(ellipse, #093D3208 40%, #6B188550 78%, #2E1338a0);
}
.v3-april-vfx-layer[data-april-theme="halloween"] .v3-april-starfield-star {
    width: 34px; height: 34px; border: 0; box-shadow: none;
    background: var(--april-hw-bubble) center / contain no-repeat;
    filter: drop-shadow(0 0 5px #F9742570);
}
.v3-april-vfx-layer[data-april-theme="halloween"] .v3-april-starfield-star:nth-child(3n) { background-image: var(--april-hw-ghost); }
.v3-april-vfx-layer[data-april-theme="halloween"] .v3-april-starfield-star:nth-child(3n + 1) { background-image: var(--april-hw-bat); }
.v3-april-vfx-layer[data-april-theme="halloween"] .v3-april-starfield-star::after { content: none; }

/* Cursed glass tanks: preserve the four slots and their state indicators. */
.v3-card-slot .april-bubble-rack[data-april-theme="halloween"] {
    background: linear-gradient(165deg, #2E1338, #093D32 55%, #6B1885) padding-box,
        conic-gradient(from var(--badge-chase-angle), #6B1885, #F97425 80deg, #2E1338 160deg, #22E5BB 260deg, #6B1885) border-box;
    box-shadow: 0 0 10px #F9742570, 0 0 17px #6B188580, inset 0 0 10px #22E5BB30;
    animation-name: v3BadgeChase, aprilHalloweenRackBreath;
}
.v3-card-slot .april-bubble-rack[data-april-theme="halloween"]::before,
.v3-card-slot .april-bubble-rack[data-april-theme="halloween"]::after {
    content: ""; width: 20px; height: 22px; text-shadow: none;
    background: var(--april-hw-ghost) center / contain no-repeat;
    filter: drop-shadow(0 0 4px #22E5BB70);
}
.v3-card-slot .april-bubble-rack[data-april-theme="halloween"]::after { background-image: var(--april-hw-bat); width: 25px; }
.april-bubble-rack[data-april-theme="halloween"] .april-rack-fizz > i { border-color: #22E5BB; background: #F9742560; }
.april-bubble-rack[data-april-theme="halloween"] .april-bubble-slot.is-active .april-bubble-icon {
    filter: drop-shadow(0 0 3px #F97425a0) drop-shadow(0 0 6px #22E5BB70);
}
.april-bubble-rack[data-april-theme="halloween"] .april-bubble-ring {
    background: conic-gradient(transparent, #22E5BB 65deg, #F97425 115deg, transparent 190deg);
    filter: drop-shadow(0 0 3px #6B1885);
}
.april-bubble-rack[data-april-theme="halloween"] .is-reinforced .april-bubble-ring { background: conic-gradient(transparent, #6B1885 55deg, #22E5BB 115deg, transparent 190deg); }
.april-bubble-rack[data-april-theme="halloween"] .is-giant .april-bubble-ring { background: conic-gradient(transparent, #F97425 55deg, #22E5BB 130deg, transparent 210deg); filter: drop-shadow(0 0 5px #F97425); }
.april-bubble-rack[data-april-theme="halloween"] .april-bubble-crown { fill: #F97425; stroke: #22E5BB; filter: drop-shadow(0 0 4px #6B1885); animation: none; }
@keyframes aprilHalloweenRackBreath {
    50% { box-shadow: 0 0 13px #F9742590, 0 0 20px #6B1885a0, inset 0 0 13px #22E5BB50; }
}
body.v3-body > .item-tooltip-floating:has(.april-bubble-tooltip--halloween) {
    --april-tip-c1: #2E1338; --april-tip-c2: #d6fff4; --april-tip-c3: #F97425;
    --april-tip-c4: #6B1885; --april-tip-c5: #22E5BB;
    --v3-tooltip-accent: #F97425; --v3-tooltip-value: #22E5BB;
    --v3-tooltip-accent-rgb: 249, 116, 37;
    width: min(358px, calc(100vw - 20px)); max-height: min(74vh, 560px);
    padding: 0; overflow: hidden; border: 1px solid #F97425; border-radius: 18px;
    background: radial-gradient(circle at 8% 0, #F9742530, transparent 40%),
        linear-gradient(145deg, #2E1338, #093D32);
    box-shadow: 0 20px 52px #000b, 0 0 24px #6B188560;
}
/* The active cast owns these brief feedback classes, including enemy targets. */
body:has(.v3-april-vfx-layer[data-april-theme="halloween"]) .v3-card.v3-april-bubble-cast { animation-name: aprilHalloweenCasterPulse; }
body:has(.v3-april-vfx-layer[data-april-theme="halloween"]) .v3-card.v3-april-bubble-arrival::after,
body:has(.v3-april-vfx-layer[data-april-theme="halloween"]) .v3-card.v3-april-bubble-burst::after {
    border-color: #22E5BB; box-shadow: inset 0 0 24px #6B188570, 0 0 20px #F9742580;
}
@keyframes aprilHalloweenCasterPulse {
    35% { filter: brightness(1.15) drop-shadow(0 0 16px #F97425b0); }
}
@media (prefers-reduced-motion: reduce) {
    .v3-april-vfx-layer * { animation-delay: 0ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
    .v3-april-vfx-layer .v3-april-ward-sphere,
    .v3-april-vfx-layer .v3-april-starfield { animation: aprilQuietWard 700ms ease-out both !important; }
    .v3-april-vfx-layer .v3-april-ward-sphere { transform: translate(-50%,-50%); }
    .v3-april-vfx-layer .april-ward-orbit { animation: none !important; }
    .v3-april-vfx-layer .april-basic-impact { transform: translate(-50%,-50%); animation: aprilQuietWard 600ms ease-out both !important; }
}
@keyframes aprilQuietWard { 0%,80% { opacity: .5; } 100% { opacity: 0; } }