header {
    position: fixed;
    top: 0;
    left: 50%; /* Центрируем относительно body */
    width: 100%; /* Пусть ширина совпадает с body */
    max-width: inherit; /* Наследуем максимальную ширину от body */
    transform: translateX(-50%); /* Смещаем обратно на 50% ширины */
    z-index: 1000;
    pointer-events: none; /* Не блокируем прокрутку */
}

/* Градиентный фон */
header .gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 130%; /* Растягиваем градиент на всю высоту header */
    background: linear-gradient(
        to bottom,
        var(--background-color) 0%,       /* Начинается с цвета фона */
        var(--background-color) 60%,     /* До 75% градиент полностью цветной */
        rgba(69, 46, 63, 0) 100%         /* От 75% до 100% становится прозрачным */
    );
    z-index: 0; /* Помещаем градиент под изображением */
}


/* Изображение */
header img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1; /* Изображение поверх градиента */
    pointer-events: auto; /* Включаем взаимодействие с элементами внутри (например, ссылки или кнопки) */
}

/* Стили для логотипа */
.logo {
    position: absolute;
    top: 50%; /* Центруем по вертикали относительно header */
    left: 50%; /* Центруем по горизонтали */
    transform: translate(-50%, -50%); /* Смещаем для точного центрирования */
    font-family: var(--menu-font-family); /* Применяем шрифт меню */
    font-weight: normal; /* Начертание текста */
    text-align: center;
    font-size: 12px; /* Шрифт подстраивается под ширину экрана */
    max-width: 40%; /* Ограничиваем ширину логотипа */
    white-space: nowrap; /* Логотип всегда в одну строку */
    color: var(--logo-text-color); /* Цвет заливки текста */
    z-index: 1; /* Текст сверху */
}

.logo::before {
    content: "Dwarf Rush"; /* Дублируем текст */
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, 0); /* Сохраняем точное наложение */
    color: transparent; /* Прозрачный фон */
    -webkit-text-stroke: 0.5vw var(--logo-border-color); /* Толстая обводка */
    font-size: inherit; /* Наследуем размер шрифта */
    width: 100%; /* Гарантируем совпадение размеров */
    height: 100%; /* Гарантируем совпадение размеров */
    z-index: -1; /* Обводка под текстом */
}