/* =======================
   XGameo 网站移动端适配 CSS
   适用页面：首页 / 游戏列表页 / 游戏详情页 / About / 隐私政策 / 条款页
   ======================= */

/* ===== 1024px 以下 ===== */
@media screen and (max-width: 1024px) {
  /* NAVIGATION */
  header {
    flex-direction: column;
    align-items: center;
    padding: 10px 20px;
    flex-wrap: wrap;
  }
  nav {
    margin-top: 10px;
  }
  nav a {
    margin: 5px 10px;
  }

  /* 主布局纵向排列 */
  .container {
    flex-direction: column;
    padding: 10px;
    gap: 15px;
  }

  /* 游戏详情页顺序调整 */
  .main {
    order: 1; /* 游戏窗口 + 游戏介绍在上 */
    width: 100%;
  }
  .game-sidebar {
    order: 2; /* 分类 + 热门游戏在下 */
    width: 100%;
  }

  /* iframe 游戏窗口自适应 */
  .game-box {
    width: 100%;
    height: calc(100vw * 0.75);
  }

  /* 左侧分类 + 热门游戏自适应 */
  .sidebar {
    width: 100%;
    margin-bottom: 20px;
  }
  .side-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
  }

  /* 当前分类 / 游戏列表网格 */
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
    justify-items: center;
  }
  .card {
    width: 100%;
    max-width: 180px;
  }

  /* 游戏介绍内容居中 */
  .content {
    width: 90%;
    margin: 20px auto;
    text-align: center;
  }

  /* 广告位占位自适应 */
  .ad-slot {
    width: 90%;
    height: 80px;
  }
}

/* ===== 768px 以下 ===== */
@media screen and (max-width: 768px) {
  header {
    padding: 10px 15px;
  }
  .logo {
    font-size: 20px;
  }
  nav a {
    margin: 5px 8px;
    font-size: 14px;
  }
  .side-card {
    padding: 8px;
    font-size: 11px;
  }
  .card h4 {
    font-size: 12px;
    padding: 6px;
  }
  .card img {
    height: 100px;
  }
  .content h2 {
    font-size: 20px;
  }
  .content p {
    font-size: 14px;
  }
}

/* ===== 480px 以下 ===== */
@media screen and (max-width: 480px) {
  header {
    flex-direction: column;
    text-align: center;
  }
  nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  nav a {
    margin: 3px 5px;
    font-size: 13px;
  }

  /* 游戏列表 / 当前分类网格 */
  .grid {
    grid-template-columns: 1fr;
  }
  .card {
    width: 100%;
    max-width: none;
  }

  /* 分类栏网格 */
  .side-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* 游戏 iframe */
  .game-box {
    height: calc(100vw * 0.75);
  }

  /* 广告位 */
  .ad-slot {
    width: 95%;
    height: 70px;
  }

  /* 主标题和描述 */
  .main h1,
  .game-title {
    font-size: 20px;
  }
  .main p,
  .content p {
    font-size: 14px;
  }
}

/* ===== 320px 以下 ===== */
@media screen and (max-width: 320px) {
  nav a {
    font-size: 12px;
    margin: 2px 3px;
  }
  .logo {
    font-size: 18px;
  }
  .side-card {
    font-size: 10px;
    padding: 6px;
  }
  .card h4 {
    font-size: 11px;
    padding: 4px;
  }
  .ad-slot {
    font-size: 14px;
  }
}