/* ==========================================================================
   layout.css · 布局层（容器、页头、页脚、栅格、区块标题）
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ---------- 页头（内容优先版：不吸顶，滚动时让位给内容；桌面端含主导航，移动端由底部导航承载） ---------- */
/* 注意：这里**不要**加 backdrop-filter —— 它会创建新的层叠上下文，
   导致页头内的皮肤菜单（.skin-switch__menu，z-index:80）被困在页头层叠上下文里，
   被后续 DOM 的横幅广告（.gh-banner）盖住。页头不吸顶，模糊也无可模糊内容。 */
.site-header {
  position: relative;
  /* z-index 必须高于页面内所有吸顶工具栏：.search-bar / .filter-bar 为 40，
     .home-toolbar / .list-toolbar 为 45。否则皮肤菜单（.skin-switch__menu，z-index:80）
     会被困在页头层叠上下文里，被这些吸顶搜索栏盖住（搜索页曾出现的遮挡 Bug）。
     50 仍低于返回顶部 60 / 去扫码 70 / 移动端底部导航 90，浮动元素层级保持正确。 */
  z-index: 50;
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-height);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  transition: opacity var(--transition);
}

.site-logo:hover {
  color: var(--color-text);
  text-decoration: none;
  opacity: 0.88;
}

.site-logo__img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.site-logo__name {
  font-size: var(--font-size-md);
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* 标题普通加粗，去除渐变与动态效果 */
.site-logo__name--glow {
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color-text);
}

/* 页头主导航：全部游戏 / 提交游戏 / 关于我们（首页由 Logo 承担，见 layout.js renderSiteNav）
   设计：胶囊式链接，hover / 选中用「主色文字 + 柔和主色底」，与站内其它胶囊标签同一视觉语言 */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
  margin-left: var(--space-2);
  /* 中等宽度下若放不下，允许横向滚动而不撑破页头（隐藏滚动条） */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-text-sub);
  font-size: var(--font-size-sm);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--transition), background-color var(--transition);
}

.site-nav__link:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  text-decoration: none;
}

.site-nav__link.is-active {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  font-weight: 600;
}

/* 页头动作区：右对齐（导航隐藏的移动端也靠它把内容推到右侧） */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* 移动端：页头主导航收起，改由底部导航（.mobile-nav）承载，避免小屏页头拥挤 */
@media (max-width: 767px) {
  .site-nav {
    display: none;
  }
  .site-logo__name {
    font-size: var(--font-size-sm);
  }
  .site-logo__tagline {
    font-size: 11px;
    letter-spacing: 0;
  }
}

/* 页头动作区：目前仅皮肤切换器（搜索入口只在首页首屏，导航不含搜索） */

/* ---------- 页脚（精简版：固定链接 + 商务合作 + 版权备案） ---------- */
.site-footer {
  margin-top: var(--space-7);
  padding: var(--space-5) 0 var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  text-align: center;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.site-footer__link {
  color: var(--color-text-sub);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.site-footer__link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.site-footer__bottom {
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
  line-height: 1.9;
  text-align: center;
}

/* 页脚「联系我们」一行（商务/投诉邮箱 + 微信/QQ） */
.site-footer__contact {
  margin-bottom: var(--space-1);
}

.site-footer__contact a {
  color: var(--color-text-sub);
}

.site-footer__bottom a {
  color: var(--color-text-dim);
}

.site-footer__minor {
  margin-top: var(--space-1);
  color: var(--color-accent);
}

/* ---------- 区块 ---------- */
.section {
  margin-bottom: var(--space-6);
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.section__title {
  margin: 0;
  font-size: var(--font-size-lg);
}

.section__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-card);
  color: var(--color-text-sub);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}

.section__more:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

.page-title {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--font-size-lg);
}

.page-desc {
  color: var(--color-text-sub);
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-4);
}

.breadcrumb {
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
}

.breadcrumb a {
  color: var(--color-text-sub);
}

/* ---------- 栅格 ---------- */
.grid-games {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .grid-games {
    gap: var(--space-4);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-games {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- 返回顶部 ---------- */
#back-to-top {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-5);
  z-index: 60;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-card);
  color: var(--color-text);
  font-size: var(--font-size-md);
  box-shadow: var(--shadow-card);
}

#back-to-top:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ==========================================================================
   移动端底部导航（< 768px 显示）
   说明：移动端页头导航被收起，若无底部导航，用户只能通过页脚绕路访问栏目
   ========================================================================== */

.mobile-nav {
  display: none;
}

@media (max-width: 767px) {
  /* 给底部导航留出空间，避免遮挡页面内容与页脚 */
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--color-header-bg);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-border);
  }

  .mobile-nav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    color: var(--color-text-sub);
    font-size: 11px;
    text-decoration: none;
  }

  .mobile-nav__item:hover {
    text-decoration: none;
  }

  .mobile-nav__item.is-active {
    color: var(--color-primary);
  }

  .mobile-nav__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 18px;
    line-height: 1;
  }

  .mobile-nav__icon-img {
    position: relative;
    width: 22px;
    height: 22px;
    object-fit: contain;
  }

  /* 选中态：整项文字变色 + 图标切换为彩色 PNG（默认态用 *_def 灰阶图标，见 layout.js NAV_ICONS） */

  /* 返回顶部按钮上移到导航之上，避免与底部导航重叠 */
  #back-to-top {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}