/**
 * DayZ Quest System - Hintergrund-Gimmick: Lebensechtes Huhn, Hahn & Star Wars Easter Egg
 * 
 * Optimiert für nahtlose Darstellung auf schwarzem & dunklem Hintergrund.
 * Keine weißen Kästen, keine Ränder, saubere Transparenz & Klickschutz.
 */

#chicken-gimmick-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1; /* Hinter Login-Karten, vor Standard-Hintergrund */
    pointer-events: none !important; /* Layer selbst fängt keine Klicks ab */
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    background: transparent !important;
}

/* Sicherstellen, dass alle Login- & Registrierungskarten sicher im Vordergrund liegen */
.landing-page .auth-wrapper {
    position: relative;
    z-index: 10;
}

.landing-page .glass-card {
    position: relative;
    z-index: 11;
}

/* ==========================================================================
   TIER-GIMMICK (Huhn & Hahn)
   ========================================================================== */

/* Das Tier-Element selbst (hat eigene, isolierte Klickfläche) */
.gimmick-animal {
    position: absolute;
    bottom: 28px;
    height: 195px;
    width: auto;
    max-width: 250px;
    pointer-events: auto !important; /* Klickbar für das Flucht-Easter-Egg */
    cursor: pointer;
    will-change: transform;
    display: block;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
    transition: opacity 0.3s ease;
    z-index: 6;
    background: transparent !important;
}

.gimmick-animal img {
    height: 100%;
    width: auto;
    display: block;
    pointer-events: none;
    object-fit: contain;
    transform-origin: bottom center;
    background: transparent !important;
}

/* Natürliches Kopfwackeln / Körper-Watscheln beim Gehen */
.gimmick-animal.waddling img {
    animation: chickenWaddle 0.55s infinite ease-in-out alternate;
}

/* Natürliche Pick-Animation nach unten */
.gimmick-animal.pecking img {
    animation: chickenPeckMotion 0.38s ease-in-out 3;
}

/* Hahn Stolzier- und Umschau-Animation */
.gimmick-animal.rooster-alert img {
    animation: roosterAlertMotion 0.6s ease-in-out alternate infinite;
}

/* Erschrockenes Flügelflattern & Hektische Fluchtbewegung bei Klick */
.gimmick-animal.scared-flying img {
    animation: chickenScaredFlap 0.14s infinite alternate ease-in-out;
}

@keyframes chickenWaddle {
    0% { transform: translateY(0px) rotate(-1.5deg); }
    50% { transform: translateY(-4px) rotate(0deg); }
    100% { transform: translateY(0px) rotate(2deg); }
}

@keyframes chickenPeckMotion {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(4px) rotate(4deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes roosterAlertMotion {
    0% { transform: translateY(0px) rotate(-1deg); }
    100% { transform: translateY(-2px) rotate(2deg); }
}

@keyframes chickenScaredFlap {
    0% { transform: translateY(0px) rotate(-4deg) scale(1.02); }
    100% { transform: translateY(-18px) rotate(5deg) scale(0.98); }
}

/* ==========================================================================
   STAR WARS EASTER EGG (Todesstern, X-Wings, TIE Fighter, Laser, Explosion)
   ========================================================================== */

/* Todesstern im tiefen Hintergrund - Nahtlos im Weltraum */
.sw-death-star {
    position: absolute;
    width: 250px;
    height: 250px;
    pointer-events: none !important;
    z-index: 2;
    opacity: 0.55;
    will-change: transform, opacity;
    display: none;
    background: transparent !important;
}

.sw-death-star img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: transparent !important;
}

/* Raumschiffe (X-Wings & TIE Fighter) */
.sw-ship {
    position: absolute;
    pointer-events: none !important;
    z-index: 4;
    will-change: transform;
    display: none;
    background: transparent !important;
}

.sw-ship.xwing {
    width: 140px;
    height: auto;
}

.sw-ship.tie {
    width: 105px;
    height: auto;
    z-index: 3; /* Leicht hinter den X-Wings */
}

.sw-ship img {
    width: 100%;
    height: auto;
    display: block;
    background: transparent !important;
}

/* Rote Laser-Blastergeschosse der X-Wings */
.sw-laser {
    position: absolute;
    height: 3.5px;
    border-radius: 3px;
    background: #ff3333;
    box-shadow: 0 0 8px #ff1111, 0 0 16px #ff6666, 0 0 24px #ffffff;
    pointer-events: none !important;
    z-index: 5;
    will-change: transform, width, opacity;
}

/* Spektakuläre Explosion bei Treffer - Perfekt freigestellt ohne Kanten */
.sw-explosion {
    position: absolute;
    width: 220px;
    height: 220px;
    pointer-events: none !important;
    z-index: 7;
    will-change: transform, opacity;
    transform: translate(-50%, -50%);
    animation: swExplosionPop 0.75s cubic-bezier(0.12, 0.88, 0.25, 1) forwards;
    background: transparent !important;
}

.sw-explosion img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: transparent !important;
}

@keyframes swExplosionPop {
    0% {
        transform: translate(-50%, -50%) scale(0.25);
        opacity: 1;
        filter: brightness(2.0);
    }
    40% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
        filter: brightness(1.5);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.45);
        opacity: 0;
        filter: brightness(0.9);
    }
}

/* ==========================================================================
   RESPONSIVE DARSTELLUNG (Mobile, Tablet, Desktop)
   ========================================================================== */

@media (max-width: 992px) {
    .gimmick-animal {
        height: 135px;
        max-width: 175px;
        bottom: 20px;
    }
    .sw-death-star {
        width: 175px;
        height: 175px;
        opacity: 0.45;
    }
    .sw-ship.xwing {
        width: 100px;
    }
    .sw-ship.tie {
        width: 75px;
    }
    .sw-explosion {
        width: 160px;
        height: 160px;
    }
    @keyframes chickenScaredFlap {
        0% { transform: translateY(0px) rotate(-4deg); }
        100% { transform: translateY(-12px) rotate(5deg); }
    }
}

@media (max-width: 576px) {
    .gimmick-animal {
        height: 105px;
        max-width: 135px;
        bottom: 12px;
    }
    .sw-death-star {
        width: 130px;
        height: 130px;
        opacity: 0.38;
    }
    .sw-ship.xwing {
        width: 80px;
    }
    .sw-ship.tie {
        width: 60px;
    }
    .sw-explosion {
        width: 125px;
        height: 125px;
    }
    @keyframes chickenScaredFlap {
        0% { transform: translateY(0px) rotate(-4deg); }
        100% { transform: translateY(-9px) rotate(5deg); }
    }
}