/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%; /* 确保页面宽度自适应 */
    min-width: 1200px; /* 强制页面最小宽度为 1200px，避免在小屏幕上被压缩 */
    overflow-x: hidden; /* 防止页面横向溢出 */
    margin: 0;
    padding: 0;
}

/* 导航栏整体样式（固定顶部，距离 50px） */
.navbar {
    background-color: #1a2526;
    width: calc(100% - 50px);
    padding: 5px 0;
    position: fixed;
    top: 10px;
    left: 25px;
    right: 25px;
    border-radius: 10px;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* 容器样式 */
.nav-container {
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
}

/* 左侧区域 */
.left-section {
    display: flex;
    align-items: center;
    margin-left: 25px;
}

/* Logo 样式 */
.logo a {
    color: #ffffff;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0;
    margin: 0 10px 0 0;
}

.logo img {
    height: 43px;
    width: auto;
    vertical-align: middle;
}

/* 导航菜单样式 */
.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
    margin-left: 0;
}

.nav-menu li {
    margin-left: 40px; /* 修改：从 15px 增加到 25px，放大导航项间距 */
    position: relative;
    text-align: center;
}

.nav-menu .home-link {
    margin-left: 25px; /* 保持第一个导航项无左侧间距 */
}

/* 普通导航链接（加粗） */
.nav-menu > li > a {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    font-weight: bold;
    transition: color 0.3s ease;
    display: block;
    padding: 10px 0;
    text-align: center;
}

/* 普通链接悬停效果 */
.nav-menu > li > a:hover {
    color: #00b4ff;
}

/* 让下拉菜单居中对齐触发的导航项 */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1a2526;
    list-style: none;
    min-width: 180px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1001;
    text-align: center;
    padding: 0;
    margin: 0;
}

/* 重置下拉菜单内部的列表项样式 */
.dropdown-menu li {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
}

/* 让下拉菜单的链接文本居中 */
.dropdown-menu a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    font-weight: bold;
    padding: 10px 15px;
    transition: background-color 0.3s ease;
    text-align: center;
    width: 100%;
}

/* 悬停时背景色变化 */
.dropdown-menu a:hover {
    background-color: #2a3536;
    color: #00b4ff;
}

/* Spacer 元素的样式 */
.dropdown-menu .spacer {
    height: 1px;
    background-color: rgba(255, 255, 255, 0);
    margin: 5px 0;
    padding: 0;
    display: block;
    width: 100%;
}

/* 鼠标悬停显示下拉菜单 */
.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* 右侧区域 */
.right-section {
    display: flex;
    align-items: center;
    margin-right: 25px;
}

/* 账户下拉菜单样式 */
.account-dropdown {
    position: relative;
    margin-right: 10px;
    text-align: center;
}

/* 账户信息加粗 */
.account-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 17px;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    font-weight: bold;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    padding: 10px 0;
    text-align: center;
}

.account-icon {
    margin-right: 5px;
    font-size: 16px;
    color: transparent;
    text-shadow: 0 0 0 #ffffff;
    -webkit-text-stroke: 1px #ffffff;
    background-image: url('../images/account-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 18px;
    height: 18px;
    display: inline-block;
}

.account-link:hover {
    color: #00b4ff;
}

.account-link:hover .account-icon {
    text-shadow: 0 0 0 #00b4ff;
    -webkit-text-stroke: 1px #00b4ff;
}

/* 下载游戏按钮样式 */
.download-btn a {
    background-color: #00b4ff;
    padding: 8px 30px;
    border-radius: 4px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    transition: background-color 0.5s ease;
    white-space: nowrap;
    display: inline-block;
    margin-left: 25px; /* 修改：增加左侧间距为 10px，可调节 */
}

.download-btn a:hover {
    background-color: #008ccc;
    color: #ffffff;
}



/* 关注我们 - 直角框架 */
.follow-us-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../images/bg_follow.webp'); /* 设置背景图 */
    background-size: 100% 100%; /* 让背景图铺满整个容器 */
    background-position: center; /* 背景图居中 */
    background-repeat: no-repeat; /* 防止背景图重复 */
    padding: 20px 20px;
    margin-bottom: 0; /* 取消底部间距，紧贴页脚 */
    border-radius: 0; /* 确保主框架无圆角 */
    width: 100%; /* 保持整体宽度100% */
    height: 100%; /* 让高度随着容器变化 */
    z-index: 100; /* 确保悬浮层级高 */
    position: relative; /* 避免被其他绝对定位的元素覆盖 */
}

/* 关注我们标题 */
.follow-title {
    color: #d3b716;
    font-size: 20px;
    font-weight: 900;
    margin-right: 40px;
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

/* 图标列表 */
.follow-icons {
    list-style: none;
    display: flex;
    gap: 50px; /* 增大图标间距 */
    padding: 0;
    margin: 0;
}

/* 单个图标 */
.follow-icons li {
    display: inline-block;
}

.icon {
    display: block;
    width: 40px;
    height: 40px;
    background-size: cover;
    border-radius: 5px; /* 轻微圆角 */
    transition: transform 0.3s ease;
}

/* 各社交平台图标 */
.icon.wechat { background-image: url('../images/icon/wx.png'); }
.icon.weibo { background-image: url('../images/icon/wb.png'); }
.icon.bbs { background-image: url('../images/icon/yt.png'); }
.icon.bilibili { background-image: url('../images/icon/bili.png'); }
.icon.douyin { background-image: url('../images/icon/dy.png'); }

/* 悬停效果：轻微放大 */
.icon:hover {
    transform: scale(1.2);
}


/* 页脚样式 */
.footer {
    background-color: #171d1f;
    color: #ffffff;
    padding: 20px 0;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    position: relative;
    bottom: 0;
    width: 100%;
}

/* 页脚容器 */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
}


/* 左侧版权信息 */
.footer-left p {
    font-size: 14px;
    color: #ffffff;
    line-height: 1.6;
}

/* 页脚 Logo 居中 */
.footer .logo {
    text-align: center;
}

.footer .logo img {
    height: 50px;
}

/* 右侧菜单 */
.footer-right .footer-menu {
    list-style: none;
    display: flex;
    gap: 40px;
    margin: 0;
    padding: 0;
}

.footer-right .footer-menu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: color 0.3s ease;
}

.footer-right .footer-menu a:hover {
    color: #00b4ff;
}