/* 导航条样式 - 游戏攻略站点 · 美化版 */
.l2-nav-bar {
    background: transparent;
    border-bottom: 1px solid rgba(124, 136, 255, 0.2);
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background-color: rgba(10, 10, 10, 0.25);
}

.l2-nav-bar-inner {
    max-width: 1800px;
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    min-height: 56px;
    gap: 2px 6px;
}

.l2-nav-bar a {
    color: #ffffff;
    text-decoration: none;
    padding: 14px 12px;
    font-size: 15px;
    font-family: 'Microsoft YaHei', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 1px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    position: relative;
    margin: 4px 2px;
    border-radius: 3px;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    flex-shrink: 0;
}

.l2-nav-bar a:hover {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(124, 136, 255, 0.18) 0%, rgba(124, 136, 255, 0.05) 100%);
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(124, 136, 255, 0.25);
}

/* ===== 覆盖 Bootstrap .container 默认宽度，让主体内容区更宽 ===== */
.container {
    max-width: 1320px !important;
    width: 100% !important;
}

.l2-nav-bar a::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #7c88ff 50%, #a8b2ff 100%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(124, 136, 255, 0.8);
}

.l2-nav-bar a:hover::after {
    width: 75%;
}



/* 内容区 — 表格和小贴士样式 */
.l2-table-wrap {
    overflow-x: auto;
    margin: 30px 0;
    border-radius: 10px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 136, 255, 0.25);
}

.l2-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
    font-size: 14px;
    background: #0f0f1e;
}

.l2-table thead tr {
    background: linear-gradient(180deg, #1a1a2e 0%, #252545 100%);
}

.l2-table th {
    padding: 14px 18px;
    text-align: center;
    color: #e8e8ff;
    font-weight: 600;
    letter-spacing: 1px;
    border-bottom: 2px solid #7c88ff;
    font-size: 14px;
}

.l2-table th:first-child {
    border-top-left-radius: 10px;
}

.l2-table th:last-child {
    border-top-right-radius: 10px;
}

.l2-table td {
    padding: 12px 16px;
    color: #c8c8e0;
    text-align: center;
    border: none;
    border-bottom: 1px solid rgba(124, 136, 255, 0.08);
    transition: background 0.25s ease, color 0.25s ease;
}

.l2-table tbody tr:nth-child(even) {
    background: rgba(124, 136, 255, 0.035);
}

.l2-table tbody tr:hover {
    background: linear-gradient(90deg, rgba(124, 136, 255, 0.12) 0%, rgba(124, 136, 255, 0.04) 50%, rgba(124, 136, 255, 0.12) 100%);
    color: #ffffff;
}

.l2-table tbody tr:hover td {
    color: #ffffff;
}

/* 小贴士区块 */
.l2-tip {
    background: linear-gradient(135deg, rgba(124, 136, 255, 0.15) 0%, rgba(124, 136, 255, 0.05) 100%);
    padding: 20px 24px;
    margin: 30px 0;
    border-radius: 4px;
    color: #e0e0f0;
    font-size: 14px;
    line-height: 1.8;
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
}

.l2-tip strong {
    color: #7c88ff;
}

/* 内容页通用 header 样式（sec1.html, sec2.html 等） */
.header-outs {
    position: relative;
    background: #0a0a0a;
}

.header-outs .header-w3layouts {
    padding-top: 70px;
    padding-bottom: 10px;
}

/* 首页专属：背景图从页面最顶端开始，占满整个视口 */
#home.header-outs {
    position: relative;
    height: 100vh;
    min-height: 800px;
    background: transparent;
}

#home .header-w3layouts {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 70px;
    padding-bottom: 0;
    z-index: 20;
}

#home .slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#home .slide {
    height: 100%;
    min-height: 800px;
}

#home .slide__img {
    height: 100%;
}

/* ===================== 暗色主题 ===================== */
body {
    background: #0a0a14 !important;
    color: #d8d8e8;
}

/* 整体页面背景 */
.header-outs,
.about-inner,
section.about-inner {
    background: #0a0a14;
    color: #d8d8e8;
}

/* 统一内容区上下内边距 — 替代 Bootstrap py-* 类 */
.section-tb-padding {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.section-tb-padding .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 标题（如"一、日常练级 · 等级猎场分布"等） */
.about-inner h3.title,
section.about-inner .title {
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(124, 136, 255, 0.35);
}

/* 正文段落 */
.about-inner p,
.about-inner p[style] {
    color: #c8c8d8 !important;
}

/* 表格已经是暗色，这里微调让边框更贴合 */
.l2-table {
    background: #13132a;
}

.l2-table td {
    color: #d8d8e8;
}

/* 小贴士 */
.l2-tip {
    color: #d8d8e8;
}

/* 等级区间字体颜色区分（每10级一种颜色，整行变色） */
.l2-table tr.lvl-1-9 td {
    color: #9e9e9e;
    font-weight: 600;
}

.l2-table tr.lvl-10-19 td {
    color: #4fc3f7;
    font-weight: 600;
}

.l2-table tr.lvl-20-29 td {
    color: #66bb6a;
    font-weight: 600;
}

.l2-table tr.lvl-30-39 td {
    color: #9ccc65;
    font-weight: 600;
}

.l2-table tr.lvl-40-49 td {
    color: #ffee58;
    font-weight: 600;
}

.l2-table tr.lvl-50-59 td {
    color: #ffca28;
    font-weight: 600;
}

.l2-table tr.lvl-60-69 td {
    color: #ffa726;
    font-weight: 600;
}

.l2-table tr.lvl-70-79 td {
    color: #ff7043;
    font-weight: 600;
}

.l2-table tr.lvl-80-89 td {
    color: #ef5350;
    font-weight: 700;
}

.l2-table tr.lvl-90-99 td {
    color: #ba68c8;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(186, 104, 200, 0.4);
}

.l2-table tr.lvl-100-plus td {
    color: #f06292;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(240, 98, 146, 0.5);
}

/* 页脚暗色 */
footer.py-2,
footer {
    background: #05050d !important;
    color: #c8c8d8;
    border-top: 1px solid rgba(124, 136, 255, 0.25);
}

footer .footer-below p,
footer .footer-below p a {
    color: #8a8ab0;
}

footer .icons ul li a span {
    color: #a0a0c0;
}

/* ============= 副本内容组件 ============= */

/* 分隔区块：每一大节之间加一个紫色左竖线 */
.l2-section-block {
    margin: 50px 0;
    padding: 30px 26px;
    background: rgba(20, 20, 36, 0.7);
    border: 1px solid rgba(124, 136, 255, 0.2);
    border-radius: 8px;
}

.l2-section-title {
    font-size: 22px;
    color: #ffffff;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(124, 136, 255, 0.35);
    letter-spacing: 1px;
}

.l2-subtitle {
    font-size: 17px;
    color: #c8c8e0;
    margin: 24px 0 12px;
    padding-left: 0;
}

/* 列表（规则清单等） */
.l2-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 20px;
}

.l2-list li {
    color: #d0d0e0;
    font-size: 14.5px;
    padding: 7px 12px 7px 24px;
    margin: 4px 0;
    background: rgba(124, 136, 255, 0.04);
    border-radius: 4px;
    position: relative;
    line-height: 1.7;
}

.l2-list li::before {
    content: "▸";
    color: #7c88ff;
    position: absolute;
    left: 10px;
    top: 7px;
}

.l2-list li strong {
    color: #e8e8ff;
    margin-right: 6px;
}

/* 通用卡片网格 */
.l2-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 20px 0;
}

.l2-grid-1 {
    grid-template-columns: 1fr;
}

.l2-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.l2-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.l2-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1200px) {
    .l2-grid, .l2-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .l2-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .l2-grid, .l2-grid-2, .l2-grid-3, .l2-grid-4 { grid-template-columns: 1fr; }
}

.l2-card {
    background: #131328;
    border: 1px solid rgba(124, 136, 255, 0.18);
    border-radius: 10px;
    padding: 18px 20px;
    transition: all 0.25s ease;
    position: relative;
}

.l2-card-hover:hover {
    transform: translateY(-4px);
    border-color: #7c88ff;
    box-shadow: 0 8px 22px rgba(124, 136, 255, 0.2);
}

.l2-card-title {
    font-size: 17px;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.l2-card-meta {
    color: #9a9ac0;
    font-size: 13px;
    margin-bottom: 10px;
}

.l2-card-body {
    color: #c8c8d8;
    font-size: 14px;
    line-height: 1.7;
}

/* 副本房间卡片 - 编号 */
.room-card {
    text-align: center;
    padding: 22px 20px;
}

.room-num {
    display: inline-block;
    width: 44px;
    height: 44px;
    line-height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2d2d5a 0%, #7c88ff 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(124, 136, 255, 0.35);
}

.room-card h5 {
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.room-card p {
    color: #c0c0d8;
    font-size: 13.5px;
    line-height: 1.8;
    margin: 0;
}

/* 队伍组成卡片 */
.party-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 20px 0;
}

@media (max-width: 1100px) {
    .party-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .party-grid { grid-template-columns: 1fr; }
}

.party-role {
    background: #13132a;
    border: 1px solid rgba(124, 136, 255, 0.2);
    border-radius: 8px;
    padding: 14px 12px;
    text-align: center;
    transition: all 0.25s ease;
}

.party-role:hover {
    border-color: #7c88ff;
    background: #1a1a34;
}

.role-icon {
    font-size: 22px;
    display: block;
    margin-bottom: 6px;
}

.role-name {
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    display: block;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.role-desc {
    color: #a8a8c8;
    font-size: 12.5px;
    line-height: 1.6;
    display: block;
}

/* Boss 卡片详情 */
.boss-card {
    margin: 16px 0;
    padding: 20px 24px;
}

.boss-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(124, 136, 255, 0.2);
}

.boss-name {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.boss-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 10px 0 14px;
}

@media (max-width: 820px) {
    .boss-info { grid-template-columns: 1fr; }
}

.boss-info-item {
    background: rgba(124, 136, 255, 0.05);
    border-radius: 6px;
    padding: 8px 12px;
    color: #d0d0e0;
    font-size: 13.5px;
    line-height: 1.6;
}

.boss-info-item span {
    color: #9ca0d0;
    margin-right: 4px;
}

.boss-tactic {
    color: #d0d0e0;
    font-size: 14px;
    line-height: 1.85;
    padding: 10px 14px;
    background: rgba(124, 136, 255, 0.05);
    border-radius: 4px;
}

.boss-tactic strong {
    color: #ffffff;
}

/* 副本流程步骤条 */
.l2-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.l2-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #131328;
    border: 1px solid rgba(124, 136, 255, 0.2);
    border-radius: 6px;
    padding: 14px 18px;
}

.l2-step-num {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #2d2d5a 0%, #7c88ff 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(124, 136, 255, 0.35);
}

.l2-step > div:last-child {
    flex: 1;
    color: #d0d0e0;
    font-size: 14.5px;
    line-height: 1.85;
}

.l2-step > div:last-child strong {
    color: #ffffff;
}

/* 房间分布图 */
.room-map {
    background: #131328;
    border: 1px solid rgba(124, 136, 255, 0.18);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

.map-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.map-row:last-child {
    margin-bottom: 0;
}

.map-cell {
    flex: 1;
    max-width: 260px;
    min-height: 70px;
    background: rgba(124, 136, 255, 0.07);
    border: 1px solid rgba(124, 136, 255, 0.25);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.map-cell-small {
    max-width: 180px;
    background: rgba(124, 136, 255, 0.05);
}

.map-cell-boss {
    background: linear-gradient(135deg, rgba(255, 140, 140, 0.18) 0%, rgba(124, 136, 255, 0.15) 100%);
    border-color: #ff8c8c;
    min-height: 80px;
    box-shadow: 0 0 16px rgba(255, 140, 140, 0.35);
}

.map-cell-empty {
    background: transparent;
    border: 2px dashed rgba(124, 136, 255, 0.15);
    color: #4a4a6a;
    font-size: 18px;
    max-width: 100px;
}

.cell-num {
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 4px;
}

.cell-name {
    color: #c8c8e0;
    font-size: 12.5px;
    text-align: center;
    line-height: 1.4;
}

.map-cell-boss .cell-num,
.map-cell-boss .cell-name {
    color: #ffdddd;
}

/* 房间详情卡片 */
.room-detail-card {
    padding: 18px 20px;
}

.room-detail-card h5 {
    color: #ffffff;
    font-size: 15.5px;
    margin-bottom: 10px;
}

.room-detail-card p {
    color: #c0c0d8;
    font-size: 13.5px;
    line-height: 1.75;
    margin: 4px 0;
}

.room-detail-card p strong {
    color: #e0e0f5;
    margin-right: 4px;
}

/* 总结卡片 */
.summary-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px 24px;
}

.summary-icon {
    font-size: 30px;
    line-height: 1;
    flex: 0 0 auto;
    padding-top: 2px;
}

.summary-body {
    flex: 1;
}

.summary-body h5 {
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.summary-body p {
    color: #c8c8d8;
    font-size: 14px;
    line-height: 1.85;
    margin: 0;
}

.l2-summary-block {
    background: linear-gradient(180deg, rgba(124, 136, 255, 0.08) 0%, rgba(20, 20, 36, 0.7) 100%);
}

.l2-big-note {
    margin-top: 24px;
    padding: 18px 24px;
    background: rgba(124, 136, 255, 0.1);
    border: 1px dashed #7c88ff;
    border-radius: 8px;
    color: #e8e8ff;
    font-size: 15px;
    line-height: 1.9;
    text-align: center;
}

.l2-big-note strong {
    color: #ffffff;
    font-weight: 700;
}

/* 标签(tag)通用 */
.tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.8;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0 2px;
    white-space: nowrap;
}

.tag-gold {
    color: #3a2a00;
    background: #ffd24d;
    box-shadow: 0 0 8px rgba(255, 210, 77, 0.35);
}

.tag-purple {
    color: #ffffff;
    background: #7c88ff;
    box-shadow: 0 0 8px rgba(124, 136, 255, 0.35);
}

.tag-red {
    color: #ffffff;
    background: #ef5350;
    box-shadow: 0 0 8px rgba(239, 83, 80, 0.3);
}

.tag-blue {
    color: #ffffff;
    background: #42a5f5;
    box-shadow: 0 0 8px rgba(66, 165, 245, 0.3);
}

.tag-green {
    color: #0a2a00;
    background: #7cd992;
    box-shadow: 0 0 8px rgba(124, 217, 146, 0.3);
}

/* 小贴士区块 — 更丰满样式 */
.l2-tip {
    background: linear-gradient(135deg, rgba(124, 136, 255, 0.16) 0%, rgba(124, 136, 255, 0.05) 100%);
    padding: 18px 22px;
    margin: 24px 0;
    border-radius: 6px;
    color: #d8d8e8;
    font-size: 14px;
    line-height: 1.9;
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
}

.l2-tip strong {
    color: #ffffff;
    margin-right: 6px;
}

/* 响应式 */
@media (max-width: 1200px) {
    .l2-nav-bar-inner {
        padding: 6px 10px;
        justify-content: center;
    }
    .l2-nav-bar a {
        padding: 12px 8px;
        font-size: 14px;
        letter-spacing: 0.5px;
    }
}

@media (max-width: 768px) {
    .l2-nav-bar-inner {
        padding: 6px 8px;
    }
    .l2-nav-bar a {
        padding: 10px 6px;
        font-size: 13px;
        letter-spacing: 0.5px;
    }
    .header-outs .header-w3layouts {
        padding-top: 130px;
    }
    #home .header-w3layouts {
        padding-top: 130px;
    }
}

@media (max-width: 480px) {
    .l2-nav-bar a {
        padding: 8px 10px;
        font-size: 12px;
        letter-spacing: 0.3px;
    }
    .header-outs .header-w3layouts {
        padding-top: 160px;
    }
    #home .header-w3layouts {
        padding-top: 160px;
    }
}

/* ===== 卡片颜色主题（8 色） =====
 * 用法：在卡片 div 上加 "cc-颜色名" 类
 * 例：<div class="l2-card boss-card cc-blue">
 */

/* 默认：不指定就是 紫色 */
.cc-purple, .l2-card.cc-purple { border-color: #7c88ff; box-shadow: 0 4px 14px rgba(124, 136, 255, 0.22); }
.cc-purple .l2-card-title,
.cc-purple .boss-name,
.cc-purple .summary-body h5,
.cc-purple .room-card h5,
.cc-purple .room-detail-card h5 { color: #d4d8ff; }
.cc-purple .room-num,
.cc-purple .l2-step-num { background: linear-gradient(135deg, #4a4a8a 0%, #7c88ff 100%); box-shadow: 0 4px 14px rgba(124, 136, 255, 0.5); }
.cc-purple .boss-header,
.cc-purple .room-detail-card h5 { border-bottom-color: rgba(124, 136, 255, 0.3); }
.cc-purple .boss-tactic { background: rgba(124, 136, 255, 0.08); }

/* 蓝色 */
.cc-blue, .l2-card.cc-blue { border-color: #42a5f5; box-shadow: 0 4px 14px rgba(66, 165, 245, 0.22); }
.cc-blue .l2-card-title,
.cc-blue .boss-name,
.cc-blue .summary-body h5,
.cc-blue .room-card h5,
.cc-blue .room-detail-card h5 { color: #b8dcff; }
.cc-blue .room-num,
.cc-blue .l2-step-num { background: linear-gradient(135deg, #1565c0 0%, #42a5f5 100%); box-shadow: 0 4px 14px rgba(66, 165, 245, 0.5); }
.cc-blue .boss-header,
.cc-blue .room-detail-card h5 { border-bottom-color: rgba(66, 165, 245, 0.3); }
.cc-blue .boss-tactic { background: rgba(66, 165, 245, 0.08); }

/* 金色 */
.cc-gold, .l2-card.cc-gold { border-color: #ffca28; box-shadow: 0 4px 14px rgba(255, 202, 40, 0.25); }
.cc-gold .l2-card-title,
.cc-gold .boss-name,
.cc-gold .summary-body h5,
.cc-gold .room-card h5,
.cc-gold .room-detail-card h5 { color: #ffe9a0; }
.cc-gold .room-num,
.cc-gold .l2-step-num { background: linear-gradient(135deg, #a67c00 0%, #ffca28 100%); box-shadow: 0 4px 14px rgba(255, 202, 40, 0.5); }
.cc-gold .boss-header,
.cc-gold .room-detail-card h5 { border-bottom-color: rgba(255, 202, 40, 0.35); }
.cc-gold .boss-tactic { background: rgba(255, 202, 40, 0.08); }

/* 红色 */
.cc-red, .l2-card.cc-red { border-color: #ef5350; box-shadow: 0 4px 14px rgba(239, 83, 80, 0.25); }
.cc-red .l2-card-title,
.cc-red .boss-name,
.cc-red .summary-body h5,
.cc-red .room-card h5,
.cc-red .room-detail-card h5 { color: #ffc4c2; }
.cc-red .room-num,
.cc-red .l2-step-num { background: linear-gradient(135deg, #8e2a26 0%, #ef5350 100%); box-shadow: 0 4px 14px rgba(239, 83, 80, 0.5); }
.cc-red .boss-header,
.cc-red .room-detail-card h5 { border-bottom-color: rgba(239, 83, 80, 0.35); }
.cc-red .boss-tactic { background: rgba(239, 83, 80, 0.08); }

/* 绿色 */
.cc-green, .l2-card.cc-green { border-color: #66bb6a; box-shadow: 0 4px 14px rgba(102, 187, 106, 0.25); }
.cc-green .l2-card-title,
.cc-green .boss-name,
.cc-green .summary-body h5,
.cc-green .room-card h5,
.cc-green .room-detail-card h5 { color: #b9e4bc; }
.cc-green .room-num,
.cc-green .l2-step-num { background: linear-gradient(135deg, #2e7d32 0%, #66bb6a 100%); box-shadow: 0 4px 14px rgba(102, 187, 106, 0.5); }
.cc-green .boss-header,
.cc-green .room-detail-card h5 { border-bottom-color: rgba(102, 187, 106, 0.35); }
.cc-green .boss-tactic { background: rgba(102, 187, 106, 0.08); }

/* 青色 */
.cc-teal, .l2-card.cc-teal { border-color: #26c6da; box-shadow: 0 4px 14px rgba(38, 198, 218, 0.25); }
.cc-teal .l2-card-title,
.cc-teal .boss-name,
.cc-teal .summary-body h5,
.cc-teal .room-card h5,
.cc-teal .room-detail-card h5 { color: #a8eef5; }
.cc-teal .room-num,
.cc-teal .l2-step-num { background: linear-gradient(135deg, #006064 0%, #26c6da 100%); box-shadow: 0 4px 14px rgba(38, 198, 218, 0.5); }
.cc-teal .boss-header,
.cc-teal .room-detail-card h5 { border-bottom-color: rgba(38, 198, 218, 0.35); }
.cc-teal .boss-tactic { background: rgba(38, 198, 218, 0.08); }

/* 粉色 */
.cc-pink, .l2-card.cc-pink { border-color: #ec407a; box-shadow: 0 4px 14px rgba(236, 64, 122, 0.25); }
.cc-pink .l2-card-title,
.cc-pink .boss-name,
.cc-pink .summary-body h5,
.cc-pink .room-card h5,
.cc-pink .room-detail-card h5 { color: #ffc0d4; }
.cc-pink .room-num,
.cc-pink .l2-step-num { background: linear-gradient(135deg, #880e4f 0%, #ec407a 100%); box-shadow: 0 4px 14px rgba(236, 64, 122, 0.5); }
.cc-pink .boss-header,
.cc-pink .room-detail-card h5 { border-bottom-color: rgba(236, 64, 122, 0.35); }
.cc-pink .boss-tactic { background: rgba(236, 64, 122, 0.08); }

/* 橙色 */
.cc-orange, .l2-card.cc-orange { border-color: #ffa726; box-shadow: 0 4px 14px rgba(255, 167, 38, 0.25); }
.cc-orange .l2-card-title,
.cc-orange .boss-name,
.cc-orange .summary-body h5,
.cc-orange .room-card h5,
.cc-orange .room-detail-card h5 { color: #ffd9a0; }
.cc-orange .room-num,
.cc-orange .l2-step-num { background: linear-gradient(135deg, #bf360c 0%, #ffa726 100%); box-shadow: 0 4px 14px rgba(255, 167, 38, 0.5); }
.cc-orange .boss-header,
.cc-orange .room-detail-card h5 { border-bottom-color: rgba(255, 167, 38, 0.35); }
.cc-orange .boss-tactic { background: rgba(255, 167, 38, 0.08); }

/* 地图房间色块的颜色主题 */
.map-cell.cc-purple { background: rgba(124, 136, 255, 0.12); border-color: #7c88ff; }
.map-cell.cc-blue { background: rgba(66, 165, 245, 0.12); border-color: #42a5f5; }
.map-cell.cc-gold { background: rgba(255, 202, 40, 0.12); border-color: #ffca28; }
.map-cell.cc-red { background: rgba(239, 83, 80, 0.12); border-color: #ef5350; }
.map-cell.cc-green { background: rgba(102, 187, 106, 0.12); border-color: #66bb6a; }
.map-cell.cc-teal { background: rgba(38, 198, 218, 0.12); border-color: #26c6da; }
.map-cell.cc-pink { background: rgba(236, 64, 122, 0.12); border-color: #ec407a; }
.map-cell.cc-orange { background: rgba(255, 167, 38, 0.12); border-color: #ffa726; }

/* ===== 阵营卡片（黎明/黄昏） ===== */
.faction-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 20px 0 30px;
}
@media (max-width: 768px) {
    .faction-overview { grid-template-columns: 1fr; }
}

.faction-card {
    background: linear-gradient(180deg, rgba(15, 15, 30, 0.9) 0%, rgba(20, 20, 40, 0.7) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px 28px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.faction-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: currentColor;
    opacity: 0.6;
}

.faction-card.faction-dawn {
    border-top-color: #ffca28;
}

.faction-card.faction-dusk {
    border-top-color: #7c88ff;
}

.faction-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.faction-desc {
    color: #c0c0d4;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.faction-section {
    margin-bottom: 18px;
}

.faction-section:last-child {
    margin-bottom: 0;
}

.faction-section-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    display: inline-block;
}

.faction-card ul {
    padding-left: 0;
}

/* 暗色优化 - 确保表格在暗色背景下可读 */
.l2-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(10, 10, 20, 0.5);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    margin: 20px 0;
}

.l2-table th {
    background: linear-gradient(135deg, #1a1a34 0%, #2d2d55 100%);
    color: #ffffff;
    font-weight: 600;
    padding: 14px 12px;
    text-align: center;
    font-size: 14px;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}

.l2-table td {
    padding: 12px;
    color: #c8c8d8;
    font-size: 13.5px;
    line-height: 1.7;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.l2-table tbody tr:hover {
    background: rgba(124, 136, 255, 0.08);
}

.l2-table tbody tr:last-child td {
    border-bottom: none;
}

/* 等级行颜色 - 确保在暗色背景下可读 */
.l2-table tr.lvl-20-29 td { color: #9e9e9e; font-weight: 500; }
.l2-table tr.lvl-30-39 td { color: #7fd1ff; font-weight: 500; }
.l2-table tr.lvl-40-49 td { color: #a5e88a; font-weight: 500; }
.l2-table tr.lvl-50-59 td { color: #ffd54f; font-weight: 600; }
.l2-table tr.lvl-60-69 td { color: #ffab40; font-weight: 600; }
.l2-table tr.lvl-70-79 td { color: #ff8a80; font-weight: 600; }
.l2-table tr.lvl-80-89 td { color: #e08aff; font-weight: 700; }
.l2-table tr.lvl-90-99 td { color: #b39ddb; font-weight: 700; }
.l2-table tr.lvl-100-110 td { color: #ff9999; font-weight: 700; }

/* table-wrap 容器 */
.table-wrap {
    margin: 20px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 内容大段落中的 strong 加粗 - 提升对比度 */
.l2-section-block strong {
    color: #ffffff;
}

/* 在暗色背景下的普通段落文字样式 */
.l2-section-block p {
    line-height: 1.9;
}

/* ===== R~R99 武器防具专属样式 ===== */

/* 套装卡片网格 - 响应式 */
.r-set-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 24px 0;
}
@media (max-width: 768px) {
    .r-set-grid { grid-template-columns: 1fr; }
}

/* 套装卡片基础样式 */
.r-set-card {
    background: #15152a;
    border: 1px solid rgba(124, 136, 255, 0.25);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.25s ease;
}
.r-set-card:hover {
    transform: translateY(-2px);
}
.r-set-card.r95 { border-color: rgba(255, 167, 38, 0.3); }
.r-set-card.r95:hover { box-shadow: 0 8px 24px rgba(255, 167, 38, 0.18); }
.r-set-card.r99 {
    border-color: rgba(239, 83, 80, 0.3);
    background: linear-gradient(180deg, #1a1428 0%, #15152a 100%);
}
.r-set-card.r99:hover { box-shadow: 0 8px 24px rgba(239, 83, 80, 0.18); }

/* 套装卡片头部 */
.r-set-header {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    background: rgba(124, 136, 255, 0.08);
    border-bottom: 1px solid rgba(124, 136, 255, 0.2);
}
.r-set-card.r95 .r-set-header { background: rgba(255, 167, 38, 0.08); border-bottom-color: rgba(255, 167, 38, 0.2); }
.r-set-card.r99 .r-set-header { background: rgba(239, 83, 80, 0.08); border-bottom-color: rgba(239, 83, 80, 0.2); }
.r-set-icon { font-size: 24px; line-height: 1; }
.r-set-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 3px 0;
}
.r-set-type {
    color: #9ca0c8;
    font-size: 12px;
    letter-spacing: 0.5px;
}

/* 套装卡片内容 */
.r-set-body { padding: 14px 18px 18px 18px; }
.r-effect-group { margin-bottom: 12px; }
.r-effect-group:last-child { margin-bottom: 0; }
.r-effect-title {
    color: #b8c0e8;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 1px dashed rgba(124, 136, 255, 0.15);
}
.r-set-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.r-set-card ul li {
    color: #d0d0e0;
    font-size: 13px;
    line-height: 1.7;
    padding: 4px 0 4px 16px;
    position: relative;
}
.r-set-card ul li::before {
    content: "▸";
    color: #7c88ff;
    position: absolute;
    left: 0;
}
.r-set-card.r95 ul li::before { color: #ffa726; }
.r-set-card.r99 ul li::before { color: #ef5350; }
.r-set-card ul li strong {
    color: #ffffff;
    font-weight: 600;
}

/* 提示/警告框 */
.r-tip-box {
    background: linear-gradient(135deg, rgba(124, 136, 255, 0.1) 0%, rgba(124, 136, 255, 0.04) 100%);
    border: 1px solid rgba(124, 136, 255, 0.3);
    border-radius: 8px;
    padding: 18px 22px;
    margin: 24px 0;
    color: #d8d8e8;
    font-size: 14px;
    line-height: 1.9;
}
.r-tip-box strong { color: #ffffff; font-weight: 600; margin-right: 6px; }
.r-warn-box {
    background: linear-gradient(135deg, rgba(239, 83, 80, 0.12) 0%, rgba(239, 83, 80, 0.04) 100%);
    border: 1px solid rgba(239, 83, 80, 0.35);
    border-radius: 8px;
    padding: 18px 22px;
    margin: 24px 0;
    color: #e8d8d8;
    font-size: 14px;
    line-height: 1.9;
}
.r-warn-box strong { color: #ffcccc; font-weight: 700; }