/**
 * game-content.css
 * ================================================
 * 游戏内容区域样式定义文件
 * ------------------------------------------------
 * 功能说明：
 * 1. 统一管理游戏说明、FAQ、特性、推荐等内容区域样式
 * 2. 实现内部元素无需额外class的简洁HTML结构
 * 3. 提供一致的排版和视觉层次
 * 4. 支持响应式设计和移动端优化
 * 5. 集中管理游戏页面内容样式，便于维护
 * 
 * 样式组织：
 * - 容器基础样式 (.game-how-to-play, .game-faq, .game-features, .game-also-like)
 * - 标题层次 (h2主标题, h3副标题)
 * - 文本内容 (p段落, strong强调, a链接)
 * - 列表元素 (ul无序列表, li列表项, ::marker标记)
 * - 特殊组件 (.prose容器, .gameplay-video-container视频)
 * - 响应式适配 (@media queries)
 * 
 * 设计原则：
 * - 统一的视觉层次和间距
 * - 优秀的内容可读性
 * - 简化的HTML结构
 * - 模块化的样式管理
 * 
 * 支持的内容区域：
 * - 游戏玩法说明 (.game-how-to-play)
 * - 常见问题 (.game-faq)  
 * - 游戏特性 (.game-features)
 * - 推荐游戏 (.game-also-like)
 * 
 * 版本: 1.0.0
 * 最后更新: 2025-01-XX
 */

/* ================================================
   容器基础样式
   ================================================ */

.game-how-to-play, 
.game-faq, 
.game-features, 
.game-also-like {
    background-color: rgba(45, 45, 45, 1);
    backdrop-filter: blur(8px);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
}

/* ================================================
   标题样式
   ================================================ */

/* H2 主标题样式 */
.game-how-to-play h2,
.game-faq h2,
.game-features h2,
.game-also-like h2 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.5rem; /* text-2xl */
    font-weight: 800;
    margin-bottom: 1rem;
    color: #f5f5f7; /* text-white */
}

/* H3 副标题样式 */
.game-how-to-play h3,
.game-faq h3,
.game-features h3 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.125rem; /* text-lg */
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: #d6fe51; /* var(--highlight-title) */
}

/* H4 四级标题样式 */
.game-how-to-play h4,
.game-faq h4,
.game-features h4,
.game-also-like h4 {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem; /* text-base */
    font-weight: 700; /* font-bold */
    margin-bottom: 0.5rem; /* mb-2 */
    color: #f5f5f7; /* 具体的白色值 */
}

/* ================================================
   文本和段落样式
   ================================================ */

/* 段落样式 */
.game-how-to-play p,
.game-faq p,
.game-features p,
.game-also-like p {
    margin-bottom: 1rem;
    color: #a0aec0; /* text-[#a0aec0] */
    line-height: 1.6;
    font-size: 1rem;
}

/* 强调文本样式 */
.game-how-to-play strong,
.game-faq strong,
.game-features strong,
.game-also-like strong {
    color: #f5f5f7; /* text-white */
    font-weight: 600;
}

/* ================================================
   列表样式
   ================================================ */

/* 无序列表样式 */
.game-how-to-play ul,
.game-faq ul,
.game-features ul,
.game-also-like ul {
    list-style-type: disc;
    padding-left: 1.25rem; /* pl-5 */
    margin-bottom: 1rem;
    color: #a0aec0;
}

/* 列表项样式 */
.game-how-to-play li,
.game-faq li,
.game-features li,
.game-also-like li {
    margin-bottom: 0.25rem; /* space-y-1 */
    color: #a0aec0;
    line-height: 1.5;
}

/* 列表标记样式 */
.game-how-to-play li::marker,
.game-faq li::marker,
.game-features li::marker,
.game-also-like li::marker {
    color: #d6fe51; /* 使用高亮颜色 */
}

/* ================================================
   链接样式
   ================================================ */

/* 推荐区域链接样式 */
.game-also-like a {
    font-family: 'Nunito', sans-serif !important; 
    font-size: 1.07rem; 
    color: #f5f5f7;
    font-weight: 700;
    text-decoration: none;
    position: relative;
    transition: color 0.2s ease;
}

.game-also-like a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #d6fe51;
    transition: width 0.3s ease;
}

.game-also-like a:hover {
    color: #d6fe51;
}

.game-also-like a:hover::after {
    width: 100%;
}

/* ================================================
   特殊组件样式
   ================================================ */

/* Prose 容器样式 */
.game-how-to-play .prose,
.game-faq .prose,
.game-features .prose,
.game-also-like .prose {
    max-width: none;
    overflow: visible;
    min-height: fit-content;
    height: auto;
    color: #a0aec0;
    font-weight: 400;
}

/* 游戏内容图片容器样式 */
.game-content-image {
    margin: 1rem 0; /* 上下边距 */
    text-align: center; /* 图片居中对齐 */
    overflow: hidden; /* 隐藏溢出内容 */
}

.game-content-image img {
    width: 100%; /* 默认宽度100% */
    max-width: 700px; /* 最大宽度限制为700px */
    height: 300px; /* 固定高度 */
    object-fit: cover; /* 保持宽高比，裁剪多余部分 */
    margin: 0 auto; /* 水平居中 */
    border-radius: 0.5rem; /* 圆角 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.1); /* 中等阴影 */
    display: block; /* 确保图片为块级元素 */
}

/* 游戏视频容器样式 */
.game-how-to-play .gameplay-video-container,
.game-faq .gameplay-video-container,
.game-features .gameplay-video-container,
.game-also-like .gameplay-video-container {
    position: relative;
    width: 90%;
    max-width: 680px;
    margin: 0 auto;
    padding-top: 45%;
    overflow: hidden;
    border-radius: 0.5rem;
}

.game-how-to-play .gameplay-video-container iframe,
.game-faq .gameplay-video-container iframe,
.game-features .gameplay-video-container iframe,
.game-also-like .gameplay-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0.5rem;
}

/* ================================================
   FAQ 特殊样式
   ================================================ */

/* FAQ 问题容器 */
.game-faq .mb-4 {
    margin-bottom: 1rem;
}

/* FAQ 第一个问题的特殊间距 */
.game-faq h3:first-of-type {
    margin-top: 0.5rem; /* 减少第一个问题的上边距 */
}

/* ================================================
   响应式设计
   ================================================ */

@media (max-width: 768px) {
    .game-how-to-play, 
    .game-faq, 
    .game-features, 
    .game-also-like {
        padding: 1rem; /* 移动端减少内边距 */
    }
    
    .game-how-to-play h2,
    .game-faq h2,
    .game-features h2,
    .game-also-like h2 {
        font-size: 1.25rem; /* 移动端稍小的标题 */
    }
    
    .game-how-to-play .gameplay-video-container,
    .game-faq .gameplay-video-container,
    .game-features .gameplay-video-container,
    .game-also-like .gameplay-video-container {
        width: 100%; /* 移动端视频容器占满宽度 */
    }
    
    /* 移动端游戏内容图片样式 */
    .game-content-image {
        margin: 0.75rem 0; /* 移动端减少上下边距 */
    }
    
    .game-content-image img {
        max-width: 400px; /* 移动端进一步限制最大宽度 */
        height: 200px; /* 移动端减少高度 */
        border-radius: 0.375rem; /* 移动端稍小的圆角 */
    }
}

/* ================================================
   Game Know-how 页面样式
   ================================================ */

/* Game Know-how 页面样式 */
.game-knowhow-page {
    /* 移除额外的padding-top，依赖main标签的pt-6设置 */
    padding-bottom: 1.5rem;
}

.game-knowhow-container {
    /* 使用与Game How to play区域相同的背景样式 */
    background-color: rgba(45, 45, 45, 1);
    backdrop-filter: blur(8px);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
}

.game-knowhow-container h1 {
    /* Game Know-how标题样式 */
    font-family: 'Nunito', sans-serif;
    color: #f5f5f7;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-align: center;
}

.game-knowhow-container .prose {
    /* 与Game How to play区域正文样式保持一致 */
    max-width: none;
    overflow: visible;
    min-height: fit-content;
    height: auto;
    color: #a0aec0;
    font-weight: 400;
}

.game-knowhow-container .prose h2 {
    /* H2标题样式 */
    color: #f5f5f7;
    font-family: 'Nunito', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.game-knowhow-container .prose h3 {
    /* H3标题样式 */
    color: #d6fe51;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.game-knowhow-container .prose p {
    /* 段落样式 */
    color: #a0aec0;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.game-knowhow-container .prose ul {
    /* 列表样式 */
    color: #a0aec0;
    margin-bottom: 1rem;
    padding-left: 1.25rem;
    list-style-type: disc;
}

.game-knowhow-container .prose li {
    /* 列表项样式 */
    margin-bottom: 0.5rem;
    color: #a0aec0;
    line-height: 1.5;
}

.game-knowhow-container .prose li::marker {
    /* 列表标记样式 */
    color: #d6fe51;
}

.game-knowhow-container .prose a {
    /* 链接样式 */
    font-family: 'Nunito', sans-serif !important;
    font-size: 1rem;
    color: #3b82f6; /* 工具栏 unlike 图标悬停时的蓝色 */
    font-weight: 700;
    text-decoration: none;
    position: relative;
    transition: color 0.2s ease;
}

.game-knowhow-container .prose a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #d6fe51;
    transition: width 0.3s ease;
}

.game-knowhow-container .prose a:hover {
    color: #d6fe51;
}

.game-knowhow-container .prose a:hover::after {
    width: 100%;
}

.game-knowhow-container .prose strong {
    /* 粗体文本样式 */
    color: #a0aec0;
    font-weight: 600;
}

/* Game Know-how分割线样式 */
.game-knowhow-separator {
    height: 0.5px;
    margin: 1.5rem 0;
    width: 100%;
    
    /* 渐变边框效果，参考footer样式 */
    background: linear-gradient(
        90deg, 
        rgba(63, 65, 92, 0.8) 0%,
        rgba(63, 65, 92, 0.4) 50%,
        rgba(63, 65, 92, 0.8) 100%
    );
    
    /* 添加轻微的阴影增强立体感 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    
    /* 圆角处理 */
    border-radius: 1px;
    border: none;
}