Adding graphics (a shadow) to a Sprite with texture (playing card)

Hello, I have a Sprite loading a playing card texture from sprite sheet.

Now I am trying to add a shadow to the card (when dragged) by just drawing a rectangle on the same sprite -

function Card(str) {
        PIXI.Sprite.call(this, PIXI.Texture.from(str));

        this.shadow = new PIXI.Graphics();
        this.shadow.beginFill(Card.SHADOW_ALPHA, .5);
        this.shadow.drawRoundedRect(0, 0, Card.WIDTH, Card.HEIGHT, Card.CORNER);
        this.shadow.endFill();
        this.shadow.x = Card.SHADOW_OFFSET - Card.WIDTH / 2;
        this.shadow.y = Card.SHADOW_OFFSET - Card.HEIGHT / 2;
        this.addChild(this.shadow); // HOW TO MOVE UNDERNEATH THE TEXTURE?

        this.anchor.set(.5);
        this.interactive = false;
        this.buttonMode = true;
        this.visible = true;
}

Card.prototype = Object.create(PIXI.Sprite.prototype);
Card.prototype.constructor = Card;

Card.WIDTH = 254;
Card.HEIGHT = 400;
Card.SHADOW_OFFSET = 24;
Card.SHADOW_COLOR = 0x000000;
Card.CORNER = 8;

Card.prototype.move = function(x, y) {
        this.x = x;
        this.y = y;
}

Card.prototype.moveBy = function(dX, dY) {
        console.log('moveBy: dX=' + dX + ', dY=' + dY);
        this.x += dX;
        this.y += dY;
}

However the shadow rect is displayed above the texture - while I would like it to be drawn beneath it -

Is there please a way to move the shadow one layer down?

And my 2nd problem is rotation: when I rotate the card Sprite, I would like the shadow to be displayed south-east of it instead of just rotating around the card. What would you recommend here please?

My target is displaying a shadow underneath the card being dragged by the user, to add some (poor man's) depth. I have tried using DropShadowFilter(), but didn't like how it looked (pixelated / dithered).

Greetings from Germany
Alex