.phantom {
    position: fixed;
    width: 32px;
    height: 32px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 0; /* <--- ASEGÚRATE DE QUE ESTO ES CERO */
    border-bottom-right-radius: 0; /* <--- Y ESTO TAMBIÉN ES CERO */
    pointer-events: none; /* Permite clics a través */
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    transform: translate(-50%, -50%);
}

/* Parte inferior dentada del fantasma */
.bottom-scallop {
    position: absolute;
    bottom: -1px; /* Ajusta ligeramente para que se superponga con el cuerpo */
    left: 0;
    width: 100%;
    height: 50%; /* Altura para que las "puntitas" se formen bien */
    overflow: visible; /* Corta la mitad inferior de los círculos */
}

.bottom-scallop div {
    position: absolute;
    bottom: -20%; /* Mueve la parte inferior de los círculos hacia abajo */
    width: 25%; /* Ancho de cada "diente" (para 4 dientes, 100%/4 = 25%) */
    height: 60%;
    border-radius: 50%; /* Hace que cada div sea un círculo */
}

/* Posiciona cada "diente" */
.bottom-scallop div:nth-child(1) { left: 0; }
.bottom-scallop div:nth-child(2) { left: 25%; }
.bottom-scallop div:nth-child(3) { left: 50%; }
.bottom-scallop div:nth-child(4) { left: 75%; }


/* Ojos del fantasma */
.eye {
    position: absolute;
    top: 25%;
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.left-eye {
    left: 15%;
}

.right-eye {
    right: 15%;
}

/* Pupila del ojo */
.pupil {
    width: 6px;
    height: 6px;
    background-color: rgb(0, 0, 255);
    border-radius: 50%;
    position: absolute;
}

/* Estilos para la boca */
.mouth {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 0;
    background-color: black;
    border-radius: 0 0 50% 50%;
    transform-origin: top;
}