/* ==============================
   FLAPPY BIRD - SPRITE DESIGN
   Using actual Flappy Bird sprites
   ============================== */

.bird {
    position: absolute;
    width: 34px;
    height: 24px;
    z-index: 10;
    background-image: url('https://raw.githubusercontent.com/samuelcust/flappy-bird-assets/master/sprites/yellowbird-midflap.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Hide any child elements */
.bird .wing,
.bird .beak {
    display: none;
}

/* ==============================
   FLAPPING ANIMATION
   ============================== */

.bird.flapping {
    animation: birdFlap 0.15s steps(1);
}

@keyframes birdFlap {
    0% {
        background-image: url('https://raw.githubusercontent.com/samuelcust/flappy-bird-assets/master/sprites/yellowbird-upflap.png');
    }
    50% {
        background-image: url('https://raw.githubusercontent.com/samuelcust/flappy-bird-assets/master/sprites/yellowbird-downflap.png');
    }
    100% {
        background-image: url('https://raw.githubusercontent.com/samuelcust/flappy-bird-assets/master/sprites/yellowbird-midflap.png');
    }
}

/* Idle wing animation */
@keyframes birdIdle {
    0%, 100% {
        background-image: url('https://raw.githubusercontent.com/samuelcust/flappy-bird-assets/master/sprites/yellowbird-midflap.png');
    }
    25% {
        background-image: url('https://raw.githubusercontent.com/samuelcust/flappy-bird-assets/master/sprites/yellowbird-upflap.png');
    }
    75% {
        background-image: url('https://raw.githubusercontent.com/samuelcust/flappy-bird-assets/master/sprites/yellowbird-downflap.png');
    }
}

.bird:not(.dead) {
    animation: birdIdle 0.4s steps(1) infinite;
}

/* ==============================
   DEAD BIRD
   ============================== */

.bird.dead {
    animation: none;
    filter: brightness(0.7);
    background-image: url('https://raw.githubusercontent.com/samuelcust/flappy-bird-assets/master/sprites/yellowbird-midflap.png');
}

/* ==============================
   OPPONENT BIRDS (MULTIPLAYER)
   ============================== */

.bird.bird-opponent {
    opacity: 0.7;
    z-index: 9;
    background-image: url('https://raw.githubusercontent.com/samuelcust/flappy-bird-assets/master/sprites/bluebird-midflap.png');
}

.bird.bird-opponent:not(.dead) {
    animation: birdIdleBlue 0.4s steps(1) infinite;
}

@keyframes birdIdleBlue {
    0%, 100% {
        background-image: url('https://raw.githubusercontent.com/samuelcust/flappy-bird-assets/master/sprites/bluebird-midflap.png');
    }
    25% {
        background-image: url('https://raw.githubusercontent.com/samuelcust/flappy-bird-assets/master/sprites/bluebird-upflap.png');
    }
    75% {
        background-image: url('https://raw.githubusercontent.com/samuelcust/flappy-bird-assets/master/sprites/bluebird-downflap.png');
    }
}

.bird.bird-opponent.dead {
    opacity: 0.4;
    animation: none;
}