.main-header {
    position: fixed; /* Фиксируем шапку сверху */
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(60px, 10vw, 120px); /* Высота шапки */
    z-index: 10; /* Выше фона и контента */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Чтобы элементы не выходили за пределы */
}

/* Фоновая картинка для шапки */
.header-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), transparent);
}

/* Навигация */
.header-nav {
    position: absolute; /* Позиционируем навигацию поверх фона шапки */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Занимает всю высоту шапки */
    display: flex; /* Используем Flexbox для выравнивания элементов */
    justify-content: center; /* Распределяем пространство между nav-left, nav-center, nav-right */
    align-items: center; /* Выравниваем элементы по центру по вертикали */
    z-index: 12; /* Выше top-bar-decoration-img и header-background */
}
.nav-left {
    display: flex;
    gap: clamp(1px, 2vw, 40px); /* Расстояние между кнопками */
    margin-right: clamp(1px, 3vw, 40px); /* Отступ от центральной группы */
}
.nav-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Занимает всю высоту родителя, чтобы flex-end работал */
}
.nav-right {
    display: flex;
    gap: clamp(1px, 2vw, 40px); /* Расстояние между кнопками */
    margin-left: clamp(1px, 3vw, 40px); /* Отступ от центральной группы */
}

.nav-button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Georgia', serif;
    font-size: clamp(0.6em, 2vw, 1.1em);
    color: #c0c0c0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 1;
    
    width: clamp(60px, 20vw, 180px);
    height: clamp(35px, 20vw, 45px);
    display: flex;
    justify-content: center;
    align-items: center;

    clip-path: polygon(
        10% 0%,
        90% 0%,
        100% 50%,
        90% 100%,
        10% 100%,
        0% 50%
    );
}
.main-menu-button {
    background: linear-gradient(45deg, rgba(80, 0, 0, 0.8), rgba(40, 0, 0, 0.8));
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 0, 0, 0.5);
    border: 2px solid rgba(150, 0, 0, 0.8);
    cursor: pointer;
    font-family: 'Georgia', serif;
    font-size: clamp(0.6em, 2vw, 1.1em);
    color: #c0c0c0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 1;
    
    width: clamp(40px, 7vw, 70px);
    height: clamp(40px, 7vw, 70px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    transform: rotate(45deg); /* Поворот для создания ромба */
    clip-path: polygon(
        0% 0%,
        0% 100%,
        100% 100%,
        100% 0%
    );
}

/* Эффекты при наведении на кнопки */
.nav-button:hover {
    color: #e0e0e0;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Псевдоэлемент ::before для внешнего градиентного контура */
.nav-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Градиент для контура */
    background: linear-gradient(to bottom, transparent, rgba(70, 0, 0, 0.6));
    
    /* Форма такая же, как у кнопки */
    clip-path: polygon(
        10% 0%,
        90% 0%,
        100% 50%,
        90% 100%,
        10% 100%,
        0% 50%
    );
    
    z-index: -1; /* Под текстом, но над ::after */
    transition: all 0.3s ease;
}

/* Псевдоэлемент ::after для внутренней "дырки" */
.nav-button::after {
    content: '';
    position: absolute;
    top: clamp(1px, 0.1vw, 2px);
    left: clamp(1px, 0.1vw, 2px);
    width: calc(100% - clamp(2px, 0.2vw, 4px));
    height: calc(100% - clamp(2px, 0.2vw, 4px));
    
    background-color: transparent; /* Полностью прозрачный, чтобы просвечивал фон */
    
    clip-path: polygon(
        10% 0%,
        90% 0%,
        100% 50%,
        90% 100%,
        10% 100%,
        0% 50%
    );

    z-index: -0.5; /* Между текстом и ::before */
    transition: all 0.3s ease;
}

/* Эффект при наведении на кнопки */
.nav-button:hover::before {
    background: linear-gradient(to bottom, rgba(50, 0, 0, 0.8), rgba(70, 0, 0, 0.8));
}

.main-menu-button:hover {
    background: linear-gradient(45deg, rgba(120, 0, 0, 0.9), rgba(60, 0, 0, 0.9));
    border-color: rgba(255, 0, 0, 0.9);
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 0, 0, 0.8);
    transform: rotate(45deg) scale(1.05);
}

.main-menu-button .menu-icon,
.main-menu-button .menu-text {
    transform: rotate(-45deg);
    color: #f0f0f0;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.main-menu-button:hover .menu-icon,
.main-menu-button:hover .menu-text {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 15px rgba(255, 255, 255, 0.6);
}