/* 叠玩手机端「专题」（原生 special 模块）样式
   独立类名前缀 mcol-*，与老 .topic-*（JS 渲染遗留）互不干扰。 */

.mcol-banner,
.mcol-hero,
.mcol-head,
.mcol-crumbs,
.mcol-tabs,
.mcol-grid,
.mcol-games,
.mcol-sec,
.mcol-article {
  margin: 0 .75rem;
}

/* ---------- 列表页 banner ---------- */
.mcol-banner {
  margin-top: .75rem;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: var(--radius-lg, 14px);
  background: linear-gradient(135deg, #00bfa5 0%, #008c79 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 191, 165, .25);
}
.mcol-banner-top { display: flex; align-items: center; gap: .7rem; }
.mcol-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .2);
  flex: 0 0 38px;
}
.mcol-banner-icon svg { width: 20px; height: 20px; }
.mcol-banner-title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.mcol-banner-sub { margin-top: .15rem; font-size: .72rem; opacity: .85; }
.mcol-banner-desc { margin-top: .7rem; font-size: .78rem; line-height: 1.7; opacity: .92; }

/* ---------- 卡片网格 ---------- */
.mcol-grid { display: flex; flex-direction: column; gap: .7rem; margin-top: .9rem; }
.mcol-card {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  text-decoration: none;
  color: inherit;
}
.mcol-cover {
  width: 118px;
  min-width: 118px;
  height: 80px;
  background: #1f2a44;
  overflow: hidden;
}
.mcol-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcol-body { flex: 1; min-width: 0; padding: .6rem .75rem; display: flex; flex-direction: column; justify-content: center; }
.mcol-title { font-size: .9rem; font-weight: 700; color: #1f2937; line-height: 1.35; }
.mcol-desc {
  margin-top: .3rem;
  font-size: .72rem;
  line-height: 1.6;
  color: #9ca3af;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 专题首页 hero ---------- */
.mcol-hero { margin-top: .75rem; background: #fff; border-radius: var(--radius-lg, 14px); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.mcol-hero-cover { width: 100%; aspect-ratio: 16 / 9; background: #1f2a44; overflow: hidden; }
.mcol-hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcol-hero-body { padding: .85rem .95rem 1rem; }
.mcol-hero-title { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.4; color: #1f2937; }
.mcol-hero-desc { margin: .5rem 0 0; font-size: .8rem; line-height: 1.75; color: #6b7280; }

/* ---------- 页签 ---------- */
.mcol-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.mcol-tab {
  padding: .38rem .85rem;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: .76rem;
  line-height: 1;
  text-decoration: none;
}
.mcol-tab.active { background: #00bfa5; color: #fff; }

/* ---------- 游戏行 ---------- */
.mcol-games { display: flex; flex-direction: column; gap: .5rem; margin-top: .9rem; }
.mcol-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .7rem;
  background: #fff;
  border-radius: var(--radius, 12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  text-decoration: none;
  color: inherit;
}
.mcol-row-thumb { width: 46px; min-width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: #f3f4f6; }
.mcol-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcol-row-body { flex: 1; min-width: 0; }
.mcol-row-name { font-size: .85rem; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcol-arrow { font-style: normal; color: #d1d5db; font-size: 1.1rem; line-height: 1; }

/* ---------- 面包屑 / 页头 ---------- */
.mcol-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .7rem 0 .2rem; font-size: .74rem; color: #9ca3af; }
.mcol-crumbs a { color: #00a68f; text-decoration: none; }
.mcol-crumbs i { font-style: normal; color: #d1d5db; }
.mcol-head { padding: .4rem .75rem .1rem; }
.mcol-head h1 { margin: 0; font-size: 1.1rem; font-weight: 800; color: #1f2937; }
.mcol-head p { margin: .3rem 0 0; font-size: .76rem; color: #9ca3af; }

/* ---------- 内容页 ---------- */
.mcol-article { margin-top: .75rem; padding: .95rem; background: #fff; border-radius: var(--radius-lg, 14px); box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.mcol-article-title { margin: 0; font-size: 1.1rem; font-weight: 800; line-height: 1.45; color: #1f2937; }
.mcol-article-meta { margin: .5rem 0 .8rem; padding-bottom: .7rem; border-bottom: 1px solid #f3f4f6; font-size: .72rem; color: #9ca3af; }
.mcol-article-lead { margin: 0 0 .9rem; padding: .7rem .85rem; border-left: 3px solid #00bfa5; border-radius: 0 10px 10px 0; background: #e6faf6; font-size: .78rem; line-height: 1.8; color: #4b5563; }
.mcol-article-body { font-size: .85rem; line-height: 1.9; color: #374151; word-wrap: break-word; }
.mcol-article-body img { max-width: 100%; height: auto; border-radius: 10px; }
.mcol-article-body h2 { margin: 1.2rem 0 .6rem; font-size: 1rem; font-weight: 700; color: #1f2937; }
.mcol-article-body h3 { margin: 1rem 0 .5rem; font-size: .92rem; font-weight: 700; color: #1f2937; }
.mcol-article-body p { margin: 0 0 .85rem; }
.mcol-article-body a { color: #00a68f; text-decoration: none; }
.mcol-article-body table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.mcol-article-body th,
.mcol-article-body td { padding: .45rem .5rem; border: 1px solid #e5e7eb; }

.mcol-sec { margin-top: 1rem; }
.mcol-sec-title { margin: 0 0 .6rem; font-size: .92rem; font-weight: 700; color: #1f2937; }
.mcol-navlist { display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: .8rem; }
.mcol-navlist a { color: #00a68f; text-decoration: none; }

/* ---------- 分页 / 空态 ---------- */
.mcol-pager { padding: 1rem .75rem 1.4rem; text-align: center; font-size: .78rem; color: #9ca3af; }
.mcol-pager a,
.mcol-pager span { display: inline-block; margin: 0 .15rem; padding: .3rem .6rem; border-radius: 8px; background: #f3f4f6; color: #6b7280; text-decoration: none; }
.mcol-pager a:hover { background: #00bfa5; color: #fff; }
.mcol-games:empty::after {
  content: "该专题内容正在整理中，敬请期待";
  display: block;
  padding: 2.5rem 0;
  text-align: center;
  font-size: .8rem;
  color: #9ca3af;
}

/* 显式空态（模板用 {if !$data} 输出，比 :empty 可靠） */
.mcol-empty {
  padding: 2.2rem .9rem;
  border-radius: var(--radius-lg, 14px);
  background: #fff;
  text-align: center;
  font-size: .8rem;
  line-height: 1.9;
  color: #9ca3af;
}
.mcol-empty a { color: #00a68f; text-decoration: none; }