/* CSS 样式表：荣耀战魂信息站 */
/* 作者：数据议会前端团队 */
/* 最后更新：2025-04-10 */

/* 基础样式重置 */
/* :root 选择器用于定义全局 CSS 变量，这些变量可以在整个网页中使用 */
:root {
    --gold-primary: #FFD700; /* 主要金色：用于标题、重要元素的前景色 */
    --gold-secondary: #C5A456; /* 次级金色：用于次要元素、边框和装饰 */
    --bg-dark: #1A1A1A; /* 深色背景色：用于卡片、区块背景 */
    --bg-gradient: linear-gradient(135deg, #0F0C08 0%, #2D2418 100%); /* 背景渐变色：用于页面主体背景 */
    --text-primary: #E8E0D5; /* 主要文本色：用于正文内容 */
    --text-secondary: #A89A7D; /* 次级文本色：用于次要文本、说明性文字 */
    --border-gold: rgba(255, 215, 0, 0.3); /* 金色边框色：用于装饰性边框 */
}

/* 全局样式 */
/* 对所有元素进行默认样式重置，确保统一的渲染效果 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 元素尺寸包含内边距和边框 */
    transition: all 0.3s ease; /* 元素状态变化时的过渡动画 */
}

/* 页面主体样式 */
body {
    font-family: 'Microsoft YaHei', 'Source Han Sans', sans-serif; /* 定义页面字体为微软雅黑和思源宋体 */
    background: var(--bg-gradient); /* 设置页面背景为自定义渐变色 */
    color: var(--text-primary); /* 主要文本颜色 */
    line-height: 1.8; /* 行高设置为 1.8 倍字体大小 */
    overflow-x: hidden; /* 隐藏水平方向的溢出内容 */
}

/* 容器样式 */
.container {
    max-width: 1440px; /* 设置容器最大宽度为 1440 像素 */
    margin: 0 auto; /* 水平居中对齐 */
    padding: 2rem 4rem; /* 内边距设置为上下 2rem，左右 4rem */
}

/* 网站头部样式 */
.main-header {
    text-align: center; /* 文本水平居中 */
    margin: 4rem 0; /* 上下外边距设置为 4rem */
    position: relative; /* 定位为相对定位，用于内部元素的相对定位 */
}

/* 主标题样式 */
.gold-text {
    color: var(--gold-primary); /* 设置文本颜色为金色 */
    font-size: 3.2rem; /* 字体大小设置为 3.2rem */
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.2); /* 添加文本阴影效果 */
    letter-spacing: 2px; /* 字符间距设置为 2 像素 */
    position: relative; /* 定位为相对定位，用于内部元素的相对定位 */
    text-align: center; /* 使文本在元素内部水平居中 */
}

/* 副标题样式 */
.highlight {
    color: var(--text-primary); /* 设置文本颜色为主要文本色 */
    font-weight: 300; /* 字体粗细设置为轻量级 */
    margin-left: 1rem; /* 左边距设置为 1rem */
}

/* 标题分隔线样式 */
.header-divider {
    width: 200px; /* 宽度设置为 200 像素 */
    height: 2px; /* 高度设置为 2 像素 */
    background: var(--border-gold); /* 背景颜色设置为金色边框色 */
    margin: 1.5rem auto; /* 上下外边距设置为 1.5rem，左右自动居中 */
    opacity: 0.5; /* 透明度设置为 50% */
}

/* 公告区域样式 */
.announcement-section {
    position: relative; /* 定位为相对定位，用于内部元素的相对定位 */
    background: rgba(30, 25, 20, 0.9); /* 半透明深色背景 */
    border: 1px solid var(--border-gold); /* 边框颜色设置为金色边框色 */
    border-radius: 15px; /* 圆角设置为 15 像素 */
    padding: 2.5rem; /* 内边距设置为 2.5rem */
    margin-bottom: 4rem; /* 下边距设置为 4rem */
    backdrop-filter: blur(5px); /* 添加背景模糊效果 */
}

/* 滚动图标样式 */
.scroll-icon {
    position: absolute; /* 定位为绝对定位 */
    top: -30px; /* 顶部位置设置为 -30 像素 */
    left: 50%; /* 左侧位置设置为 50% */
    transform: translateX(-50%); /* 水平方向平移自身宽度的 50% */
    background: var(--bg-dark); /* 背景颜色设置为深色背景色 */
    width: 60px; /* 宽度设置为 60 像素 */
    height: 60px; /* 高度设置为 60 像素 */
    border-radius: 50%; /* 设置为圆形 */
    display: flex; /* 布局方式设置为弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    font-size: 2rem; /* 字体大小设置为 2rem */
    border: 3px solid var(--gold-primary); /* 边框颜色设置为金色 */
    box-shadow: 0 0 20px rgba(255,215,0,0.1); /* 添加阴影效果 */
}

/* 公告内容样式 */
.announcement-content p {
    font-size: 1.1rem; /* 字体大小设置为 1.1rem */
    color: var(--text-secondary); /* 文本颜色设置为次级文本色 */
    text-align: center; /* 文本水平居中 */
    line-height: 1.8; /* 行高设置为 1.8 倍字体大小 */
}

/* 公告标签样式 */
.notice-tag {
    display: flex; /* 布局方式设置为弹性布局 */
    justify-content: center; /* 水平居中对齐 */
    gap: 2rem; /* 元素间距设置为 2rem */
    margin-top: 1.5rem; /* 上边距设置为 1.5rem */
    color: var(--gold-secondary); /* 文本颜色设置为次级金色 */
    font-size: 0.9rem; /* 字体大小设置为 0.9rem */
}

/*顶端导航的样式*/
/* 智能导航栏样式 */
.smart-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(26, 21, 16, 0.98);
    border-bottom: 2px solid var(--gold-primary);
    padding: 0.8rem 2rem;
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1000;
    backdrop-filter: blur(8px);
}

.smart-nav.visible {
    transform: translateY(0);
    opacity: 1;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 0.8rem;
}

.nav-logo {
    height: 32px;
    width: 32px;
    object-fit: contain;
}

.nav-title {
    color: var(--gold-primary);
    font-size: 1.4rem;
    font-weight: bold;
    white-space: nowrap;
}

.nav-links {
    display: flex;
    gap: 1.2rem;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
}

.nav-links::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.nav-item {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.5rem 0;
    position: relative;
    white-space: nowrap;
    text-align: right;
    transition: all 0.3s ease;
}

.nav-item:hover {
    color: var(--gold-primary);
}

.nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold-primary);
    transition: width 0.3s ease;
}

.nav-item:hover::after {
    width: 100%;
}

.nav-item.active {
    color: var(--gold-primary);
    font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .nav-links {
        gap: 0.8rem;
    }
    .nav-item {
        font-size: 1rem;
    }
}
/* 增强过渡效果 */
.smart-nav {
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease;
}

.nav-item {
    transition:
        color 0.3s ease,
        transform 0.2s ease;
}

.nav-item:hover {
    transform: translateY(-2px);
}
/*侧边栏样式*/
/* 侧边栏样式 */
#sidebar {
    position: fixed;
    left: -250px;
    bottom: 20px;
    width: 250px;
    background: rgba(40, 35, 30, 0.95);
    border: 1px solid var(--gold-primary);
    border-radius: 0 8px 8px 0;
    z-index: 999;
    transition: left 0.3s ease;
    backdrop-filter: blur(5px);
}

#sidebar.expanded {
    left: 0;
}

#sidebar-toggle {
    position: fixed;
    left: 0;
    bottom: 20px;
    width: 40px;
    height: 40px;
    background: rgba(40, 35, 30, 0.9);
    border: 1px solid var(--gold-primary);
    border-left: none;
    border-radius: 0 50% 50% 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
}

#sidebar-toggle:hover {
    background: var(--gold-primary);
    color: #1a1a1a;
}

.sidebar-nav {
    padding: 1rem;
}

.sidebar-link {
    display: block;
    color: var(--text-primary);
    padding: 0.8rem 1rem;
    margin: 0.5rem 0;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: left;
}

.sidebar-link:hover {
    background: rgba(255, 215, 0, 0.15);
    color: var(--gold-primary);
    transform: translateX(5px);
}

.sidebar-divider {
    height: 1px;
    background: var(--border-gold);
    margin: 1rem 0;
}
/* 侧边栏样式 */
.quick-sidebar {
    position: fixed;
    left: -300px;
    bottom: 20px;
    z-index: 999;
    transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.quick-sidebar.active {
    left: 20px;
}

.sidebar-scroll {
    background: rgba(40, 35, 30, 0.95);
    border: 1px solid var(--gold-primary);
    border-radius: 12px;
    width: 280px;
    max-height: 60vh; /* 限制为视口高度的60% */
    overflow-y: auto;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.sidebar-content {
    padding: 20px;
    color: var(--text-primary);
}

.sidebar-content h3 {
    color: var(--gold-primary);
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.sidebar-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-link {
    display: block;
    padding: 10px 15px;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 6px;
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.sidebar-link:hover {
    background: rgba(255,215,0,0.15);
    color: var(--gold-primary);
    transform: translateX(5px);
}

/* 滚动条样式 */
.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: var(--gold-primary);
    border-radius: 3px;
}

/* 侧边栏开关按钮 */
.sidebar-toggle {
    position: absolute;
    right: -60px;
    bottom: 0;
    background: rgba(40, 35, 30, 0.9);
    color: var(--gold-primary);
    border: 1px solid var(--gold-primary);
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1;
    transition: all 0.3s ease;
}

.sidebar-toggle:hover {
    background: var(--gold-primary);
    color: #1a1a1a;
}

/*英雄*/
/* 英雄图鉴标题样式 */
.section-title {
    text-align: center; /* 文本水平居中 */
    margin: 4rem 0; /* 上下外边距设置为 4rem */
    position: relative; /* 定位为相对定位，用于内部元素的相对定位 */
}

/* 标题内容样式 */
.section-title span {
    display: inline-block; /* 显示方式设置为行内块 */
    padding: 0 2rem; /* 内边距设置为左右 2rem */
    background: var(--bg-gradient); /* 背景颜色设置为渐变色 */
    position: relative; /* 定位为相对定位，用于内部元素的相对定位 */
    z-index: 1; /* Z 轴堆叠顺序设置为 1 */
}

/* 标题下划线样式 */
.section-title::before {
    content: ''; /* 添加伪元素内容 */
    position: absolute; /* 定位为绝对定位 */
    left: 0; /* 左侧位置设置为 0 */
    top: 50%; /* 顶部位置设置为 50% */
    width: 100%; /* 宽度设置为 100% */
    height: 1px; /* 高度设置为 1 像素 */
    background: var(--border-gold); /* 背景颜色设置为金色边框色 */
}

/* 阵营卡片样式 */
.faction-card {
    background: rgba(40, 35, 30, 0.9); /* 半透明深色背景 */
    border-radius: 20px; /* 圆角设置为 20 像素 */
    margin-bottom: 3rem; /* 下边距设置为 3rem */
    overflow: hidden; /* 隐藏溢出内容 */
    box-shadow: 0 10px 40px rgba(0,0,0,0.3); /* 添加阴影效果 */
}

/* 阵营头部样式 */
.faction-header {
    padding: 2rem; /* 内边距设置为 2rem */
    background: linear-gradient(90deg,
        rgba(255,215,0,0.1) 0%,
        rgba(255,215,0,0.05) 100%); /* 背景设置为线性渐变色 */
    display: flex; /* 布局方式设置为弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    gap: 1.5rem; /* 元素间距设置为 1.5rem */
}

/* 阵营图标样式 */
.faction-icon {
    width: 80px; /* 宽度设置为 80 像素 */
    height: 80px; /* 高度设置为 80 像素 */
    object-fit: contain; /* 图片大小调整方式设置为 contain */
    filter: drop-shadow(0 0 10px rgba(255,215,0,0.2)); /* 添加阴影效果 */
}

/* 阵营信息样式 */
.faction-info h3 {
    color: var(--gold-primary); /* 文本颜色设置为金色 */
    font-size: 1.8rem; /* 字体大小设置为 1.8rem */
    margin-bottom: 0.5rem; /* 下边距设置为 0.5rem */
}

.faction-info p {
    color: var(--text-secondary); /* 文本颜色设置为次级文本色 */
    font-size: 0.95rem; /* 字体大小设置为 0.95rem */
}

/* 英雄网格样式 */
.hero-grid {
    display: grid; /* 布局方式设置为网格布局 */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* 列布局设置为自动填充 */
    gap: 2rem; /* 网格间距设置为 2rem */
    padding: 2rem; /* 内边距设置为 2rem */
}

/* 英雄卡片样式 */
.hero-card {
    height: 340px; /* 高度设置为 340 像素 */
    border-radius: 15px; /* 圆角设置为 15 像素 */
    overflow: hidden; /* 隐藏溢出内容 */
    position: relative; /* 定位为相对定位，用于内部元素的相对定位 */
    background: #2D2418; /* 背景颜色设置为深色 */
    background-size: cover; /* 背景图片大小设置为 cover */
    background-position: center; /* 背景图片位置设置为中心 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    transition: transform 0.3s, box-shadow 0.3s; /* 添加过渡动画效果 */
}

/* 英雄卡片背景遮罩样式 */
.hero-card::before {
    content: ''; /* 添加伪元素内容 */
    position: absolute; /* 定位为绝对定位 */
    top: 0; /* 顶部位置设置为 0 */
    left: 0; /* 左侧位置设置为 0 */
    width: 100%; /* 宽度设置为 100% */
    height: 100%; /* 高度设置为 100% */
    background: linear-gradient(180deg,
        rgba(0,0,0,0) 40%,
        rgba(15,12,8,0.9) 100%); /* 背景设置为线性渐变色 */
}

/* 英雄卡片悬停效果 */
.hero-card:hover {
    transform: translateY(-5px) scale(1.02); /* 添加悬停时的移动和缩放效果 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* 添加悬停时的阴影效果 */
}
/* 英雄名字容器样式 - 黑金风格 */
/*6月8日 改 防止找不到 */
.hero-name-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(15,12,8,0.95) 40%,
        rgba(26,21,16,0.98) 100%);
    padding: 20px 15px 15px;
    text-align: center;
    backdrop-filter: blur(3px);
    border-radius: 0 0 15px 15px;
    border-top: 1px solid rgba(255,215,0,0.2);
}

.hero-name-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--gold-primary) 50%,
        transparent 100%);
    opacity: 0.8;
}

.hero-name-container .hero-name {
    color: var(--gold-primary);
    font-size: 1.3rem;
    font-weight: 600;
    text-shadow:
        0 0 10px rgba(255,215,0,0.3),
        0 2px 4px rgba(0,0,0,0.8);
    display: block;
    letter-spacing: 1px;
    position: relative;
    transition: all 0.3s ease;
}

.hero-name-container .hero-name::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: var(--gold-secondary);
    transition: width 0.3s ease;
}

/* 悬停效果 */
.hero-card:hover .hero-name-container {
    background: linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(15,12,8,0.98) 30%,
        rgba(26,21,16,1) 100%);
    border-top-color: rgba(255,215,0,0.4);
}

.hero-card:hover .hero-name {
    color: #FFF;
    text-shadow:
        0 0 15px rgba(255,215,0,0.5),
        0 2px 6px rgba(0,0,0,0.9);
    transform: translateY(-2px);
}

.hero-card:hover .hero-name::after {
    width: 80%;
}

/* 为不同阵营添加特色边框效果 */
.knight .hero-name-container::before {
    background: linear-gradient(90deg,
        transparent 0%,
        #FFD700 50%,
        transparent 100%);
}

.viking .hero-name-container::before {
    background: linear-gradient(90deg,
        transparent 0%,
        #C41E3A 50%,
        transparent 100%);
}

.samurai .hero-name-container::before {
    background: linear-gradient(90deg,
        transparent 0%,
        #1ABC9C 50%,
        transparent 100%);
}

.wulin .hero-name-container::before {
    background: linear-gradient(90deg,
        transparent 0%,
        #9B59B6 50%,
        transparent 100%);
}

.adventurer .hero-name-container::before {
    background: linear-gradient(90deg,
        transparent 0%,
        #189DC9 50%,
        transparent 100%);
}



/* 英雄名称样式 */
.hero-name {
    color: #FFF; /* 文本颜色设置为白色 */
    font-size: 1.4rem; /* 字体大小设置为 1.4rem */
    text-shadow: 0 2px 5px rgba(0,0,0,0.5); /* 添加文本阴影效果 */
    display: block; /* 显示方式设置为块状 */
    margin-bottom: 0.3rem; /* 下边距设置为 0.3rem */
}


.hero-price span {
    color: var(--gold-secondary); /* 文本颜色设置为次级金色 */
    font-size: 0.85rem; /* 字体大小设置为 0.85rem */
    display: block; /* 显示为块状 */
    text-align: center; /* 文本水平居中 */
}

/* 数据卡片档案样式 */
.data-archive {
    margin-top: 5rem; /* 上边距设置为 5rem */
}

/* 导航网格样式 */
.nav-grid {
    display: grid; /* 布局方式设置为网格布局 */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 列布局设置为自动填充 */
    gap: 2.5rem; /* 网格间距设置为 2.5rem */
    margin-top: 3rem; /* 上边距设置为 3rem */
}

/* 数据卡片样式 */
.data-card {
    background: rgba(40, 35, 30, 0.9); /* 半透明深色背景 */
    padding: 2rem; /* 内边距设置为 2rem */
    border-radius: 15px; /* 圆角设置为 15 像素 */
    text-align: center; /* 文本水平居中 */
    border: 1px solid transparent; /* 边框颜色设置为透明 */
    position: relative; /* 定位为相对定位，用于内部元素的相对定位 */
    min-height: 220px; /* 最小高度设置为 220 像素 */
}

/* 数据卡片悬停效果 */
.data-card:hover {
    border-color: var(--gold-primary); /* 悬停时边框颜色设置为金色 */
    background: rgba(255,215,0,0.03); /* 悬停时背景颜色设置为半透明金色 */
}

/* 卡片图标样式 */
.card-icon {
    font-size: 3rem; /* 字体大小设置为 3rem */
    margin-bottom: 1.2rem; /* 下边距设置为 1.2rem */
}

/* 数据卡片标题样式 */
.data-card h3 {
    color: var(--gold-primary); /* 文本颜色设置为金色 */
    margin-bottom: 0.8rem; /* 下边距设置为 0.8rem */
}

/* 数据卡片描述样式 */
.data-card p {
    color: var(--text-secondary); /* 文本颜色设置为次级文本色 */
    font-size: 0.95rem; /* 字体大小设置为 0.95rem */
}

/* 状态标签样式 */
.status-tag {
    position: absolute; /* 定位为绝对定位 */
    top: 15px; /* 顶部位置设置为 15 像素 */
    right: 15px; /* 右侧位置设置为 15 像素 */
    padding: 0.3rem 0.8rem; /* 内边距设置为 0.3rem 0.8rem */
    border-radius: 20px; /* 圆角设置为 20 像素 */
    font-size: 0.8rem; /* 字体大小设置为 0.8rem */
}

/* 更新中状态样式 */
.updating { background: rgba(255,215,0,0.1); color: var(--gold-primary); } /* 背景设置为半透明金色，文本颜色设置为金色 */

/* 已验证状态样式 */
.verified { background: rgba(0,255,0,0.1); color: #7CFC00; } /* 背景设置为半透明绿色，文本颜色设置为亮绿色 */

/* 新增状态标签样式 */
.status-tag.warning {
    background: rgba(255, 165, 0, 0.1); /* 背景设置为半透明橙色 */
    color: #FFA500; /* 文本颜色设置为橙色 */
}

/* 社区维护状态样式 */
.status-tag.community {
    background: rgba(0, 191, 255, 0.1); /* 背景设置为半透明蓝色 */
    color: #00BFFF; /* 文本颜色设置为蓝色 */
}

/* 新功能状态样式 */
.status-tag.new {
    background: rgba(50, 205, 50, 0.1); /* 背景设置为半透明绿色 */
    color: #32CD32; /* 文本颜色设置为绿色 */
}

/* 卡片图标动画效果 */
.card-icon {
    transition: transform 0.3s ease; /* 添加过渡动画效果 */
}

/* 数据卡片悬停时的图标旋转效果 */
.data-card:hover .card-icon {
    transform: rotate(15deg) scale(1.2); /* 添加悬停时的旋转和缩放效果 */
}



/* 页脚样式 */
.main-footer {
    margin-top: 6rem; /* 上边距设置为 6rem */
    border-top: 1px solid var(--border-gold); /* 边框颜色设置为金色边框色 */
    padding-top: 3rem; /* 上内边距设置为 3rem */
}

/* 页脚内容样式 */
.footer-content {
    text-align: center; /* 文本水平居中 */
    color: var(--text-secondary); /* 文本颜色设置为次级文本色 */
}

/* 页脚链接样式 */
.footer-links {
    display: flex; /* 布局方式设置为弹性布局 */
    justify-content: center; /* 水平居中对齐 */
    gap: 2rem; /* 元素间距设置为 2rem */
    margin-bottom: 1.5rem; /* 下边距设置为 1.5rem */
}

/* 页脚链接样式 */
.footer-links a {
    color: var(--text-secondary); /* 文本颜色设置为次级文本色 */
    text-decoration: none; /* 链接无下划线 */
}

/* 页脚链接悬停效果 */
.footer-links a:hover {
    color: var(--gold-primary); /* 悬停时文本颜色设置为金色 */
}

/* 版权信息样式 */
.copyright {
    margin-top: 2rem; /* 上边距设置为 2rem */
    font-size: 0.9rem; /* 字体大小设置为 0.9rem */
    line-height: 1.6; /* 行高设置为 1.6 倍字体大小 */
}

/* 响应式设计样式 */
@media (max-width: 1200px) {
    /* 中等屏幕设备的响应式样式 */
    .container {
        padding: 2rem; /* 内边距设置为 2rem */
    }
}

@media (max-width: 768px) {
    /* 小屏幕设备的响应式样式 */
    .gold-text {
        font-size: 2.4rem; /* 字体大小设置为 2.4rem */
    }

    .hero-grid {
        grid-template-columns: repeat(2, 1fr); /* 列布局设置为 2 列 */
        gap: 1rem; /* 网格间距设置为 1rem */
    }

    .hero-card {
        height: 260px; /* 高度设置为 260 像素 */
    }

    .faction-header {
        flex-direction: column; /* 布局方向设置为垂直 */
        text-align: center; /* 文本水平居中 */
    }
}

@media (max-width: 480px) {
    /* 超小屏幕设备的响应式样式 */
    .container {
        padding: 1rem; /* 内边距设置为 1rem */
    }

    .hero-grid {
        grid-template-columns: 1fr; /* 列布局设置为 1 列 */
    }
}
/* 移动端优化样式数据卡 */
@media (max-width: 480px) {
    /* 小屏幕设备的响应式样式 */
    .data-card {
        min-height: 180px; /* 最小高度设置为 180 像素 */
        padding: 1.5rem; /* 内边距设置为 1.5rem */
    }

    .data-card h3 {
        font-size: 1.1rem; /* 字体大小设置为 1.1rem */
    }

    .data-card p {
        font-size: 0.85rem; /* 字体大小设置为 0.85rem */
    }
}
/* 阵营主题色样式 */
.knight .faction-header { border-left: 5px solid #ffd700; }  /* 骑士阵营：左侧边框颜色设置为金色 */

.viking .faction-header { border-left: 5px solid #c41e3a; } /* 维京阵营：左侧边框颜色设置为红色 */

.samurai .faction-header { border-left: 5px solid #1abc9c; } /* 武士阵营：左侧边框颜色设置为青色 */

.wulin .faction-header { border-left: 5px solid #9b59b6; }  /* 武林阵营：左侧边框颜色设置为紫色 */

.adventurer .faction-header { border-left: 5px solid #189DC9; } /* 冒险家/外乡人阵营：左侧边框颜色设置为蓝色 */

/* 地形数据标签样式 */
.status-tag.environment {
    background: rgba(255, 215, 0, 0.1); /* 背景设置为半透明金色 */
    color: var(--gold-secondary); /* 文本颜色设置为次级金色 */
}

/* 地图图标动态效果优化样式 */
[class="card-icon"]:has(🗺️):hover {
    transform: rotate(-5deg) scale(1.1); /* 添加悬停时的旋转和缩放效果 */
}

/* 综合信息页面样式 */
/* 数据内容区块样式 */
.data-section {
    margin: 3rem 0; /* 上下外边距设置为 3rem */
    background: rgba(40, 35, 30, 0.9); /* 背景设置为半透明深色 */
    border-radius: 12px; /* 圆角设置为 12 像素 */
    padding: 2rem; /* 内边距设置为 2rem */
}

/* 内容区块样式 */
.content-block {
    margin: 2rem 0; /* 上下外边距设置为 2rem */
    padding: 1.5rem; /* 内边距设置为 1.5rem */
    background: rgba(30, 25, 20, 0.6); /* 背景设置为半透明深色 */
    border-left: 3px solid var(--gold-primary); /* 左侧边框颜色设置为金色 */
}

/* 内容区块标题样式 */
.content-block h3 {
    color: var(--gold-primary); /* 文本颜色设置为金色 */
    margin-bottom: 1rem; /* 下边距设置为 1rem */
    font-size: 1.2rem; /* 字体大小设置为 1.2rem */
}

/* 数据表格样式 */
.data-table {
    display: grid; /* 布局方式设置为网格布局 */
    grid-template-columns: repeat(3, 1fr); /* 列布局设置为 3 列 */
    gap: 1px; /* 网格间距设置为 1 像素 */
    background: var(--border-gold); /* 背景颜色设置为金色边框色 */
}

/* 表格行样式 */
.table-row {
    display: contents; /* 显示方式设置为 contents */
}

/* 表格单元格样式 */
.table-row > div {
    padding: 1rem; /* 内边距设置为 1rem */
    background: var(--bg-dark); /* 背景颜色设置为深色背景色 */
}

/* 表格表头样式 */
.table-row.header > div {
    background: rgba(255,215,0,0.1); /* 背景设置为半透明金色 */
    font-weight: bold; /* 字体粗细设置为粗体 */
}

/* 响应式表格容器样式 */
.responsive-table {
    overflow-x: auto; /* 水平方向显示滚动条 */
    margin: 1rem 0; /* 上下外边距设置为 1rem */
    background: linear-gradient(to right, rgba(255,215,0,0.1) 0%, rgba(255,215,0,0.05) 100%); /* 背景设置为线性渐变色 */
    border-radius: 8px; /* 圆角设置为 8 像素 */
    padding: 2px; /* 内边距设置为 2 像素 */
}

/* 硬直表格样式 */
.hard-stun-table {
    width: 100%; /* 宽度设置为 100% */
    border-collapse: collapse; /* 边框设置为合并 */
    min-width: 800px; /* 最小宽度设置为 800 像素 */
}

/* 硬直表格单元格样式 */
.hard-stun-table th,
.hard-stun-table td {
    padding: 12px; /* 内边距设置为 12 像素 */
    text-align: center; /* 文本水平居中 */
    border: 1px solid var(--border-gold); /* 边框颜色设置为金色边框色 */
}

/* 硬直表格表头样式 */
.hard-stun-table thead {
    background: rgba(255,215,0,0.1); /* 背景设置为半透明金色 */
    font-weight: 600; /* 字体粗细设置为 600 */
}

/* 硬直表格表头文本样式 */
.hard-stun-table th {
    color: var(--gold-primary); /* 文本颜色设置为金色 */
}

/* 硬直表格数据单元格样式 */
.hard-stun-table td {
    background: rgba(30, 25, 20, 0.8); /* 背景设置为半透明深色 */
}

/* 表格说明样式 */
.table-description {
    color: var(--text-secondary); /* 文本颜色设置为次级文本色 */
    font-size: 0.9rem; /* 字体大小设置为 0.9rem */
    margin-bottom: 1rem; /* 下边距设置为 1rem */
}

/* 折叠区块样式 */
.collapse-block {
    border: 1px solid var(--border-gold); /* 边框颜色设置为金色边框色 */
    border-radius: 8px; /* 圆角设置为 8 像素 */
    margin: 1rem 0; /* 上下外边距设置为 1rem */
}

/* 折叠区块标题样式 */
.collapse-header {
    padding: 1rem; /* 内边距设置为 1rem */
    background: rgba(255,215,0,0.05); /* 背景设置为半透明金色 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    display: flex; /* 布局方式设置为弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    list-style: none; /* 无列表样式 */
}

/* 移除默认箭头样式 */
.collapse-header::-webkit-details-marker {
    display: none; /* 隐藏默认箭头 */
}

/* 折叠图标样式 */
.collapse-icon {
    font-size: 1.2rem; /* 字体大小设置为 1.2rem */
    margin-right: 1rem; /* 右边距设置为 1rem */
    transition: transform 0.3s ease; /* 添加过渡动画效果 */
}

/* 折叠区块内容样式 */
.collapse-content {
    padding: 1rem; /* 内边距设置为 1rem */
    background: rgba(30, 25, 20, 0.8); /* 背景设置为半透明深色 */
    border-top: 1px solid var(--border-gold); /* 上边框颜色设置为金色边框色 */
}

/* 折叠区块展开状态图标旋转效果 */
.collapse-block[open] .collapse-icon {
    transform: rotate(90deg); /* 添加展开时的旋转效果 */
}

/* 折叠区块默认折叠状态样式 */
.collapse-content {
    display: none; /* 默认隐藏内容 */
}

/* 折叠区块展开状态样式 */
.collapse-block[open] .collapse-content {
    display: block; /* 展开时显示内容 */
}


/*  下面是页脚内容     */
/* 更新日志专用样式 */
.changelog-container {
    max-width: 800px;
    margin: 2rem auto;
    background: rgba(40, 35, 30, 0.9);
    border-radius: 12px;
    padding: 2rem;
}

.changelog-title {
    color: var(--gold-primary);
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
}

.log-entry {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-gold);
}

.log-date {
    color: var(--gold-primary);
    font-weight: bold;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.log-content {
    color: var(--text-primary);
    line-height: 1.6;
    padding-left: 1rem;
}

.log-divider {
    height: 2px;
    background: var(--border-gold);
    margin: 1.5rem 0;
    opacity: 0.3;
}
/* 参与人员页面专用样式 */
.contributors-container {
    max-width: 800px;
    margin: 2rem auto;
    background: rgba(40, 35, 30, 0.9);
    border-radius: 12px;
    padding: 2rem;
}

.contributors-title {
    color: var(--gold-primary);
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
}

.contributor-section {
    margin-bottom: 2rem;
}

.section-title {
    color: var(--gold-secondary);
    font-size: 1.3rem;
    border-bottom: 1px solid var(--border-gold);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.contributor-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.contributor-card {
    background: rgba(30, 25, 20, 0.6);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--gold-primary);
}

.contributor-name {
    color: var(--gold-primary);
    font-weight: bold;
    margin-bottom: 0.3rem;
}

.contributor-role {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.contributor-contrib {
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.4;
}

/*英雄详情页专用*/
/* 英雄详情页特定样式 */
.hero-detail {
    max-width: 1200px;
}

.centered-title {
    text-align: center;
    margin: 2rem 0;
}

.hero-section {
    margin-bottom: 3rem;
    background: rgba(40, 35, 30, 0.7);
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 3px solid var(--gold-primary);
}

.hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.hero-stat-table {
    width: 100%;
    border-collapse: collapse;
}

.hero-stat-table td {
    padding: 0.6rem;
    border: 1px solid var(--border-gold);
}

.hero-stat-table tr:nth-child(odd) {
    background: rgba(255,215,0,0.05);
}



/* ==================== 连招表格样式 ==================== */
/* 所有连招的主容器 */
.all-combos-container {
    background: rgba(30, 25, 20, 0.8);
    border-radius: 15px;
    padding: 2rem;
    margin: 2rem 0;
    border: 1px solid var(--border-gold);
}

/* 单个连招分类容器 */
.combo-category {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.combo-category:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 分类标题样式 */
.category-title {
    color: var(--gold-primary);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
}

.category-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--gold-primary) 50%,
        transparent 100%);
}

/* 连招网格容器 - 一行三个表格 */
.combo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
    padding: 0;
    justify-items: start;
}

/* 连招表格包装器 */
.combo-table-wrapper {
    background: rgba(40, 35, 30, 0.95);
    border-radius: 12px;
    border: 1px solid var(--border-gold);
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 380px;
    min-height: 300px;
}

.combo-table-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    border-color: var(--gold-primary);
}

/* 连招表格主体 */
.combo-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Microsoft YaHei', 'Source Han Sans', monospace;
    font-size: 0.85rem;
    background: transparent;
    table-layout: fixed;
    height: 100%;
}

/* 招式图标行 */
.move-icons-row td {
    background: linear-gradient(135deg,
        rgba(255, 215, 0, 0.1) 0%,
        rgba(255, 215, 0, 0.05) 100%);
    padding: 0.8rem;
    border-bottom: 1px solid var(--border-gold);
}

/* 招式图标容器 */
.move-icons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    min-height: 32px;
}

/* 招式图标 */
.move-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.3));
    transition: transform 0.2s ease;
}

.move-icon:hover {
    transform: scale(1.1);
}

/* 表格标题行 */
.combo-table th {
    background: linear-gradient(135deg,
        var(--gold-primary) 0%,
        var(--gold-secondary) 100%);
    color: #1A1A1A;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.8rem 0.6rem;
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: none;
    border: none;
}

/* 表格数据行 */
.combo-table td {
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    vertical-align: middle;
    color: var(--text-primary);
    line-height: 1.4;
    font-size: 0.8rem;
}

/* 表格行悬停效果 */
.combo-table tr:hover td {
    background: rgba(255, 215, 0, 0.05);
}

/* 左侧标签列样式 */
.combo-table td:first-child {
    background: rgba(30, 25, 20, 0.7);
    color: var(--gold-secondary);
    font-weight: 500;
    font-size: 0.75rem;
    width: 40%;
    min-width: 80px;
    border-right: 1px solid var(--border-gold);
    word-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 数值列样式 */
.combo-table td:last-child {
    color: var(--text-primary);
    font-weight: 400;
    font-family: 'Consolas', 'Monaco', monospace;
    text-align: left;
    padding-left: 0.8rem;
    width: 60%;
    word-wrap: break-word;
}

/* 特殊数值高亮 */
.combo-table td:last-child:not(:empty) {
    position: relative;
}

/* 数值为空或null时的样式 */
.combo-table td:last-child:empty::after,
.combo-table td[data-value="null"]::after,
.combo-table td[data-value="None"]::after {
    content: "—";
    color: var(--text-secondary);
    font-style: italic;
}

/* 注意内容行样式 */
.combo-table tr:last-child td {
    background: rgba(255, 215, 0, 0.1);
    border-bottom: none;
    padding: 0.8rem 0.7rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-secondary);
    word-wrap: break-word;
    white-space: normal;
}

/* 注意事项标题行 */
.combo-table tr:has(th[colspan="2"]) th:contains("注意") {
    background: rgba(255, 215, 0, 0.2);
    color: #1A1A1A;
    font-size: 0.85rem;
}

/* 响应式设计 - 平板 */
@media (max-width: 1200px) {
    .combo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        justify-items: center;
    }

    .combo-table-wrapper {
        max-width: 400px;
    }
}

/* 响应式设计 - 手机 */
@media (max-width: 768px) {
    .combo-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        justify-items: center;
    }

    .combo-table-wrapper {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    .combo-table {
        font-size: 0.8rem;
    }

    .combo-table td {
        padding: 0.5rem 0.4rem;
    }

    .move-icons-container {
        gap: 0.5rem;
    }

    .move-icon {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .combo-table-wrapper {
        width: calc(100vw - 2rem);
        max-width: 350px;
    }

    .combo-table th {
        font-size: 0.9rem;
        padding: 0.6rem 0.4rem;
    }

    .combo-table td:first-child {
        font-size: 0.7rem;
        width: 45%;
    }

    .combo-table td:last-child {
        font-size: 0.75rem;
        padding-left: 0.5rem;
        width: 55%;
    }
}

/* ==================== 数值颜色编码 ==================== */
/* 伤害数值样式 */
.combo-table tr:has(td:first-child:contains("伤害")) td:last-child {
    color: #FF6B6B;
    font-weight: 500;
}

/* 速度数值样式 */
.combo-table tr:has(td:first-child:contains("速度")) td:last-child {
    color: #4ECDC4;
    font-weight: 500;
}

/* 体力相关数值样式 */
.combo-table tr:has(td:first-child:contains("体力")) td:last-child {
    color: #45B7D1;
    font-weight: 500;
}

/* 僵直相关数值样式 */
.combo-table tr:has(td:first-child:contains("僵")) td:last-child,
.combo-table tr:has(td:first-child:contains("恢复")) td:last-child {
    color: #96CEB4;
    font-weight: 500;
}

/* 特性文本样式 */
.combo-table tr:has(td:first-child:contains("特性")) td:last-child,
.combo-table tr:has(td:first-child:contains("输入")) td:last-child {
    color: var(--gold-secondary);
    font-weight: 400;
    font-family: 'Microsoft YaHei', sans-serif;
}

/* ==================== 网格布局优化 ==================== */
/* 确保少量表格不会拉伸 */
.combo-grid:has(.combo-table-wrapper:only-child) {
    grid-template-columns: 320px;
    justify-content: start;
}

.combo-grid:has(.combo-table-wrapper:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 320px);
    justify-content: start;
}

.combo-grid:has(.combo-table-wrapper:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 320px);
    justify-content: start;
}

/* 当屏幕较小时的网格调整 */
@media (max-width: 1024px) {
    .combo-grid:has(.combo-table-wrapper:nth-child(3):last-child) {
        grid-template-columns: repeat(2, 320px);
    }
}

@media (max-width: 768px) {
    .combo-grid:has(.combo-table-wrapper:only-child),
    .combo-grid:has(.combo-table-wrapper:nth-child(2):last-child),
    .combo-grid:has(.combo-table-wrapper:nth-child(3):last-child) {
        grid-template-columns: 1fr;
        justify-content: center;
    }
}

.placeholder-text {
    color: var(--text-secondary);
    font-style: italic;
}

.trait-text {
    color: var(--gold-secondary);
    font-weight: normal;
}
/* ==================== 英雄属性表格样式 ==================== */
.hero-stats-container {
    margin: 2rem 0;
    overflow-x: auto;
    background: rgba(40, 35, 30, 0.7);
    border-radius: 8px;
    padding: 1rem;
    border-left: 3px solid var(--gold-primary);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.hero-stat-grid {
    width: 100%;
    border-collapse: collapse;
    min-width: 1200px; /* 增加最小宽度确保表格不会过度压缩 */
    table-layout: fixed; /* 固定表格布局，防止内容撑开表格 */
}

/* 表头样式 */
.hero-stat-grid th {
    padding: 0.8rem 0.5rem;
    background: rgba(255,215,0,0.1);
    color: var(--gold-primary);
    text-align: center;
    border: 1px solid var(--border-gold);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.3;
    word-wrap: break-word; /* 允许长单词换行 */
    hyphens: auto; /* 自动断字 */
    vertical-align: middle;
    /* 为不同列设置合适的宽度 */
    width: auto;
}

/* 为特定列设置宽度 */
.hero-stat-grid th:nth-child(1) { width: 10%; }  /* 角色类型 */
.hero-stat-grid th:nth-child(2) { width: 10%; }  /* 血量 */
.hero-stat-grid th:nth-child(3) { width: 10%; }  /* 耐力 */
.hero-stat-grid th:nth-child(4) { width: 10%; }  /* 防御 */
.hero-stat-grid th:nth-child(5) { width: 10%; }  /* 类型 */
.hero-stat-grid th:nth-child(6) { width: 8%; }  /* 默认防御方向 */
.hero-stat-grid th:nth-child(7) { width: 25%; } /* 未锁定目标强化普攻 */
.hero-stat-grid th:nth-child(8) { width: 8%; }  /* 基础冲刺速度 */
.hero-stat-grid th:nth-child(9) { width: 20%; }  /* 特殊冲刺速度 */
.hero-stat-grid th:nth-child(10) { width: 20%; } /* 英雄行走速度 */
.hero-stat-grid th:nth-child(11) { width: 12%; } /* 姿态行走速度 */
.hero-stat-grid th:nth-child(12) { width: 8%; }  /* 前闪僵值回复速度 */
.hero-stat-grid th:nth-child(13) { width: 8%; }  /* 闪避距离 */

/* 表格数据单元格样式 */
.hero-stat-grid td {
    padding: 0.8rem 0.5rem;
    border: 1px solid var(--border-gold);
    text-align: center;
    background: rgba(30, 25, 20, 0.8);
    font-size: 0.85rem;
    line-height: 1.3;
    word-wrap: break-word;
    hyphens: auto;
    vertical-align: middle;
    overflow: hidden; /* 隐藏溢出内容 */
}

/* 数值样式 */
.stat-value {
    color: var(--gold-secondary);
    font-weight: 500;
    font-family: 'Consolas', 'Monaco', monospace;
    white-space: nowrap; /* 防止数值换行 */
    overflow: hidden;

}

/* 表格悬停效果 */
.hero-stat-grid tr:hover td {
    background: rgba(255, 215, 0, 0.05);
    transform: none; /* 移除变形效果防止布局抖动 */
}

/* 响应式调整 */
@media (max-width: 1400px) {
    .hero-stat-grid {
        min-width: 1000px;
    }

    .hero-stat-grid th,
    .hero-stat-grid td {
        padding: 0.6rem 0.4rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 1000px) {
    .hero-stat-grid {
        min-width: 900px;
    }

    .hero-stat-grid th,
    .hero-stat-grid td {
        padding: 0.5rem 0.3rem;
        font-size: 0.75rem;
    }
}

/* 滚动条样式优化 */
.hero-stats-container::-webkit-scrollbar {
    height: 8px;
}

.hero-stats-container::-webkit-scrollbar-track {
    background: rgba(40, 35, 30, 0.5);
    border-radius: 4px;
}

.hero-stats-container::-webkit-scrollbar-thumb {
    background: var(--gold-secondary);
    border-radius: 4px;
}

.hero-stats-container::-webkit-scrollbar-thumb:hover {
    background: var(--gold-primary);
}

/* ==================== 收益表和处决表样式 ==================== */
.benefits-table-container,
.execution-table-container {
    margin: 2rem 0;
    overflow-x: auto;
    background: rgba(30, 25, 20, 0.8);
    border-radius: 10px;
    padding: 1.5rem;
    border: 2px solid var(--border-gold);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.benefits-table,
.execution-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px;
    background: transparent;
    font-family: 'Microsoft YaHei', 'Source Han Sans', sans-serif;
}

/* 表头样式 - 与hero-stat-grid保持一致 */
.benefits-table th,
.execution-table th {
    padding: 0.8rem 0.5rem;
    background: rgba(255,215,0,0.1);
    color: var(--gold-primary);
    text-align: center;
    border: 1px solid var(--border-gold);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.3;
    word-wrap: break-word;
    hyphens: auto;
    vertical-align: middle;
    width: auto;
}

/* 表格数据单元格样式 */
.benefits-table td,
.execution-table td {
    padding: 0.8rem 0.5rem;
    border: 1px solid var(--border-gold);
    text-align: center;
    background: rgba(30, 25, 20, 0.8);
    color: var(--gold-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.4;
    vertical-align: middle;
    word-wrap: break-word;
    white-space: normal; /* 允许文本换行 */
    overflow-wrap: break-word; /* 强制长单词换行 */
}

/* 备注列特殊处理 - 允许更多文本内容 */
.execution-table td:last-child,
.benefits-table td:last-child {
    text-align: left;
    padding: 0.8rem 1rem;
    max-width: 200px; /* 设置最大宽度 */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere; /* 在任何地方都可以换行 */
}

/* 收益表具体列宽 */
.benefits-table th:nth-child(1) { width: 15%; } /* 触发条件 */
.benefits-table th:nth-child(2) { width: 20%; } /* 操作指令 */
.benefits-table th:nth-child(3) { width: 10%; } /* 伤害 */
.benefits-table th:nth-child(4) { width: 15%; } /* 耐力消耗 */
.benefits-table th:nth-child(5) { width: 40%; } /* 备注 */

/* 处决表具体列宽 */
.execution-table th:nth-child(1) { width: 12%; } /* 处决名 */
.execution-table th:nth-child(2) { width: 10%; } /* 致死时间 */
.execution-table th:nth-child(3) { width: 10%; } /* 总时长 */
.execution-table th:nth-child(4) { width: 12%; } /* 受害者持续时间 */
.execution-table th:nth-child(5) { width: 8%; }  /* 回血量 */
.execution-table th:nth-child(6) { width: 12%; } /* 玩家锁定 */
.execution-table th:nth-child(7) { width: 10%; } /* 尸体物理 */
.execution-table th:nth-child(8) { width: 26%; } /* 备注 - 给更多空间 */

/* 响应式调整 */
@media (max-width: 1200px) {
    .benefits-table,
    .execution-table {
        min-width: 800px;
        font-size: 0.85rem;
    }

    .benefits-table th,
    .benefits-table td,
    .execution-table th,
    .execution-table td {
        padding: 0.6rem 0.4rem;
    }
}
/* ==================== 滑条样式 ==================== */
/* 滑条容器 */
.benefits-table-container::-webkit-scrollbar,
.execution-table-container::-webkit-scrollbar,
.hero-stats-container::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

/* 滑条轨道 */
.benefits-table-container::-webkit-scrollbar-track,
.execution-table-container::-webkit-scrollbar-track,
.hero-stats-container::-webkit-scrollbar-track {
    background: rgba(40, 35, 30, 0.8);
    border-radius: 6px;
    border: 1px solid var(--border-gold);
}

/* 滑条滑块 */
.benefits-table-container::-webkit-scrollbar-thumb,
.execution-table-container::-webkit-scrollbar-thumb,
.hero-stats-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg,
        rgba(255, 215, 0, 0.8) 0%,
        rgba(197, 164, 86, 0.8) 100%);
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
}

/* 滑条滑块悬停效果 */
.benefits-table-container::-webkit-scrollbar-thumb:hover,
.execution-table-container::-webkit-scrollbar-thumb:hover,
.hero-stats-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg,
        var(--gold-primary) 0%,
        var(--gold-secondary) 100%);
    border-color: var(--gold-primary);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* 滑条滑块激活效果 */
.benefits-table-container::-webkit-scrollbar-thumb:active,
.execution-table-container::-webkit-scrollbar-thumb:active,
.hero-stats-container::-webkit-scrollbar-thumb:active {
    background: var(--gold-primary);
    border-color: var(--gold-primary);
}

/* 滑条角落 */
.benefits-table-container::-webkit-scrollbar-corner,
.execution-table-container::-webkit-scrollbar-corner,
.hero-stats-container::-webkit-scrollbar-corner {
    background: rgba(40, 35, 30, 0.8);
    border: 1px solid var(--border-gold);
}

/* Firefox 滑条样式 */
.benefits-table-container,
.execution-table-container,
.hero-stats-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.8) rgba(40, 35, 30, 0.8);
}

/* 通用滑条样式 - 适用于所有可滚动容器 */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.8) rgba(40, 35, 30, 0.8);
}

*::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: rgba(40, 35, 30, 0.8);
    border-radius: 6px;
    border: 1px solid var(--border-gold);
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg,
        rgba(255, 215, 0, 0.8) 0%,
        rgba(197, 164, 86, 0.8) 100%);
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg,
        var(--gold-primary) 0%,
        var(--gold-secondary) 100%);
    border-color: var(--gold-primary);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

*::-webkit-scrollbar-thumb:active {
    background: var(--gold-primary);
    border-color: var(--gold-primary);
}

*::-webkit-scrollbar-corner {
    background: rgba(40, 35, 30, 0.8);
    border: 1px solid var(--border-gold);
}

/* 专精系统特有样式 */
.mastery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.mastery-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(40, 35, 30, 0.9);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-gold);
}

.mastery-table th,
.mastery-table td {
    padding: 1rem;
    border: 1px solid var(--border-gold);
}

.mastery-name {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mastery-name img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.mastery-rating {
    color: var(--gold-primary);
    font-weight: bold;
}

.mastery-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.mastery-reason {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.85rem;
}


/* 专精品质背景色 */
.normal { background-color: #cccccc; color: #333; }
.rare { background-color: #5b9bd5; color: #fff; }
.heroic { background-color: #b399d4; color: #fff; }
.epic { background-color: #ffd700; color: #333; }
.legendary { background-color: #00ced1; color: #fff; }



/* 组合表格样式 */
.combination-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: rgba(40, 35, 30, 0.9);
    border: 1px solid var(--border-gold);
}

.combination-table th,
.combination-table td {
    padding: 0.8rem;
    text-align: center;
    border: 1px solid var(--border-gold);
}

.combination-table th {
    background: rgba(255,215,0,0.1);
    color: var(--gold-primary);
}

.content-block {
    margin: 2rem 0;
    padding: 1.5rem;
    background: rgba(30, 25, 20, 0.6);
    border-left: 3px solid var(--gold-primary);
}

.content-block h3 {
    color: var(--gold-primary);
    margin-bottom: 1rem;
}

 /* 特长系统特有样式 */
.feat-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.feat-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(40, 35, 30, 0.9);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-gold);
}

.feat-table th,
.feat-table td {
    padding: 1rem;
    border: 1px solid var(--border-gold);
}

.feat-name {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.feat-name img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.feat-rating {
    color: var(--gold-primary);
    font-weight: bold;
}

.feat-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.feat-reason {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.85rem;
}

.feat-heroes {
    color: var(--gold-secondary);
    font-size: 0.85rem;
}

.content-block {
    margin: 2rem 0;
    padding: 1.5rem;
    background: rgba(30, 25, 20, 0.6);
    border-left: 3px solid var(--gold-primary);
}

.content-block h3 {
    color: var(--gold-primary);
    margin-bottom: 1rem;
}

.feat-tier-title {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--gold-primary);
    margin: 2rem 0 1rem;
    font-size: 1.5rem;
    border-bottom: 1px solid var(--border-gold);
    padding-bottom: 0.5rem;
}