/*reset*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button, textarea, p, blockquote { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
li { list-style: none; }
img { border: 0; }
a { outline:none; color:#313131; text-decoration:none; transition: color 0.3s ease; }
a:hover { color: #4398d1; }
.cl:after { content:''; display:block; height:0; clear:both; }
.cl { } 

/* MT风格颜色变量 */
:root {
  --primary-color: #ff9c00;
  --secondary-color: #3287c0;
  --accent-color: #ff5c38;
  --dark-bg: #383a4c;
  --light-bg: #f8f8f8;
  --border-color: #e0e0e0;
  --text-color: #333;
  --text-light: #888;
  --header-color: #2c2f3e;
  --gradient-primary: linear-gradient(135deg, #ff9c00, #ff7e33);
  --gradient-secondary: linear-gradient(135deg, #3a7bd5, #3a6073);
  --shadow-sm: 0 2px 5px rgba(0,0,0,0.1);
  --shadow-md: 0 5px 15px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
  --border-radius-sm: 5px;
  --border-radius-md: 10px;
  --border-radius-lg: 15px;
  --transition-default: all 0.3s ease;
}

/*content*/
#menu, .header .search, .gamelist li .btn_down, .footer a, .back_nav .back, .readlist li, .star, .star i, .game_search .text, .game_search .btn { 
  background:url(../images/sprite.png) no-repeat 0 0; 
  background-size:60px 174px;
}

body {
  min-width:320px;
  background: var(--light-bg);
  font:14px/1.6 "Microsoft Yahei", "Arial", sans-serif; 
  color: var(--text-color);
  -webkit-text-size-adjust:none;
  text-rendering: optimizeLegibility;
  background-color: #f7f9fc;
}

.main {
  width:100%;
  max-width:768px; 
  min-height:176px;
  margin:0 auto; 
  position:relative; 
  overflow:hidden;
  will-change: transform;
  background: url(../images/bg-pattern.png) repeat top center;
}

.header{ 
  padding:15px 0; 
  text-align:center; 
  border-bottom:none; 
  position:relative;
  background: var(--gradient-secondary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.header .logo{ 
  display:block; 
  margin:0 auto; 
  height:24px;
}

.header #menu{ 
  padding:8px;
  cursor:pointer;
  color: #fff;
  font-size: 18px;
  background: none;
}

#menu{ 
  width:21px; 
  height:19px; 
  font:0/0 a; 
  background-position:-39px 2px; 
  cursor:pointer;
}

#guide{ 
  position:absolute; 
  left:0; 
  top:54px; 
  z-index:999; 
  background: var(--dark-bg); 
  width:100%; 
  overflow:hidden; 
  display:none;
  box-shadow: var(--shadow-md);
  border-bottom-left-radius: var(--border-radius-sm);
  border-bottom-right-radius: var(--border-radius-sm);
}

#guide ul{ 
  overflow:hidden; 
  margin:0; 
  padding:10px 0;
}

#guide li{ 
  float:none; 
  border:none; 
  margin:0; 
  padding:0; 
  width:100%;
}

#guide li a{ 
  display:block; 
  height:40px; 
  line-height:40px; 
  font-size:16px; 
  text-align:left; 
  padding:0 20px; 
  color: #fff;
  transition: var(--transition-default);
}

#guide li a i {
  margin-right: 10px;
  width: 20px;
  text-align: center;
}

#guide li a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--primary-color);
}

#overlay{ 
  width:100%; 
  height:100%; 
  position:absolute; 
  left:0; 
  top:45px; 
  background:rgba(0, 0, 0, 0.5); 
  z-index:200; 
  display:none;
  transition: opacity 0.3s ease;
}

#overlay.show{ 
  display:block;
}

.header .search{ 
  padding:8px;
  background: none;
  font-size: 18px;
  color: #fff;
}

.nav{overflow:hidden; margin:17px 10px 10px;}
.nav li{float:left; width:20%;}
.nav li a{ display:block; padding-top:50px; line-height:28px; text-align:center; width:50px; margin:0 auto; background:url(../images/nav.png) no-repeat 0 0; background-size:250px 50px; color: #fff;}
.nav .yyzx a{ background-position:-50px 0;}
.nav .gldq a{ background-position:-100px 0;}
.nav .xwzx a{ background-position:-150px 0;}
.nav .jptj a{ background-position:-200px 0;}

.box{ overflow:hidden; margin: 15px 10px; background: #fff; border-radius: var(--border-radius-md); box-shadow: var(--shadow-sm); }
.box:hover {
  box-shadow: var(--shadow-md);
}
.box .hd{ overflow:hidden; position:relative; background: linear-gradient(to right, #f9f9f9, #ffffff); border-bottom: 1px solid #f0f0f0; }
.box .hd ins{ float:left; width:4px; height:20px; background:var(--primary-color); margin:15px 10px 15px 0; border:none;}
.box .hd .over{ border:none; height:50px; line-height:50px; background:none; padding:0 15px; }
.box .hd .over h3{ font-size:18px; color:var(--text-color); font-weight:bold; }
.box .hd .over h3 i {
  color: var(--primary-color);
  margin-right: 5px;
}
.box .hd .over .more{ float:right; color:var(--text-light); margin-right:0; font-size:14px; display:flex; align-items:center; }
.box .hd .over .more i {
  font-size: 12px;
  margin-left: 5px;
}

.gamelist{ overflow:hidden; padding: 15px; display: flex; flex-wrap: wrap; gap: 15px; }
.gamelist li{ width: calc(33.33% - 10px); text-align: center; padding: 0; box-sizing: border-box; margin-bottom: 10px; }
.gamelist li img{ display:block; margin:0 auto; border-radius: var(--border-radius-lg); width:80px; height:80px; object-fit:cover; box-shadow: var(--shadow-sm); transition: var(--transition-default); }
.gamelist li h3{ font-weight:bold; height:24px; line-height:24px; font-size:14px; margin-top:5px; overflow:hidden; }
.gamelist li p{ line-height:18px; height:18px; overflow:hidden; color: var(--text-light); }
.gamelist li .btn_down{ display:block; width:80px; height:26px; line-height:26px; color:#fff; margin:10px auto 0; background-color:var(--primary-color); border-radius:13px; text-align:center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.gamelist li .btn_down:hover{ background-color:#ffb340; }

.newslist{ padding:10px 15px; margin-bottom:-1px; }
.newslist dt{ overflow:hidden; }
.newslist dt ul{ margin:-1px 0 0; }
.newslist dt li{ border-bottom:1px solid #e0e0e0; border-top:1px solid #fff; overflow:hidden; padding:14px 4px; margin-bottom: 15px; }
.newslist dt li img{ float:left; width:120px; height:80px; margin-right:9px; }
.newslist dt li h3{ font-weight:normal; font-size:14px; line-height:20px; max-height:40px; overflow:hidden; }
.newslist dt li p{ max-height:32px; line-height:16px; overflow:hidden; margin-top:6px; }
.newslist dd ul{ padding:10px 4px 12px; border-top:1px solid #fff; }
.newslist dd li{ line-height:26px; height:26px; overflow:hidden; font-size:14px; }
.newslist dd li span{ margin-right:3px; }
.newslist dd li span,.newslist dd li span a{ color:#888; }

.footer{ text-align:center; padding:20px 0; line-height:1.6; background:#fff; border-top:none; margin-top:20px; box-shadow: 0 -2px 10px rgba(0,0,0,0.03); }
.footer a{ display:inline-block; padding:0 10px; background-position:right -60px; }
#return{ background:none; }
.loading{ line-height:40px; text-align:center; border-top:1px solid #fff; margin:1px 10px 0;text-shadow: 0 1px 0 #fff; font-size:14px; }
.back_nav{ height:29px; line-height:29px; font-size:18px; padding:8px 0; border-bottom:1px solid #dcdcdc; position:relative; }
.back_nav .back{ float:left; margin-left:4%; padding-left:25px; background-position:-46px -132px; height:29px; }
.back_nav #menu{ float:right; margin-right:4%; margin-top:5px; }
.newsdetail{ margin:0 10px; border-bottom:1px solid #fff; }
.newsdetail .title{ line-height:26px; padding:10px 0 8px; border-bottom:1px dashed #e0e0e0; }
.newsdetail .title h1{ font-size:16px; line-height:22px; color:#313131; }
.newsdetail .title p span{ margin-right:8px; }
.newsdetail .article{ line-height:22px; padding:5px 0 15px; font-size:14px; border-top:1px dashed #fff; border-bottom:1px solid #e0e0e0; color:#313131; }
.newsdetail .article img{ max-width:300px; }
.newsdetail .article p{ margin-top:10px; }
.container{ margin:10px 10px 0; }
.container .hd{ height:16px; line-height:16px; padding:10px 4px; }
.container .hd h3{ color:#4398d1; border-left:5px solid #4398d1; padding-left:8px; font-size:16px; font-weight:normal; }
.container .hd .more{ float:right; color:#888; font-size:14px; }
.readlist{ border-bottom:1px solid #fff; }
.readlist ul{ padding:0 4px 10px; border-bottom:1px solid #e0e0e0; }
.readlist li{ height:26px; line-height:26px; font-size:14px; overflow:hidden; padding-left:13px; background-position:-56px -159px; }
.gamerec .gamelist{ padding-bottom:15px; margin:0; }
.gamerec .gamelist li{ border:none; padding:10px 0 0; }
.game_detail{ margin:5px 10px 0; padding:0 8px 10px; border-bottom:1px dashed #e0e0e0; }
.game_detail dt{ float:left; width:75px; margin:11px 15px 0 0; }
.game_detail dt img{ display:block; border-radius:10px; width:75px; height:75px; }
.game_detail dt .btn_down{ display:block; width:75px; height:22px; line-height:22px; text-align:center; color:#fff; font-size:14px; background:#4398d1;border-radius:3px; margin-top:11px; }
.game_detail dd{ font-size:14px; line-height:20px; height:20px; overflow:hidden; }
.game_detail .title{ font-size:20px; line-height:30px; height:30px; overflow:hidden; }
.star,.star i{ float:left; margin:4px 4px 0 0; width:60px; height:12px; background-position:0 -80px; font:0/0 a; }
.star i{ margin:0; background-position:0 -92px; }
.game_detail dd .score{ color:#ee0000; margin-right:3px; }
.game_search{ position:relative; width:223px; margin:0 auto; }
.game_search .text{ width:185px; height:29px; line-height:27px; background-color:#fff; border-radius:5px; border:none; padding-left:38px; display:block; color:#8e8e93; font-size:14px; background-position:-30px -104px; }
.game_search .btn{ border:none; width:14px; height:14px; position:absolute; top:7px; right:7px; }
.searchlist{ overflow:hidden; margin:0 10% 0 0; padding-bottom:20px; }
.searchlist dt,.searchlist dd{ float:left; line-height:32px; }
.searchlist dt{ width:90%; font-size:18px; color:#4398d1; margin:10px 0 5px 10%; }
.searchlist dd{ font-size:16px; width:40%; margin-left:10%; }
.profile{ font-size:14px; line-height:22px; margin:0 10px; color:#313131; border-bottom:1px solid #fff; border-top:1px dashed #fff; }
.profile a{ color:#4398d1; }
.profile h3,#game_img h3{ color:#4398d1; font-size:16px; font-weight:normal; padding:12px 0 7px; }
.profile p{ border-bottom:1px solid #e0e0e0; padding-bottom:12px; }
#game_img{ border-bottom:1px dashed #e0e0e0; border-top:1px dashed #fff; margin:0 10px; }
#game_img .swiper-container { height:289px; margin:5px auto 20px;position:relative;overflow:hidden;z-index:1; }
#game_img .swiper-slide{ height:289px;float:left; }
#game_img .swiper-slide img { display:block; height:285px; border:1px solid #fff;box-shadow:2px 2px 2px #d8d8d8; margin:0 7px; }

/* 优化图片加载 */
img, video {
  image-rendering: -webkit-optimize-contrast;
}

/* 增加滚动平滑效果 */
html {
  scroll-behavior: smooth;
}

/* 增加按钮和交互元素的触摸反馈 */
.btn_down, a.more, #menu, .header .search, #return, .btn-download {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* 优化移动设备点击效果 */
@media (max-width: 768px) {
  a:active {
    opacity: 0.7;
  }
  
  .gamelist li .btn_down:active,
  .btn-download:active {
    transform: scale(0.98);
  }
}

/* 动画效果 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.btn-download {
  animation: pulse 2s infinite;
}

/* 响应式布局优化 */
@media (max-width: 480px) {
  .game-features {
    flex-direction: column;
  }
  
  .feature {
    margin-bottom: 10px;
  }
  
  .download-btns {
    flex-direction: column;
  }
  
  .btn-download {
    margin-bottom: 10px;
  }
  
  .game-screenshots .screenshot {
    width: 100%;
  }
}

/* 游戏下载区 */
.download-section {
  background: var(--gradient-secondary);
  color: #fff;
  text-align: center;
  padding: 25px 15px;
  border-radius: 0;
  margin: 0 0 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.hero-banner {
  margin-bottom: 20px;
}

.download-section h2 {
  font-size: 24px;
  margin-bottom: 10px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.download-section .highlight {
  color: var(--primary-color);
  font-weight: bold;
}

.download-section .slogan {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 20px;
}

.counter {
  font-weight: bold;
  color: var(--primary-color);
}

.download-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
  gap: 10px;
}

.btn-download {
  background: var(--gradient-primary);
  color: #fff;
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  min-width: 120px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-default);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-download i {
  margin-right: 8px;
  font-size: 18px;
}

.btn-download:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  color: #fff;
}

.game-info {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  border-radius: var(--border-radius-md);
}

.info-item {
  text-align: center;
  padding: 0 10px;
  flex: 1;
  min-width: 80px;
}

.info-item .label {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 5px;
}

.info-item .value {
  font-size: 16px;
  font-weight: bold;
}

/* 游戏导航菜单 */
.nav.game-nav {
  overflow: hidden;
  margin: 20px 10px 15px;
  background: var(--dark-bg);
  border-radius: 5px;
  padding: 10px 0;
}

.nav.game-nav li {
  float: left;
  width: 20%;
}

.nav.game-nav li a {
  display: block;
  padding-top: 50px;
  line-height: 28px;
  text-align: center;
  width: 50px;
  margin: 0 auto;
  background: url(../images/nav.png) no-repeat 0 0;
  background-size: 250px 50px;
  color: #fff;
}

.nav.game-nav li a:hover {
  color: var(--primary-color);
}

/* 新闻列表 */
.newslist {
  padding: 10px 15px;
}

.newslist li {
  margin-bottom: 15px;
  border-bottom: none;
}

.newslist li:last-child {
  margin-bottom: 0;
}

.news-card {
  display: flex;
  background: #f9f9fc;
  border-radius: var(--border-radius-sm);
  padding: 15px;
  position: relative;
  overflow: hidden;
  transition: var(--transition-default);
}

.news-card:hover {
  background: #f0f4fa;
  transform: translateY(-2px);
}

.news-content {
  flex: 1;
}

.news-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--primary-color);
  color: #fff;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.news-badge span {
  font-size: 12px;
  font-weight: bold;
  margin-left: 10px;
  margin-bottom: 10px;
}

.newslist h4 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.newslist .date {
  color: #999;
  font-size: 12px;
  margin-bottom: 8px;
}

.newslist .date i {
  margin-right: 5px;
}

.newslist .desc {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

/* 游戏角色卡片样式 */
.character-card {
  display: block;
  text-align: center;
  background: #f9f9fc;
  border-radius: var(--border-radius-md);
  padding: 15px 10px;
  height: 100%;
  transition: var(--transition-default);
}

.character-card:hover {
  background: #f0f4fa;
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.character-card img {
  display: block;
  margin: 0 auto 10px;
  border-radius: var(--border-radius-lg);
  width: 80px;
  height: 80px;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-default);
}

.character-card:hover img {
  transform: scale(1.05);
}

.character-info h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0 5px;
  color: #333;
}

.character-info p {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.character-info .btn_down {
  display: inline-block;
  background: var(--gradient-primary);
  color: #fff;
  border-radius: 20px;
  padding: 6px 15px;
  font-size: 12px;
  transition: var(--transition-default);
}

.character-info .btn_down i {
  margin-left: 5px;
  font-size: 10px;
}

.character-info .btn_down:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* 游戏介绍 */
.game-intro {
  background: #fff;
  border-radius: var(--border-radius-md);
  padding: 20px;
  margin: 15px 10px;
  box-shadow: var(--shadow-sm);
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 15px;
  color: var(--text-color);
  display: flex;
  align-items: center;
}

.section-title i {
  margin-right: 8px;
  color: var(--primary-color);
}

.game-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-color);
  margin-bottom: 20px;
}

.game-features {
  margin-top: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.feature-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-accent);
  color: #fff;
  border-radius: 50%;
  margin-right: 15px;
  flex-shrink: 0;
  font-size: 18px;
}

.feature-content {
  flex-grow: 1;
}

.feature-title {
  font-weight: bold;
  margin-bottom: 5px;
  color: var(--text-color);
}

.feature-desc {
  font-size: 14px;
  color: var(--text-light);
}

/* 推荐游戏 */
.recommended-games {
  background: #fff;
  border-radius: var(--border-radius-md);
  padding: 20px;
  margin: 15px 10px;
  box-shadow: var(--shadow-sm);
}

.game-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px;
}

.game-card {
  width: calc(50% - 10px);
  margin: 0 5px 15px;
  background: #f9f9fc;
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: var(--transition-default);
}

.game-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.game-card-image {
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 纵横比 */
  position: relative;
  overflow: hidden;
}

.game-card-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-card-content {
  padding: 10px;
}

.game-card-title {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 5px;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-card-category {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.game-card-category i {
  margin-right: 5px;
  color: var(--secondary-color);
  font-size: 10px;
}

/* 底部返回顶部按钮 */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: var(--gradient-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-default);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top i {
  font-size: 18px;
}