/*  */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}
/* 轮播图样式 */
/*  */
.carousel{padding: 20px 0 40px;}
.track{display: grid;grid-template-columns: 2fr 1fr;gap: 12px;}
.left-track{position: relative;}
.carousel-container{position: relative; overflow:hidden;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,0.05);background-color:#fff}
.carousel-track{display:flex;transition:transform 0.5s ease}
.carousel-slide{min-width:100%;position: relative;height: auto;aspect-ratio: 16/9;max-height: 500px;}
.carousel-slide img{width:100%;height:100%;object-fit:cover}
.carousel-indicators{position:absolute;left:50%;bottom: 0%; transform:translateX(-50%);display:flex;gap:8px;padding:15px 0}
.indicator{width:12px;height:8px;border-radius:40px;background:#FFF;opacity: 40%; cursor:pointer;}
.indicator.active{opacity: 1;width: 24px;height: 8px;}
/* left */
.carousel-info{height: 100%; display: flex; flex-direction: column;justify-content: center; align-items: flex-start; padding: 50px;padding-right: 100px; position: absolute;top: 0;left: 0;transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); background: linear-gradient(270deg, rgba(51, 51, 51, 0) 0%, rgba(51, 51, 51, 0.6) 36%, rgba(51, 51, 51, 0.93) 70%, #333333 100%);;}
.carousel-info img{width: 64px;height: 64px;opacity: 1;border-radius: 12px;border: 0.5px solid #FFFFFF66}
.carousel-info .game-showinfo{color: #FFFFFF;margin-bottom: 50px;}
.carousel-info .game-title{font-size: 40px;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 400px;}
.carousel-info .game-content{font-size: 20px;opacity: 60%;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;width: 420px;}

/* right */
.games-carousel{display: flex;flex-direction: column;gap: 16px;justify-content: space-between;margin-left: 12px;}
.info-box{padding-bottom: 20px;}
.game-text{flex: 1;padding-left: 12px;}
.game-text h3{font-weight: 600;font-style: Semibold;font-size: 24px;line-height: 100%;letter-spacing: 2%;}
.game-text p{font-size: 16px;font-weight: 400; opacity: 60%; line-height: 24px;margin-top: 4px;max-height: 72px;overflow: hidden; text-overflow: ellipsis;}

/* 区域初始化 */
.selected-games-section,
.hot-section,
.new-games-section
{padding:20px 0;}
/*  */
/* 热游速递样式 */
.game-row {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 12px;margin: 0 auto;}
/*  */
.app-info{flex: 1;}
#game-card-1,#game-card-2{min-width: 150px;}
#game-card-1 img,#game-card-2 img{width: 100%;aspect-ratio: 16/9;object-fit: cover;}
#game-card-1:hover,#game-card-2:hover{transform: translateY(-3px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
/*  */
/***游戏展示区***/
.igame-card {overflow: hidden;transition: transform 0.3s ease, box-shadow 0.3s ease;cursor: pointer;border-radius: 8px;}
.igame-card:hover {transform: translateY(-5px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
/* 大型游戏展示区样式 */
.games-showcase{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;margin-top:40px}
#large-games-showcase{ display:grid;grid-template-columns: repeat(2,1fr); gap: 12px;}
/* #large-games-showcase{ display: flex;justify-content: space-between;gap: 12px;align-items: center;} */
.large-game{overflow: hidden;transition: all 0.3s ease;cursor: pointer;aspect-ratio: 16/9;}
.large-game:hover{transform: translateY(-5px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
.large-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%);}

/* 响应式布局 - 960px以下 */
@media (max-width: 960px) {
  /* 修改主容器布局 */
  .track {
    display: block;
    grid-template-columns: none;
    gap: 0;
    margin: 0 8px;
    width: calc(100% - 16px); /* 确保宽度计算正确 */
  }
  
  /* 修改.container在小屏幕上的样式 */
  .container.track {
    max-width: none;
    width: calc(100% - 16px);
    margin: 0 8px;
  }
  
  /* 设置轮播图容器高度为相对值 */
  .carousel-slide {
    height: auto;
    aspect-ratio: 16/9;
    min-height: 200px;
  }
  
  /* 轮播图信息适配小屏幕 */
  .carousel-info {
    padding: 30px;
    padding-right: 60px;
  }
  
  .carousel-info .game-title {
    font-size: 28px;
    width: 100%;
    /* max-width: 300px; */
  }
  
  .carousel-info .game-content {
    font-size: 16px;
    width: 100%;
    max-width: 350px;
  }
  
  /* 右侧副图移至轮播图下方 */
  .right-track {
    margin-top: 20px;
    width: 100%;
  }
  
  /* 修改右侧副图布局为一列两行 */
  .games-carousel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 12px;
    margin-left: 0;
  }
  
  /* 设置副图容器等比例缩放 */
  #game-card-1, #game-card-2 {
    width: 100%;
    height: auto;
  }
  
  #game-card-1 img, #game-card-2 img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
}

/* 响应式布局 - 768px以下进一步优化 */
@media (max-width: 768px) {
  .carousel {
    padding: 15px 0 30px;
  }
  
  /* 保持左右边距 */
  .track {
    margin: 0 8px;
  }
  
  .carousel-info {
    padding: 20px;
    padding-right: 40px;
  }
  
  .carousel-info .game-title {
    font-size: 24px;
    max-width: 250px;
  }
  
  .carousel-info .game-content {
    font-size: 14px;
    max-width: 300px;
  }
  
  /* 副图文字适配小屏幕 */
  .game-text h3 {
    font-size: 20px;
  }
  
  .game-text p {
    font-size: 14px;
  }
}

/* 响应式布局 - 480px以下进一步优化 */
@media (max-width: 480px) {
  .carousel {
    padding: 10px 0 20px;
  }
  
  /* 保持左右边距 */
  .track {
    margin: 0 8px;
  }
  
  .carousel-container {
    border-radius: 12px;
  }
  
  .carousel-info {
    padding: 15px;
  }
  
  .carousel-info img {
    width: 48px;
    height: 48px;
  }
  
  .carousel-info .game-title {
    font-size: 20px;
    white-space: normal;
    text-overflow: initial;
    overflow: visible;
  }
  
  .carousel-info .game-content {
    font-size: 13px;
    white-space: normal;
    text-overflow: initial;
    overflow: visible;
  }
  
  /* 指示器适配小屏幕 */
  .indicator {
    width: 8px;
    height: 6px;
  }
  
  .indicator.active {
    width: 16px;
    height: 6px;
  }
}