/* ========================================
   导航栏样式
   ======================================== */

/* 字体定义已移除，使用系统宋体 */

/* 整体页面容器 - 控制1920x1080比例 */
.page-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 1920px;
    height: 1080px;
    margin-top: -540px; /* -1080/2 */
    margin-left: -960px; /* -1920/2 */
    transform-origin: center center;
    overflow: hidden;
}

/* 导航栏容器 */
.top-navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 50px; /* 统一高度 */
    background: #000;
    box-shadow: 0 14px 18px rgba(0, 0, 0, 0.8); /* 增强下方黑色阴影 */
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 导航栏内容容器 */
.nav-content {
    width: 1400px; /* 减少宽度 */
    height: 50px; /* 匹配导航栏高度 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    position: relative;
}

/* 左侧Logo */
.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #E7C045; /* 指定的颜色 */
    font-weight: bold;
    font-size: 21px;
    font-family: 'SimSun', '宋体', serif; /* 使用宋体 */
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-left: -100px; /* 向左移动 */
    margin-top: 2px; /* 向下移动2px */
    height: 50px; /* 明确设置高度 */
    line-height: 1; /* 重置行高 */
    padding: 0; /* 移除默认padding */
}

.logo-text {
    display: block;
    white-space: nowrap; /* 防止文字换行 */
}

.nav-logo:hover {
    color: #f0d060; /* 稍微亮一点的黄色作为hover效果 */
    transform: scale(1.05);
}

/* 右侧导航项容器 */
.nav-items {
    display: flex;
    align-items: center;
    gap: 20px; /* 减小间距 */
    margin-right: -80px; /* 向右移动更多，从-100px改为-80px */
    margin-top: 2px; /* 向下移动2px */
}

/* 固定的分类按钮区域 */
.nav-category-buttons {
    display: flex;
    gap: 20px;
    /* 固定宽度，避免布局抖动 */
    min-width: 320px; /* 4个按钮 + 3个间距的宽度 */
}

/* 固定的功能按钮区域 */
.nav-function-buttons {
    display: flex;
    gap: 20px;
    /* 固定宽度，避免布局抖动 */
    min-width: 160px; /* 2个按钮 + 1个间距的宽度 */
}

/* 动态的登录状态区域 */
.nav-auth-section {
    display: flex;
    align-items: center;
    gap: 20px;
    /* 固定宽度，避免布局抖动 */
    min-width: 120px; /* 注册+登录按钮的宽度 */
}

/* 首页导航项样式 */
.nav-items-home {
    display: flex;
}

/* 第二页和第三页导航项样式 */
.nav-items-pages {
    display: flex;
    gap: 20px; /* 减少间距 */
}

/* 导航栏切换由JavaScript控制 */

/* 导航按钮样式 */
.nav-button {
    background: transparent;
    border: none;
    color: white;
    font-family: 'SimSun', '宋体', serif;
    font-size: 18px; /* 增大字体大小 */
    font-weight: bold;
    cursor: pointer;
    padding: 0 12px; /* 减少左右内边距 */
    line-height: 1; /* 重置行高 */
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 50px; /* 明确设置高度 */
    justify-content: center; /* 确保文字水平居中 */
}

.nav-button:hover {
    color: #d4a574;
    transform: translateY(-2px);
}

/* 分隔线 */
.nav-separator {
    width: 1px;
    height: 20px;
    background: white;
    opacity: 0.7;
}

/* 语言选择按钮 */
.nav-lang {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #007bff;
    color: white;
    border: none;
    font-weight: bold;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-lang:hover {
    background: #0056b3;
    transform: scale(1.1);
}

/* 页面容器调整 - 作为整体缩放的一部分 */
.page-container {
    position: absolute;
    top: 50px; /* 为导航栏留出50px空间 */
    left: 0;
    width: 1920px;
    height: 1030px; /* 1080 - 50 = 1030px */
}

/* 确保所有页面都在导航栏下方 */
.page-container.active {
    top: 50px;
}

/* 第一页特殊处理 */
#page-1 {
    top: 50px;
}

#page-1.active {
    top: 50px;
}

/* 场景容器调整 - 向下移动10px */
#scene-container {
    margin-top: 10px;
}

/* 页面基础样式 */
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
    margin: 0;
    padding: 0;
}

/* 响应式适配 - 自适应屏幕大小 */
.page-wrapper {
    /* 计算缩放比例，对大屏幕更友好 */
    transform: scale(var(--scale-factor));
    transform-origin: center center;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -540px; /* -1080/2 */
    margin-left: -960px; /* -1920/2 */
}

/* 全屏模式优化 - 最大化利用屏幕空间 */
body:fullscreen .page-wrapper,
body:-webkit-full-screen .page-wrapper,
body:-moz-full-screen .page-wrapper,
body:-ms-fullscreen .page-wrapper {
    transform: scale(
        max(
            min(
                calc(100vw / 1920),
                calc(100vh / 1080)
            ),
            1.0
        )
    );
    transform-origin: center center;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -540px;
    margin-left: -960px;
}

/* 用户头像样式 */
.nav-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.nav-user-avatar:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.user-avatar-text {
    color: white;
    font-size: 12px;
    font-family: 'SimSun', '宋体', serif;
    font-weight: bold;
    text-transform: uppercase;
}