/* 特色页面样式 */

/* 页面主容器 */
.feature-page {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* 第四部分：背景样式 */
.feature-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.feature-background .bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;

}

/* 特色内容容器 */
.feature-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    padding-top: 70px; /* 为头部导航留出空间 */
}

/* 第一部分：左侧切换区域 */
.feature-sidebar {
    position: relative;
    width: 250px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 0;
}

/* 弧线背景 */
.sidebar-background {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    z-index: 1;
}

.sidebar-bg-line {
    width: auto;
    height: 700px;
    object-fit: contain;
}

/* 切换按钮组 */
.sidebar-tabs {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 700px;
}

/* 切换按钮 */
.tab-button {
    position: absolute;
    cursor: pointer;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* 按钮具体位置 - 按照图2从左边缘向右凸出的弧线分布 */
.tab-button[data-tab="character"] {
    top: 120px;
    left: 125px;
}

.tab-button[data-tab="card"] {
    top: calc(50% - 8px);
    left: 140px;
    transform: translateY(-50%);
}

.tab-button[data-tab="map"] {
    bottom: 150px;
    left: 110px;
}

.tab-button:hover {
    transform: scale(1.05);
}

.tab-button:active {
    transform: scale(0.95);
}

/* 卡牌按钮悬停时保持居中变换 */
.tab-button[data-tab="card"]:hover {
    transform: translateY(-50%) scale(1.05);
}

.tab-button[data-tab="card"]:active {
    transform: translateY(-50%) scale(0.95);
}

/* 按钮切图 */
.tab-button img {
    width: auto;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

/* 默认显示未选中状态 */
.tab-button .tab-active {
    opacity: 0;
    max-width: 95px;
    max-height: 95px;
}

.tab-button .tab-inactive {
    opacity: 1;
    max-width: 80px;
    max-height: 80px;
}

/* 选中状态显示选中切图 */
.tab-button.active .tab-active {
    opacity: 1;
}

.tab-button.active .tab-inactive {
    opacity: 0;
}

/* 绝对定位重叠显示 */
.tab-button .tab-active,
.tab-button .tab-inactive {
    position: absolute;
    top: 0;
    left: 0;
}

.tab-button .tab-inactive {
    position: relative;
}

/* 角色未选中切图单独调整位置 */
.tab-button[data-tab="character"] .tab-inactive {
    position: absolute;
    top: 8px;
    left: 8px;
}

/* 卡牌被选中切图单独调整位置 */
.tab-button[data-tab="card"] .tab-active {
    position: absolute;
    top: -35px;
    left: 40px;
}

/* 卡牌未选中切图中心对齐到被选中位置 */
.tab-button[data-tab="card"] .tab-inactive {
    position: absolute;
    top: -27px;
    left: 42px;
}

/* 地图被选中切图单独调整位置 */
.tab-button[data-tab="map"] .tab-active {
    position: absolute;
    top: 0;
    left: 27px;
}

/* 地图未选中切图单独调整位置 */
.tab-button[data-tab="map"] .tab-inactive {
    position: relative;
    left: 45px;
    top: 10px;
}

/* 第二部分：中间展示区域 */
.feature-display {
    flex: 1;
    height: 100%;
    /* 待实现具体样式 */
}

/* 第三部分：右侧介绍和选择区域 */
.feature-info {
    width: 500px;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

/* 地图内容样式 */
.map-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 30px;
}

/* 地图标题样式 */
.map-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 100px;
    margin-left: -950px;
}

.map-title-image {
    max-width: 300px;
    height: auto;
    object-fit: contain;
}

/* 地图选择区域 */
.map-selection {
    display: flex;
    flex-direction: row;
    gap: 15px;
    flex: 1;
    justify-content: flex-start;
    align-items: center;
    padding: 30px 0 0 0;
    margin-left: -340px;
    margin-top: 200px;
}

/* 单个地图项 */
.map-item {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    height: 120px;
}

.map-item:hover {
    transform: scale(1.02);
}

/* 地图框架 */
.map-frame {
    position: relative;
    width: 200px;
    height: 120px;
    flex-shrink: 0;
    z-index: 10;
}

.map-frame img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
    z-index: 10;
}

/* 默认显示未选中框 */
.map-frame-selected {
    opacity: 0;
}

.map-frame-unselected {
    opacity: 1;
}

/* 选中状态显示选中框 */
.map-item.active .map-frame-selected {
    opacity: 1;
}

.map-item.active .map-frame-unselected {
    opacity: 0;
}

/* 地图信息（序号和名称） */
.map-info {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 20;
}

.map-number {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.map-name {
    font-size: 14px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* 地图图片 */
.map-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    z-index: 1;
}

/* 内容区域通用样式 */
.feature-info > div[data-content] {
    width: 100%;
    height: 100%;
}

/* ========== 角色相关样式 ========== */

/* 中间角色展示区域 */
.character-display {
    position: relative;
    width: 100%;
    height: calc(100vh - 70px); /* 减去导航栏高度，适应实际页面高度 */
    display: flex;
    justify-content: center; /* 居中显示单张图片 */
    align-items: flex-start; /* 改为顶部对齐，避免居中导致的位置偏移 */
    padding: 0; /* 去掉padding，让图片能够完整显示 */
    pointer-events: none; /* 确保展示区域不会阻挡点击事件 */
}

/* 角色主要图片 */
.character-main {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    width: auto; /* 自动宽度，根据高度和图片比例计算 */
    height: calc(100vh - 70px); /* 减去导航栏高度，适应实际页面高度 */
    z-index: 2;
    pointer-events: none; /* 防止图片阻挡点击事件 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.character-main-image {
    width: auto; /* 自动宽度 */
    height: calc(100vh - 70px); /* 减去导航栏高度，适应实际页面高度 */
    object-fit: contain; /* 保持图片完整显示，不裁剪 */
    object-position: center;
    pointer-events: none; /* 防止图片阻挡点击事件 */
}

/* 角色介绍样式 */
.character-intro {
    position: absolute;
    top: 250px;
    left: calc(100% - 610px); /* 与角色选择框左对齐 */
    z-index: 10;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.character-intro-image {
    max-width: 300px;
    height: auto;
    object-fit: contain;
}

/* 角色选择区域 */
.character-selection {
    display: flex;
    flex-direction: column; /* 改为垂直布局，包含角色项和滑块 */
    gap: 0; /* 移除gap，改为单独控制间距 */
    flex: 1;
    justify-content: flex-start;
    align-items: flex-start; /* 左对齐 */
    padding: 0;
    margin-left: -10px; /* 向左移动约160px */
    margin-top: 550px; /* 向下移动更多，从420px增加到520px */
    position: relative;
    z-index: 15; /* 确保选择区域在立绘之上 */
}

/* 角色项容器 */
.character-items {
    display: flex;
    flex-direction: row;
    gap: 30px; /* 角色项之间的间隙 */
    align-items: center;
}

/* 角色选择滑块容器 */
.character-slider-container {
    position: relative;
    margin-top: 10px; /* 在角色选择区域下方10px */
    z-index: 14;
    width: 420px; /* 角色列表总宽度：120px*3 + 30px*2 = 420px */
    height: 20px; /* 滑块高度 */
    align-self: flex-start; /* 左对齐 */
}

/* 白色底部滑块线 */
.character-slider-base {
    width: 100%; /* 与容器宽度一致 */
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
}

/* 蓝色选中滑块 */
.character-slider-active {
    width: 120px; /* 与单个角色选择框宽度一致 */
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0; /* 初始位置在第一个角色下方 */
    z-index: 2;
    transition: left 0.3s ease; /* 添加平滑过渡动画 */
}
  
  /* 单个角色项 */
.character-item {
    position: relative;
    cursor: pointer !important;
    transition: all 0.3s ease;
    display: block; /* 改为block，作为绝对定位子元素的容器 */
    width: 120px; /* 缩小到60%：200px * 0.6 = 120px */
    height: 72px; /* 缩小到60%：120px * 0.6 = 72px */
    pointer-events: auto !important;
    z-index: 20; /* 提高z-index确保在立绘之上 */
}

.character-item:hover {
    transform: scale(1.02);
}

.character-item.active {
    pointer-events: auto;
    cursor: pointer !important;
    transform: scale(1.05) translateY(-5px); /* 选中时放大5%并向上移动5px */
}

.character-item.active:hover {
    transform: scale(1.07) translateY(-5px); /* 选中且悬停时稍微再大一点，保持上移 */
}

/* 角色选择框架 */
.character-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px; /* 缩小到60%：200px * 0.6 = 120px */
    height: 72px; /* 缩小到60%：120px * 0.6 = 72px */
    flex-shrink: 0;
    pointer-events: none; /* 框架不响应点击 */
    z-index: 1; /* 背景框架层级最低 */
}

.character-frame img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease;
    pointer-events: none; /* 图片本身不响应点击，但父容器响应 */
}

/* 角色头像容器 */
.character-avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 72px;
    pointer-events: none;
    z-index: 2; /* 头像在背景框架之上 */
}

.character-avatar img {
    position: absolute;
    top: 8px; /* 留出边框空间 */
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    object-fit: cover;
    border-radius: 4px;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* 默认显示未选中背景 */
.character-frame-selected {
    opacity: 0;
    transform: scale(1); /* 默认大小 */
    transition: all 0.3s ease;
}

.character-frame-unselected {
    opacity: 1;
    transition: all 0.3s ease;
}

/* 选中状态显示选中背景 */
.character-item.active .character-frame-selected {
    opacity: 1;
    transform: scale(1.05); /* 选中背景图片本身也稍微放大 */
    transition: all 0.3s ease;
}

.character-item.active .character-frame-unselected {
    opacity: 0;
}

/* 默认显示未选中角色头像 */
.character-avatar-selected {
    opacity: 0;
}

.character-avatar-unselected {
    opacity: 1;
}

/* 选中状态显示选中角色头像 */
.character-item.active .character-avatar-selected {
    opacity: 1;
}

.character-item.active .character-avatar-unselected {
    opacity: 0;
}

/* 移除旧的角色头像样式，现在使用新的结构 */

/* 角色信息容器已移除，不再需要相关样式 */

/* 响应式设计 */
@media (max-width: 768px) {
    .feature-container {
        flex-direction: column;
        padding-top: 60px;
    }
    
    .feature-sidebar {
        width: 100%;
        height: auto;
        min-height: 120px;
        padding: 20px 0;
        justify-content: center;
    }
    
    .sidebar-tabs {
        display: flex;
        flex-direction: row;
        gap: 20px;
        height: auto;
        width: auto;
        align-items: center;
        justify-content: center;
    }
    
    .tab-button {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
    }
    
    .tab-button[data-tab="card"]:hover,
    .tab-button[data-tab="card"]:active {
        transform: scale(1.05) !important;
    }
    
    .tab-button img {
        max-width: 50px;
    }
    
    .sidebar-background {
        display: none;
    }
    
    .feature-display {
        flex: 1;
        min-height: 300px;
    }
    
    .feature-info {
        width: 100%;
        height: auto;
        min-height: 200px;
        padding: 15px;
    }
    
    /* 移动端地图内容样式 */
    .map-content {
        gap: 20px;
    }
    
    .map-title {
        margin-top: 20px;
    }
    
    .map-title-image {
        max-width: 250px;
    }
    
    .map-selection {
        padding: 0 10px;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .map-item {
        width: 120px;
        height: 80px;
    }
    
    .map-frame {
        width: 120px;
        height: 80px;
    }
    
    .map-info {
        top: 8px;
        left: 8px;
    }
    
    .map-number {
        font-size: 12px;
    }
    
    .map-name {
        font-size: 10px;
    }
} 

/* 卡牌展示区域样式 */
.card-display {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 50px 0;
}

/* 卡牌容器 */
.card-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1000px;
    height: 100%;
}

/* 卡牌展示区域 */
.card-showcase {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 600px;
    height: 400px;
    margin-left: -250px;
}

/* 卡牌虚影样式 */
.card-shadow {
    position: absolute;
    left: 5px;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 1;
    filter: none;
}

.card-shadow-image {
    width: 336px;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    opacity: 0.3;
    filter: blur(1px) brightness(0.7) contrast(0.8);
    transform: translateX(15px) rotate(-12deg) scale(0.95);
    mix-blend-mode: multiply;
    transition: all 0.5s ease;
}

/* 当前卡牌样式 */
.card-main {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 卡牌边框 */
.card-frame {
    position: absolute;
    width: 360px;
    height: auto;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}

/* 卡牌主图 */
.card-main-image {
    width: 336px;
    height: auto;
    object-fit: contain;
    z-index: 1;
    border-radius: 8px;
}

/* 底部特效 */
.card-bottom-effect {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    height: auto;
    object-fit: contain;
    z-index: 5;
    pointer-events: none;
    transition: all 0.5s ease;
}

/* 圆点指示器容器 */
.card-dots {
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 6;
}

/* 单个圆点 */
.card-dot {
    cursor: pointer;
    transition: all 0.3s ease;
}

.card-dot:hover {
    transform: scale(1.1);
}

/* 圆点图片 */
.card-dot-image {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* 箭头样式 */
.card-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 0.3s ease;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

/* 左箭头位置 */
.card-arrow-left {
    left: calc(50% - 263px);
}

/* 右箭头位置 */
.card-arrow-right {
    right: calc(50% - 263px);
}

.card-arrow:hover {
    transform: translateY(-50%) scale(1.1);
}

.card-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

/* 箭头图片 */
.arrow-image {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5));
}

/* 左箭头反转 */
.left-arrow {
    transform: scaleX(-1);
}

/* 卡牌展示动画 */
.card-main-image,
.card-shadow-image,
.card-bottom-effect {
    transition: all 0.5s ease;
}

/* 响应式调整 - 卡牌展示 */
@media (max-width: 768px) {
    .card-container {
        padding: 0 20px;
    }
    
    .card-showcase {
        width: 300px;
        height: 200px;
        margin-left: -135px;
    }
    
    .card-shadow {
        left: 3px;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
        filter: none;
    }
    
    .card-shadow-image {
        width: 192px;
        height: auto;
        opacity: 0.3;
        filter: blur(1px) brightness(0.7) contrast(0.8);
        transform: translateX(10px) rotate(-12deg) scale(0.95);
        mix-blend-mode: multiply;
        transition: all 0.5s ease;
    }
    
    .card-frame {
        width: 216px;
    }
    
    .card-main-image {
        width: 192px;
        height: auto;
    }
    
    /* 移动端底部特效 */
    .card-bottom-effect {
        bottom: -25px;
        width: 216px;
    }
    
    /* 移动端圆点指示器 */
    .card-dots {
        bottom: -75px;
        gap: 12px;
    }
    
    .card-dot-image {
        width: 16px;
        height: 16px;
    }
    
    .arrow-image {
        width: 14px;
        height: 14px;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    }
    
    .card-arrow {
        width: 36px;
        height: 36px;
    }
    
    /* 移动端箭头位置调整 */
    .card-arrow-left {
        left: calc(50% - 121px);
    }
    
    .card-arrow-right {
        right: calc(50% - 121px);
    }
}

/* ========== 卡牌右侧内容样式 ========== */

/* 卡牌内容整体容器 */
.card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 30px;
    padding: 20px 0;
    justify-content: center; /* 垂直居中对齐 */
    align-items: center; /* 水平居中对齐 */
}

/* 卡牌内容对齐容器 */
.card-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px; /* 从30px减少到15px，减小上下间隔 */
    /* 减少向左移动距离，为文字区域留出更多空间 */
    transform: translateX(-200px); /* 从-300px改为-200px，减少向左偏移 */
    /* 移除margin-top，让父容器的居中对齐生效 */
    /* margin-top: 100px; */ 
    align-items: flex-start;
    /* 确保在父容器居中的基础上保持内部对齐 */
    justify-self: center;
    /* 增加整体宽度以容纳更多文字 */
    width: calc(100% + 100px); /* 扩展容器宽度 */
}

/* 卡牌上侧介绍部分 */
.card-intro-section {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 移除margin-top，由wrapper容器统一控制位置 */
    /* 移除padding，因为现在在wrapper容器内统一对齐 */
}

.card-intro-image {
    max-width: 800px; /* 从600px增加到800px，进一步拉宽介绍图片 */
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* 卡牌主要内容区域 - 左右分布 */
.card-main-content {
    display: flex;
    gap: 10px; /* 从40px减少到10px，让两部分非常靠近 */
    flex: 1;
    margin-top: 10px; /* 从30px减少到10px，减小与介绍切图的间距 */
    padding: 0 20px;
    /* 移除transform，由wrapper容器统一控制 */
    /* 确保与介绍切图左对齐 */
    align-items: flex-start;
    /* 与介绍图片保持相同的宽度 */
    max-width: 800px; /* 从600px增加到800px */
    width: 100%;
}

/* 左侧：卡牌分类选择部分 */
.card-categories-section {
    width: 90px; /* 从120px进一步减少到90px，减少左右间隙 */
    display: flex;
    flex-direction: column;
    gap: 0;
}

.card-categories-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 单个分类项 - 简化样式 */
.card-category-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px; /* 从10px减少到8px，进一步减少选中标示与文字的间距 */
    padding: 12px 0; /* 减少垂直padding，从15px减少到12px */
    cursor: pointer;
    transition: all 0.3s ease;
}

.card-category-item:hover {
    transform: translateX(5px);
}

/* 分类选中标示 */
.category-indicator {
    position: relative;
    width: 20px;
    height: 20px;
    opacity: 0;
    transition: all 0.3s ease;
}

.card-category-item.active .category-indicator {
    opacity: 1;
}

.category-selected-mark {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 分类名称 - 简化为加粗文字 */
.category-name {
    font-size: 16px; /* 从18px缩小到16px */
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    transition: color 0.3s ease;
}

.card-category-item.active .category-name {
    color: #01affa; /* 改为指定的蓝色 */
}

/* 右侧：卡牌文字介绍部分 */
.card-descriptions-section {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    /* 扩展宽度到介绍切图的右边缘，这里需要计算介绍图片的宽度 */
    max-width: 450px; /* 从380px增加到450px，向右加宽文字区域 */
}

/* 圆点线条背景 */
.description-line {
    position: absolute;
    left: 50%;
    top: 0;
    width: 12px;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    transform: translateX(-50%);
}

.dot-line-image {
    width: 180px;
    height: auto;
    object-fit: contain;
    display: block;
    position: absolute;
    left: 50%;
    top: 60%; /* 从50%改为60%，向下移动 */
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center;
}

/* 介绍容器 */
.card-description-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    /* 移除背景和边框 */
    background: transparent;
    backdrop-filter: none;
    border: none;
    padding: 30px;
    min-height: 250px;
}

/* 左右布局容器 */
.description-layout {
    display: flex;
    gap: 25px; /* 调整间距以适配更小的圆点 */
    height: 100%;
    align-items: flex-start;
    transform: translateX(-25px); /* 从-40px调整为-25px，稍微往右移动 */
}

/* 左侧圆点容器 */
.description-dots-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    justify-content: flex-start;
    z-index: 10;
    position: relative;
    padding-top: 10px;
    width: 30px;
    height: 150px;
}

/* 右侧文字容器 */
.description-texts-right {
    flex: 1;
    position: relative;
    height: 100%;
}

/* 圆点样式 */
.description-dot {
    cursor: pointer;
    position: relative;
    z-index: 15;
    background: transparent;
}

.description-dot-image {
    width: 4px;
    height: 4px;
}

/* 单个介绍项 */
.card-description-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.5s ease;
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    /* 确保文字项可以占用足够宽度 */
    max-width: none;
}

.card-description-item.active {
    opacity: 1;
    transform: translateX(0);
}

/* 介绍文字 */
.description-text {
    font-size: 15px;
    line-height: 1.8;
    color: #e8f0ff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    margin: 0;
    text-align: justify;
    letter-spacing: 0.5px;
    font-weight: 200; /* 从300调整为200，让字体更细 */
    /* 确保文字可以占用更多宽度 */
    width: 100%;
    max-width: none;
    word-wrap: break-word;
}

/* 响应式调整 - 卡牌右侧内容 */
@media (max-width: 768px) {
    .card-intro-image {
        max-width: 600px; /* 移动端从450px增加到600px，配合桌面端的800px */
        width: 100%;
    }
    
    .card-content-wrapper {
        /* 移动端减少向左移动距离，为文字留出更多空间 */
        transform: translateX(-100px); /* 从-150px改为-100px */
        gap: 10px; /* 移动端也减小间距 */
        /* 移除margin-top，让父容器的居中对齐在移动端也生效 */
        /* margin-top: 60px; */
        justify-self: center;
        /* 移动端也扩展容器宽度 */
        width: calc(100% + 50px); /* 扩展移动端容器宽度 */
    }
    
    .card-main-content {
        flex-direction: column;
        gap: 15px; /* 移动端也减少间距，从30px减少到15px */
        /* 移除transform，由wrapper容器统一控制 */
        align-items: flex-start;
        margin-top: 5px; /* 移动端进一步减小间距 */
        /* 移动端与介绍图片保持相同宽度 */
        max-width: 600px; /* 移动端从450px增加到600px */
        width: 100%;
    }
    
    .card-categories-section {
        /* 移动端使用auto宽度，让内容决定宽度 */
        width: auto;
        align-self: flex-start;
    }
    
    .card-categories-list {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px; /* 从20px减少到15px，让移动端分类项更紧凑 */
    }
    
    .card-category-item {
        padding: 12px 0;
        gap: 6px; /* 移动端进一步减少选中标示与文字的间距 */
    }
    
    .category-name {
        font-size: 14px; /* 移动端进一步缩小到14px */
    }
    
    .card-descriptions-section {
        max-width: none; /* 移除宽度限制，让移动端文字区域也能自由扩展 */
        width: 100%; /* 占满可用空间 */
    }
    
    .description-line {
        left: 50%;
        top: 0;
        opacity: 0.8;
        width: 80px;
        height: 100%;
    }
    
    .dot-line-image {
        height: 80px;
        display: block;
    }
    
    .card-description-container {
        padding: 20px;
        min-height: 200px;
    }
    
    .description-layout {
        gap: 20px;
        transform: translateX(-15px); /* 从-25px调整为-15px，移动端也稍微往右移动 */
    }
    
    .description-dots-left {
        gap: 3px;
        width: 16px;
    }
    
    .description-dot-image {
        width: 3px;
        height: 3px;
    }
    
    .description-text {
        font-size: 14px;
        line-height: 1.6;
        font-weight: 300; /* 移动端也使用较细的字体 */
    }
}