/* 外层主容器：1500px居中、#edf3f9底色 */
.legend-wrap{
    width:1500px;
    margin:20px auto;
    background:#edf3f9;
}

/* 筛选区域 */
.filter-wrap{
    padding:16px;
}
.filter-group{
    margin-bottom:12px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}
/* 筛选标签文字上下居中 */
.filter-label{
    background:#4096ff;
    color:#fff;
    padding:6px 12px;
    border-radius:6px;
    font-size:15px;
    display:inline-flex;
    align-items:center;
    transition: all 0.3s ease;
}
.filter-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
/* 筛选选项 高级悬浮效果 */
.filter-tag{
    padding:6px 12px;
    border:1px solid #ddd;
    background:#fff;
    border-radius:6px;
    text-decoration:none;
    color:#333;
    font-size:15px;
    display:inline-flex;
    align-items:center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.filter-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.6s ease;
}
.filter-tag:hover::before {
    left: 100%;
}
.filter-tag:hover{
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(64,150,255,0.15);
}
.filter-tag.active{
    background:#4096ff;
    border-color:#4096ff;
    color:#fff;
}

/* 版本列表 */
.list-wrap{
    padding:0 0 16px;
}
.list-header,.list-row{
    display:grid;
    grid-template-columns:120px 1fr 110px 110px 90px 130px 80px 110px;
    align-items:center;
    padding:12px 16px;
}
/* 表头第二列（传奇版本名称）文字居中 */
.list-header > div:nth-child(2){
    text-align:center;
}
/* 列表内容第二列保持左对齐不变 */
.list-row > div:nth-child(2){
    text-align:left;
}
/* 列表行高级hover效果 */
.list-row{
    background:#fff;
    transition: all 0.3s ease;
    border-bottom:1px solid #eee;
}
.list-row:hover{
    background:#f7faff !important;
    transform: scale(1.01);
    box-shadow: 0 6px 18px rgba(64,150,255,0.1);
}
.list-header{
    background:#4096ff;
    color:#fff;
    padding:12px;
}

/* ====================== 标签样式（无重复·最终版） ====================== */
.lab-purple{
    background:#935bfa !important;
    padding:5px 10px !important;
    border-radius:5px !important;
    display:inline-flex !important;
    align-items:center !important;
    color:#fff !important;
    transition: all 0.28s ease !important;
}
.lab-red{
    background:#f54b4b !important;
    padding:5px 10px !important;
    border-radius:5px !important;
    display:inline-flex !important;
    align-items:center !important;
    color:#fff !important;
    transition: all 0.28s ease !important;
}
.lab-orange{
    background:#ff9838 !important;
    padding:5px 10px !important;
    border-radius:5px !important;
    display:inline-flex !important;
    align-items:center !important;
    color:#fff !important;
    transition: all 0.28s ease !important;
}
.lab-blue{
    background:#4096ff !important;
    padding:5px 10px !important;
    border-radius:5px !important;
    display:inline-flex !important;
    align-items:center !important;
    color:#fff !important;
    transition: all 0.28s ease !important;
}
.lab-green{
    background:#28bd78 !important;
    padding:5px 10px !important;
    border-radius:5px !important;
    display:inline-flex !important;
    align-items:center !important;
    color:#fff !important;
    transition: all 0.28s ease !important;
}

/* 悬浮特效（只写1次，全覆盖） */
.lab-purple:hover{
    background:#8249e8 !important;
    transform: translateY(-2px) !important;
    box-shadow:0 4px 10px rgba(147,91,250,0.3) !important;
}
.lab-red:hover{
    background:#e83c3c !important;
    transform: translateY(-2px) !important;
    box-shadow:0 4px 10px rgba(245,75,75,0.3) !important;
}
.lab-orange:hover{
    background:#f28c2b !important;
    transform: translateY(-2px) !important;
    box-shadow:0 4px 10px rgba(255,152,56,0.3) !important;
}
.lab-blue:hover{
    background:#3085ee !important;
    transform: translateY(-2px) !important;
    box-shadow:0 4px 10px rgba(64,150,255,0.3) !important;
}
.lab-green:hover{
    background:#22aa6c !important;
    transform: translateY(-2px) !important;
    box-shadow:0 4px 10px rgba(40,189,120,0.3) !important;
}
/* ====================================================================== */

/* 按钮流光特效 */
.btn-blue{
    background:#4096ff !important;
    color:#fff !important;
    padding:5px 10px !important;
    border-radius:5px !important;
    text-decoration:none !important;
    display:inline-flex !important;
    align-items:center !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}
.btn-blue::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}
.btn-blue:hover::before {
    left: 100%;
}
.btn-blue:hover{
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 14px rgba(64,150,255,0.25) !important;
}

/* 分页 高级样式 */
.legend-pagination{
    padding:10px 16px 30px;
    text-align:center;
}
.legend-pagination .page-numbers{
    border:1px solid #ccc;
    padding:5px 10px;
    margin:0 3px;
    text-decoration:none;
    color:#333;
    border-radius:3px;
    transition: all 0.3s ease;
}
.legend-pagination .page-numbers:hover{
    background:#f0f7ff;
    border-color:#4096ff;
    transform: translateY(-2px);
}
.legend-pagination .page-numbers.current{
    background:#4096ff;
    color:#fff;
    border-color:#4096ff;
    box-shadow: 0 3px 8px rgba(64,150,255,0.2);
}

/*排行卡片 流光+悬浮高级效果 */
.stat-row{
    display:grid !important;
    grid-template-columns:745px 745px !important;
    gap:10px !important;
    padding:0 16px 20px !important;
    width:100% !important;
    justify-content:center !important;
}
.stat-card{
    width:745px !important;
    background:#fff !important;
    border-radius:12px !important;
    padding:24px !important;
    margin:0 !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.35s ease !important;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(64,150,255,0.06), transparent);
    transition: left 0.65s ease;
}
.stat-card:hover::before {
    left: 100%;
}
.stat-card:hover{
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(64,150,255,0.12) !important;
}
.stat-title{
    font-size:18px !important;
    border-left:5px solid #4096ff;
    padding-left:12px;
    margin:0 0 20px;
}
.stat-list{
    list-style:none;
    padding:0;
    margin:0;
}
.stat-list li{
    display:flex;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px dashed #ddd;
    font-size:15px !important;
    transition: background 0.25s ease;
}
.stat-list li:hover{
    background:#f7faff;
    padding-left: 4px;
}
.stat-list li:last-child{
    border-bottom:none;
}
.num{
    color:#4096ff;
    font-weight:bold;
    font-size:18px !important;
}

/* 排行卡片链接 黑字、无下划线、hover不变色 */
.stat-list a {
    color: #333 !important;
    text-decoration: none !important;
}
.stat-list a:hover {
    color: #333 !important;
    text-decoration: none !important;
}

.pagination {
    margin: 30px 0;
    text-align: center;
}
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f7f9fc;
    color:#333;
    text-decoration: none;
    font-size:14px;
}
.pagination a.page-numbers:hover{
    background:#e1ecff;
}
.pagination span.page-numbers.current{
    background:#2b78f0;
    color:#ffffff;
}
/* 上一页、下一页，取消圆形，改成自适应圆角按钮 */
.pagination .prev,
.pagination .next{
    width:auto;
    height:36px;
    padding:0 16px;
    border-radius:10px;
}
.pagination .dots{
    background:transparent;
}