/* Position belongs to the button; pixel frames and bobbing belong to its child. */
.phantom-invader {
    --phantom-size: 64px;
    position: fixed; top: 0; left: 0;
    width: var(--phantom-size); height: var(--phantom-size);
    display: block; padding: 0; margin: 0; border: 0; border-radius: 0;
    background: none; opacity: .9; filter: none; box-shadow: none; outline: none;
    overflow: visible;
    animation: none !important; transition: opacity .2s;
    transform-origin: center; cursor: crosshair; z-index: 999;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    will-change: transform;
}
.phantom-invader::before, .phantom-invader::after { content: none; }
.phantom-sprite {
    display: block; width: 100%; height: 100%; pointer-events: none;
    background-image: url('Assets/invaders/invader.svg');
    background-size: 400% 100%; background-repeat: no-repeat;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 3px #23cbd570);
    animation: invader-frames 1.2s steps(1, end) infinite, invader-bob 2.8s ease-in-out infinite;
}
.phantom-skull .phantom-sprite { background-image: url('Assets/invaders/skull.svg'); filter: drop-shadow(0 0 3px #c5a4ff70); animation-duration: 1.6s, 3.2s; }
.phantom-eye .phantom-sprite { background-image: url('Assets/invaders/eye.svg'); filter: drop-shadow(0 0 3px #ff77c970); animation-name: eye-frames, invader-bob; animation-duration: 3.8s, 3s; }
@keyframes invader-frames {
    0%, 100% { background-position: 0% 0; }
    25% { background-position: 33.333333% 0; }
    50% { background-position: 66.666667% 0; }
    75% { background-position: 100% 0; }
}
@keyframes eye-frames {
    0%, 100% { background-position: 0% 0; }
    45% { background-position: 33.333333% 0; }
    85% { background-position: 66.666667% 0; }
    90% { background-position: 100% 0; }
}
@keyframes invader-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
.phantom-invader:focus-visible .phantom-sprite { filter: drop-shadow(0 0 6px #fff8); }
.phantom-invader.glitch-death, .phantom-invader.fleeing { pointer-events: none; }
.phantom-invader.glitch-death .phantom-sprite { animation: invader-hit .24s steps(4, end) forwards; }
.phantom-invader.fleeing .phantom-sprite { animation: invader-flee .65s ease-in forwards; }
@keyframes invader-hit {
    0% { opacity: 1; transform: scale(1.05); filter: brightness(4) drop-shadow(5px 0 #ff77c9) drop-shadow(-5px 0 #23cbd5); }
    35% { transform: translateX(-4px) scale(1.3, .8); }
    65% { opacity: 1; transform: translateX(4px) scale(.8, 1.35); filter: brightness(5); }
    100% { opacity: 0; transform: scale(1.6); filter: brightness(4); }
}
.phantom-burst { position: absolute; inset: 0; pointer-events: none; }
.phantom-burst::before, .phantom-burst::after { content: ''; position: absolute; left: 50%; top: 50%; }
.phantom-burst::before {
    width: 30px; height: 30px; border: 2px solid var(--burst-color); border-radius: 50%;
    box-shadow: 0 0 12px var(--burst-color), inset 0 0 8px var(--burst-color);
    animation: invader-shockwave .5s ease-out both;
}
.phantom-burst::after {
    width: 100px; height: 100px;
    background: linear-gradient(transparent 47%, #fff 49% 51%, transparent 53%), linear-gradient(90deg, transparent 47%, #fff 49% 51%, transparent 53%);
    animation: invader-flash .25s ease-out both;
}
.phantom-burst i {
    position: absolute; left: 50%; top: 50%; width: var(--spark-size); height: var(--spark-size);
    background: var(--burst-color); box-shadow: 0 0 7px var(--burst-color);
    animation: invader-spark .65s cubic-bezier(.12,.65,.3,1) both;
}
.phantom-burst i:nth-child(3n) { background: #fff; }
.phantom-burst i:nth-child(3n + 1) { background: #ff77c9; }
.phantom-burst b {
    position: absolute; left: 50%; top: 0; color: #fff; font: 18px 'VCR', monospace;
    text-shadow: 0 0 8px var(--burst-color); animation: invader-points .75s ease-out both;
}
@keyframes invader-shockwave {
    from { opacity: 1; transform: translate(-50%, -50%) scale(.3); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(4); }
}
@keyframes invader-flash {
    from { opacity: .9; transform: translate(-50%, -50%) scale(.2) rotate(0); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(1.3) rotate(45deg); }
}
@keyframes invader-spark {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(var(--dx) - 50%), calc(var(--dy) + 25px - 50%)) rotate(var(--turn)) scale(.15); }
}
@keyframes invader-points {
    0% { opacity: 0; transform: translate(-50%, 0) scale(.6); }
    15%, 65% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -42px) scale(1.1); }
}
@keyframes invader-flee { to { opacity: 0; transform: translateY(-40px) scale(.2); } }
@media (max-width: 768px) { .phantom-invader { --phantom-size: 48px; } }
@media (prefers-reduced-motion: reduce) { .phantom-sprite { animation: none; } }