/* 重置和基本样式 */
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  color: #333;
}

/* 全局盒模型 */
*,
*::before,
*::after {
  box-sizing: inherit;
}

/* 移除默认边距 */
h1, h2, h3, h4, h5, h6,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

/*移除列表样式 */
ul,
ol {
  list-style: none;
}

/* 基本图像样式 */
img {
  max-width: 100%;
  height: auto;
  display: block;
  cursor: pointer;

}

/* 锚点标签重置 */
a {
  text-decoration: none;
  color: inherit;
  /* display: inline-block; */
}
a:focus{color: #0052cc;}

/* 表单元素重置 */
button,
input,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* 无障碍性改进 */
:focus:not(:focus-visible) {
  outline: none;
}


.text-center {
  text-align: center;
}

.hidden {
  display: none;
}
/* 布局基础 */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0;}
.header{backdrop-filter:blur(10px);position:fixed;top:0;left:0;right:0;z-index:1000;transition:all 0.3s ease}
.footer{background: #f5f5f5;border-top:1px solid #eee;border-bottom:none;padding:20px 0;}

/* 页面主体顶部边距 */
.main{padding-top:68px;}
.bg-img{object-fit: cover;object-position: top; width: 100%;height: 100%;z-index: -1;position: absolute;}

/* 滚动时头部样式变化 */
.header.scrolled{background:rgba(255,255,255,0.9);box-shadow:0 1px 8px rgba(0, 0, 0, 0.05);border-bottom:1px solid #eee;}
.scrolled .nav-search{background: #f4f4f4;}
.scrolled .nav-search:hover{border: 1px solid #EBEBEB}
.scrolled .nav-search:focus-within{border: 1px solid #888;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.scroll .nav-search{background: #f4f4f4;}

/* 导航样式 */
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  flex-wrap: nowrap;
}

/* .nav-brand{display:flex;align-items:center;gap:8px} */
.nav-brand-content{display:flex;align-items:center;gap:8px}
.nav-brand .logo{width:24px;height:24px;border-radius:4px;margin:auto 0;vertical-align:middle}
.nav-brand h1{font-size:18px;margin:0;color:#121212;font-weight:600;display:inline-flex;align-items:center}
.nav-toggle{background:none;border:0;padding:8px;cursor:pointer;display:none}
.hamburger{width:24px;height:2px;background:#121212;position:relative}
/* .hamburger::before,.hamburger::after{content:"";position:absolute;left:0;width:24px;height:2px;background:#121212} */
/* .hamburger::before{top:-6px}.hamburger::after{top:6px} */
.nav-menu{list-style:none;margin:0;padding:0;display:flex;gap:16px}
.nav-menu li:nth-child(2){position: relative;}
.nav-link{padding:10px 8px;border-radius:6px;color:#121212;display: flex;min-width: 80px;justify-content: center;}
.nav-link.active{color:#0052cc}
/* .nav-list.active{color: #0052cc;} */
/* .nav-link:focus,.nav-link:hover{background:#f0f7ff} */
.game-dropdown{ display: none; position: absolute;top: 110%;left: -10px;z-index: 1000;background: #fff;border: 1px solid #eee;border-radius: 8px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);padding: 8px 0;min-width: 120px;}
.game-dropdown li{margin: 0;}
.game-dropdown li a{color:#121212;padding: 8px 16px;display: block;transition: background 0.3s ease;}
.game-dropdown li a:hover{background: #f5f5f5;}
.nav-list img {transition: transform 0.3s ease;}
/* 显示下拉列表时的箭头旋转 */
.nav-list.actived img {transform: rotate(180deg);}
/* 下拉列表显示动画 */
.game-dropdown.show {display: block;animation: dropdownFadeIn 0.3s ease forwards;}
@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 导航栏右侧:搜索框和下载客户端按钮 */
.right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

/* 搜索框样式 */
.nav-search{width: 260px;height: 36px;display:flex;align-items:center;justify-content: space-around;padding: 4px; border-radius:8px;border: 1px solid transparent;background-color: #fff;position: relative;transition: all 0.2s ease;}
.nav-search:hover{border: 1px solid #f4f4f4;border: 1px solid #F0F0F0}
.nav-search:hover .search-btn{color: #0052cc;}
.nav-search:focus-within{border: 1px solid #888;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.search-container{flex: 1;padding: 0 4px;}
.search-input{width:100%;padding:6px 0;font-size:14px;border:0;background:transparent;}
.search-input::placeholder{color: #666;font-style: normal;}
.search-input:focus{outline: none;}
.search-btn{background:none;border:0;color:#666;cursor:pointer;padding:4px}


/* 下载客户端按钮 */
/* 立即下载按钮 */
.download-client {margin-left: 16px;}
.download-btn-windows, .game-actions{
    background: #0066ff;
    color: white;
    padding: 6px 16px;
    border-radius: 8px;
    /* font-weight: 500; */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.download-btn-windows img {width: 14px;height: 14px;}
.download-btn-windows:hover {background: #0052cc;transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
/* 搜索结果样式 */
.search-results {
	width: 512px;
	display: none; /* 默认隐藏 */
	position: absolute;
	top: 134%; 
	left: -160px;
	right: 30px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	z-index: 100;
	overflow: hidden;
	padding: 12px;
    transition: width 0.2s ease, left 0.2s ease, right 0.2s ease, top 0.2s ease;
}
/* 搜索结果显示时的样式 */
 .search-results.show {
	display: block;
	animation: fadeIn 0.2s ease forwards;
}
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* 精选必装标题 */
.results-section-title {
	margin-top: 12px;
	padding: 0px 16px;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 4px;
	text-align: center;
	font-weight: 600;
}
/* 游戏列表样式 */
.game-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3列布局 */
	gap: 5px;
	padding: 12px 8px;
	max-height: 230px;
	overflow-y: auto;
}
/* app样式外层4 */
.minichart-item {
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	transition: transform 0.2s ease;
	width: 100%;
	padding: 8px;
	border-radius: 8px;
	margin-bottom: 8px;
	font-size: 12px;
}
.minichart-item:hover {
	transform: translateY(-4px);
	background-color: #f5f7fa;
}
.minichart-item .app-info .app-name{margin: 0;overflow: hidden;width: 100px;white-space:nowrap;text-overflow:ellipsis}
/* 热门搜索标签样式 */
.hot-tags {
	padding: 12px 16px;
}
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.tag-item {
	padding: 6px 12px;
	background-color: #f5f5f5;
	border-radius: 16px;
	font-size: 13px;
	color: #333;
	cursor: pointer;
	transition: all 0.2s ease;
}
.tag-item:hover {
	background-color: #e8f3ff;
	color: #0066ff;
}
/* ------------------------ */
.section-header {display: flex;justify-content: space-between;align-items: center;}
.section-title {font-size: 22px;font-weight: bold;color: #333;margin-bottom: 24px;}
/* ---------------------- */
/* app样式 */
.minigame-icon{ width: 40px;height: 40px;border-radius: 12px;}
.app-icon{ width: 64px;height: 64px;border-radius: 12px;object-fit: cover;}
.app-info{flex:1;display: flex;flex-direction: column;}
.app-info .app-name{font-size:14px;color:#121212;font-weight:450;width: 90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display: block;}
.app-info .app-category{font-size:12px;color:#666;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width: 90px;display: block;}
.app-info .rating{display:flex;align-items:center;justify-content: baseline;}
.app-info .star{color:#ffc107;letter-spacing:-1px}
.app-info .score{color:#ffc107;margin-left:2px}
/* 2 */
.chart-item{display:flex;align-items:center;gap:8px;padding:12px 12px 6px 12px;border-radius:8px;transition:background 0.2s ease;font-size: 12px;}
.chart-list .chart-item .download-btn-small{visibility: hidden;}
.chart-item:hover{background: #f3f3f3;}
.chart-item:hover .download-btn-small{visibility: visible;}
.chart-item a:not(.download-btn-small){flex:1}
.rank{width:20px;height:30px;color:#000;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;margin-right: 5px;margin-bottom: 5px;}
/* 3 */
.game-card{border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.1);transition: all 0.3s ease; position:relative;}
/* 游戏app样式外层3*/
.game-info{width: 100%; display:flex;align-items:center;justify-content: space-around; gap:12px;padding:120px 12px 12px 12px;transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);position:absolute;bottom:0;left:0;right:0;background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 30.86%, rgba(0, 0, 0, 0.6) 70%, #000 100%);color:white}
.game-bg {object-fit: cover; /* 按比例填充，不拉伸 */transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);}/*不能加高度	*/
.game-icon{width:48px;height:48px;border-radius:4px;object-fit: cover;}
.box{height: 216px; overflow: hidden;object-fit: cover;}
.game-details{flex:1}
.game-name{font-size:16px;margin-bottom:0;color:#fff;width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.game-category{font-size:14px;color:#fff;opacity: 0.9;margin-top: 0;width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
/* btn */
.download-btn{ background:transparent;color:#fff;border:1px solid white;padding:6px 16px;border-radius:40px;font-size:14px;font-weight:200;cursor:pointer;transition:all 0.2s ease}
.download-btn:hover{background:rgba(255,255,255,0.2);transform:translateY(-2px)}
.igame-card .chart-item .download-btn-small{width: auto;}
.download-btn-small{width: 57px;background:#F5F7FF;color:#1040DD;border: 0.5px solid #CCD8FF;border-radius:20px;padding:6px 16px; font-size:12px;cursor:pointer;transition:background 0.3s ease}
.download-btn-small:hover{background: #fafafa;}

/*尾部导航样式*/
.footer-container{max-width: 1200px;margin: 20px auto;display: flex;justify-content: space-between;}
.footer-content{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap; font-weight: 400;}
.footer-content img{width: 24px;height: 24px;margin-right: 12px;}
.footer-nav{display:flex;flex-direction: column; align-items: flex-end;justify-content: flex-end; flex-wrap:wrap;font-size:12px;}
.footer-nav p.footer-link {gap:12px;display: flex;margin: 4px;align-items: center;}
.footer-nav p.footer-link{color:#333;text-decoration:none;}
.footer-nav p{display: flex;gap: 4px;align-items: center;margin: 4px;color: #666;}
.footer-nav p img{width: 13px;height: 14px;}
.footer-nav p a:hover{text-decoration:underline}
/* 底部备案信息样式 */
.beian-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.beian-info img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.beian-link {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}


/*  */
 
.games-showcase,#large-games-showcase,.top-charts-grid{
  /* min-width: 1160px; */
  overflow-x: auto;
  padding: 5px 0;
}
/* .top-charts-grid{
  min-width: 1160px;
} */


.igame-card ,.chart-column{
  min-width: 370px;
}
.carousel .container{
  padding: 0 !important;
}
/* ========== 响应式布局 ========== */
/* 大屏幕电脑优化 (1200px 以上) */
@media screen and (min-width: 1200px) {
  .container {
    padding: 0 20px !important;
  }
  .nav-search {
    width: 320px;
  }
}

/* 平板视图 (768px - 1023px) */
@media screen and (max-width: 1199px) {
  /* 容器适配 */
  .container {
    padding: 0 16px !important;
  }
  
  /* 导航栏调整 */
  .nav {
    gap: 12px;
  }
  .nav-brand h1{
    font-size: 16px;
  }
  .nav-search {
    width: 160px;
  }
  .nav-menu {
    gap: 8px;
  }
  .nav-menu li a{
    min-width: 60px;
    padding: 8px 6px;
    font-size: 13px;
  }
  
  /* 搜索结果适配 */
  .search-results {
    width: 400px;
    left: -100px;
  }
  .game-list {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* 页脚调整 */
  .footer-container {
    flex-direction: column;
    text-align: center;
    align-items: flex-start;
    gap: 16px;
    padding:0 16px;
  }
  .footer-nav {
    align-items: start;
  }
  .footer-nav p.beian-info{
    align-items: flex-start;
    margin-top: 10px;
  }

}

/* 手机视图 (小于 768px) */
@media screen and (max-width: 767px) {
  /* 基础调整 */
  .container , .footer-container{
    padding: 0 16px !important;
  }
  
  /* 导航栏调整 */
  .main {
    padding-top: 60px;
  }
  .nav {
    min-height: 60px;
    gap: 8px;
  }
  .nav-search{
    width: 160px;
  }
  /* 品牌标志 */
  .nav-brand h1 {
    display: none;
  }
  
  /* 汉堡菜单按钮显示 */
  .nav-toggle {
    display: block;
    z-index: 1001;
  }
  
  /* 导航菜单隐藏 - 修改为不占满全屏并调整定位 */
  .nav-menu {
    display: none;
    position: fixed;
    top: 60px; /* 与头部等高，紧贴头部下方 */
    left: 0;
    width: 100%;
    /* 不再占满全屏 */
    height: auto;
    max-height: calc(100vh - 60px);
    background-color: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 20px;
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  /* 游戏下拉菜单 */
  .game-dropdown{
    margin: 0 !important;
    padding: 0 !important;
  }
  .nav-menu li a{
    width: 100%;
    padding: 16px;
  }
  .game-dropdown li a:hover{background: #fff;}
  /* 移动端菜单显示类 - 修改动画为从上到下 */
  .nav-menu.show {
    display: flex;
    animation: slideDown 0.3s ease forwards;
  }
  /* 去除游戏旁边的img */
  #game-toggle{
    display: none !important;
  }
  /* 替换原来的slideIn动画为从上到下的slideDown */
  @keyframes slideDown {
    from {
      transform: translateY(-20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  /* 导航链接样式调整 */
  .nav-link {
    min-width: auto;
    font-size: 16px;
    padding: 12px 20px;
    width: 100%;
    text-align: center;
  }
  /* 下载按钮调整 */
  .download-client {
    margin-left: 0;
  }
  .download-btn-windows {
    padding: 6px 12px;
    font-size: 13px;
  } 
  /* 搜索结果适配 */
  .search-results {
    /* width: calc(64vw - 40px); */
    width: 280px;
    left: 0px;
    /* right: 20px; */
    top: 120%;
  }
  .game-list {
    grid-template-columns: 1fr;
  }
  /* 标题和内容适配 */
  .section-title {
    font-size: 20px;
    margin-bottom: 16px;
  }
  
  /* App卡片适配 */
  /* .app-info .app-name,
  .app-info .app-category,
  .game-name,
  .game-category {
    
  }
   */
  /* 游戏卡片高度调整 */
  /* .box {
    height: 180px;
  } */
  .download-num{display: none;}
  /* ========= game-row ========== */
  .game-row{
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-top: 6px !important;
    gap: 8px !important;
  }
  .game-row .chart-item{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .game-row .chart-item .app-info{
    display: flex;
    justify-content: center;
    width: 100px;
  }
  .game-row .chart-item .app-info .app-name{
    text-align: center;
    margin: 0 auto;
  }
 
  .game-row .chart-item .app-info .rating,
  .game-row .chart-item .app-info .app-category{
    display: none;
  }
  .chart-list .chart-item .download-btn-small{
    visibility: visible !important;
  }
   /* ========= feature-grid ========= */
  .featured-grid{
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-top: 6px !important;
    gap: 0 !important;
  }
  .featured-item:hover{background: #f3f3f3;}
  .featured-item {
    flex: 0 0 auto;
    gap: 4px !important;
  }
  .featured-item .app-name{
    display: flex;
    justify-content: center;
    width: 100px;
  }
  .featured-item .app-category{
    display: none;
  }
  .featured-item .download-btn-small {
    visibility: visible !important;
    margin: 0 !important;
  }
  /* ========== large-games-showcase ========== */
  #large-games-showcase{
    grid-template-columns: repeat(1, 1fr) !important;
    overflow-x: hidden;
    gap: 0 !important;
  }
  /*========== hot-games-grid ===========*/
  .hot-games-grid{
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    /* margin: 20px auto; */
    overflow-x: hidden;
    overflow-y: hidden;
    height: auto !important;
    gap: 0 !important;
    
  }
  .game-card{
    margin: 10px auto !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    min-width: auto !important;
  }
  .game-card .game-name{
    font-size: 14px;
  }
  .game-card .game-category{
    font-size: 12px;
  }
  /* .hot-games-grid .game-card .download-btn{
    visibility: visible !important;
  } */
  .charge-game:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  .charge-game:hover .game-info{background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 24%,  rgba(0, 0, 0, 0.7) 70%, #000 100%);}
  /* 游戏信息调整 */
  .game-info {
    padding: 100px 8px 8px 8px;
    gap: 8px;
  }
  /* 图表项适配 */
   .game-row .chart-item{
    /* gap: 8px; */
    padding:8px 0;
  }
  .app-info .app-name{
    font-size: 13px;
  }
  .app-info .app-category{
    font-size: 11px;
  }
  /* 下载按钮适配 */
  .download-btn {
    padding: 4px 12px;
    font-size: 12px;
  }
  /* 底部样式 */
  .footer {
    padding: 16px 0;
  }
  .footer-nav p.footer-link {
    flex-wrap: wrap;
    justify-content: start;
    gap: 8px;
  }
  /* 底部备案信息样式 */
  .beian-info {
    flex-direction: column;
    align-items: flex-start;
  }
  .beian-info .split{
    display: none;
  }
  
  .beian-info a {
      display: block;
      line-height: 1.4;
  } 
}


/* 小屏幕手机优化 (小于 480px) */
@media screen and (max-width: 479px) {
  .container , .footer-container{
    padding: 0 16px !important;
  }
  .game-row .chart-item {
    padding: 0;
  }
  .app-icon{
    height: 56px;
    width: 56px;
  }
  .app-info .app-name{
    font-size: 12px;
  }
  .app-info .app-category{
    font-size: 10px;
  }
  /* .games-showcase{
    grid-template-columns: repeat(1, 1fr);
  } */
  
  /* 隐藏nav-brand的文字 */
  .nav-brand h1 {
    display: none;
  } 
  .download-btn-windows {
    padding: 4px 8px;
    font-size: 12px;
    gap: 4px;
  }
  .download-btn-windows img {
    width: 12px;
    height: 12px;
  }
  .nav-link {
    font-size: 14px;
    padding: 10px 16px;
  }
  .section-title {
    font-size: 18px;
  }
  
  /* 小屏幕手机搜索框进一步调整 */
  .nav-search {
    width: 100px;
    min-width: 100px;
  }
  .nav-search:focus-within {
    width: 150px;
    min-width: 150px;
  }
}

/* 滚动条样式优化 */
@media screen and (max-width: 767px) {
  ::-webkit-scrollbar {
    display: none;
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #999;
  }
}