/* ==========================================================================
   pages.css · 页面级样式（表单、筛选栏、首页 Hero、频道栏、详情页、提交页、合规页）
   ========================================================================== */

/* ==========================================================================
   首页「搜索 + 分类」合并吸顶工具栏
   设计说明：搜索与分类本属同一「找游戏」动作，合并后更紧凑——
   ① 整体吸顶，滚动后仍可随时搜索 / 切分类；
   ② 搜索框与分类之间只留 8px，竖向空间让给下方游戏内容。
   ========================================================================== */

/* 首屏主标题（非吸顶）：一行 slogan，让用户立刻知道「这是个什么站」。
   放在吸顶工具栏之外，避免撑高吸顶栏。 */
.home-hero__title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.home-toolbar {
  position: sticky;
  top: 0;
  z-index: 45;
  margin: 0 calc(-1 * var(--space-4)) var(--space-3);
  padding: var(--space-3) var(--space-4) 0;
  background: var(--color-header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

/* 工具栏里的搜索栏不再单独吸顶与全宽出血，交由 .home-toolbar 统一处理背景 */
.search-bar--inline {
  position: static;
  margin: 0 0 var(--space-2);
  padding: 0;
  background: none;
  backdrop-filter: none;
  border-bottom: none;
}

/* 搜索框与分类标签之间只保留少量间距 */
.home-toolbar .category-nav {
  padding: 0 0 var(--space-3);
}

/* 输入框内嵌搜索图标：让"这是搜索框"一眼可辨 */
.hero__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.hero__field-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--color-text-dim);
  pointer-events: none;
}

.hero__field-icon svg {
  width: 100%;
  height: 100%;
}

/* 注意：必须写成 .gh-input.hero__input 提高权重。
   .gh-input 的 padding 简写在本文件靠后位置，且与本选择器权重相同，
   若只写 .hero__input，padding-left 会被它覆盖，导致图标压住输入文字。 */
.gh-input.hero__input {
  width: 100%;
  min-height: 48px;
  padding-left: calc(var(--space-6) + var(--space-2));
  border-radius: var(--radius-pill);
}

/* 聚焦反馈：主色边框 + 柔和光晕（搜索是首屏主操作，值得更明显的焦点） */
.gh-input.hero__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.gh-btn.hero__submit {
  flex: 0 0 auto;
  min-width: 76px;
  min-height: 48px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
}

@media (max-width: 767px) {
  .gh-btn.hero__submit {
    min-width: 64px;
    padding: 0 var(--space-4);
  }
}

/* ---------- 表单控件（提交页 + 搜索框共用） ---------- */
.form-field {
  margin-bottom: var(--space-4);
}

.form-field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.form-field__required {
  color: var(--color-primary);
  margin-left: 2px;
}

.form-field__hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
}

.form-field__error {
  display: none;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
}

.form-field.has-error .form-field__error {
  display: block;
}

.form-field.has-error .gh-input,
.form-field.has-error .gh-textarea,
.form-field.has-error .gh-select {
  border-color: var(--color-primary);
}

.gh-input,
.gh-textarea,
.gh-select {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-text);
  transition: border-color var(--transition);
}

.gh-input:focus,
.gh-textarea:focus,
.gh-select:focus {
  border-color: var(--color-primary);
  outline: none;
}

.gh-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.7;
}

.gh-input::placeholder,
.gh-textarea::placeholder {
  color: var(--color-text-dim);
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  font-size: var(--font-size-xs);
  color: var(--color-text-sub);
  line-height: 1.7;
}

.checkbox-field input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  flex: 0 0 auto;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.form-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
}

@media (min-width: 768px) {
  .form-card { padding: var(--space-6); }
}

.form-grid {
  display: grid;
  gap: 0 var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
}

/* ---------- 提交进度（图片上传） ---------- */
.submit-progress {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.submit-progress__text {
  margin-bottom: var(--space-2);
  color: var(--color-text-sub);
  font-size: var(--font-size-sm);
}

.submit-progress__track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  overflow: hidden;
}

.submit-progress__bar {
  width: 0;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--gradient-primary);
  transition: width var(--transition);
}

/* ==========================================================================
   分类页吸顶工具栏：分类切换 + 平台/排序筛选
   说明：两层各自 sticky 会互相遮挡，因此合并为一个 sticky 容器，内部两行
   ========================================================================== */

.list-toolbar {
  position: sticky;
  top: 0;
  z-index: 45;
  margin: 0 calc(-1 * var(--space-4)) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.list-toolbar .category-nav {
  margin-bottom: var(--space-2);
  padding-bottom: 0;
}

/* 工具栏内的筛选行不再自己吸顶，避免与容器冲突 */
.list-toolbar .filter-bar {
  position: static;
  margin: 0;
  padding: 0;
  background: none;
  backdrop-filter: none;
  border-bottom: none;
}

/* 工具栏内的平台/排序与分类频道栏保持同一视觉语言：
   去掉胶囊边框与底色，选中用主色加粗表达（避免同一工具栏出现两种"按钮"风格） */
.list-toolbar .filter-bar .gh-tag {
  padding: 4px 0;
  border-color: transparent;
  background: transparent;
}

.list-toolbar .filter-bar .gh-tag:hover {
  border-color: transparent;
  background: transparent;
  color: var(--color-primary);
}

.list-toolbar .filter-bar .gh-tag.is-active {
  border-color: transparent;
  background: transparent;
  color: var(--color-primary);
  font-weight: 600;
}

.list-toolbar .filter-bar .filter-group {
  gap: var(--space-3);
}

/* 首页"正在查看某分类"的上下文提示 */
.home-filter-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-text-sub);
  font-size: var(--font-size-xs);
}

.home-filter-hint a {
  font-weight: 600;
}

/* 滚动自动加载哨兵 */
.load-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: var(--space-4) 0;
  text-align: center;
}

/* ---------- 筛选栏 ---------- */
.filter-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 calc(-1 * var(--space-4)) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-right: var(--space-4);
}

.filter-group__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
}

/* ---------- 分类标签导航（首页） ---------- */
/* 分类胶囊标签：选中为实心主色白字，未选中为描边卡片（参考图：搜索框在上的胶囊分类栏） */
.category-nav {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  overflow-x: auto;
  /* 移动端隐藏滚动条，用右边缘渐隐提示"右边还有内容" */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: var(--space-3) 0;
}

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

/* 桌面端：换行 + 左对齐（与区块标题同一基线） */
@media (min-width: 768px) {
  .category-nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow-x: visible;
  }
}

/* 移动端：可横滑时右边缘渐隐，滚到末端自动消失（类名由 category-nav.js 维护） */
@media (max-width: 767px) {
  .category-nav {
    scroll-snap-type: x proximity;
  }

  .category-nav.is-scrollable:not(.is-at-end) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
}

.category-nav__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  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-sm);
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

/* 悬停：主色描边 + 文字转主色（不清底，保持胶囊感） */
.category-nav__item:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  text-decoration: none;
}

/* 按下：轻微缩放反馈 */
.category-nav__item:active {
  transform: scale(0.97);
}

/* 选中：实心主色 + 白字（参考图激活态） */
.category-nav__item.is-active,
.category-nav__item.is-active:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  font-weight: 600;
}

/* ---------- 详情页 ---------- */
.detail-head {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  align-items: flex-start;
}

.detail-head__cover {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-alt);
}

.detail-head__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-head__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.detail-head__title {
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: 1.3;
  /* 超长游戏名（无空格）也要换行，避免撑破卡片 */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.detail-head__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.detail-head__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.detail-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-stat__value {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-weight: 600;
}

.detail-stat__label {
  font-size: 11px;
  color: var(--color-text-dim);
}

.detail-head__developer {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-sub);
}

@media (max-width: 767px) {
  .detail-head__cover {
    flex-basis: 72px;
    width: 72px;
    height: 72px;
  }

  .detail-head__title {
    font-size: var(--font-size-lg);
  }
}

.detail-section {
  margin-bottom: var(--space-6);
}

/* 「网页试玩」面板：悬停时轻微上浮 + 阴影 */
.exp-panel--h5 {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.exp-panel--h5:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
}

/* 微信 / 抖音二维码卡片：悬停上浮 + 主色描边
   注：「扫码体验」外层大面板不加悬浮效果，避免与内部卡片效果重复 */
.exp-qr-card {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.exp-qr-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
}

.detail-section__title {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-3);
  padding-left: var(--space-3);
  border-left: 4px solid var(--color-primary);
}

.detail-desc {
  color: var(--color-text-sub);
  line-height: 1.9;
  margin-bottom: var(--space-3);
  /* 长串英文/连续字符（如 aaaa…）无空格时也要强制换行，避免撑破布局 */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.feature-list li {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  font-size: var(--font-size-xs);
  color: var(--color-text-sub);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.update-log {
  list-style: none;
  padding: 0;
}

.update-log li {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: var(--font-size-xs);
  align-items: baseline;
}

.update-log__date {
  flex: 0 0 92px;
  color: var(--color-text-dim);
}

.report-link {
  margin-top: var(--space-5);
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
  text-align: center;
}

/* ---------- 提交页 ---------- */
.submit-layout {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-5);
}

/* 表单分区：分区标题 + 卡片内分隔 */
.form-section {
  margin-bottom: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.form-section:first-of-type {
  padding-top: 0;
  border-top: none;
}

.form-section__title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-md);
  color: var(--color-text);
  padding-left: var(--space-3);
  border-left: 4px solid var(--color-primary);
}

/* 发布平台多选：胶囊式选项 */
.platform-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.platform-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  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-sm);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}

.platform-check input {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
}

.platform-check:has(input:checked) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* 文件上传通用容器 */
.file-upload {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.file-upload__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 120px;
  padding: var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  color: var(--color-text-sub);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.file-upload__box:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.file-upload__icon {
  /* 图标改为图片（assets/img/icon/up-icon.png 等）后按图片尺寸呈现，
     同时保留 font-size/line-height 以兼容可能残留的字符图标 */
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  font-size: 24px;
  line-height: 1;
}

.file-upload__text {
  font-size: var(--font-size-sm);
  color: inherit;
}

.file-upload__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
}

/* 图标/二维码预览 */
.file-upload__preview {
  position: relative;
  display: inline-flex;
  width: fit-content;
}

.file-upload__preview--icon img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.file-upload__preview--qr img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid var(--color-border);
  padding: var(--space-2);
}

.file-upload__remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-card);
  color: var(--color-text);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}



/* 截图预览 */
.shot-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-2);
}

.shot-preview {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.shot-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot-preview__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .submit-layout {
    grid-template-columns: 1.6fr 1fr;
    align-items: start;
  }
}

.info-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  margin-bottom: var(--space-4);
}

.info-card__title {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-3);
}

.success-panel {
  padding: var(--space-6) var(--space-4);
  border: 1px solid var(--color-wx);
  border-radius: var(--radius-lg);
  background: rgba(7, 193, 96, 0.08);
  text-align: center;
}

/* 成功页头部：图标在上、文字在下 */
.success-panel__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.success-panel__icon {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.success-panel__title {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

.success-panel__id {
  display: inline-block;
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  font-family: Consolas, Monaco, monospace;
  color: var(--color-text);
}

.preview-box {
  max-height: 320px;
  overflow: auto;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-family: Consolas, Monaco, monospace;
  font-size: var(--font-size-xs);
  color: var(--color-text-sub);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ---------- 搜索栏（搜索页吸顶；首页用 .search-bar--inline 复刻同一外观但不吸顶） ---------- */
.search-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
  margin: 0 calc(-1 * var(--space-4)) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

/* 说明：输入框/按钮的尺寸由共用的 .gh-input.hero__input 与 .gh-btn.hero__submit 决定，
   这里不再单独覆盖 min-height，保证首页与搜索页高度完全一致（48px） */

.search-result-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-sub);
  margin-bottom: var(--space-4);
}

.hot-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

/* ---------- 静态内容页（关于我们 / 合规页） ---------- */
.doc-page {
  max-width: 860px;
  margin: var(--space-6) auto;
  padding: var(--space-6) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
}

.doc-page__title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-2);
}

.doc-page__updated {
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
  margin-bottom: var(--space-5);
}

.doc-page h2 {
  margin-top: var(--space-6);
  font-size: var(--font-size-md);
}

.doc-page p,
.doc-page li {
  line-height: 1.9;
}

.doc-page__contact {
  padding: var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  margin-top: var(--space-5);
}

.doc-page__contact p {
  margin-bottom: var(--space-2);
}