/* --- 1. ОСНОВНІ ЗМІННІ --- */

/* --- 2. СИСТЕМНІ СТИЛІ BLAZOR --- */
.content {
    padding-top: 1.1rem;
}

/* --- 3. ГЛОБАЛЬНІ КНОПКИ (NEOBRUTALISM) --- */
.z-btn, .z-action-btn, .z-secondary-btn {
    border: 4px solid #000 !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    padding: 12px 28px !important;
    transition: 0.05s steps(2) !important;
    cursor: pointer !important;
    background: #fff;
    color: #000 !important;
    box-shadow: 4px 4px 0px #000 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
}

    .z-btn:hover {
        transform: translate(-2px, -2px);
        box-shadow: 8px 8px 0px #000 !important;
    }

.z-action-btn {
    background: var(--z-cyan) !important;
}

    .z-action-btn:hover {
        box-shadow: 4px 4px 0px var(--z-pink), 10px 10px 0px #000 !important;
    }

.z-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000 !important;
}

/* --- 4. БАНЕР ТА КОНТЕЙНЕР ОХОРОНЦЯ --- */
.z-hero-card {
    position: relative;
    width: 100%;
    height: 400px;
    background: #1a1a1a;
    border: 6px solid #000;
    border-radius: 20px;
    overflow: hidden;
    cursor: crosshair;
}

/* ГУСАК-ОХОРОНЕЦЬ (ОБ'ЄКТ) */

/* ШИЯ (Гнучка під JS) */

/* ГОЛОВА */

/* ОЧІ */

/* ДЗЬОБ (Верхня і нижня частини) */

/* ТІЛО */

/* --- 5. АНІМАЦІЇ ТА СТАНИ --- */

/* Стан агресії (Атака) */

/* Хмара діалогу (Блискавка) */

@keyframes jitter {
    0% {
        transform: translateX(-50%) rotate(var(--neck-angle)) translate(0,0);
    }

    50% {
        transform: translateX(-50%) rotate(var(--neck-angle)) translate(2px, -2px);
    }

    100% {
        transform: translateX(-50%) rotate(var(--neck-angle)) translate(-2px, 2px);
    }
}

/* Падіння гусей (Background) */

@keyframes fall {
    0% {
        transform: translateY(-50px) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(110vh) rotate(360deg);
        opacity: 0;
    }
}

/* ГОЛОВА (характерна овальна форма) */

/* ОЧІ (великі, як на фото) */

/* ДЗЬОБ (вигнута форма) */

/* ШИЯ ТА ТІЛО */

/* ПЛАШКА "КРЯ" (точно як на фото) */

/* Ефект агресії (коли мишка близько) */

/* ГОЛОВНИЙ КОНТЕЙНЕР */

/* ПЛАШКА КРЯ */

/* ГОЛОВА ТА ШИЯ */

/* ОЧІ (Великі та овальні) */

/* ДЗЬОБ (Як на малюнку) */

/* ТІЛО (Нижня частина) */
.z-egg {
    position: absolute;
    font-size: 20px;
    z-index: 5;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(2px 2px 0px #000);
    transition: opacity 0.3s;
}

.z-goose-track {
    position: relative;
    /* Твоя доріжка, по якій бігає гусак */
    height: 60px;
    background: rgba(0,0,0,0.05);
    border-radius: 30px;
    margin-top: 20px;
}

/* ПЛАШКА КРЯ (стиль Neobrutalism) */

/* ГОЛОВА */

/* ОЧІ (Втомлений погляд з повіками) */

/* ДЗЬОБ (як на малюнку) */

/* ШИЯ ЗІ СКЛАДКАМИ */

/* ТІЛО */

/* ГОЛОВНИЙ КОНТЕЙНЕР */

/* ПЛАШКА КРЯ */

/* ГОЛОВА */

/* ОЧІ (Втомлені з повіками) */

/* ДЗЬОБ (Форма зі скріншоту) */

/* ШИЯ ЗІ СКЛАДКАМИ (Lines) */

/* ТІЛО */