/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 禁止选择文本 */
    -webkit-user-select: none;  /* Safari/Chrome */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE/Edge */
    user-select: none;          /* 标准语法 */
}

/* 允许输入框和文本框内容可选择（如果有表单） */
input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

:root {
    /* Colors */
    --color-primary: #0F172B;
    --color-secondary: #62748E;
    --color-tertiary: #90A1B9;
    --color-kunpo-yellow: #FFD732;
    --color-kunpo-blue: #00A7FF;
    --color-gold: #FDC700;
    --color-white: #FFFFFF;
    --color-bg-light: #F4F4F4;
    --color-bg-section: #F8FAFC;
    --color-text-light: #E2E8F0;
    --color-black: #000000;
    
    /* Typography */
    --font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --base-font-size: 14px; /* 基准字体大小，与Figma设计稿一致 */
    
    /* Spacing */
    --section-padding: 45px 160px;
    --container-max-width: 1920px;
}

/* 设置HTML基准字体大小 */
html {
    font-size: 14px; /* 使用标准16px作为基准，与Figma设计稿一致 */
    overflow-x: hidden; /* 防止横向滚动 */
}

body {
    font-family: var(--font-family);
    font-size: 16px; /* 标准字体大小 */
    background-color: #ffffff; /* 页面默认颜色 */
    color: var(--color-primary);
    line-height: 1.6;
    overflow-x: hidden; /* 防止横向滚动 */
    width: 100%;
    max-width: 100vw; /* 限制最大宽度为视口宽度 */
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 90px; /* 调整为90px */
    background: rgba(255, 255, 255, 0.95); /* 增加背景不透明度，减少对blur的依赖 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari兼容性 */
    border-bottom: 1.83px solid rgba(0, 0, 0, 0.1);
    z-index: 1000;
    isolation: isolate; /* 创建新的层叠上下文，隔离backdrop-filter的影响 */
    transform: translate3d(0, 0, 0); /* 启用硬件加速，使用3D变换更稳定 */
    backface-visibility: hidden; /* 隐藏背面，优化渲染 */
}

.header-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 110px; /* 扩大50px: 60px + 50px = 110px */
}

.logo {
    display: flex;
    align-items: center;
    gap: 4px;
}

.logo-img {
    width: 200px;
    height: 49.79px;
    object-fit: contain;
}

/* logo-text 样式已移除，因为HTML中已删除该元素 */

.navigation {
    display: flex;
    align-items: center;
    gap: 40px; /* 缩小间距从72px到40px */
}

.nav-item {
    text-decoration: none;
    color: var(--color-secondary);
    font-weight: 400; /* 调整为regular（400） */
    font-size: 18px; /* 按设计稿调整 */
    line-height: 1.4;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* 垂直居中 */
    gap: 2px;
    transition: all 0.3s ease; /* 添加过渡效果 */
    padding: 8px 12px; /* 添加内边距，增加点击区域 */
}

.nav-item span {
    display: inline-block;
    vertical-align: middle; /* 确保文字水平对齐 */
}

.nav-item.active {
    color: var(--color-kunpo-blue);
}

.nav-indicator {
    width: 23px;
    height: 4px;
    background: var(--color-kunpo-yellow);
    border-radius: 2px;
    display: none;
    position: absolute;
    bottom: -2px; /* 调整位置 */
}

.nav-item.active .nav-indicator {
    display: block;
}

.nav-item:hover {
    color: var(--color-kunpo-blue);
    transform: translateY(-2px); /* 添加轻微上移效果 */
}

.nav-item:hover .nav-indicator {
    display: block;
    opacity: 0.6; /* hover时显示指示器但透明度较低 */
}

/* Hero Section */
.hero {
    width: 100%;
    height: 100vh; /* 视口高度，确保点击继续始终可见 */
    max-height: 900px; /* 最大高度限制 */
    min-height: 600px; /* 最小高度限制 */
    background-image: url('../images/hero-bg.png');
    background-size: cover; /* 保持宽度全屏显示 */
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* 确保背景随页面滚动 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: flex-start;
    padding: 100px 308px; /* 上下padding相等，确保垂直居中 */
    margin-top: 90px; /* 与header高度一致 */
    position: relative;
    transform: translateZ(0); /* 创建独立的合成层，避免与header的backdrop-filter冲突 */
    will-change: auto; /* 不预优化，避免过度使用GPU */
}

/* 已移除深色遮罩层 */

.hero-content {
    position: relative;
    z-index: 2; /* 确保内容在遮罩层之上 */
    width: 100%; /* 移除宽度限制 */
}

.hero-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.title-light {
    font-weight: 300;
    font-size: 75px; /* 调整为75px */
    line-height: 1.4;
    letter-spacing: -0.018em;
    color: var(--color-white);
}

.title-bold {
    font-weight: 600;
    font-size: 75px; /* 调整为75px */
    line-height: 1.4;
    letter-spacing: -0.018em;
    color: var(--color-kunpo-yellow);
}

.hero-description {
    font-weight: 300;
    font-size: 18px; /* 调整为18px */
    line-height: 1.354;
    color: var(--color-text-light);
    margin-bottom: 20px;
    margin-top: 16px;
}

/* Hero 轮播样式 */
.hero-carousel {
    position: relative;
    width: 100%;
    text-align: left; /* 左对齐 */
}

.hero-slides {
    position: relative;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
    text-align: left;
}

.hero-slide.active {
    position: relative; /* 激活的用 relative 撑开容器 */
    opacity: 1;
    pointer-events: auto;
}

/* 轮播标题 - 白色 */
.hero-slide-title {
    font-weight: 400;
    font-size: 64px;
    line-height: 1.2;
    color: var(--color-white);
    margin-bottom: 8px;
    white-space: nowrap; /* 强制不换行 */
}

/* 轮播副标题 - 黄色 */
.hero-slide-subtitle {
    font-weight: 700;
    font-size: 64px;
    line-height: 1.2;
    color: var(--color-kunpo-yellow);
    white-space: nowrap; /* 强制不换行 */
}

/* 轮播小描述 */
.hero-slide-desc {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-text-light);
    margin-top: 24px;
    max-width: 450px;
}

/* 移除旧的描述样式 */
.hero-carousel .hero-description {
    display: none;
}

/* 控制区域容器 */
.hero-carousel-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px; /* 与标题的距离 */
}

/* 轮播按钮 */
.hero-carousel-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-carousel-btn:hover {
    color: var(--color-white);
}

/* 点状进度指示器 */
.hero-carousel-dots {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-dot:hover {
    background: rgba(255, 255, 255, 0.6);
}

.hero-dot.active {
    background: var(--color-white);
}

/* 滚动提示 */
.scroll-hint {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.scroll-hint:hover {
    opacity: 0.8;
}

.scroll-hint-text {
    font-size: 12px;
    color: var(--color-tertiary);
    letter-spacing: 1px;
}

/* 鼠标图标 */
.scroll-mouse {
    width: 24px;
    height: 38px;
    border: 2px solid var(--color-tertiary);
    border-radius: 12px;
    position: relative;
}

.scroll-mouse::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: var(--color-tertiary);
    border-radius: 2px;
    animation: scrollDown 1.5s ease-in-out infinite;
}

@keyframes scrollDown {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }
}

/* 小屏幕显示向上滑动图标 */
.scroll-swipe {
    display: none;
    width: 24px;
    height: 38px;
    position: relative;
}

.scroll-swipe::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: var(--color-tertiary);
}

.scroll-swipe::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid var(--color-tertiary);
    animation: swipeUp 1.5s ease-in-out infinite;
}

@keyframes swipeUp {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
}

/* 响应式轮播样式 */
@media (max-width: 1200px) {
    .hero-slide-title,
    .hero-slide-subtitle {
        font-size: 52px;
    }
}

@media (max-width: 768px) {
    .hero-slide-title,
    .hero-slide-subtitle {
        font-size: 42px;
    }
    .hero-slide-desc {
        font-size: 16px;
        margin-top: 16px;
    }
    /* 小屏幕切换为向上滑动 */
    .scroll-mouse {
        display: none;
    }
    .scroll-swipe {
        display: block;
    }
    .scroll-hint-text.desktop {
        display: none;
    }
    .scroll-hint-text.mobile {
        display: block;
    }
}

@media (max-width: 480px) {
    .hero-slide-title,
    .hero-slide-subtitle {
        font-size: 32px;
    }
    .hero-slide-desc {
        font-size: 14px;
        margin-top: 12px;
    }
    .hero-carousel-dots {
        gap: 8px;
    }
    .hero-dot {
        width: 8px;
        height: 8px;
    }
    .hero-carousel-btn {
        width: 30px;
        height: 30px;
        font-size: 20px;
    }
    .scroll-hint {
        bottom: 20px;
    }
}

/* Products Section */
.products {
    width: 100%;
    padding: var(--section-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; /* 移除gap，由子元素独立控制 */
}

.products-header-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 60px; /* 标题与内容区域间距60px */
}

.products-content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* 游戏卡片网格与按钮的间距30px */
}

.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0; /* 移除 padding，由父容器 gap 控制间距 */
}

.section-title {
    font-weight: 500; /* 调整为Medium */
    font-size: 48px; /* 按设计稿调整 */
    line-height: 1.4;
    text-align: center;
    color: var(--color-primary);
}

.section-subtitle {
    font-weight: 300; /* 调整为light */
    font-size: 18px; /* 按设计稿调整 */
    line-height: 1.4;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-tertiary); /* 调整为三级色 */
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 680px)); /* 每列最大680px，自动居中 */
    justify-content: center; /* 网格整体居中 */
    align-items: start;
    row-gap: 30px; /* 行间距30px */
    column-gap: 30px; /* 列间距30px */
    width: 100%;
    max-width: 1600px;
}

.game-card {
    width: 100%;
    max-width: 680px; /* 缩小卡片最大宽度 */
    background: var(--color-white);
    border-radius: 24px; /* 调整为24px */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.10); /* 统一投影数值 */
    overflow: visible; /* 允许logo溢出 */
    display: flex;
    flex-direction: column;
    opacity: 0; /* 初始不可见 */
    transform: translateY(50px); /* 初始位置向下偏移50px */
    transition: none; /* 默认不使用过渡 */
    pointer-events: none; /* 动画前禁止交互 */
}

/* 当卡片进入视口时显示 */
.game-card.animate-in {
    opacity: 1;
    transform: translateY(0);
    /* transition 在具体的 nth-child 中定义 */
}

/* 动画完成后启用交互和hover效果 */
.game-card.animation-complete {
    pointer-events: auto; /* 允许交互 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 启用hover过渡 */
}

/* 为每个卡片添加延迟，实现依次出现效果 */
/* 第一行 */
.products-grid .game-card:nth-child(1).animate-in {
    transition: opacity 0.6s ease-out 0s, transform 0.6s ease-out 0s; /* 第一张立即出现 */
}

.products-grid .game-card:nth-child(2).animate-in {
    transition: opacity 0.6s ease-out 0.1s, transform 0.6s ease-out 0.1s; /* 同行间隔0.1s */
}

/* 第二行 */
.products-grid .game-card:nth-child(3).animate-in {
    transition: opacity 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s; /* 跨行间隔0.1s */
}

.products-grid .game-card:nth-child(4).animate-in {
    transition: opacity 0.6s ease-out 0.3s, transform 0.6s ease-out 0.3s; /* 同行间隔0.1s */
}

/* 第三行 */
.products-grid .game-card:nth-child(5).animate-in {
    transition: opacity 0.6s ease-out 0.4s, transform 0.6s ease-out 0.4s; /* 跨行间隔0.1s */
}

.products-grid .game-card:nth-child(6).animate-in {
    transition: opacity 0.6s ease-out 0.5s, transform 0.6s ease-out 0.5s; /* 同行间隔0.1s */
}

.game-card.animation-complete:hover .game-name {
    color: var(--color-kunpo-blue); /* 悬停时游戏标题颜色改为kunpo蓝 */
    transition: color 0.3s ease; /* 添加颜色过渡效果 */
}

.game-image {
    width: 100%;
    aspect-ratio: 585 / 372; /* 使用宽高比，保持比例 */
    position: relative;
    overflow: hidden; /* 防止预览图溢出 */
    border-radius: 24px 24px 0 0; /* 顶部圆角，与卡片圆角一致 */
}

.game-bg {
    width: 100%;
    height: 100%;
    background: linear-gradient(151deg, rgba(249, 252, 255, 1) 0%, rgba(219, 233, 255, 1) 100%);
}

.game-bg-2 {
    background: linear-gradient(151deg, rgba(255, 243, 237, 1) 0%, rgba(255, 240, 234, 1) 100%);
}

.game-bg-3 {
    background: linear-gradient(151deg, rgba(249, 252, 255, 1) 0%, rgba(219, 233, 255, 1) 100%);
}

.game-bg-4 {
    background: linear-gradient(151deg, rgba(249, 252, 255, 1) 0%, rgba(219, 233, 255, 1) 100%);
}

.game-bg-5 {
    background: linear-gradient(151deg, rgba(255, 241, 242, 1) 0%, rgba(255, 225, 228, 1) 100%);
}

.game-bg-6 {
    background: linear-gradient(151deg, rgba(255, 248, 237, 1) 0%, rgba(255, 239, 213, 1) 100%);
}

.game-bg-7 {
    background: linear-gradient(151deg, rgba(233, 247, 255, 1) 0%, rgba(213, 238, 255, 1) 100%); /* 天蓝色系 */
}

.game-bg-8 {
    background: linear-gradient(151deg, rgba(255, 235, 233, 1) 0%, rgba(255, 218, 214, 1) 100%); /* 粉红色系 */
}

.game-bg-9 {
    background: linear-gradient(151deg, rgba(232, 250, 238, 1) 0%, rgba(209, 242, 220, 1) 100%); /* 绿色系 - 开心农场 */
}

.game-bg-10 {
    background: linear-gradient(151deg, rgba(240, 235, 248, 1) 0%, rgba(229, 220, 242, 1) 100%); /* 深紫色系 - 星际冒险 */
}

.game-bg-11 {
    background: linear-gradient(151deg, rgba(255, 245, 235, 1) 0%, rgba(255, 236, 217, 1) 100%); /* 橙色系 - 欢乐连连看 */
}

.game-bg-12 {
    background: linear-gradient(151deg, rgba(255, 238, 237, 1) 0%, rgba(255, 224, 222, 1) 100%); /* 红色系 - 疯狂赛车 */
}

.game-bg-13 {
    background: linear-gradient(151deg, rgba(232, 248, 245, 1) 0%, rgba(214, 242, 238, 1) 100%); /* 青色系 - 魔法泡泡 */
}

.game-bg-14 {
    background: linear-gradient(151deg, rgba(255, 248, 235, 1) 0%, rgba(255, 242, 217, 1) 100%); /* 金色系 - 勇者传说 */
}

/* 游戏预览图 */
.game-preview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    overflow: hidden; /* 防止预览图溢出 */
}

.game-preview-img {
    width: 100%; /* 宽度自适应卡片宽度 */
    height: 100%; /* 高度填满容器 */
    object-fit: cover; /* 保持填充且不变形 */
    object-position: center; /* 居中裁切 */
    border-radius: 24px 24px 0 0; /* 顶部圆角，与卡片圆角一致 */
}

/* 游戏Logo - 叠放在预览图和内容之间 */
.game-logo {
    position: relative; /* 改为relative，相对于game-card定位 */
    margin-top: -45px; /* 负值使其部分重叠在预览图和内容之间 */
    margin-bottom: 16px; /* LOGO到游戏标题间距16px */
    z-index: 10; /* 确保在预览图之上 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
}

.game-logo-img {
    width: 90px; /* 调整为90px */
    height: 90px; /* 调整为90px */
    object-fit: contain;
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.1)); /* 添加阴影效果 */
}

.game-content {
    padding: 0 60px 40px; /* 移除顶部padding，由LOGO的margin-bottom控制间距 */
    display: flex;
    flex-direction: column;
    gap: 0; /* 移除默认间距，由各元素自行控制 */
    align-items: center;
}

.game-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px; /* 游戏标题与游戏标签间距4px */
    text-align: center;
}

.game-tag {
    font-weight: 400;
    font-size: 12px; /* 按设计稿调整 */
    line-height: 1.4;
    color: var(--color-kunpo-blue);
    margin-bottom: 12px; /* 标签到描述间距12px */
}

.game-name {
    font-weight: 600;
    font-size: 32px; /* 按设计稿调整 */
    line-height: 1.4;
    color: var(--color-primary);
    transition: color 0.3s ease; /* 添加颜色过渡效果 */
}

.game-description {
    font-weight: 300;
    font-size: 14px; /* 按设计稿调整 */
    line-height: 1.4;
    color: var(--color-secondary);
    max-width: 384px;
    min-height: 40px; /* 固定最小高度，保证所有卡片一致 */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最多显示2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 24px; /* 游戏描述距离按钮区域的间距 */
    text-align: center;
}

.game-buttons {
    display: flex;
    gap: 16px; /* 缩小按钮间距 */
    width: 100%;
    justify-content: center;
}

.download-btn {
    display: flex;
    align-items: center;
    gap: 12px; /* 缩小图标和文字间距 */
    padding: 10px 24px; /* 调整按钮内边距，使按钮更小 */
    background: var(--color-primary);
    border-radius: 12px;
    border: none;
    cursor: pointer;
    width: 200px; /* 缩小按钮宽度 */
    position: relative; /* 为伪元素定位 */
    overflow: hidden; /* 隐藏溢出的伪元素 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 只过渡位移和阴影 */
}

/* 小程序专用按钮样式 - 与App Store按钮样式完全一致 */
.download-btn.mini-program-btn {
    /* 继承 .download-btn 的所有样式，无需额外设置 */
}

/* 使用伪元素实现渐变背景，避免闪烁 */
.download-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(92deg, #1B2C57 1.56%, #101A35 98.09%); /* 渐变背景 */
    opacity: 0; /* 默认透明 */
    transition: opacity 0.3s ease; /* 只过渡透明度 */
    border-radius: 12px;
    z-index: 0;
}

.download-btn:hover::before {
    opacity: 1; /* hover时显示渐变 */
}

.download-btn:hover {
    transform: translateY(-2px); /* 轻微上移 */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); /* 调整阴影颜色 */
}

.download-btn:active {
    transform: translateY(0); /* 点击时恢复位置 */
}

.app-icon {
    width: 32px; /* 缩小图标 */
    height: 32px;
    object-fit: contain; /* 图片适应容器 */
    flex-shrink: 0;
    position: relative; /* 确保在伪元素之上 */
    z-index: 1;
}

.btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative; /* 确保在伪元素之上 */
    z-index: 1;
}

.btn-title {
    font-weight: 600;
    font-size: 14px; /* 按设计稿调整 */
    line-height: 1.4;
    color: var(--color-white);
    text-align: left;
}

.btn-subtitle {
    font-weight: 600;
    font-size: 10px; /* 按设计稿调整 */
    line-height: 1.4;
    color: var(--color-gold);
}

.more-games-btn {
    width: 255px;
    height: 55px;
    padding: 0; /* 移除 padding，使用 flex 居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* 默认背景透明 */
    border: 1px solid #E2E8F0;
    border-radius: 12px; /* 调整圆角为12px */
    font-weight: 500;
    font-size: 18px; /* 按设计稿调整 */
    line-height: 1.4;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none; /* 作为链接时移除下划线 */
}

.more-games-btn:hover {
    background: var(--color-white); /* 悬停背景为白色 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 添加轻微阴影增强交互感 */
}

/* Players Section */
.players {
    width: 100%;
    padding: var(--section-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px; /* 调整标题与内容间距为60px */
}

.reviews-container {
    position: relative;
    width: 100%;
    padding: 0 20px; /* 左右padding为卡片阴影留出空间，防止被overflow:hidden裁切 */
    overflow: hidden;
    height: 600px; /* 设置固定高度以显示滚动效果 */
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 三列布局 */
    gap: 18px; /* 卡片间距调整为18px */
    width: 100%;
}

/* 每列独立容器 */
.review-column {
    display: flex;
    flex-direction: column;
    gap: 18px; /* 卡片间距调整为18px */
    /* 移除 overflow: hidden 或增加 padding 以显示阴影 */
    padding: 10px; /* 为阴影留出空间 */
    margin: -10px; /* 抵消 padding 对布局的影响 */
}

/* 左侧列 - 向上滚动 */
.review-column-left {
    animation: scrollUp 60s linear infinite; /* 滚动速度60秒 */
}

.review-column-left:hover {
    animation-play-state: paused; /* hover当前列时暂停 */
}

/* 中间列 - 向下滚动 */
.review-column-center {
    animation: scrollDown 60s linear infinite; /* 滚动速度60秒 */
}

.review-column-center:hover {
    animation-play-state: paused; /* hover当前列时暂停 */
}

/* 右侧列 - 向上滚动 */
.review-column-right {
    animation: scrollUp 60s linear infinite; /* 滚动速度60秒 */
}

.review-column-right:hover {
    animation-play-state: paused; /* hover当前列时暂停 */
}

/* 向上滚动动画 */
@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%); /* 滚动到一半时重置，实现无缝循环 */
    }
}

/* 向下滚动动画 */
@keyframes scrollDown {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0); /* 从中间位置滚动到顶部，实现无缝循环 */
    }
}

.review-card {
    background: #FFF;
    border-radius: 20px;
    padding: 32px; /* 统一padding为32px */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.10); /* 减淡卡片投影为10% */
    display: flex;
    flex-direction: column;
    gap: 18px; /* 调整引号、内容和玩家头像之间的间距为18px */
}


.quote-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.review-text {
    font-weight: 300;
    font-size: 18px; /* 调整为18px */
    line-height: 2; /* 行间距设置为36px (18px * 2) */
    color: var(--color-secondary); /* 调整为二级色 */
    /* 移除 flex: 1; 让文本框只占据内容所需空间，避免与玩家头像间距过大 */
}

.review-author {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0; /* 确保没有多余的margin */
    padding: 0; /* 确保没有多余的padding */
}

.author-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 3px solid #F1F5F9;
    background: #E3E6EF;
    object-fit: cover; /* 确保图片填充且不变形 */
    flex-shrink: 0; /* 防止头像被压缩 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.author-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0; /* 确保没有多余的margin */
    padding: 0; /* 确保没有多余的padding */
}

.author-name {
    font-weight: 500;
    font-size: 18px; /* 调整为18px */
    line-height: 1; /* 使用line-height: 1，消除文本上下多余空间 */
    color: var(--color-primary);
    margin: 0; /* 确保没有多余的margin */
    padding: 0; /* 确保没有多余的padding */
}

.author-role {
    font-weight: 300;
    font-size: 14px; /* 按设计稿调整 */
    line-height: 1; /* 使用line-height: 1，完全消除文本底部多余空间 */
    color: var(--color-tertiary);
    margin: 0; /* 确保没有多余的margin */
    padding: 0; /* 确保没有多余的padding */
}

/* News Center Section */
.news-center {
    width: 100%;
    padding: var(--section-padding);
    background: var(--color-bg-section);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px; /* 调整标题与内容间距为60px */
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    width: 100%;
    /* 移除max-width限制，让内容与热门游戏对齐 */
}

.news-card {
    width: 100%;
    max-width: 780px;
    background: var(--color-white);
    border-radius: 30px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.10); /* 统一投影数值 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease; /* 添加过渡效果 */
    cursor: pointer; /* 鼠标指针变为手型 */
    text-decoration: none; /* 删除链接下划线 */
    color: inherit; /* 继承文字颜色 */
}

.news-card:hover {
    transform: translateY(-8px); /* hover时上移8px */
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.15); /* 增强阴影 */
}

.news-image {
    width: 100%; /* 宽度自适应卡片宽度 */
    aspect-ratio: 585 / 368; /* 使用宽高比，保持比例 */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E3E6EF;
}

.news-img,
.news-preview-img {
    width: 100%; /* 宽度填满容器 */
    height: 100%; /* 高度填满容器 */
    object-fit: cover; /* 图片填充容器，保持不变形 */
    object-position: center; /* 居中裁切 */
}

.news-content {
    padding: 38px 45px; /* 上下38px，左右45px */
    display: flex;
    flex-direction: column;
    gap: 24px; /* 调整内容间距为24px */
    flex: 1; /* 占据剩余空间，确保按钮对齐 */
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 18px; /* 调整标签与日历的间距为18px */
}

.news-tag {
    width: 56px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* 移除 padding，使用 flex 居中 */
    background: var(--color-black);
    border-radius: 11px;
    font-weight: 400;
    font-size: 12px; /* 缩小字体以适应小标签 */
    line-height: 1;
    color: var(--color-gold);
}

.news-date {
    display: flex;
    align-items: center;
    gap: 4px; /* 调整日历图标与日期的间距为4px */
    font-weight: 500;
    font-size: 19.25px; /* 22px * 0.875，更接近设计稿视觉效果 */
    line-height: 1.4;
    color: var(--color-secondary);
}

.date-icon {
    width: 20px;
    height: 20px;
    object-fit: contain; /* 作为图片使用 */
}

.news-title {
    font-weight: 600;
    font-size: 28px; /* 缩小标题字号为28px */
    line-height: 1.4;
    color: var(--color-primary);
}

.news-description {
    font-weight: 300;
    font-size: 21px; /* 24px * 0.875，更接近设计稿视觉效果 */
    line-height: 1.4;
    color: var(--color-secondary);
}

.read-more-btn {
    align-self: flex-start;
    padding: 14.66px 0;
    background: transparent;
    border: none;
    font-weight: 500;
    font-size: 18px; /* 按设计稿调整 */
    line-height: 1.4;
    color: var(--color-primary);
    cursor: pointer;
    transition: color 0.3s;
    margin-top: auto; /* 将按钮推到底部，使两个卡片的按钮对齐 */
}

.read-more-btn:hover {
    color: var(--color-kunpo-blue);
}

.more-news-btn {
    width: 255px;
    height: 55px;
    padding: 0; /* 移除 padding，使用 flex 居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* 默认背景透明 */
    border: 1px solid #E2E8F0;
    border-radius: 12px; /* 调整圆角为12px */
    font-weight: 500;
    font-size: 18px; /* 按设计稿调整 */
    line-height: 1.4;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none; /* 作为链接时移除下划线 */
}

.more-news-btn:hover {
    background: var(--color-white); /* 悬停背景为白色 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 添加轻微阴影增强交互感 */
}

/* About Us Section */
.about-us {
    width: 100%;
    padding: 120px 160px; /* 上下120px，左右160px */
    background: var(--color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px; /* 调整标题与内容间距为60px */
}

.about-content {
    max-width: 1600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 60px;
}

.about-text {
    max-width: 1600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.section-title-white {
    color: var(--color-white);
}

.section-subtitle-yellow {
    color: var(--color-kunpo-yellow);
}

.about-description {
    font-weight: 300;
    font-size: 20px; /* 调整为20px */
    line-height: 1.6;
    text-align: center;
    color: var(--color-tertiary); /* 使用三级色 */
    max-width: 1600px; /* 与数据模块宽度一致 */
    width: 100%;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 220px); /* 每个卡片固定220px宽度 */
    grid-auto-flow: column; /* 强制一行排列 */
    gap: 24px; /* 卡片间距调整为24px */
    justify-content: center; /* grid内容居中 */
}

.stat-card {
    background: #161F35; /* 修改背景色为 #161F35 */
    border: 1.83px solid rgba(255, 255, 255, 0.1);
    border-radius: 18.32px;
    padding: 0; /* 移除padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* 垂直居中内容 */
    gap: 0; /* 移除gap，由各元素自行控制间距 */
    aspect-ratio: 1 / 1; /* 保持宽高比1:1，使卡片为正方形 */
    opacity: 0; /* 初始不可见 */
    transform: translateY(50px); /* 初始位置向下偏移50px */
    transition: none; /* 默认不使用过渡 */
    pointer-events: none; /* 动画前禁止交互 */
}

/* 当卡片进入视口时显示 */
.stat-card.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 动画完成后启用交互 */
.stat-card.animation-complete {
    pointer-events: auto;
}

/* 为每个数据卡片添加延迟，实现依次出现效果 */
.stats-grid .stat-card:nth-child(1).animate-in {
    transition: opacity 0.8s ease-out 0s, transform 0.8s ease-out 0s;
}

.stats-grid .stat-card:nth-child(2).animate-in {
    transition: opacity 0.8s ease-out 0.2s, transform 0.8s ease-out 0.2s;
}

.stats-grid .stat-card:nth-child(3).animate-in {
    transition: opacity 0.8s ease-out 0.4s, transform 0.8s ease-out 0.4s;
}

.stats-grid .stat-card:nth-child(4).animate-in {
    transition: opacity 0.8s ease-out 0.6s, transform 0.8s ease-out 0.6s;
}

.stat-icon {
    width: 88px; /* 图标容器88px */
    height: 88px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 1px solid rgba(253, 199, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 22px; /* 图标到数字标题间距22px */
}

.stat-icon-img {
    width: 88px; /* 图标大小调整为88px */
    height: 88px;
    object-fit: contain;
}

.stat-number {
    font-weight: 600;
    font-size: 28px; /* 标题字号28px */
    line-height: 1.2; /* 减小行高 */
    color: var(--color-white);
    text-align: center;
    white-space: nowrap; /* 强制一行显示 */
    margin-bottom: 8px; /* 数字标题到文字标签间距8px */
}

.stat-label {
    font-weight: 300;
    font-size: 18px; /* 按设计稿调整 */
    line-height: 1.4;
    color: var(--color-tertiary);
    text-align: center;
    white-space: nowrap; /* 强制一行显示 */
}

/* Producer Message Section */
/* 已隐藏：如需显示，将下方的 display: none 改为 display: flex */
.producer-message {
    width: 100%;
    padding: 45px 0 20px 0; /* 上45px，下20px，缩小与联系我们的间距 */
    display: none; /* 隐藏制作人寄语模块 */
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    gap: 30px; /* 缩小标题与内容间距为30px */
}

.producer-message .section-header {
    padding: 0 160px; /* 标题区域保持左右padding */
}

.carousel-container {
    position: relative;
    width: 100%; /* 占满整个视口宽度 */
    overflow: hidden; /* 隐藏溢出部分 */
    mask-image: none; /* 去除蒙版 */
    -webkit-mask-image: none; /* 去除蒙版 */
}

.carousel-wrapper {
    overflow: hidden;
    padding: 30px 0;
}

.carousel-content {
    display: flex;
    gap: 30px; /* 卡片间距调整为30px */
    /* 自动滚动动画 - 头尾相接连续滚动 */
    animation: scrollLeft 40s linear infinite;
    padding: 0; /* 去除左右padding */
    will-change: transform; /* 优化动画性能 */
}

.carousel-content:hover {
    animation-play-state: paused; /* hover暂停 */
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 移动前4个卡片的距离：(380px * 4) + (30px * 4) = 1640px */
        transform: translateX(-1640px);
    }
}

.producer-card {
    width: 380px;
    height: 535px;
    flex-shrink: 0;
    background: var(--color-white);
    border-radius: 30px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.10); /* 统一投影数值 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease; /* 添加过渡效果 */
    cursor: pointer; /* 鼠标指针变为手型 */
}

.producer-card:hover {
    transform: translateY(-8px); /* hover时上移8px */
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.15); /* 增强阴影 */
}

.producer-image {
    width: 380px; /* 图片宽度 */
    height: 305px; /* 图片高度 */
    background: #E3E6EF url('../images/producer-image.png') center/cover no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -30px; /* 抵消卡片上padding，如果图片需要贴顶。但用户说上下padding 30，可能是指内容区域？或者卡片整体 */
    /* 既然是卡片上下padding 30，那图片应该是在padding内部？ */
    /* 如果图片要 380*305，且卡片宽 380，那图片是全宽的。 */
    /* 如果卡片有 padding，图片会被挤压。 */
    /* 假设 padding 是针对卡片内部内容的，图片通常是贴边的吗？ */
    /* 之前的样式 .producer-image { width: 100%; height: 407px; } */
    /* 之前的 .producer-card 有 padding 吗？ 没有，padding 在 .producer-info */
    /* 用户说 "上下padding30"，可能是指 .producer-card padding: 30px 0; */
    /* 让我们假设图片也是内容的一部分，受到 padding 影响，或者图片贴边？ */
    /* 如果图片 380*305，卡片 380*535。 */
    /* 如果 padding 30px 0，那么上下各 30px 空白。图片上方会有 30px 空白。 */
    /* 如果用户想要图片贴顶，那 padding 应该加在内容容器上。 */
    /* 但用户明确说 "上下padding30"，通常指容器属性。 */
    /* 让我们先按 padding: 30px 0 设置，图片会缩进吗？width: 380px 是卡片宽度。 */
    /* 如果设置 padding: 30px 0; 内容宽度就是 380px。 */
    /* 图片 width 380px，height 305px。 */
    /* 这样图片上下会有 padding。 */
    /* 让我们先这样设置，如果效果不对再调。 */
}

.producer-info {
    padding: 0 30px; /* 给内容加左右 padding，防止贴边 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 24px; /* 内容区域间距 24 (图片与信息之间？) */
}

.producer-name {
    font-weight: 600;
    font-size: 32px; /* 按设计稿调整 */
    line-height: 1.4;
    color: var(--color-black);
}

.producer-role {
    font-weight: 500;
    font-size: 16px; /* 按设计稿调整 */
    line-height: 1.4;
    color: var(--color-kunpo-blue);
}

.producer-quote {
    font-weight: 300;
    font-size: 18px; /* 按设计稿调整 */
    line-height: 1.6;
    text-align: center;
    color: var(--color-secondary);
    padding: 0 30px; /* 左右 padding */
    margin-top: 24px; /* 内容区域间距 24 */
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 87.94px;
    height: 87.94px;
    background: var(--color-white);
    border: none;
    border-radius: 50%;
    box-shadow: 0px 3.66px 7.33px -3.66px rgba(0, 0, 0, 0.1), 0px 7.33px 10.99px -1.83px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s;
}

.carousel-btn:hover {
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

.carousel-prev {
    left: -117.94px;
}

.carousel-next {
    right: -117.94px;
}

.carousel-btn svg {
    width: 29.31px;
    height: 29.31px;
    color: var(--color-black);
}

/* Contact Us Section */
.contact-us {
    width: 100%;
    padding: var(--section-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px; /* 调整标题与内容间距为60px */
}

.contact-content {
    display: flex;
    flex-direction: row; /* 明确左右布局 */
    justify-content: center; /* 居中对齐 */
    align-items: stretch; /* 让两个区域等高 */
    gap: 45px; /* 调整间距为45px */
    width: 100%;
    max-width: 1600px;
}

.contact-info {
    width: 585px; /* 调整宽度为585px */
    min-height: 464px; /* 最小高度464px，内容多时自动增高 */
    background: var(--color-bg-section);
    border-radius: 24px; /* 调整圆角为24px */
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 三个项目均匀分布 */
    gap: 30px; /* 调整内部间距 */
}

.contact-item {
    display: flex;
    gap: 20px; /* 调整图标与文字间距 */
    align-items: flex-start;
}

.contact-icon {
    width: 64px; /* 调整图标大小 */
    height: 64px;
    flex-shrink: 0;
    object-fit: contain; /* 保持图片比例 */
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 7.33px;
}

.contact-label {
    font-weight: 600;
    font-size: 24px; /* 调整标题大小 */
    line-height: 1.3;
    color: var(--color-black);
    margin-bottom: 8px;
}

.contact-text {
    font-weight: 400;
    font-size: 16px; /* 调整文字大小 */
    line-height: 1.6;
    color: var(--color-secondary);
}

.map-container {
    width: 585px; /* 调整宽度为585px */
    min-height: 464px; /* 最小高度464px，随左侧自适应 */
    border-radius: 24px; /* 调整圆角为24px */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* 防止被压缩 */
}

.map-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片填充容器 */
    border-radius: 24px; /* 调整圆角为24px */
}

/* Footer */
.footer {
    width: 100%;
    padding: 80px 160px; /* 上下padding调整为80px */
    background: var(--color-black);
    display: flex;
    flex-direction: column;
    gap: 60px; /* 调整内容间距为60px */
    border-top: 1.83px solid rgba(255, 255, 255, 0.1);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 20px; /* 缩小logo与公司名称的间距 */
}

.footer-logo-img {
    width: 100px; /* Logo宽度调整为100px */
    height: auto; /* 高度自适应 */
    object-fit: contain;
}

.footer-company {
    font-weight: 600;
    font-size: 24px; /* 公司名称字号调整为24px */
    line-height: 1.4;
    color: var(--color-tertiary); /* 调整为三级色 */
}

.footer-links {
    display: flex;
    gap: 40px;
}

.footer-link {
    font-weight: 400; /* 字重调整为regular */
    font-size: 18px; /* 右侧导航字号18px */
    line-height: 1.4;
    color: var(--color-tertiary);
    text-decoration: none;
    transition: color 0.3s ease; /* 添加平滑过渡效果 */
}

.footer-link:hover {
    color: var(--color-white); /* hover效果为白色 */
}

.footer-line {
    width: 100%;
    height: 1px;
    background: var(--color-tertiary);
    opacity: 0.2; /* 调整透明度为20% */
}

.footer-notice {
    font-weight: 300;
    font-size: 16px; /* 内容字号调整为16px */
    line-height: 1.67;
    color: var(--color-tertiary);
    text-align: center;
}

.footer-copyright {
    font-weight: 300;
    font-size: 14px; /* 备案号字号14px */
    line-height: 1.67;
    color: var(--color-secondary);
    text-align: center;
    opacity: 0.6;
}

/* Responsive Design */

/* 1600px 断点 - 大屏优化 */
@media (max-width: 1600px) {
    .products-grid {
        max-width: 1400px;
        row-gap: 30px; /* 保持行间距30px */
        column-gap: 30px; /* 保持列间距30px */
    }
    
    .news-grid {
        max-width: 1400px;
        gap: 32px;
    }
    
    .reviews-grid {
        gap: 18px; /* 卡片间距调整为18px */
    }
    
    .contact-content {
        max-width: 1400px;
    }
}

/* 1440px 断点 - 中等桌面 */
@media (max-width: 1440px) {
    :root {
        --section-padding: 60px 120px;
    }
    
    .hero {
        height: 100vh;
        max-height: 760px;
        padding: 100px 200px; /* 垂直居中 */
        align-items: center;
    }
    
    .section-title {
        font-size: 40px; /* 响应式调整 */
    }
    
    .section-subtitle {
        font-size: 16px; /* 响应式调整 */
    }
    
    .products-grid {
        row-gap: 30px; /* 保持行间距30px */
        column-gap: 30px; /* 保持列间距30px */
    }
    
    .news-grid {
        gap: 30px;
    }
    
    .game-name {
        font-size: 28px; /* 响应式调整 */
    }
    
    .news-title {
        font-size: 28px; /* 响应式调整 */
    }
    
    .reviews-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* 关于我们数据模块在1440px保持4列布局 */
    .stats-grid {
        grid-template-columns: repeat(4, 200px);
        gap: 20px;
    }
    
    /* 联系我们板块在1440px保持左右布局 */
    .contact-content {
        gap: 40px;
    }
}

/* 1200px 断点 - 小桌面/大平板 */
@media (max-width: 1200px) {
    :root {
        --section-padding: 60px 80px;
    }
    
    .hero {
        height: 100vh;
        max-height: 800px;
        padding: 100px 150px; /* 垂直居中 */
        align-items: center;
    }
    
    .section-title {
        font-size: 36px; /* 响应式调整 */
    }
    
    .section-subtitle {
        font-size: 16px; /* 响应式调整 */
    }
    
    .game-name {
        font-size: 36px;
    }
    
    .game-description {
        font-size: 16px;
    }
    
    .news-title {
        font-size: 26px; /* 1920px断点调整 */
    }
    
    .news-description {
        font-size: 20px;
    }
    
    .about-description {
        font-size: 28px;
    }
    
    .stat-number {
        font-size: 38px;
    }
    
    .stat-label {
        font-size: 20px;
    }
    
    .producer-name {
        font-size: 36px;
    }
    
    .contact-label {
        font-size: 36px;
    }
    
    .contact-text {
        font-size: 20px;
    }
    
    .footer-company {
        font-size: 36px;
    }
}

/* 1024px 断点 - 平板横屏 */
@media (max-width: 1024px) {
    :root {
        --section-padding: 50px 60px;
    }
    
    .header-container {
        padding: 0 90px; /* 扩大50px: 40px + 50px = 90px */
    }
    
    .hero {
        height: 100vh;
        max-height: 750px;
        padding: 100px 100px; /* 垂直居中 */
        align-items: center;
    }
    
    .title-light,
    .title-bold {
        font-size: 56px; /* 响应式调整，保持比例 */
    }
    
    .hero-description {
        font-size: 16px; /* 响应式调整，保持比例 */
    }
    
    .section-title {
        font-size: 36px; /* 响应式调整 */
    }
    
    .section-subtitle {
        font-size: 16px; /* 响应式调整 */
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 30px; /* 保持行间距30px */
        column-gap: 30px; /* 保持列间距30px */
    }
    
    .game-content {
        padding: 60px 50px;
    }
    
    .game-name {
        font-size: 28px; /* 响应式调整 */
    }
    
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px; /* 卡片间距调整为18px */
    }
    
    /* 两列布局时，只显示前两列 */
    .review-column-right {
        display: none;
    }
    
    /* 左侧列向上滚动，中间列向下滚动 */
    .review-column-left {
        animation: scrollUp 60s linear infinite; /* 放慢滚动速度 */
    }
    
    .review-column-center {
        animation: scrollDown 60s linear infinite; /* 放慢滚动速度 */
    }
    
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
    
    /* 1024px断点保持4列布局，缩小卡片尺寸 */
    .stats-grid {
        grid-template-columns: repeat(4, 160px);
        gap: 16px;
    }
    
    .stat-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 16px;
    }
    
    .stat-icon-img {
        width: 70px;
        height: 70px;
    }
    
    .stat-number {
        font-size: 24px;
    }
    
    .stat-label {
        font-size: 14px;
    }
    
    .about-us {
        padding: 120px 60px;
    }
    
    .about-description {
        font-size: 26px;
    }
    
    /* 联系我们板块在1024px保持左右布局 */
    
    .carousel-prev {
        left: -80px;
    }
    
    .carousel-next {
        right: -80px;
    }
}

/* 768px 断点 - 平板竖屏/大手机 */
/* 小屏幕断点 - 只在768px以下才改为纵向布局 */

@media (max-width: 768px) {
    :root {
        --section-padding: 40px 20px;
    }
    
    /* 导航栏：LOGO在上，导航在下 */
    .header {
        height: auto;
        padding: 15px 0;
    }
    
    .header-container {
        flex-direction: column;
        padding: 0 20px;
        gap: 12px;
    }
    
    .navigation {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav-item {
        font-size: 12px;
    }
    
    .logo-img {
        width: 120px;
        height: auto;
    }
    
    .hero {
        height: 100vh;
        max-height: 700px;
        padding: 120px 20px 80px; /* 顶部留出导航栏空间 */
        align-items: center;
    }
    
    /* 触摸滑动优化 */
    .hero-content {
        touch-action: pan-y; /* 允许垂直滚动，水平方向由JS处理 */
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
    }
    
    .hero-content:active {
        cursor: grabbing;
    }
    
    .title-light,
    .title-bold {
        font-size: 36px; /* 响应式调整，保持比例 */
    }
    
    .hero-description {
        font-size: 14px; /* 响应式调整，保持比例 */
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .section-subtitle {
        font-size: 14px;
    }
    
    /* 标题区域间距调整 */
    .products-header-wrapper {
        margin-bottom: 24px;
    }
    
    .section-header {
        margin-bottom: 24px;
    }
    
    /* 游戏卡片：双列显示 */
    .products-content-wrapper {
        gap: 12px; /* 小屏幕下行间距12px */
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .game-card {
        border-radius: 12px; /* 游戏卡片整体圆角12px */
    }
    
    .game-image {
        border-radius: 12px 12px 0 0;
    }
    
    .game-preview-img {
        border-radius: 12px 12px 0 0; /* 预览图圆角与卡片一致 */
    }
    
    /* 游戏LOGO缩小 */
    .game-logo {
        margin-top: -25px;
        margin-bottom: 6px;
    }
    
    .game-logo-img {
        width: 50px;
        height: 50px;
    }
    
    .game-content {
        padding: 6px 16px 12px;
        gap: 4px;
    }
    
    .game-info {
        gap: 0px; /* game-info gap设为0 */
    }
    
    .game-name {
        font-size: 16px;
        margin-bottom: 2px;
    }
    
    .game-description {
        font-size: 12px;
        min-height: auto;
        line-height: 1.3;
        margin-bottom: 8px;
    }
    
    .game-tag {
        font-size: 10px;
        padding: 2px 5px;
        margin-bottom: 4px;
    }
    
    /* 下载按钮上下排布并缩小 */
    .game-buttons {
        flex-direction: column;
        width: 100%;
        gap: 4px;
        margin-top: 0;
    }
    
    .download-btn {
        width: 70%;
        margin: 0 auto;
        padding: 4px 12px;
        border-radius: 20px;
        gap: 4px;
    }
    
    .btn-title {
        font-size: 12px;
    }
    
    .btn-subtitle {
        font-size: 10px;
    }
    
    .app-icon {
        width: 20px; /* 小屏幕下载图标20px */
        height: 20px;
    }
    
    /* 玩家评价：两列滚动 */
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    /* 隐藏右列，只显示左列和中间列 */
    .review-column-right {
        display: none;
    }
    
    .review-column-left,
    .review-column-center {
        display: flex;
        gap: 10px;
    }
    
    .review-card {
        min-height: auto;
        padding: 14px;
        border-radius: 12px;
        gap: 10px;
    }
    
    /* 引号图标缩小 */
    .quote-icon {
        width: 20px;
        height: 20px;
    }
    
    .review-text {
        font-size: 12px;
    }
    
    /* 用户头像缩小 */
    .author-avatar {
        width: 36px;
        height: 36px;
        border-width: 2px;
    }
    
    .author-info {
        gap: 2px;
    }
    
    .author-name {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 80px;
    }
    
    .author-role {
        font-size: 10px;
    }
    
    /* 新闻中心：两列卡片，缩小间距 */
    .news-center {
        gap: 24px;
    }
    
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .news-card {
        border-radius: 12px;
    }
    
    .news-image {
        border-radius: 12px 12px 0 0;
    }
    
    .news-content {
        padding: 12px 12px;
        gap: 12px;
    }
    
    .news-title {
        font-size: 14px;
    }
    
    .news-description {
        font-size: 12px;
    }
    
    .news-tag {
        width: 36px;
        height: 20px;
        font-size: 9px;
        padding: 3px 6px;
    }
    
    .date-icon {
        width: 16px;
        height: 16px;
    }
    
    .news-date {
        font-size: 10px;
    }
    
    .news-meta {
        gap: 8px;
    }
    
    .read-more-btn {
        padding: 6px 0px;
        font-size: 12px;
    }
    
    .about-us {
        padding: 40px 30px;
    }
    
    .about-content {
        gap: 12px; /* 小屏幕下调整间距 */
    }
    
    .about-text {
        gap: 12px; /* 小屏幕下调整间距 */
    }
    
    .about-description {
        font-size: 14px;
    }
    
    /* 关于我们：田字格排列 (2x2)，尺寸与1920一致 */
    .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-flow: row !important;
        gap: 12px;
        max-width: 100%;
        width: 100%;
        padding: 0 20px;
    }
    
    .stat-card {
        padding: 8px 0;
        justify-content: center;
    }
    
    .stat-icon {
        width: 70px; /* 缩小20%: 88*0.8=70 */
        height: 70px;
        margin-bottom: 18px;
    }
    
    .stat-icon-img {
        width: 70px;
        height: 70px;
    }
    
    .stat-number {
        font-size: 28px;
    }
    
    .stat-label {
        font-size: 18px;
    }
    
    /* 新闻列表页双列 */
    .news-list-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
        max-width: 100%;
    }
    
    .news-list-section .news-card {
        max-width: 100%;
    }
    
    /* 新闻列表页标题和描述省略 */
    .news-list-section .news-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .news-list-section .news-description {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .producer-name {
        font-size: 20px;
    }
    
    .producer-role {
        font-size: 14px;
    }
    
    .producer-quote {
        font-size: 12px;
    }
    
    /* 联系我们：上下排列 */
    .contact-us {
        gap: 20px;
    }
    
    .contact-content {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .contact-info,
    .map-container {
        width: 100%;
        max-width: none;
        min-height: auto; /* 移除固定最小高度 */
        border-radius: 12px; /* 小屏幕圆角12px */
    }
    
    .contact-info {
        padding: 20px; /* 上下左右padding为20 */
        gap: 12px; /* 总部电话邮箱间距为12 */
    }
    
    .contact-icon {
        width: 32px; /* 图标缩小50% */
        height: 32px;
    }
    
    .contact-label {
        font-size: 14px;
        margin-bottom: 4px; /* 减小标签下方间距 */
        line-height: 1.2; /* 减小行高 */
    }
    
    .contact-text {
        font-size: 12px;
        line-height: 1.3; /* 减小行高 */
    }
    
    .contact-item {
        gap: 8px;
    }
    
    .contact-details {
        gap: 2px; /* 缩小详情内部间距 */
    }
    
    /* 页脚：上面LOGO和公司名称，下面导航 */
    .footer {
        padding: 30px 20px;
        gap: 20px; /* 调整为20px */
    }
    
    .footer-top {
        flex-direction: column;
        align-items: center;
        gap: 20px; /* 调整为20px */
    }
    
    .footer-logo {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }
    
    .footer-logo-img {
        width: 60px;
        height: auto;
    }
    
    .footer-company {
        font-size: 14px;
        white-space: nowrap;
    }
    
    .footer-links {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        width: 100%;
    }
    
    .footer-link {
        font-size: 11px;
    }
    
    .footer-notice,
    .footer-copyright {
        font-size: 10px;
        text-align: center;
    }
    
    .more-games-btn,
    .more-news-btn {
        font-size: 14px;
        width: 200px;
        height: 50px;
        padding: 0;
    }
    
    .news-card .read-more-btn {
        font-size: 12px;
        padding: 6px 0px;
    }
    
    .carousel-prev {
        left: 5px;
    }
    
    .carousel-next {
        right: 5px;
    }
    
    /* 滚动提示调整 */
    .scroll-hint {
        bottom: 20px;
    }
    
    .scroll-hint-text {
        font-size: 10px;
    }
}

/* 520px 断点 - 游戏卡片下载按钮变为单个 */
@media (max-width: 520px) {
    /* 只显示一个"去下载"按钮 */
    .download-btn {
        width: 70%;
        margin: 0 auto;
        padding: 6px 12px;
        border-radius: 16px;
        gap: 0;
        justify-content: center;
    }
    
    /* 隐藏第二个下载按钮 */
    .download-btn:nth-child(2) {
        display: none;
    }
    
    /* 隐藏图标 */
    .download-btn .app-icon {
        display: none;
    }
    
    /* 隐藏原有文字，只显示"去下载"或"立即体验" */
    .download-btn .btn-text {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .download-btn .btn-title {
        display: none;
    }
    
    .download-btn .btn-subtitle {
        font-size: 14px;
        font-weight: 500;
        color: #FFFFFF;
    }
    
    /* 小程序按钮在小屏幕下与普通下载按钮样式相同 */
    .download-btn.mini-program-btn {
        width: 70%;
        margin: 0 auto;
        padding: 6px 12px;
        border-radius: 16px;
        gap: 0;
        justify-content: center;
    }
    
    .download-btn.mini-program-btn .app-icon {
        display: none;
    }
    
    .download-btn.mini-program-btn .btn-title {
        display: none;
    }
    
    .download-btn.mini-program-btn .btn-subtitle {
        font-size: 14px;
        font-weight: 500;
        color: #FFFFFF;
    }
}

/* 480px 断点 - 小手机 */
@media (max-width: 480px) {
    :root {
        --section-padding: 24px 12px;
    }
    
    /* 导航栏样式优化 */
    .header {
        height: auto;
        padding: 10px 0;
    }
    
    .header-container {
        flex-direction: column;
        padding: 0 12px;
        gap: 8px;
    }
    
    .logo-img {
        width: 90px;
        height: auto;
    }
    
    .logo-text {
        gap: 6px;
    }
    
    .logo-text span {
        font-size: 8px;
    }
    
    .navigation {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav-item {
        font-size: 12px;
    }
    
    .hero {
        height: 100vh;
        max-height: 550px;
        min-height: 400px;
        padding: 90px 12px 50px;
        align-items: center;
        margin-top: 0;
    }
    
    .page-hero {
        padding: 70px 12px 0 12px;
    }
    
    .title-light,
    .title-bold {
        font-size: 24px;
    }
    
    .hero-description {
        font-size: 11px;
    }
    
    .section-title {
        font-size: 20px;
    }
    
    .section-subtitle {
        font-size: 11px;
    }
    
    /* 标题区域间距调整 */
    .products-header-wrapper {
        margin-bottom: 20px;
    }
    
    .section-header {
        margin-bottom: 20px;
    }
    
    /* 游戏卡片 */
    .products-content-wrapper {
        gap: 12px;
    }
    
    .products-grid {
        gap: 12px; /* 小屏幕下统一间距12px */
    }
    
    .game-card {
        border-radius: 12px; /* 游戏卡片整体圆角12px */
    }
    
    .game-image {
        border-radius: 12px 12px 0 0;
    }
    
    .game-preview-img {
        border-radius: 12px 12px 0 0; /* 预览图圆角与卡片一致 */
    }
    
    .game-logo {
        margin-top: -20px;
        margin-bottom: 4px;
    }
    
    .game-logo-img {
        width: 40px;
        height: 40px;
    }
    
    .game-content {
        padding: 6px 12px 12px;
        gap: 3px;
    }
    
    .game-info {
        gap: 0px;
    }
    
    .game-name {
        font-size: 14px;
        margin-bottom: 1px;
    }
    
    .game-description {
        font-size: 10px;
        min-height: auto;
        line-height: 1.2;
        margin-bottom: 6px;
    }
    
    .game-tag {
        font-size: 8px;
        padding: 2px 4px;
        margin-bottom: 3px;
    }
    
    .game-buttons {
        gap: 0;
        margin-top: 0;
    }
    
    /* 480px断点下按钮字体更小 */
    .download-btn .btn-subtitle,
    .download-btn.mini-program-btn .btn-subtitle {
        font-size: 12px;
    }
    
    /* 玩家评价 */
    .reviews-grid {
        gap: 8px;
    }
    
    .review-column-left,
    .review-column-center {
        gap: 8px;
    }
    
    .review-card {
        padding: 12px;
        border-radius: 10px;
        gap: 8px;
    }
    
    .quote-icon {
        width: 16px;
        height: 16px;
    }
    
    .review-text {
        font-size: 12px;
    }
    
    .author-avatar {
        width: 30px;
        height: 30px;
    }
    
    .author-name {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 70px;
    }
    
    .author-role {
        font-size: 10px;
    }
    
    /* 新闻卡片 */
    .news-center {
        gap: 20px;
    }
    
    .news-grid {
        gap: 8px;
    }
    
    .news-card {
        border-radius: 10px;
    }
    
    .news-image {
        border-radius: 10px 10px 0 0;
    }
    
    .news-content {
        padding: 12px 12px;
        gap: 10px;
    }
    
    .news-title {
        font-size: 14px;
    }
    
    .news-description {
        font-size: 12px;
    }
    
    .news-tag {
        width: 32px;
        height: 18px;
        font-size: 7px;
        padding: 2px 5px;
    }
    
    .date-icon {
        width: 14px;
        height: 14px;
    }
    
    .news-date {
        font-size: 9px;
    }
    
    .read-more-btn {
        padding: 4px 0px;
        font-size: 12px;
    }
    
    /* 关于我们 */
    .about-us {
        padding: 30px 24px;
    }
    
    .about-content {
        gap: 12px; /* 小屏幕下调整间距 */
    }
    
    .about-text {
        gap: 12px; /* 小屏幕下调整间距 */
    }
    
    .about-description {
        font-size: 14px;
    }
    
    .stats-grid {
        gap: 10px;
        padding: 0 16px;
    }
    
    .stat-card {
        padding: 6px 0;
    }
    
    .stat-icon {
        width: 50px;
        height: auto; /* 使用auto让高度自适应 */
        aspect-ratio: 1; /* 保持正方形 */
        margin-bottom: 8px;
    }
    
    .stat-icon-img {
        width: 50px;
        height: 50px;
    }
    
    .stat-number {
        font-size: 16px;
    }
    
    .stat-label {
        font-size: 9px;
    }
    
    /* 新闻列表页双列 */
    .news-list-grid {
        gap: 8px;
    }
    
    /* 新闻列表页标题和描述省略 */
    .news-list-section .news-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .news-list-section .news-description {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .producer-name {
        font-size: 18px;
    }
    
    .producer-role {
        font-size: 12px;
    }
    
    .producer-quote {
        font-size: 11px;
    }
    
    /* 联系我们 */
    .contact-us {
        gap: 16px;
    }
    
    .contact-content {
        gap: 8px;
    }
    
    .contact-info,
    .map-container {
        border-radius: 12px; /* 小屏幕圆角12px */
    }
    
    .contact-info {
        padding: 20px; /* 上下左右padding为20 */
        gap: 12px; /* 总部电话邮箱间距为12 */
        min-height: auto; /* 移除固定最小高度 */
    }
    
    .contact-icon {
        width: 28px; /* 图标进一步缩小 */
        height: 28px;
    }
    
    .contact-label {
        font-size: 12px;
        margin-bottom: 2px; /* 减小标签下方间距 */
        line-height: 1.2;
    }
    
    .contact-text {
        font-size: 11px;
        line-height: 1.2;
    }
    
    .contact-item {
        gap: 6px;
    }
    
    .contact-details {
        gap: 2px;
    }
    
    .map-container {
        min-height: 100px; /* 缩小地图最小高度 */
    }
    
    /* 页脚 */
    .footer {
        padding: 24px 12px;
        gap: 20px; /* 调整为20px */
    }
    
    .footer-top {
        flex-direction: column;
        align-items: center;
        gap: 20px; /* 调整为20px */
    }
    
    .footer-logo {
        gap: 8px;
    }
    
    .footer-logo-img {
        width: 60px;
        height: auto;
    }
    
    .footer-company {
        font-size: 12px;
    }
    
    .footer-links {
        gap: 10px;
    }
    
    .footer-link {
        font-size: 10px;
    }
    
    .footer-notice,
    .footer-copyright {
        font-size: 9px;
    }
    
    .more-games-btn,
    .more-news-btn {
        font-size: 14px;
        width: 180px;
        height: 45px;
        padding: 0;
    }
    
    .news-card .read-more-btn {
        font-size: 12px;
        padding: 6px 0px;
    }
    
    /* 滚动提示 */
    .scroll-hint {
        bottom: 12px;
    }
    
    .scroll-hint-text {
        font-size: 9px;
    }
    
    .scroll-mouse,
    .scroll-swipe {
        width: 18px;
        height: 28px;
    }
}

/* ==================== 页面Hero区域样式 ==================== */
.page-hero {
    background: linear-gradient(135deg, #1B2C57 0%, #0F1729 100%); /* 默认渐变背景（备用） */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 90px 160px 0 160px; /* 顶部90px为导航栏预留空间 */
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 320px; /* 头图最小高度 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center;
}

/* 游戏列表页专用头图 */
.games-list-page .page-hero {
    background-image: url('../images/page-hero-games.png');
}

.games-list-page .page-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* 黑色50%蒙版 */
    z-index: 1;
    pointer-events: none;
}

/* 新闻列表页专用头图 */
.news-list-page .page-hero {
    background-image: url('../images/page-hero-news.png');
}

.news-list-page .page-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* 黑色50%蒙版 */
    z-index: 1;
    pointer-events: none;
}

/* 装饰光晕效果已移除，避免与蒙版冲突 */

.page-hero-content {
    max-width: 800px;
    position: relative;
    z-index: 2; /* 确保内容在蒙版上方 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 内容水平居中 */
    justify-content: center; /* 内容垂直居中 */
    padding: 40px 20px; /* 内部上下间距 */
}

.page-hero-title {
    font-size: 48px; /* 从64px改为48px */
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 8px 0; /* 标题下方间距8px */
}

.page-hero-subtitle {
    font-size: 24px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6); /* 白色60%透明度 */
    letter-spacing: 2px;
    margin: 0 0 12px 0; /* 副标题下方间距12px */
}

.page-hero-description {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6); /* 白色60%透明度 */
    line-height: 1.8;
    margin: 0; /* 清除默认margin */
}

/* ==================== 游戏列表页面样式 ==================== */
.games-list-section {
    padding: 80px 160px; /* 添加左右160px边距 */
    background: #ffffff;
}

/* 游戏列表页面：取消卡片的初始隐藏和动画效果，直接显示 */
.games-list-section .game-card {
    opacity: 1 !important; /* 直接显示，不隐藏 */
    transform: translateY(0) !important; /* 不偏移 */
    pointer-events: auto !important; /* 允许交互 */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important; /* 只保留hover效果 */
}

/* 游戏列表页面：悬停效果 */
.games-list-section .game-card:hover {
    transform: translateY(-8px);
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.15);
}

.games-list-section .game-card:hover .game-name {
    color: var(--color-kunpo-blue);
}

/* ==================== 新闻列表页面样式 ==================== */
.news-list-section {
    padding: 80px 160px;
    background: #ffffff;
}

.news-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列网格布局 */
    gap: 40px; /* 固定间距40px */
    max-width: 1210px; /* 容器最大宽度: 585px * 2 + 40px = 1210px */
    margin: 0 auto;
}

/* 新闻列表页卡片自适应宽度，最大585px */
.news-list-section .news-card {
    width: 100%; /* 填满网格单元格 */
    max-width: 585px; /* 最大宽度585px */
    margin: 0 auto; /* 在网格单元格中居中 */
}

/* 新闻列表页标签样式 - 与首页news-tag保持一致 */
.news-category {
    width: 56px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--color-black);
    border-radius: 11px;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    color: var(--color-gold);
}

/* 新闻卡片样式直接继承首页的 .news-card 样式 */

/* ==================== 响应式设计 ==================== */
@media (max-width: 1440px) {
    .page-hero {
        padding: 90px 120px 0 120px; /* 顶部90px为导航栏预留空间 */
    }
    
    .games-list-section {
        padding: 60px 120px; /* 调整为120px */
    }
    
    .news-list-section {
        padding: 60px 120px;
    }
}

@media (max-width: 1200px) {
    .page-hero {
        padding: 90px 80px 0 80px; /* 顶部90px为导航栏预留空间 */
    }
    
    .page-hero-title {
        font-size: 44px;
    }
    
    .page-hero-subtitle {
        font-size: 20px;
    }
    
    .games-list-section {
        padding: 60px 80px; /* 调整为80px */
    }
    
    .news-list-section {
        padding: 60px 80px;
    }
    
    .news-list-grid {
        gap: 40px; /* 固定间距40px */
    }
    
    .news-list-section .news-card {
        max-width: 100%; /* 1200px断点自适应 */
    }
}

@media (max-width: 1024px) {
    .page-hero {
        padding: 90px 60px 0 60px; /* 顶部90px为导航栏预留空间 */
    }
    
    .games-list-section {
        padding: 50px 60px; /* 调整为60px */
    }
    
    .news-list-section {
        padding: 50px 60px;
    }
}

@media (max-width: 768px) {
    .page-hero {
        padding: 90px 30px 0 30px; /* 顶部90px为导航栏预留空间 */
    }
    
    .page-hero-title {
        font-size: 38px;
    }
    
    .page-hero-subtitle {
        font-size: 16px;
    }
    
    .page-hero-description {
        font-size: 14px;
    }
    
    .games-list-section {
        padding: 40px 20px; /* 与首页一致 */
    }
    
    .news-list-section {
        padding: 40px 20px;
    }
    
    .news-list-grid {
        grid-template-columns: repeat(2, 1fr); /* 768px断点双列显示 */
        gap: 12px; /* 间距12px */
    }
    
    .news-list-section .news-card {
        max-width: 100%; /* 768px断点自适应 */
    }
    
    /* 新闻列表页标签和日期 - 与首页保持一致 */
    .news-category {
        width: 36px;
        height: 20px;
        font-size: 9px;
        border-radius: 8px;
    }
    
    .news-list-section .calendar-icon {
        width: 16px;
        height: 16px;
    }
    
    .news-list-section .news-date {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .games-list-section {
        padding: 24px 12px; /* 与首页一致 */
    }
    
    .news-list-section {
        padding: 24px 12px;
    }
    
    .news-category {
        width: 32px;
        height: 18px;
        font-size: 7px;
        border-radius: 6px;
    }
    
    .news-list-section .calendar-icon {
        width: 14px;
        height: 14px;
    }
    
    .news-list-section .news-date {
        font-size: 9px;
    }
}

/* ==================== 下载弹窗样式 ==================== */
.download-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.download-modal-content {
    background: #FFFFFF;
    border-radius: 20px;
    width: 90%;
    max-width: 360px;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.download-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #E8EAF6;
}

.download-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
}

.download-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-tertiary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.3s ease;
}

.download-modal-close:hover {
    color: var(--color-primary);
}

.download-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.download-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.download-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.download-option.ios {
    background: linear-gradient(135deg, #1a1a1a 0%, #333333 100%);
}

.download-option.android {
    background: linear-gradient(135deg, #01875f 0%, #34a853 100%);
}

.download-option.wechat {
    background: linear-gradient(135deg, #07c160 0%, #2aae67 100%);
}

.download-option img {
    width: 24px;
    height: 24px;
}

.download-option .wechat-icon {
    font-size: 24px;
}

/* 微信引导样式 */
.wechat-guide .download-modal-body {
    text-align: center;
    padding: 32px 24px;
}

.wechat-guide-content {
    margin-bottom: 20px;
}

.guide-step {
    font-size: 16px;
    color: var(--color-secondary);
    margin: 8px 0;
}

.guide-name {
    font-size: 24px;
    font-weight: 600;
    color: #07c160;
    margin: 16px 0;
    padding: 12px 20px;
    background: rgba(7, 193, 96, 0.1);
    border-radius: 12px;
    display: inline-block;
}

.guide-tip {
    font-size: 16px;
    color: var(--color-tertiary);
    margin: 0 0 12px;
    line-height: 1.4;
}

.qrcode-placeholder {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    background: #f5f5f5;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-tertiary);
    font-size: 14px;
}

.qrcode-placeholder .mini-id {
    font-size: 10px;
    margin-top: 8px;
    color: #999;
}

/* 重试打开微信按钮 */
.retry-launch-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #07c160 0%, #2aae67 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.retry-launch-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(7, 193, 96, 0.3);
}

.retry-launch-btn:active {
    transform: translateY(0);
}

/* 小程序码图片样式 */
.qrcode-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
}

.qrcode-image {
    width: 200px;
    height: 200px;
    border-radius: 12px;
    object-fit: contain;
}

/* 小程序引导弹窗居中样式 */
.wechat-guide-centered {
    position: relative;
    text-align: center;
    padding: 24px 24px 40px 24px;
}

.wechat-guide-centered .download-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
}

.wechat-guide-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 16px 0 8px 0;
    text-align: center;
    line-height: 1.2;
}

.wechat-guide-centered .download-modal-body {
    padding: 0;
}

/* 平台暂未上架提示弹窗样式 */
.not-available-modal {
    text-align: center;
    padding: 40px 32px;
    max-width: 320px;
}

.not-available-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.not-available-text {
    font-size: 16px;
    color: var(--color-primary);
    line-height: 1.6;
    margin: 0 0 24px 0;
}

.not-available-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--color-kunpo-blue) 0%, #0080cc 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.not-available-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 167, 255, 0.3);
}

.not-available-btn:active {
    transform: translateY(0);
}