/* ========================================================================= */
/* 游戏详情页面样式表 - shouyou.css                                           */

/* Font Awesome字体定义 */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('../webfonts/fa-solid-900.eot');
  src: url('../webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
       url('../webfonts/fa-solid-900.woff2') format('woff2'),
       url('../webfonts/fa-solid-900.woff') format('woff'),
       url('../webfonts/fa-solid-900.ttf') format('truetype'),
       url('../webfonts/fa-solid-900.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../webfonts/fa-brands-400.eot');
  src: url('../webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
       url('../webfonts/fa-brands-400.woff2') format('woff2'),
       url('../webfonts/fa-brands-400.woff') format('woff'),
       url('../webfonts/fa-brands-400.ttf') format('truetype'),
       url('../webfonts/fa-brands-400.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../webfonts/fa-regular-400.eot');
  src: url('../webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
       url('../webfonts/fa-regular-400.woff2') format('woff2'),
       url('../webfonts/fa-regular-400.woff') format('woff'),
       url('../webfonts/fa-regular-400.ttf') format('truetype'),
       url('../webfonts/fa-regular-400.svg#fontawesome') format('svg');
}

/* 导航路径容器样式 */
/* 标题容器样式已合并到下方统一样式 */

/* 视频容器样式 */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 宽高比 */
    overflow: hidden;
    margin-bottom: 20px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* 折扣标签样式 */
.discount-tag {
    position: relative;
    height: auto;
    line-height: 1.2;
    padding: 0.06rem 0.25rem;
    background-color: #ff4444;
    color: white !important;
    font-size: 0.26rem;
    font-weight: bold !important;
    border-radius: 0.5rem;
    box-shadow: 0 .02rem .06rem rgba(255, 68, 68, .3);
    z-index: 10;
}

.discount-tag a {
    color: white !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
}


/* 页面特定的body样式，继承common.css中的基础字体设置 */
body {background-color:#ebebeb;position:relative;}


/* ========================================= */
/* 2. 游戏主视觉区域样式                     */
/* ========================================= */

/* 推荐游戏容器 */
.recommend-game-list {
    margin-top: 0;
    padding-top: 0.3rem;
}

/* 推荐游戏列表 */
.recommend-game-list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* 游戏项 */
.recommend-game-list li {
    width: 25%;
    text-align: center;
    margin-bottom: 0.4rem;
    transition: transform .3s ease;
}

.recommend-game-list li:nth-child(n+4) {
    margin-bottom: 0.32rem;
}

/* 游戏链接 - 不应用于下载按钮 */
.recommend-game-list li > a:not(.btn-download) {
    display: block;
}

/* 游戏图片容器 */
.recommend-game-list li .game-img-container {
    position: relative;
    width: 1.24rem;
    height: 1.24rem;
    margin: 0 auto;
}

/* 游戏图片 */
.recommend-game-list li img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0.24rem;
    box-shadow: 0 .04rem .12rem rgba(0,0,0,.12);
    transition: transform .3s ease, box-shadow .3s ease;
    object-fit: cover;
}



/* 游戏项悬浮效果 */
.recommend-game-list li:hover .game-img-container {
    transform: scale(1.05);
}

.recommend-game-list li:hover .game-img-container img {
    box-shadow: 0 .06rem .2rem rgba(0,0,0,.18);
}

/* 游戏名称 */
.recommend-game-list li .name,
.recommend-game-list li h4.name {
    width: 90%;
    margin: 0.15rem auto 0 auto;
    padding: 0 0.15rem;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    font-size: .22rem;
    font-weight: 500;
    line-height: 1.3;
}



/* 游戏主视觉区域样式 */
.game-hero {
    position: relative;
    width: 100%;
    height: 3.5rem;
    margin-top: 0;
    margin-bottom: 0.15rem;
    background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
    overflow: hidden; /* 确保内容不会超出容器 */
}

/* 主视觉图片 */
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .8;
    transition: transform .3s ease;
    filter: saturate(1.3) brightness(1.1);
    position: absolute;
    top: 0;
    left: 0;
}

/* 响应式调整 - 已移至main.js动态控制 */

.hero-image:hover {
    transform: scale(1.05);
}

/* 游戏信息覆盖层 */
.game-top-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    padding: 1rem 0.2rem .6rem 0.2rem;
    box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, .95));
    border: .02rem solid rgba(255, 255, 255, .4);
    z-index: 2;
    filter: saturate(1.3) brightness(1.1);
}

/* 导航路径 */
.nav-path {
    position: absolute;
    top: .1rem;
    left: 0;
    z-index: 10;
    background-color: transparent;
    color: white;
    padding: .1rem .15rem;
    font-size: .24rem;
    width: 100%;
    box-sizing: border-box;
}

.nav-path a {
    color: white;
    text-decoration: none;
    opacity: .9;
    transition: opacity .3s ease;
}

.nav-path a:hover {
    color: white;
    opacity: 1;
    text-decoration: underline;
}

.nav-path span {
    color: #999;
    font-weight: 500;
}

/* 副标题容器 */
.subtitle-container {
    position: absolute;
    bottom: .05rem;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    background-color: transparent;
    color: white;
    padding: .08rem .12rem;
    border-radius: 0;
    font-size: .24rem;
    z-index: 10;
    text-align: left;
}

/* 2.6 游戏Logo容器 */
.game-logo-container {
    width: .9rem;
    height: .9rem;
    border-radius: .15rem;
    background-color: #fff;
    padding: .03rem;
    z-index: 3;
}

/* 2.7 游戏Logo */
.game-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: .12rem;
}

/* 2.8 游戏信息区域 */
.game-overlay-info {
    margin-left: .2rem;
    flex: 1;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: .06rem;
}

/* 2.9 游戏标题 */
.game-title-overlay {
    font-size: 0.40rem;
    line-height: 1.1;
    font-weight: bold;
    color: #fff;
    margin: 0;
    text-shadow: 0 .01rem .02rem rgba(0, 0, 0, .5);
}

/* 2.10 游戏标签容器 */
.game-tags-overlay {
    display: flex;
    align-items: center;
    gap: .1rem;
    flex-wrap: wrap;
    font-size: 0.22rem;
    margin-top: 0.065rem;
    padding-right: 0.1rem;
}

/* 游戏标签样式 */
.tag-overlay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .06rem .12rem;
    border-radius: .16rem;
    font-size: .20rem;
    font-weight: 500;
    font-family: "黑体", "SimHei", sans-serif;
    background-color: rgba(255, 255, 255, .2);
    color: white;
    backdrop-filter: blur(.02rem);
    filter: saturate(1.3) brightness(1.1);
    border: .01rem solid rgba(255, 255, 255, .3);
    height: auto;
    line-height: 1.2;
    min-width: fit-content;
}

/* 标签变体共享样式 */
.tag-overlay.android-overlay,
.tag-overlay.age-restriction-overlay,
.tag-overlay.players-overlay {
    backdrop-filter: none;
    border: .01rem solid;
}

/* 3.3 官方正版标签覆盖层 */
.tag-overlay.android-overlay {
    background-color: #1890ff; /* 使用不透明的蓝色 */
    color: white;
    border-color: #1890ff;
}

/* 3.4 年龄限制标签覆盖层 */
.tag-overlay.age-restriction-overlay {
    background-color: #ff4d4f; /* 使用不透明的红色 */
    color: white;
    border-color: #ff4d4f;
}

/* 3.4.1 玩家数量标签覆盖层 */
.tag-overlay.players-overlay {
    background-color: #006400; /* 使用不透明的绿色 */
    color: white;
    border: none;
}

/* 反馈按钮样式 */
.feedback-tag {
    display: inline-flex;
    align-items: center;
    padding: .06rem .12rem;
    border-radius: .16rem;
    font-size: .20rem;
    font-weight: 500;
    font-family: "黑体", "SimHei", sans-serif;
    background-color: #faad14;
    color: black;
    border: .01rem solid #faad14;
    margin: 0;
}

/* 标题和反馈按钮容器 */
.title-feedback-container {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-wrap: wrap;
}

/* 标签图标样式 */
.tag-overlay::before, .feedback-tag::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: .26rem;
    display: inline-block;
    margin-right: .04rem;
    width: .26rem;
    height: .26rem;
    line-height: .26rem;
    color: inherit;
}

.tag-overlay.android-overlay::before { content: "\f058"; }
.tag-overlay.age-restriction-overlay::before { content: "\f007"; }
.feedback-tag::before { content: "\f1d8"; }
.tag-overlay.players-overlay::before { content: "\f06d"; }

/* 游戏信息区域样式 */
.game-info-section {
    width: 100%;
    max-width: 7.5rem;
    margin: 0 auto 0.15rem;
    padding: 0;
    background-color: #fff;
    box-shadow: 0 .02rem .08rem rgba(0, 0, 0, .1);
    box-sizing: border-box;
    position: relative;
}

/* 游戏特色模块样式 */
.game-features-section .features-content {
    margin: 0;
    background-color: #fff;
    word-break: break-word;
    display: block;
    overflow: visible;
    text-overflow: unset;
    transition: all 0.3s ease;
}

/* 游戏特色模块标题样式（参考glxq页面） */
.game-features-section h3 {
    margin-bottom: .1rem;
    letter-spacing: 0;
    padding-bottom: .1rem;
    position: relative;
}

.game-features-section h3::after {
    content: '';
    display: block;
    width: 100%;
    height: .02rem;
    background: linear-gradient(to right, #00b42a, transparent);
    margin-top: .1rem;
}

/* 游戏特色模块段落样式 - 仅覆盖颜色 */
.game-features-section p {
    color: #666;
}


/* 游戏信息区域顶部渐变效果 */
.game-info-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: .1rem;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff);
    z-index: 1;
}



/* 4.2.1 主内容区域样式 */
main {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 0.2rem 0;
    margin: 0;
    background-color: #fff;
}

/* 修正horizontal-layout可能导致的内容位移问题 */
.horizontal-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-bottom: 0.15rem;
    position: relative;
    padding: 0.02rem 0.05rem 0; /* 设置左右内间距为0.05rem，顶部内间距为0.02rem */
    width: 100%;
    box-sizing: border-box;
}



/* 4.4 隐藏原始的游戏标题和标签（已移至主视觉图） */



/* 4.6 游戏信息整体容器 */
.game-info-wrapper {
    flex: 1;
    min-width: 0;
    padding: 0 0.1rem 0 0.02rem;
}

/* 4.7 游戏分类标签容器 */
.game-category-tags {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.05rem;
    flex: 1;
    align-items: center;
    position: relative;
    z-index: 1;
    justify-content: flex-start;
}

/* 4.8 分类标签基础样式 */
.category-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .06rem .2rem;
    border-radius: .16rem;
    font-size: .22rem;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    position: relative;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    margin-bottom: .05rem;
    height: auto;
    line-height: 1.2;
    min-width: fit-content;
    border: .01rem solid rgba(255, 255, 255, .3);
    background-color: #8c8c8c;
}

/* 分类标签样式已移除图标 */

/* 4.15 分类标签背景颜色 */


/* 评分容器样式 */
.rating-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    text-align: center;
    width: auto;
    height: auto;
    z-index: 2;
    margin-bottom: 0;
    box-sizing: border-box;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 0;
}



.game-rating {
    font-size: .26rem;
    font-weight: bold;
    color: red;
    margin: 0 0 0 0.1rem;
    display: inline-block;
    text-shadow: none;
}

.rating-desc {
    font-size: .22rem;
    color: red;
    font-style: normal;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: auto;
    padding: 0;
    margin: 0;
    letter-spacing: -.01rem;
}

.rating-desc .star {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: .22rem;
    margin-right: .05rem;
    position: relative;
    color: red;
    display: inline-block;
}

.rating-desc .star-full::before {
    content: "\f005";
    opacity: 1;
}

.rating-desc .star-half::before {
    content: "\f089";
    opacity: 1;
}

.rating-desc .star-empty::before {
    content: "\f005";
    opacity: 0.3;
}

/* 游戏详情信息样式 */


.game-details {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    margin: 0.2rem 0 0.2rem 0; /* 上外边距改为0.2rem */
    text-align: left;
    padding: 0; /* 取消所有内边距 */
    box-sizing: border-box;
}

/* 详情行容器，使用flex布局 */
.detail-row {
    display: flex;
    width: 100%;
    margin-bottom: 0.1rem;
}

/* 详情项容器 */
.detail-item {
    display: flex;
    box-sizing: border-box;
    padding: 0 0.05rem;
    overflow: hidden;
    white-space: nowrap;
}

/* 左侧详情项占40%宽度 */
.detail-left {
    width: 40%;
}

/* 右侧详情项占60%宽度 */
.detail-right {
    width: 60%;
}

.detail-label {
    color: #999;
    font-size: 0.26rem;
}

/* 详情值样式 */
.detail-value {
    color: #666;
    font-size: 0.26rem;
    font-weight: normal;
    margin-left: 0.05rem;
}

/* 下载按钮样式 */
.download-buttons {
    display: flex;
    gap: .2rem;
    justify-content: center;
    align-items: center;
    margin: .2rem 0 0.5rem 0;
}

.download-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .1rem;
    padding: .16rem .2rem .16rem .2rem;
    border-radius: .6rem;
    cursor: pointer;
    position: relative;
    flex: 1;
    min-width: 2rem;
    max-width: 3.8rem;
    height: .8rem;
    transition: all .3s ease;
    box-sizing: border-box;
    border: .02rem solid #667eea;
    font-weight: 600;
}

.download-btn .download-text {
    font-size: .32rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
}

/* 下载图标 */
.download-icon {
    display: inline-block;
    width: .45rem;
    height: .45rem;
    line-height: .45rem;
    text-align: center;
    font-size: 0.36rem;
    flex-shrink: 0;
}

.download-icon::before {
    content: "\f019";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #ffffff;
    display: inline-block;
}

.android-download {
    background-color: #667eea;
    color: #ffffff;
    border: none;
    margin-left: .1rem;
}

.ios-download {
    background-color: #ffffff;
    color: #667eea;
    margin-right: .1rem;
}



.android-download:hover {
    background-color: #667eea;
    color: #ffffff;
}

.ios-download:hover {
    background-color: #f0f9ff;
    color: #667eea;
}

.ios-download .download-icon::before {
    color: #667eea;
}

.android-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: .25rem;
    font-size: .18rem;
    padding: .05rem .08rem;
    flex-shrink: 0;
    border-radius: .1rem;
    box-shadow: 0 .01rem .03rem rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
    gap: .04rem;
    background-color: white;
    color: #667eea;
    font-weight: normal;
}

.android-label::before {
    content: "✓";
    font-size: .18rem;
    display: inline-block;
    color: #667eea;
}



/* 响应式设计样式 */
.game-detail-module {
    width: 100%;
    max-width: 7.5rem;
    margin: 0 auto;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    background-color: #fff;
    overflow: hidden;
    box-sizing: border-box;
}

.game-features-section {
    width: 100%;
    max-width: 7.5rem;
    margin: 0 auto 0.15rem;
    padding: 0;
    background-color: #fff;
    box-shadow: 0 .02rem .08rem rgba(0, 0, 0, .1);
    box-sizing: border-box;
}

.version-log-section {
    width: 100%;
    max-width: 7.5rem;
    margin: 0 auto;
    margin-top: 0;
    margin-bottom: 0.15rem;
    padding: 0;
    background-color: #fff;
    box-shadow: 0 .02rem .08rem rgba(0, 0, 0, .1);
    box-sizing: border-box;
}

/* 固定导航栏样式 */
.fixed-header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    width: 100%;
    max-width: 7.5rem;
    background-color: #667eea;
    box-shadow: 0 .02rem .08rem rgba(0, 0, 0, .1);
    z-index: 999;
    transition: transform .3s ease;
}

.fixed-header.visible {
    transform: translateX(-50%) translateY(0);
}



.fixed-header-content {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 0.2rem;
}

.back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0;
    color: #fff;
    text-decoration: none;
    font-size: 0.40rem;
    transition: all .3s ease;
}

.back-button:hover {
    transform: scale(1.1);
}

.fixed-logo-container {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.06rem;
    overflow: hidden;
    background-color: #fff;
    padding: 0.01rem;
    margin-right: 0.1rem;
}

.fixed-game-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.04rem;
}

.fixed-game-title {
    flex: 1;
    margin-right: 0.1rem;
    font-size: 0.3rem;
    font-weight: bold;
    color: #fff;
    text-align: left;
}

.fixed-download-btn {
    background-color: #fff;
    color: #667eea;
    border: none;
    padding: 0.05rem 0.2rem;
    border-radius: 0.3rem;
    font-size: 0.3rem;
    font-weight: normal;
    cursor: pointer;
    text-decoration: none;
    transition: all .3s ease;
}

.fixed-download-btn:hover {
    background-color: #f0f9ff;
    transform: translateY(-.01rem);
    box-shadow: 0 .02rem .08rem rgba(102, 126, 234, .4);
}

.fixed-download-container {
    display: flex;
    align-items: center;
}


/* 标签内容样式 */
.tab-content {
    padding: 0;
    display: none;
    width: 100%;
    box-sizing: border-box;
}

.tab-content.active {
    display: block;
}


/* ========================================= */
/* 13. 游戏简介样式                          */
/* ========================================= */

/* 13.1 游戏简介容器 */

/* 13.2 简介文本样式 */
.intro-text-container {
    position: relative;
    margin: 0;
    padding: 0 0.2rem 0.3rem 0.2rem; /* 增加内边距，避免文本超出容器 */
    box-sizing: border-box;
    width: 100%;
}

.intro-text {
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
    padding: 0;
    box-sizing: border-box;
    color: #666;
    text-align: justify;
    text-indent: 2em;
    font-size: 0.30rem;
    line-height: 1.8;
    white-space: normal;
    -webkit-hyphens: auto;
    hyphens: auto;
    max-height: 3.24rem; /* 0.30rem * 1.8 * 6 = 3.24rem */
    height: auto;
}

.intro-text.expanded {
    display: block;
    max-height: none;
    height: auto;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

/* 玩家评价模块特殊样式 - 内容全部显示 */
.player-review-container .intro-text {
    display: block;
    max-height: none;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-box-orient: unset;
    box-orient: unset;
}

.expand-btn {
    position: absolute;
    bottom: 0.07rem;
    right: 0.2rem;
    background: rgba(255, 255, 255, 0.9);
    color: #667eea;
    border: none;
    padding: 0 0.1rem;
    height: 0.30rem;
    font-size: 0.26rem;
    line-height: 0.30rem;
    cursor: pointer;
    border-radius: .04rem;
    transition: all 0.3s;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0.6rem;
}

.expand-btn i {
    margin-right: 0.05rem;
    font-size: 0.22rem;
}

/* 版本日志内容样式 */
.log-content {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    margin-bottom: 0.05rem;
    font-size: 0.26rem;
}

/* 查看按钮样式 */
.view-btn {
    background: #fff;
    color: #667eea;
    border: 0.01rem solid #667eea;
    padding: 0.05rem 0.2rem;
    height: 0.4rem;
    font-size: 0.26rem;
    line-height: 0.4rem;
    cursor: pointer;
    border-radius: 0.2rem;
    transition: all 0.3s ease;
    min-width: 0.8rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-btn:hover {
    background: #667eea;
    color: #fff;
    transform: translateY(-0.02rem);
    box-shadow: 0 0.02rem 0.08rem rgba(102, 126, 234, 0.3);
}

/* 弹窗样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 0;
    border-radius: 0.1rem;
    width: 90%;
    max-width: 700px;
    box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0.3rem;
    background-color: #667eea;
    color: #fff;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
}

.modal-header h3 {
    margin: 0;
    font-size: 0.32rem;
    color: #fff;
}

.close {
    color: #fff;
    font-size: 0.4rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 0.4rem;
}

.close:hover, .close:focus {
    color: #f0f0f0;
    text-decoration: none;
}

.modal-body {
    padding: 0.3rem;
}

#modalDate {
    color: #999;
    font-size: 0.28rem;
    margin-bottom: 0.2rem;
}

#modalContent {
    word-break: break-word;
    font-size: 0.3rem;
    line-height: 1.5;
}

/* 版本日志样式 */
.version-log {
    margin-bottom: 0.15rem;
    padding: 0 0.1rem 0.15rem;
}

/* 日志项容器 */
.log-item {
    background-color: #fafbff;
    border-radius: 0.12rem;
    padding: 0.15rem 0.25rem;
    margin-bottom: 0.15rem;
    box-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 0.01rem solid #e6edff;
}

.log-item:hover {
    box-shadow: 0 0.05rem 0.2rem rgba(0, 0, 0, 0.1);
    transform: translateY(-0.02rem);
}

.log-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: .12rem;
    padding-top: .08rem;
    flex-wrap: wrap;
}

.log-header .view-btn {
    margin-left: auto;
}

.log-header > div {
    display: flex;
    align-items: center;
    margin-right: 0.2rem;
}

.log-version {
    color: #667eea;
    font-size: 0.26rem;
}

.log-date {
    color: #999;
    font-size: 0.26rem;
    letter-spacing: 0;
    margin-right: 0.2rem;
}

/* 版本日志标签样式 */
.log-label {
    color: #999;
    font-size: 0.26rem;
    margin-left: 0.1rem;
}

/* 游戏信息样式 */
.game-info {
    padding: 0 0.2rem 0.2rem;
    margin-bottom: 0;
    background-color: #fff;
    border-radius: 0;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
}

.info-table tr td {
    padding: .15rem 0;
    border: none;
}

.info-table tr:last-child td {
    padding-bottom: 0;
}

.info-label {
    width: 30%;
    color: #999;
    font-weight: normal;
}

.info-value {
    color: #333;
}

/* 游戏截图滑动模块样式 */
.game-screenshots {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.screenshot-slider {
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 3.2rem;
    margin-top: 0.1rem;
}

.screenshot-slider.swiper-container {
    height: 3.2rem !important;
    min-height: 3.2rem;
    display: flex;
    align-items: center;
}

/* 覆盖swiper默认的width:100%，让wrapper根据内容自适应宽度 */
.screenshot-slider .swiper-wrapper {
    width: auto !important;
    height: 100%;
    display: flex;
    flex-direction: row;
}

/* 覆盖swiper默认的width:100%，让每个slide根据图片自适应宽度 */
.screenshot-slider .swiper-slide {
    width: auto !important;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 0.1rem;
}

.screenshot-slide {
    height: 3.2rem !important;
    flex-shrink: 0;
    border-radius: .08rem;
    overflow: hidden;
    box-shadow: 0 .02rem .08rem rgba(0, 0, 0, .1);
    transition: all .3s ease;
    margin: 0 0.1rem 0 0;
    padding: 0;
}

.screenshot-slide:active {
    transform: scale(0.98);
    box-shadow: 0 .01rem .04rem rgba(0, 0, 0, .1);
}

/* 保持高度一致，移除宽度限制，让图片根据原始比例自适应 */
.screenshot-img {
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
    
    /* 区块标题响应式调整 */
    .section-title {
        height: auto;
        display: flex;
        align-items: center;
    }
    
    /* 游戏简介 - 已在主要样式中定义 */
    
    .info-table td {
        padding: .12rem 0;
    }

/* 同类推荐板块样式 */
.similar-games-section {
    width: 100%;
    max-width: 7.5rem;
    min-width: 3.2rem;
    margin: 0 auto 0.15rem;
    padding: 0;
    box-sizing: border-box;
}

.similar-games {
    background-color: #fff;
    padding: 0;
    border-radius: 0;
    box-shadow: 0 .02rem .05rem rgba(0,0,0,.05);
}

.tab-nav {
    display: flex;
    position: relative;
    padding-top: .05rem;
    width: 100%;
    margin-bottom: .2rem;
}

.tab {
    flex: 1;
    width: calc(100% / 3);
    text-align: center;
    font-size: .26rem;
    color: #333;
    padding: .05rem 0;
    cursor: pointer;
    position: relative;
    transition: color .3s ease;
    line-height: .3rem;
    margin: 0;
}

.tab:not(:last-child) {
    border-right: .01rem solid #ddd;
}

.tab.active {
    color: #667eea;
    font-weight: normal;
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: -.08rem;
    left: 35%;
    width: 30%;
    height: .03rem;
    background-color: #667eea;
    z-index: 1;
}

.recommended-content {
    width: 100%;
}

.recommended-game {
    position: relative;
    border-radius: .06rem;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 .01rem .04rem rgba(0,0,0,.1);
}

.recommended-game .game-count-badge {
    position: absolute;
    top: .15rem;
    left: .15rem;
    background-color: #ff6b35;
    color: #fff;
    font-size: 0.26rem;
    font-weight: normal;
    padding: .1rem .16rem;
    border-radius: .06rem;
    z-index: 10;
}

/* 游戏图片容器 */
.recommended-game .game-img-container {
    width: 100%;
    height: 3.5rem;
    overflow: hidden;
    position: relative;
    border-radius: .12rem .12rem 0 0;
}

.recommended-game .game-img-container .game-recommend-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: .06rem .06rem 0 0;
    filter: saturate(1.3) brightness(1.1);
}

/* 游戏图片覆盖层 */
.recommended-game .game-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.95));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.2rem;
    box-sizing: border-box;
    border: .01rem solid rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 .2rem rgba(0, 0, 0, .5);
    backdrop-filter: blur(.02rem);
    width: 100%;
}

.recommended-game .game-overlay p {
    color: white;
    font-size: 0.28rem;
    margin: 0;
    line-height: 2;
    text-shadow: 0 .02rem .04rem rgba(0, 0, 0, .8);
    padding: .1rem;
    background: rgba(0, 0, 0, .3);
    border-radius: .04rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    width: 100%;
    box-sizing: border-box;
}



/* 相关版本模块样式 */
.related-versions-section {
    width: 100%;
    max-width: 7.5rem;
    min-width: 3.2rem;
    margin: 0 auto 0.15rem;
    padding: 0;
    box-sizing: border-box;
}

.related-versions {
    background-color: #fff;
    padding: 0;
    border-radius: 0;
    box-shadow: 0 .02rem .05rem rgba(0,0,0,.05);
}

.version-item {
    display: flex;
    align-items: center;
    padding: .2rem;
    margin-bottom: .2rem;
    background-color: #fff;
    border-radius: .12rem;
    border: .01rem solid #f0f0f0;
    box-shadow: 
        0 .02rem .08rem rgba(0,0,0,.03),
        0 .01rem .03rem rgba(0,0,0,.05),
        inset 0 .01rem 0 rgba(255,255,255,.9);
    transition: all .3s ease;
    position: relative;
}

/* 21.5 卡片悬浮效果 */
.version-item:hover {
    transform: translateY(-.02rem);
    box-shadow: 
        0 .06rem .16rem rgba(0,0,0,.1),
        0 .03rem .06rem rgba(0,0,0,.08),
        inset 0 .01rem 0 rgba(255,255,255,1);
    border-color: #d0d0d0;
}

/* 21.6 卡片底部阴影与最后一项样式 */
.version-item::after {
    content: '';
    position: absolute;
    bottom: -.01rem;
    left: 0;
    right: 0;
    height: .01rem;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.05), transparent);
}

.version-item:last-child {
    margin-bottom: 0;
}

/* 版本图标 */
.version-icon {
    width: .8rem;
    height: .8rem;
    border-radius: .1rem;
    object-fit: cover;
    margin-right: .2rem;
    background-color: #f0f0f0;
    border: .01rem solid #e0e0e0;
    transition: transform .3s ease;
}

/* 版本信息区域 */
.version-info {
    flex: 1;
    overflow: hidden;
    padding-right: .1rem;
    line-height: 1.5;
}

/* 版本标题 */
.version-title {
    font-size: .3rem;
    color: #333;
    margin-bottom: .08rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    transition: color .3s ease;
}

/* 版本详情 */
.version-platform, .version-size {
    font-size: .24rem;
    color: #999;
    white-space: nowrap;
    display: inline-block;
    margin-right: .5rem;
}

/* 21.11 版本项交互效果 */
.version-item:hover .version-icon {
    transform: scale(1.05);
}

.version-item:hover .version-title {
    color: #667eea;
}



/* 标签导航栏样式 */
.detail-tabs {
    display: flex;
    height: 0.6rem;
    background-color: #667eea;
    padding: 0;
    border-top-right-radius: 0.33rem;
}

.tab-detail {
    width: 30%;
    height: 0.59rem;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 0.33rem;
    position: relative;
    bottom: -0.02rem;
}

.tab-detail i,
.tab-detail span {
    color: #000000;
}

.tab-detail span,
.tab-recommend span,
.tab-strategy span {
    font-size: 0.3rem;
}

.tab-detail i {
    margin-right: .05rem;
}

.style-container {
    width: 10%;
    background-color: #ffffff;
    position: relative;
}

.style-slant {
    width: 100%;
    height: 100%;
    background-color: #667eea;
    border-bottom-left-radius: 0.33rem;
}

.tab-recommend,
.tab-strategy {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: all .3s ease;
    border-radius: 0.1rem;
}

.tab-recommend {
    margin-right: .2rem;
}

.tab-strategy {
    border-top-right-radius: 0.33rem;
}

.tab-recommend i,
.tab-strategy i {
    margin-right: .05rem;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.28rem;
}

.tab-detail i {
    margin-right: .05rem;
    font-size: 0.28rem;
}


    /* 版本信息区域 */
    .version-info {
        flex: 1;
        min-width: 0;
    }
    


/* 通用模块样式 */

/* 所有模块容器统一样式 */
.game-features-section,
.game-info-section,
.version-log-section,
.related-versions-section,
.similar-games-section,
.featured-games,
.related-strategies {
    margin: 0 auto 0.15rem;
    width: 7.5rem;
    padding-bottom: 0.03rem;
}

/* 模块头部 */
.section-header.bg {
    background-color: #fff;
    border-radius: 0;
    padding: 0;
}

/* 标题容器 */
.title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .2rem .3rem;
}

/* 所有模块标题统一样式 - 与全局标题系统保持一致 */
.section-title {
    border-left:.12rem solid #667eea;
    padding-left:.2rem;
    margin: 0;
    display: flex;
    align-items: center;
}

/* 精品游戏推荐模块的"更多"链接 */
.title-container .more {
    font-size: .22rem;
    color: #667eea;
    text-decoration: none;
    transition: all .3s ease;
    display: flex;
    align-items: center;
}

/* 所有模块内容区域统一样式 */
.game-features,
.game-info,
.version-log,
.related-versions,
.similar-games,
.featured-games-content,
.strategy-content,
.strategy-list {
    border-radius: 0;
    padding: 0 0.2rem 0.2rem;
}

/* 石器争霸游戏攻略列表样式 */
.stone-age-strategies {
    max-width: 7.5rem;
    margin: 0 auto 0.15rem;
}

.strategy-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.strategy-list li {
    padding: .15rem 0;
    border-bottom: .01rem solid #f0f0f0;
    display: flex;
    align-items: center;
}

.strategy-list li:last-child {
    border-bottom: none;
}

.strategy-list i {
    color: #667eea;
    margin-right: .15rem;
    font-size: .22rem;
}

.strategy-list a {
    flex: 1;
    font-size: .26rem;
    color: #333;
    text-decoration: none;
    transition: color .3s;
}

.strategy-list a:hover {
    color: #667eea;
}

.strategy-list span {
    margin-left: .15rem;
    font-size: .26rem;
    color: #999;
}

/* 攻略卡片网格样式 */
.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .2rem;
    padding: 0;
}

/* 攻略卡片样式 */
.news-card {
    background-color: #fff;
    border-radius: .1rem;
    overflow: hidden;
    box-shadow: 0 .01rem .04rem rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    transform: translateY(-.03rem);
    box-shadow: 0 .04rem .12rem rgba(0,0,0,.15);
}

.news-card a.card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}

/* 卡片图片样式 */
.card-image {
    position: relative;
    padding-top: 62.5%; /* 16:10 宽高比 */
    overflow: hidden;
}

.card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

/* 图片遮罩层样式 */
.card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.8rem;
    background-color: rgba(0, 0, 0, .8);
    z-index: 1;
}

/* 图片上的标题样式 */
.card-image h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.1rem 0.2rem;
    margin: 0;
    font-size: 0.22rem;
    color: #fff;
    z-index: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 0.3rem;
    box-sizing: border-box;
}

.news-card:hover .card-image img {
    transform: scale(1.08);
}

/* 卡片内容样式 */
.card-info {
    padding: .15rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-info h3 {
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    transition: color .3s ease;
    margin: 0;
    font-size: .22rem;
    line-height: .34rem;
}

.news-card:hover .card-info h3 {
    color: #e5004f;
}

.card-info p {
    color: #999;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    margin: .05rem 0 0 0;
    font-size: .26rem;
    line-height: .36rem;
}

/* 卡片元数据样式 */
.card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: .22rem;
    color: #999;
    margin-top: .1rem;
}

.card-meta .count {
    display: inline-block;
    padding: .04rem .12rem;
    background-color: #e0f7fa;
    border-radius: .1rem;
    font-size: .22rem;
    color: #667eea;
    margin-right: .1rem;
    margin-bottom: .05rem;
}

.card-meta .time,
.card-meta .views {
    font-size: .22rem;
    color: #999;
    margin-right: .15rem;
    margin-bottom: .05rem;
}

.card-meta .views {
    display: inline-flex;
    align-items: center;
}

.card-meta .views::before {
    content: '👁';
    margin-right: .04rem;
    font-size: .2rem;
}

/* 游戏网格 */
.games-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 0.1rem 0;
}

/* 游戏项 */
.games-grid li {
    width: 25%;
    text-align: center;
    margin-bottom: .4rem;
    transition: transform .3s ease;
}

.games-grid li:nth-child(n+4) {
    margin-bottom: .32rem;
}

/* 游戏链接 - 不应用于下载按钮 */
.games-grid li > a:not(.btn-download) {
    display: block;
}

/* 游戏图片容器 */
.games-grid li .game-img-container {
    position: relative;
    width: 1.24rem;
    height: 1.24rem;
    margin: 0 auto;
}

/* 游戏图片 */
.games-grid li img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: .24rem;
    box-shadow: 0 .04rem .12rem rgba(0,0,0,.12);
    transition: transform .3s ease, box-shadow .3s ease;
    object-fit: cover;
}

/* 游戏图片遮罩 */
.games-grid li .game-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.9) 100%);
    border-radius: .24rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* 游戏图片信息 */
.games-grid li .game-info {
    padding: 0; /* 所有内边距设置为0 */
    margin: 0; /* 取消所有外边距 */
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background-color: rgba(0, 0, 0, .3); /* 黑色0.3透明度背景 */
    font-size: .18rem; /* 减小字体大小，让评分和游戏大小都能显示 */
    border-radius: 0 0 .24rem .24rem; /* 下圆角，与图片一致 */
    text-indent: 0; /* 取消首行缩进 */
}

/* 游戏项悬浮效果 */
.games-grid li:hover .game-img-container {
    transform: scale(1.05);
}

.games-grid li:hover .game-img-container img {
    box-shadow: 0 .06rem .2rem rgba(0,0,0,.18);
}

/* 游戏名称 */
.games-grid li .name,
.games-grid li h4.name {
    width: 90%;
    margin: 0.15rem auto 0 auto;
    padding: 0 .15rem;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
}

/* 游戏下载按钮样式 */
.games-grid li > a.btn-download {
    margin-top: 0.15rem; /* 增加下载按钮与游戏名称之间的间距 */
    background: white; /* 设置白色背景 */
    color: #667eea; /* 设置新主题蓝字体颜色 */
    border: .01rem solid #667eea; /* 设置新主题蓝边框 */
    box-shadow: 0 .02rem .08rem rgba(102, 126, 234, .3); /* 设置新主题蓝阴影 */
}

.games-grid li > a.btn-download:hover {
    background: #667eea; /* 悬浮时背景变为新主题蓝 */
    color: white; /* 悬浮时文字变为白色 */
    border: .01rem solid #667eea; /* 保持边框颜色 */
    box-shadow: 0 .04rem .12rem rgba(102, 126, 234, .4); /* 增强阴影 */
}

.games-grid li > a.btn-download:active {
    box-shadow: 0 .02rem .06rem rgba(102, 126, 234, .3); /* 点击时减小阴影 */
}


/* 基础样式定义 */
.game-recommend-img {
    max-height: 1.8rem;
}