/* ==========================================================
 * 悠游下载站 - 自适应响应式补丁（仅首页）
 * mobile-first 断点策略：
 *   <  768px : 手机竖屏（默认）
 *   ≥ 768px : 平板
 *   ≥ 1200px: 桌面
 * ========================================================== */

img { max-width: 100%; height: auto; }

/* ----------- 默认：mobile（< 768px） ----------- */
header nav { display: flex; align-items: center; justify-content: space-between; }
.container { padding: 0 12px; }

/* 汉堡按钮：默认显示 */
.menu-toggle {
  display: flex;
  width: 36px; height: 36px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; align-items: center; justify-content: center;
  margin-left: auto;
}
.menu-toggle span {
  display: block; width: 22px; height: 2px; background: #2E2E30; position: relative;
}
.menu-toggle span::before,
.menu-toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 22px; height: 2px; background: #2E2E30;
}
.menu-toggle span::before { top: -7px; }
.menu-toggle span::after  { top:  7px; }

/* 菜单：绝对定位（drop），默认隐藏 */
header nav .menu-list {
  display: none !important;
  position: absolute;
  top: 56px; right: 12px; left: 12px;
  background: #ffffff;
  flex-direction: column;
  align-items: stretch;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10);
  padding: 6px 0;
  z-index: 99;
}
.menu-list.open { display: flex !important; }
header nav .menu-list a { padding: 12px 16px; font-size: 14px; border-bottom: 1px solid #f2f2f2; }
header nav .menu-list a:last-child { border-bottom: 0; }

/* 5 列区（手机游戏 / 专题合集 / 应用软件 / 最新上架 / 本周最热）转单列 */
.hero-banner-section { margin-top: 12px; }
.hero-banner-section .banner-list { display: flex; flex-direction: column; row-gap: 12px; }
.hero-banner-section .banner-list .top-banner-section,
.hero-banner-section .banner-list .bottom-banner-section { flex-direction: column; }
.hero-banner-section .banner-list .top-banner-section a { width: 100%; height: 180px; flex: 1; }
.hero-banner-section .banner-list .top-banner-section a img { width: 100%; height: 100%; }
.hero-banner-section .banner-list .bottom-banner-section .banner-left,
.hero-banner-section .banner-list .bottom-banner-section .banner-right {
  flex: 1; max-width: 100%; margin: 0;
  clip-path: none; border-radius: 6px; padding: 12px;
  /* minmax(0,1fr)：min=0 才允许列收缩，否则 grid item 的 min-width:auto
     会被 img{width:100%} 撑到图片原始宽度，导致整页横向滚动 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 10px; row-gap: 10px;
}
.hero-banner-section .banner-list .bottom-banner-section a {
  min-width: 0; max-width: 100%;
}
.hero-banner-section .banner-list .bottom-banner-section a img {
  width: 100%; max-width: 100%; height: auto;
}

/* 热门专题区 3 列变单列 */
.hot-topic-section .hot-topic-wrapping { flex-direction: column; }
.hot-topic-section .hot-topic-wrapping .hot-topic-banner-list,
.hot-topic-section .hot-topic-wrapping .hot-topic-tab,
.hot-topic-section .hot-topic-wrapping .daily-recommend-panel {
  flex: 1; max-width: 100%; margin: 0 0 16px;
}
.hot-topic-section .hot-topic-wrapping .hot-topic-banner-list .banner-list { grid-template-columns: repeat(2, 1fr); }

/* 手机游戏 tab 区：右栏移到下方 */
.game-flex { flex-direction: column; row-gap: 16px; }
.mobile-game-list, .mobile-game-tab-wrap { flex: 1; max-width: 100%; }
.hottest-of-week { flex: 1; max-width: 100%; }
.hottest-of-week .hottest-game-list { display: flex; flex-direction: column; row-gap: 12px; }
.hottest-of-week .hottest-game-list a .imgWrap { width: 56px; height: 56px; }
.hottest-of-week .hottest-game-list a .detailWrap .name { font-size: 14px; max-width: 100%; }

/* 手机游戏 tab 面板：3 列 */
.mobile-game-tab-wrap .tab-content-listing .content .itemWrap {
  flex: 0 0 calc(33.333% - 8px); max-width: calc(33.333% - 8px);
}

/* 主题合集区 */
.topics-panel .topics-banners { flex-direction: column; row-gap: 12px; }
.topics-panel .topic-left { flex: 1; max-width: 100%; }
.topics-panel .topics-right { display: grid; grid-template-columns: repeat(2, 1fr); flex: 1; }

/* 友链 */
.friendLinks-panel .link-list { flex-wrap: wrap; gap: 6px 12px; }
.titleWrap h2 { font-size: 18px; }

/* footer */
.footer-top { padding: 16px 12px; }
.footerWrap { flex-direction: column; row-gap: 10px; align-items: flex-start; }

/* ----------- 平板 ≥ 768px ----------- */
@media (min-width: 768px) {
  .container { padding: 0 16px; }

  /* 顶部菜单：横排 */
  .menu-toggle { display: none; }
  header nav .menu-list {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  header nav .menu-list a { padding: 0; font-size: 16px; border-bottom: 0; }

  /* banner 顶部：恢复 lcks 原版 —— 非 active 固定 192px(flex:0.3404)，active 占满(flex:1)。
     鼠标 hover 时 index.js 把 active 移过去，宽度带 transition 动画（即"轮动"效果） */
  .hero-banner-section .banner-list .top-banner-section { flex-direction: row; }
  .hero-banner-section .banner-list .top-banner-section a { flex: 0.3404; width: 192px; height: 250px; }
  .hero-banner-section .banner-list .top-banner-section a.active { flex: 1; width: 100%; }
  .hero-banner-section .banner-list .top-banner-section a img { width: 192px; height: 100%; }
  .hero-banner-section .banner-list .top-banner-section a.active img { width: 100%; }

  /* banner 底部：恢复 lcks 原版黄绿双拼（各 52%，margin-left -4% 错位 + clip-path 斜切） */
  .hero-banner-section .banner-list .bottom-banner-section { flex-direction: row; }
  .hero-banner-section .banner-list .bottom-banner-section .banner-left {
    flex: 0 0 52%; max-width: 52%; margin: 0;
    clip-path: polygon(0 0, 89% 0, 100% 100%, 0% 100%);
    border-radius: 6px 85px 6px 6px; padding: 20px;
    grid-template-columns: repeat(auto-fit, minmax(0, 86px)); column-gap: 25px;
    background-color: #ffe66d;
  }
  .hero-banner-section .banner-list .bottom-banner-section .banner-right {
    flex: 0 0 52%; max-width: 52%; margin-left: -4%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 11% 100%);
    border-radius: 6px 6px 6px 80px; padding: 20px;
    grid-template-columns: repeat(auto-fit, minmax(0, 86px)); column-gap: 25px;
    background-color: #1AEEB0; justify-content: flex-end;
  }

  /* 热门专题 */
  .hot-topic-section .hot-topic-wrapping { flex-direction: row; }
  .hot-topic-section .hot-topic-wrapping .hot-topic-banner-list { flex: 0 0 50%; max-width: 50%; margin-right: 16px; }
  .hot-topic-section .hot-topic-wrapping .hot-topic-tab { flex: 0 0 50%; max-width: 50%; }
  .hot-topic-section .hot-topic-wrapping .daily-recommend-panel { display: none; }

  /* 手机游戏 tab */
  .game-flex { flex-direction: row; column-gap: 24px; }
  .mobile-game-list { flex: 0 0 65%; max-width: 65%; }
  .hottest-of-week { flex: 0 0 35%; max-width: 35%; }
  .mobile-game-tab-wrap .tab-content-listing .content .itemWrap {
    flex: 0 0 calc(16.666% - 7px); max-width: calc(16.666% - 7px);
  }

  /* 主题合集 */
  .topics-panel .topics-banners { flex-direction: row; column-gap: 16px; }
  .topics-panel .topic-left { flex: 0 0 42%; max-width: 42%; }
  .topics-panel .topics-right { display: grid; grid-template-columns: repeat(2, 1fr); flex: 1; }
}

/* ----------- 桌面 ≥ 1200px ----------- */
@media (min-width: 1200px) {
  /* lcks 原版轮播 banner：非 active 固定 192px(flex:0.3404)，active 占满剩余空间(flex:1)
     —— 鼠标移到某张上时 index.js 把 active 移给它，宽度带 0.4s transition 动画（即"轮动"效果） */
  .hero-banner-section .banner-list .top-banner-section { flex-direction: row; }
  .hero-banner-section .banner-list .top-banner-section a { flex: 0.3404; width: 192px; height: 250px; }
  .hero-banner-section .banner-list .top-banner-section a.active { flex: 1; width: 100%; }
  .hero-banner-section .banner-list .top-banner-section a img { width: 192px; height: 100%; }
  .hero-banner-section .banner-list .top-banner-section a.active img { width: 100%; }
  .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
  .menu-toggle { display: none; }
  header nav .menu-list {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  header nav .menu-list a { padding: 0; font-size: 16px; border-bottom: 0; }

  .hero-banner-section .banner-list .top-banner-section { flex-direction: row; }

  /* 底部 banner 双拼：lcks 原版设计（左黄 + 右绿，各 52%，margin 错位） */
  .hero-banner-section .banner-list .bottom-banner-section { flex-direction: row; }
  .hero-banner-section .banner-list .bottom-banner-section .banner-left {
    flex: 0 0 52%; max-width: 52%; clip-path: polygon(0 0, 89% 0, 100% 100%, 0% 100%); border-radius: 6px 85px 6px 6px; padding: 20px;
    grid-template-columns: repeat(auto-fit, minmax(0, 86px)); background-color: #ffe66d;
  }
  .hero-banner-section .banner-list .bottom-banner-section .banner-right {
    flex: 0 0 52%; max-width: 52%; margin-left: -4%; clip-path: polygon(0 0, 100% 0, 100% 100%, 11% 100%); border-radius: 6px 6px 6px 80px; padding: 20px;
    grid-template-columns: repeat(auto-fit, minmax(0, 86px)); background-color: #1AEEB0; justify-content: flex-end;
  }

  .hot-topic-section .hot-topic-wrapping .hot-topic-banner-list { flex: 0 0 37.2%; max-width: 37.2%; margin-right: 20px; }
  .hot-topic-section .hot-topic-wrapping .hot-topic-tab { flex: 0 0 37.2%; max-width: 37.2%; margin-right: 25px; }
  .hot-topic-section .hot-topic-wrapping .daily-recommend-panel { flex: 0 0 21.6%; max-width: 21.6%; display: flex; }

  .game-flex { flex-direction: row; column-gap: 40px; }
  .mobile-game-list { flex: 0 0 71.5%; max-width: 71.5%; }
  .hottest-of-week { flex: 0 0 25.2%; max-width: 25.2%; }

  .mobile-game-tab-wrap .tab-content-listing .content .itemWrap {
    flex: 0 0 calc(16.666% - 7px); max-width: calc(16.666% - 7px);
  }

  .topics-panel .topics-banners { flex-direction: row; column-gap: 20px; }
  .topics-panel .topic-left { flex: 0 0 42.7%; max-width: 42.7%; }
  .topics-panel .topics-right { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 324px)); flex: 1; }

  .footerWrap { flex-direction: row; align-items: center; }
  .titleWrap h2 { font-size: 30px; }
}