/* ==========================================================================
   1. 面包屑与头部定制样式
   ========================================================================== */
/*.rummy-header > .header-wrap {*/
/*    justify-content: flex-start;*/
/*    gap: 40px;*/
/*}*/
.main-nav {
    color: var(--text-white);
    font-size: 14px;
}
.main-nav > i {
    padding: 0 10px;
}
.main-nav > span {
    font-size: 12px;
    opacity: .7;
}
.banner-rummy-bg {
    background: linear-gradient(to right, #590411, #570d16);
}

/* ==========================================================================
   2. 统一的 Rummy 体验与下载大区块 (Unified Section)
   ========================================================================== */
.rummy-experience-section {
    background-color: #f1f3f6; /* 全局浅灰色大衬底 */
    padding: 40px 0 60px 0;
    width: 100%;
}

/* 精准还原截图：中间那条精致长横分割线 */
.section-divider {
    width: 100%;
    height: 1px;
    background-color: #d4d8e2;
    margin: 40px 0;
}
.experience-title {
    font-size: 24px;
    font-weight: bold;
    color: #111111; /* 浅灰色背景下的深色标题 */
    text-align: center;
    margin-bottom: 40px; /* 让标题和下面的卡片拉开一段舒适的距离 */
}
/* 三列特性卡片布局包裹层 */
.game-cards-wrap,
.exp-cards-wrap {
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
}

/* 精准还原截图：高级立体深蓝渐变卡片 */
.exp-card {
    flex: 1;
    background: linear-gradient(180deg, #021a3a 0%, #032d61 100%);
    border-radius: 12px;
    padding: 35px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 8px 24px rgba(3, 33, 70, 0.15);
    min-height: 380px; /* 强制所有卡片拉伸到相同的高度 */
}

.exp-card-title {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 25px;
    min-height: 42px; /* 保证标题两行换行对齐 */
}

.exp-card-icon {
    width: 90px;
    height: 90px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.exp-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 亮黄色小圆点列表排版 */
.exp-card-list {
    width: 100%;
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.exp-card-list li {
    font-size: 13px;
    color: #e2e8f0;
    line-height: 1.4;
    text-align: left;
    position: relative;
    padding-left: 14px;
}
.exp-card-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: -1px;
    color: #ffcc00; /* 截图里的亮黄色小圆点 */
    font-size: 16px;
}
.faq-section {
    background-color: #ffffff; /* 截图里是干净的纯白背景块 */
    padding: 50px 0;
    width: 100%;
}

.faq-wrap {
    max-width: 1200px; /* 让文本宽度收敛，阅读体验更高级 */
    margin: 0 auto;
}

/* 顶部总标题：有一条底部浅色贯穿长线 */
.faq-section-title {
    font-size: 20px;
    font-weight: 700;
    color: #111111;
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 24px;
}

/* 官方四段文字的字体与间距 */
.faq-intro-text p {
    font-size: 13px;
    color: #444444;
    line-height: 1.6;
    margin-bottom: 18px;
    text-align: justify; /* 两端对齐，排版更整齐 */
}

/* 一键展开按钮所在的行容器 */
.faq-control-bar {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* 让按钮严格靠右侧对齐 */
    margin-bottom: 15px;
}

/* 还原右侧带微下划线的 Expand All 文本按钮 */
.expand-all-btn {
    font-size: 13px;
    font-weight: bold;
    color: #333333;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 5px 0;
    transition: color 0.2s ease;
}
.expand-all-btn:hover {
    color: #0056b3;
}

/* 折叠组外围：长条条之间的空隙 */
.accordion-group {
    display: flex;
    flex-direction: column;
    gap: 14px; /* 长条卡片之间的上下空隙 */
    width: 100%;
}

/* 单个 FAQ 灰蓝色卡片条 */
.accordion-item {
    width: 100%;
    background-color: #e8ecf4; /* 完美对齐：浅冷蓝灰色条衬底 */
    border-radius: 6px; /* 精致小圆角 */
    overflow: hidden;
    transition: background-color 0.3s ease;
}

/* 点击响应行（点击这里触发打开关闭） */
.accordion-header {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.accordion-header span {
    font-size: 15px;
    font-weight: bold;
    color: #032146; /* 经典的暗深蓝色文字 */
}

/* 利用纯 CSS 优雅还原右侧的向下小折叠剪头 V */
.arrow-icon {
    width: 10px;
    height: 10px;
    border-right: 2px solid #032146;
    border-bottom: 2px solid #032146;
    transform: rotate(45deg); /* 默认方向向下 */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 丝滑的旋转特效 */
    margin-right: 4px;
}

/* ==========================================================================
   选项卡内容展开/折叠核心控制 (通过高度动画实现平滑伸缩)
   ========================================================================== */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr; /* 🌟 纯 CSS 高级动画技巧：默认行高为 0（隐藏） */
    transition: grid-template-rows 0.3s ease-out;
}

/* 内部内容包裹层 */
.inner-content {
    overflow: hidden;
}

.inner-content p {
    padding: 0 24px 20px 24px; /* 在展开时向下露出来的文本边距 */
    font-size: 13.5px;
    color: #4a5568;
    line-height: 1.6;
    margin: 0;
}

/* --------------------------------------------------------------------------
   🌟 激活状态切换样式（当被赋予 .open 类名时触发）
   -------------------------------------------------------------------------- */
/* 1. 展开内容：平滑拉伸到真实物理高度 */
.accordion-item.open .accordion-content {
    grid-template-rows: 1fr;
}

/* 2. 旋转箭头：展开时让 V 箭头向上翻转 */
.accordion-item.open .arrow-icon {
    transform: rotate(-135deg);
    margin-top: 4px;
}
/* ==========================================================================
   3. 🎬 移动端手机响应式适配 (小于 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    .rummy-experience-section {
        padding: 30px 0;
    }
    .download-row {
        padding: 18px 0;
        margin-top: -30px;
    }
    .section-divider {
        margin: 25px 0;
    }
    /* 手机端布局核心调整：强制将多列横排变成单列垂直流堆叠 */
    .exp-cards-wrap {
        flex-direction: column !important;
        gap: 20px;
    }
    .exp-card {
        min-height: auto; /* 手机端释放固定高度限制 */
        padding: 25px 20px;
    }
    .faq-section { padding: 35px 0; }
    .accordion-header { padding: 14px 18px; }
    .inner-content p { padding: 0 18px 16px 18px; }
}