/* ============================================
   赛博朋克电竞风 - 导航栏样式
   
   设计理念：
   毛玻璃底栏 + 霓虹流光Logo + 悬浮发光
   固定顶部，滚动时背景加深、模糊增强。
   
   本文件包含：
   1. 导航容器（固定定位层）
   2. 滚动状态切换（.scrolled类）
   3. 导航栏主背景层（毛玻璃效果）
   4. 导航内容区（居中限宽容器）
   5. 导航菜单列表
   6. Logo样式及图片降级文字
   7. 菜单项悬浮渐变下划线
   8. 响应式适配（4级断点）
   ============================================ */

/* =====================================================================
   第1部分：导航容器（固定定位层）
   
   全宽固定在页面顶部，z-index:1000 保证在最上层。
   使用 cubic-bezier 缓动函数实现丝滑的过渡动画。
   ===================================================================== */
.导航容器 {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =====================================================================
   第2部分：滚动状态切换
   
   当页面滚动后，JS会给.导航容器添加.scrolled类，
   此时内部.游戏风深色的背景变得更不透明（0.85→0.95），
   模糊增强（15px→20px），增加底部边框和阴影，
   提升滚动时的视觉层次感。
   ===================================================================== */
.导航容器.scrolled .游戏风深色 {
    background: var(--bg-nav-scrolled); /* 滚动后背景更不透明 */
    backdrop-filter: blur(20px) saturate(180%); /* 滚动后模糊增强 */
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-nav); /* 滚动后显示底部边框 */
    box-shadow: var(--shadow-nav); /* 滚动后添加阴影 */
}

/* =====================================================================
   第3部分：导航栏主背景层（毛玻璃效果）
   
   默认状态：半透明深黑蓝背景 + 15px模糊 + 180%饱和度增强
   实现毛玻璃（frosted glass）视觉效果。
   -webkit-backdrop-filter 兼容Safari。
   ===================================================================== */
.游戏风深色 {
    background: var(--bg-nav); /* 半透明深黑蓝背景 */
    backdrop-filter: blur(15px) saturate(180%); /* 毛玻璃模糊+饱和度增强 */
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-bottom: 1px solid var(--border-nav); /* 极淡霓虹蓝底部边框 */
    transition: all 0.4s ease; /* 平滑过渡 */
}

/* =====================================================================
   第4部分：导航内容区（居中限宽容器）
   
   最大宽度1200px居中，内部使用flex布局。
   flex-wrap:nowrap 防止菜单项换行掉入横幅区域。
   height:var(--nav-height) 统一导航栏高度。
   ===================================================================== */
.导航总容器 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    height: var(--nav-height);
    flex-wrap: nowrap;
}

/* =====================================================================
   第5部分：导航菜单列表
   
   无序列表，flex居中布局，无默认样式。
   overflow:hidden 防止内容溢出。
   ===================================================================== */
.nav {
    height: var(--nav-height);
    line-height: var(--nav-height);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0;
    overflow: hidden;
}

/* =====================================================================
   第6部分：Logo样式
   
   左侧Logo区域，flex-shrink:0防止被压缩。
   max-width:220px 防止宽logo挤压导航菜单空间。
   图片高度相对导航栏60%自适应，最大44px上限。
   filter使用CSS变量实现霓虹光晕效果。
   
   Logo文字降级：当图片加载失败时，通过::after伪元素
   显示data-name属性中的站点名称（默认opacity:0隐藏）。
   ===================================================================== */
.logo {
    text-decoration: none;
    margin-right: 40px;
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    flex-shrink: 0;
    max-width: 220px; /* 防止宽logo挤压导航 */
}

.logo img {
    height: 80%; /* 相对导航栏高度的60%，自适应 */
    max-height: 59px; /* 最大高度上限 */
    /*height: 60%;  相对导航栏高度的60%，自适应 */
    /*max-height: 44px;  最大高度上限 */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    filter: var(--logo-shadow); /* Logo默认霓虹光晕 */
    transition: all 0.3s ease;
}

/* Logo文字降级：图片加载失败时显示站点名 */
.logo::after {
    content: attr(data-name);
    position: absolute;
    left: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--neon-blue);
    letter-spacing: 2px; /* 霓虹蓝色+2px字间距 */
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    text-shadow: var(--logo-text-glow); /* 文字发光效果 */
    transition: opacity 0.3s ease;
}
.logo img[src=""] ~ .logo::after,
.logo img:not([src]) ~ .logo::after {
    opacity: 1;
}

/* Logo悬浮：增强光晕 + 微放大 */
.logo:hover img {
    filter: var(--logo-shadow-hover); /* 悬浮增强光晕 */
    transform: scale(1.03);
}

/* =====================================================================
   第7部分：菜单项及悬浮渐变下划线
   
   菜单项默认：中蓝灰色文字，14px字号，1px字间距
   悬浮/激活态：纯白文字 + 霓虹蓝文字发光 + 底部渐变下划线
   
   下划线通过::after伪元素实现：
   - 默认宽度0，居中对齐
   - 悬浮时宽度扩展到70%
   - 背景为主蓝紫渐变 + 霓虹蓝发光
   ===================================================================== */
.nav-item {
    margin: 0;
    font-size: 14px;
    position: relative;
}

.nav-item a {
    display: block;
    padding: 0 18px;
    color: var(--text-secondary);
    font-size: 14px; /* 默认中蓝灰文字 */
    line-height: var(--nav-height);
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 1px;
    font-weight: 500;
    position: relative;
}

/* ===== 响应式：菜单项缩小间距 ===== */
@media (max-width: 1024px) {
    .logo {
        margin-right: 20px;
        max-width: 180px;
    }
    .nav-item a {
        padding: 0 12px;
        font-size: 13px;
        letter-spacing: 0.5px;
    }
}

@media (max-width: 768px) {
    .logo {
        margin-right: 10px;
        max-width: 140px;
    }
    .logo img {
        max-height: 34px;
    }
    .logo::after {
        font-size: 15px;
    }
    .nav-item a {
        padding: 0 8px;
        font-size: 12px;
        letter-spacing: 0;
    }
}

@media (max-width: 480px) {
    .logo {
        margin-right: 6px;
        max-width: 110px;
    }
    .logo img {
        max-height: 28px;
    }
    .logo::after {
        font-size: 13px;
        letter-spacing: 1px;
    }
    .nav-item a {
        padding: 0 5px;
        font-size: 11px;
        letter-spacing: 0;
    }
}

/* 悬浮渐变下划线 */
.nav-item a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--gradient-main);
    border-radius: 1px; /* 主蓝紫渐变下划线 */
    transition: width 0.3s ease;
    box-shadow: 0 0 8px var(--neon-blue); /* 霓虹蓝发光 */
}

/* 悬浮/激活态：白色文字+发光+下划线展开 */
.nav-item a:hover,
.nav-item.active a {
    color: var(--text-link-hover);
    text-shadow: var(--nav-hover-shadow);
}
.nav-item a:hover::after,
.nav-item.active a::after {
    width: 70%;
}

/* 游戏风深色容器内菜单项悬浮重复声明（确保优先级） */
.游戏风深色 .nav-item a:hover,
.游戏风深色 .nav-item.active a {
    color: var(--text-link-hover);
    text-shadow: var(--nav-hover-shadow);
}