/* ============================================================
 * topcheat-parts.css — TopCheat 专属组件（partials/topcheat-*.php）的样式
 *
 * 只由 topcheat.net 的 site.php（extra_css）加载，顺序在 skin.css 与 topcheat.css 之后。
 * 颜色 / 字体 / 圆角令牌（--tc-*）定义在 skin.css，Chakra Petch / Manrope 的
 * @font-face 在 topcheat.css；本文件只消费它们。所有选择器都以 .tc- 开头，
 * 不会影响主题原有的标记。
 *
 * 半透明色一律写成 rgba(var(--tcp-*-rgb), a)：不依赖 color-mix()，
 * 国内内核较老的浏览器（360 / QQ / 搜狗的 Chromium 8x–10x）也能正确显示。
 * 这些 --tcp-* 通道值只在本文件使用，对应 skin.css 里同名 --tc-* 的十六进制值。
 * ============================================================ */

:root {
  --tcp-magenta-rgb: 251, 69, 128;
  --tcp-orange-rgb: 253, 120, 55;
  --tcp-purple-rgb: 163, 71, 239;
  --tcp-cyan-rgb: 53, 222, 223;
  --tcp-yellow-rgb: 250, 208, 62;
  --tcp-green-rgb: 71, 230, 132;
  --tcp-line-rgb: 55, 54, 71;
  --tcp-bg-rgb: 10, 9, 23;
  --tcp-bg-deep-rgb: 5, 4, 15;
  --tcp-surface-rgb: 21, 20, 34;
  --tcp-ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --tcp-grid:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  --tcp-glow-line: linear-gradient(90deg, transparent, var(--tc-magenta) 30%, var(--tc-cyan) 70%, transparent);
}

/* ------------------------------------------------------------
 * 共用小件：读屏文本、状态点、胶囊、眉标、渐变字、按钮、游戏图标
 * ------------------------------------------------------------ */
.tc-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.tc-dot {
  position: relative;
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}
.tc-is-undetected { color: var(--tc-green); }
.tc-is-updating { color: var(--tc-yellow); }
.tc-is-testing { color: var(--tc-cyan); }
.tc-dot-glow { box-shadow: 0 0 8px currentColor; }
/* 呼吸光环：只动 transform / opacity，交给合成层。 */
.tc-dot-pulse::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  animation: tc-ping 2s ease-out infinite;
}
@keyframes tc-ping {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(3.4); opacity: 0; }
}

.tc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--tc-line);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--tc-muted);
  font-family: var(--tc-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tc-chip-cyan {
  color: var(--tc-cyan);
  border-color: rgba(var(--tcp-cyan-rgb), 0.32);
  background-color: rgba(var(--tcp-cyan-rgb), 0.1);
}
.tc-chip-yellow {
  color: var(--tc-yellow);
  border-color: rgba(var(--tcp-yellow-rgb), 0.32);
  background-color: rgba(var(--tcp-yellow-rgb), 0.1);
}

.tc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--tc-cyan);
  font-family: var(--tc-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tc-eyebrow::before {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tc-cyan));
}
/* 服务状态眉标：主站 Hero 顶部那枚青色胶囊 + 绿色呼吸点。 */
.tc-eyebrow.tc-eyebrow-status {
  gap: 0.55rem;
  max-width: 100%;
  padding: 0.32rem 0.75rem 0.32rem 0.65rem;
  border: 1px solid rgba(var(--tcp-cyan-rgb), 0.32);
  border-radius: 999px;
  background-color: rgba(var(--tcp-cyan-rgb), 0.1);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: none;
}
.tc-eyebrow.tc-eyebrow-status::before { display: none; }
/* 中文字距拉宽会把字拆散（DESIGN.md）。 */
:lang(zh) .tc-eyebrow,
:lang(zh) .tc-chip {
  letter-spacing: 0.04em;
}

.tc-text-gradient {
  background-image: linear-gradient(100deg, var(--tc-magenta) 5%, var(--tc-orange) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* 按钮。a.tc-btn 的写法是为了压过主题的 `.dark a` / `.dark a:hover` 链接色。 */
a.tc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.9rem;
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--tc-radius-btn);
  font-family: var(--tc-font-display);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.25s var(--tcp-ease-quart),
    box-shadow 0.25s var(--tcp-ease-quart),
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}
a.tc-btn .bi { font-size: 1.05em; line-height: 1; }
a.tc-btn .bi::before { vertical-align: -0.12em; }
a.tc-btn.tc-btn-primary,
a.tc-btn.tc-btn-primary:hover,
a.tc-btn.tc-btn-primary:focus,
a.tc-btn.tc-btn-primary:active {
  background-color: var(--tc-magenta);
  color: var(--tc-bg-deep);
}
a.tc-btn.tc-btn-primary {
  box-shadow:
    0 10px 30px -10px rgba(var(--tcp-magenta-rgb), 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
a.tc-btn.tc-btn-ghost,
a.tc-btn.tc-btn-ghost:hover,
a.tc-btn.tc-btn-ghost:focus,
a.tc-btn.tc-btn-ghost:active {
  border-color: var(--tc-line);
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--tc-ink);
}
a.tc-btn.tc-btn-ghost {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
a.tc-btn.tc-btn-ghost .bi { color: var(--tc-cyan); }
a.tc-btn.tc-btn-ghost:focus-visible { border-color: var(--tc-cyan); color: var(--tc-cyan); }
.tc-btn-arrow { transition: transform 0.3s var(--tcp-ease-quart); }
.tc-btn-send { transition: transform 0.3s var(--tcp-ease-quart); }
/* 悬停效果只给真有指针的设备，触屏点一下不会卡在悬停态。 */
@media (hover: hover) {
  a.tc-btn.tc-btn-primary:hover {
    background-color: var(--tc-magenta-soft);
    transform: translateY(-2px);
    box-shadow:
      0 16px 44px -10px rgba(var(--tcp-magenta-rgb), 0.85),
      inset 0 1px 0 rgba(255, 255, 255, 0.34);
  }
  a.tc-btn.tc-btn-ghost:hover {
    border-color: var(--tc-cyan);
    color: var(--tc-cyan);
    transform: translateY(-2px);
  }
  a.tc-btn:hover .tc-btn-arrow { transform: translateX(3px); }
  a.tc-btn:hover .tc-btn-send { transform: translate(2px, -2px); }
}
a.tc-btn:active { transform: translateY(0); }
a.tc-btn.tc-btn-block { display: flex; width: 100%; }
@media (forced-colors: active) {
  a.tc-btn.tc-btn-primary { border-color: ButtonText; }
  .tc-text-gradient { -webkit-text-fill-color: currentColor; color: CanvasText; background: none; }
}

/* 游戏方形图标：对应主站 GameTile（图标 + 按 accent 着色的描边）。 */
.tc-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid;
  border-radius: 0.55rem;
  font-family: var(--tc-font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}
.tc-tile img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.tc-accent-magenta {
  border-color: rgba(var(--tcp-magenta-rgb), 0.35);
  background-color: rgba(var(--tcp-magenta-rgb), 0.1);
  color: var(--tc-magenta-soft);
}
.tc-accent-cyan {
  border-color: rgba(var(--tcp-cyan-rgb), 0.3);
  background-color: rgba(var(--tcp-cyan-rgb), 0.1);
  color: var(--tc-cyan);
}
.tc-accent-purple {
  border-color: rgba(var(--tcp-purple-rgb), 0.45);
  background-color: rgba(var(--tcp-purple-rgb), 0.15);
  color: var(--tc-purple-soft);
}
.tc-accent-orange {
  border-color: rgba(var(--tcp-orange-rgb), 0.35);
  background-color: rgba(var(--tcp-orange-rgb), 0.1);
  color: var(--tc-orange);
}
.tc-tile-mono { background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent); }

/* 游戏芯片：图标 + 名称，链到官网对应游戏页。 */
.tc-game-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-game-chips > li {
  display: flex;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: inherit;
}
a.tc-game-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
  min-height: 2.75rem;
  box-sizing: border-box;
  padding: 0.35rem 0.9rem 0.35rem 0.4rem;
  border: 1px solid var(--tc-line);
  border-bottom: 1px solid var(--tc-line);
  border-radius: 0.8rem;
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--tc-ink);
  font-family: var(--tc-font-display);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition:
    border-color 0.2s,
    background-color 0.2s,
    color 0.2s,
    transform 0.35s var(--tc-ease-out-expo);
}
a.tc-game-chip:hover,
a.tc-game-chip:focus { color: var(--tc-ink); }
a.tc-game-chip .tc-tile {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  font-size: 0.5rem;
}
.tc-game-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.tc-game-chip .tc-dot { margin-left: auto; }
a.tc-game-chip.tc-game-chip-match {
  border-color: rgba(var(--tcp-magenta-rgb), 0.45);
  background-color: rgba(var(--tcp-magenta-rgb), 0.08);
}
a.tc-game-chip:focus-visible {
  border-color: rgba(var(--tcp-cyan-rgb), 0.55);
  background-color: rgba(var(--tcp-cyan-rgb), 0.08);
}
@media (hover: hover) {
  a.tc-game-chip:hover {
    border-color: rgba(var(--tcp-cyan-rgb), 0.55);
    background-color: rgba(var(--tcp-cyan-rgb), 0.08);
    transform: translateY(-2px);
  }
}

/* 所有组件内的可聚焦元素：青色焦点环（主题 style.css 把 :focus 的 outline 清掉了）。 */
.tc-topbar a:focus-visible,
.tc-hero a:focus-visible,
.tc-footer a:focus-visible,
.tc-footer button:focus-visible,
.tc-side-cta a:focus-visible,
.tc-post-cta a:focus-visible {
  outline: 2px solid var(--tc-cyan);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
 * 1. 顶部状态条（topcheat-topbar.php）—— 主站 Header.tsx 的 status strip
 * ------------------------------------------------------------ */
.tc-topbar {
  position: relative;
  border-bottom: 1px solid rgba(var(--tcp-line-rgb), 0.4);
  background-color: rgba(var(--tcp-bg-rgb), 0.7);
  color: var(--tc-muted);
  font-family: var(--tc-font-display);
  font-size: 0.75rem;
  line-height: 1.4;
}
.tc-topbar::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--tcp-magenta-rgb), 0.09), transparent 50%, rgba(var(--tcp-cyan-rgb), 0.09));
}
/* 手机上至少 44px 高，Telegram 链接够得着；文字可以换行，不截断（WCAG 1.4.12）。 */
.tc-topbar .tc-topbar-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.tc-topbar-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.tc-topbar .tc-topbar-headline {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: rgba(243, 244, 253, 0.9);
}
.tc-topbar-counts {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-topbar-count {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--tc-dim);
  white-space: nowrap;
}
.tc-topbar-count .tc-num { font-variant-numeric: tabular-nums; }
.tc-topbar-side {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
}
.tc-topbar-note,
.tc-topbar-sep { display: none; }
.tc-topbar-note { color: var(--tc-dim); white-space: nowrap; }
.tc-topbar-sep {
  width: 1px;
  height: 0.75rem;
  background-color: var(--tc-line);
}
.tc-topbar a.tc-topbar-tg,
.tc-topbar a.tc-topbar-tg:focus {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--tc-cyan);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
/* 可点区域向外扩到 44px 以上，视觉尺寸不变。 */
.tc-topbar a.tc-topbar-tg::after {
  content: "";
  position: absolute;
  top: -0.875rem;
  right: -0.5rem;
  bottom: -0.875rem;
  left: -0.5rem;
}
.tc-topbar a.tc-topbar-tg .bi { font-size: 0.8rem; line-height: 1; }
.tc-topbar a.tc-topbar-tg .tc-topbar-tg-arrow {
  font-size: 0.7rem;
  transition: transform 0.3s var(--tc-ease-out-expo);
}
.tc-topbar a.tc-topbar-tg:hover,
.tc-topbar a.tc-topbar-tg:focus-visible { color: var(--tc-ink); }
@media (hover: hover) {
  .tc-topbar a.tc-topbar-tg:hover .tc-topbar-tg-arrow { transform: translate(2px, -2px); }
}
@media (min-width: 576px) {
  .tc-topbar .tc-topbar-inner {
    min-height: 2.25rem;
    padding-top: 0;
    padding-bottom: 0;
  }
  .tc-topbar-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tc-topbar-note { display: inline; }
  .tc-topbar-sep { display: block; }
}
@media (min-width: 768px) {
  .tc-topbar-counts { display: flex; }
}

/* ------------------------------------------------------------
 * 2. 博客首页 Hero（topcheat-hero.php）—— 主站 Hero 的网格 + 光晕，压缩成一张卡
 * ------------------------------------------------------------ */
/* 上边距与 topcheat.css 里 .index_banner / .index_area 的 1.75rem 节奏一致（页头本身没有下边距）。 */
.tc-hero {
  position: relative;
  margin: 1.75rem 0 0;
  color: var(--tc-ink);
  font-family: var(--tc-font-sans);
}
.tc-hero-card {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
  background: linear-gradient(180deg, var(--tc-bg) 0%, var(--tc-bg-deep) 100%);
}
.tc-hero-fx {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.tc-hero-grid {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: var(--tcp-grid);
  background-size: 56px 56px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 85% 100% at 65% 30%, #000 15%, transparent 78%);
  mask-image: radial-gradient(ellipse 85% 100% at 65% 30%, #000 15%, transparent 78%);
}
.tc-hero-glow {
  position: absolute;
  border-radius: 50%;
}
.tc-hero-glow-magenta {
  top: -26rem;
  right: -16rem;
  width: 46rem;
  height: 46rem;
  background: radial-gradient(closest-side, rgba(var(--tcp-magenta-rgb), 0.3), transparent);
  animation: tc-glow 9s ease-in-out infinite;
}
.tc-hero-glow-cyan {
  top: 20%;
  left: -20rem;
  width: 36rem;
  height: 36rem;
  background: radial-gradient(closest-side, rgba(var(--tcp-cyan-rgb), 0.14), transparent);
}
.tc-hero-glow-purple {
  bottom: -20rem;
  left: 50%;
  width: 64rem;
  height: 28rem;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--tcp-purple-rgb), 0.28), transparent);
}
.tc-hero-line {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--tcp-glow-line);
  opacity: 0.7;
}
@keyframes tc-glow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.tc-hero-body {
  position: relative;
  display: grid;
  gap: 1.5rem;
}
.tc-hero-copy { min-width: 0; }
.tc-hero .tc-hero-title {
  margin: 0.85rem 0 0;
  padding: 0;
  border: 0;
  color: var(--tc-ink);
  font-family: var(--tc-font-display);
  font-size: clamp(1.6rem, 3.3vw, 2.45rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
:lang(zh) .tc-hero .tc-hero-title {
  letter-spacing: 0;
  line-height: 1.22;
}
.tc-hero .tc-hero-lead {
  max-width: 40rem;
  margin: 0.85rem 0 0;
  padding: 0;
  color: var(--tc-muted);
  font-size: clamp(0.94rem, 1.15vw, 1.03rem);
  line-height: 1.75;
  text-wrap: pretty;
}
.tc-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 1.4rem;
}
.tc-hero-games {
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(var(--tcp-line-rgb), 0.7);
  border-radius: 0.9rem;
  background-color: rgba(255, 255, 255, 0.025);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.tc-hero .tc-hero-games-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.8rem;
  padding: 0;
  color: var(--tc-ink);
  font-family: var(--tc-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}
@media (min-width: 576px) {
  .tc-hero-card { padding: 2rem 1.75rem; }
  .tc-hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .tc-hero-games .tc-game-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
  .tc-hero-games a.tc-game-chip { width: 100%; }
}
/* 桌面：左文案、右热门游戏；芯片收紧到 40px，整块控制在 ~300px 高。
   992–1199px 右栏太窄，两列网格会截断英文长名，改回按内容宽度换行；1200px 起再排成整齐的两列。 */
@media (min-width: 992px) {
  .tc-hero-card { padding: 2rem 2.5rem; }
  .tc-hero-body.tc-hero-has-games {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 2.5rem;
  }
  .tc-hero-games { padding: 0.9rem; }
  .tc-hero-games .tc-game-chips { display: flex; }
  .tc-hero-games a.tc-game-chip {
    width: auto;
    min-height: 2.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}
@media (min-width: 1200px) {
  .tc-hero-games .tc-game-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tc-hero-games a.tc-game-chip { width: 100%; }
}

/* ------------------------------------------------------------
 * 3. 页脚（topcheat-footer.php）—— 主站 Footer.tsx
 *    页脚本身不建层叠上下文：里面的 .scrollToTopBtn 是 position:fixed 的，
 *    要跟页面其余部分比 z-index。
 * ------------------------------------------------------------ */
.tc-footer {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, var(--tc-bg), var(--tc-bg-deep));
  color: var(--tc-muted);
  font-family: var(--tc-font-sans);
  font-size: 1rem;
  line-height: 1.6;
}
.tc-footer > .container,
.tc-footer > .tc-glow-line,
.tc-footer > .tc-footer-bigmark {
  position: relative;
  z-index: 1;
}
.tc-glow-line {
  height: 1px;
  background: var(--tcp-glow-line);
}
.tc-footer-fx {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.tc-footer-grid {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 30rem;
  opacity: 0.7;
  background-image: var(--tcp-grid);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 12%, transparent 76%);
  mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 12%, transparent 76%);
}
.tc-footer-glow {
  position: absolute;
  top: -18rem;
  left: 42%;
  width: 70rem;
  height: 32rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 38% 50%, rgba(var(--tcp-purple-rgb), 0.24), transparent),
    radial-gradient(closest-side at 20% 50%, rgba(var(--tcp-magenta-rgb), 0.16), transparent);
}

.tc-footer-cols {
  display: grid;
  gap: 2.75rem 2rem;
  padding: 3.5rem 0 3rem;
}
.tc-footer-brand,
.tc-footer-col { min-width: 0; }

/* 品牌列 */
.tc-footer a.tc-footer-logo,
.tc-footer a.tc-footer-logo:hover,
.tc-footer a.tc-footer-logo:focus {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.5rem;
  color: var(--tc-ink);
  text-decoration: none;
}
.tc-footer a.tc-footer-logo::after {
  content: "";
  position: absolute;
  top: -0.375rem;
  right: 0;
  bottom: -0.375rem;
  left: 0;
}
.tc-footer-mark {
  flex: none;
  width: 2rem;
  height: 2rem;
  transition: transform 0.7s var(--tc-ease-out-expo);
}
@media (hover: hover) {
  .tc-footer a.tc-footer-logo:hover .tc-footer-mark { transform: rotate(90deg); }
}
.tc-footer-wordmark {
  font-family: var(--tc-font-display);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tc-footer-wm-top { color: var(--tc-ink); }
.tc-footer-wm-cheat { color: var(--tc-magenta); }
.tc-footer .tc-footer-tagline {
  max-width: 46ch;
  margin: 1.25rem 0 0;
  padding: 0;
  color: var(--tc-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}
.tc-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.tc-footer-social > li { margin: 0; padding: 0; }
.tc-footer a.tc-social,
.tc-footer a.tc-social:hover,
.tc-footer a.tc-social:focus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--tc-line);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--tc-muted);
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
  transition:
    transform 0.3s var(--tcp-ease-quart),
    color 0.3s,
    background-color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}
.tc-footer a.tc-social:focus-visible {
  border-color: rgba(var(--tcp-cyan-rgb), 0.5);
  color: var(--tc-cyan);
}
@media (hover: hover) {
  .tc-footer a.tc-social:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--tcp-cyan-rgb), 0.5);
    background-color: rgba(var(--tcp-cyan-rgb), 0.1);
    color: var(--tc-cyan);
    box-shadow: 0 12px 30px -14px var(--tc-cyan);
  }
}
.tc-footer a.tc-social:active { transform: translateY(0); }
/* 内联的线性 Discord 字形（官网 Footer.tsx 的 DiscordGlyph），尺寸跟随所在位置的字号 */
.tc-footer .tc-glyph {
  display: inline-block;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}

/* 链接列 */
.tc-footer .tc-footer-heading {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  color: var(--tc-ink);
  font-family: var(--tc-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
:lang(zh) .tc-footer .tc-footer-heading {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.tc-footer .tc-footer-heading::before {
  content: "";
  flex: none;
  width: 3px;
  height: 0.75rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--tc-magenta), var(--tc-orange));
}
.tc-footer-list {
  display: grid;
  column-gap: 1.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.tc-footer-list > li {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.tc-footer-list-2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tc-footer a.tc-footer-link,
.tc-footer a.tc-footer-link:hover,
.tc-footer a.tc-footer-link:focus {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.375rem 0;
  color: var(--tc-muted);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.375;
  text-decoration: none;
  transition: color 0.2s;
}
.tc-footer a.tc-footer-link:focus-visible { color: var(--tc-ink); }
/* 从左往右擦出的洋红→青下划线（主站 .link-underline），换行时也跟着每一行。 */
.tc-link-u {
  min-width: 0;
  padding-bottom: 2px;
  background-image: linear-gradient(90deg, var(--tc-magenta), var(--tc-cyan));
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0% 1px;
  transition: background-size 0.3s var(--tc-ease-out-expo);
}
.tc-footer a.tc-footer-link:focus-visible .tc-link-u {
  background-position: 0% 100%;
  background-size: 100% 1px;
}
.tc-footer-lead {
  flex: none;
  color: var(--tc-dim);
  font-size: 1rem;
  line-height: 1;
  transition: color 0.2s;
}
.tc-footer-ext {
  flex: none;
  color: var(--tc-cyan);
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0;
  transform: translate(-4px, 2px);
  transition:
    opacity 0.3s var(--tc-ease-out-expo),
    transform 0.3s var(--tc-ease-out-expo);
}
.tc-footer a.tc-footer-link:focus-visible .tc-footer-lead { color: var(--tc-cyan); }
.tc-footer a.tc-footer-link:focus-visible .tc-footer-ext { opacity: 1; transform: none; }
.tc-footer a.tc-footer-link.tc-footer-link-accent,
.tc-footer a.tc-footer-link.tc-footer-link-accent:focus {
  color: var(--tc-cyan);
  font-family: var(--tc-font-display);
  font-weight: 600;
}
@media (hover: hover) {
  .tc-footer a.tc-footer-link:hover { color: var(--tc-ink); }
  .tc-footer a.tc-footer-link:hover .tc-link-u {
    background-position: 0% 100%;
    background-size: 100% 1px;
  }
  .tc-footer a.tc-footer-link:hover .tc-footer-lead { color: var(--tc-cyan); }
  .tc-footer a.tc-footer-link:hover .tc-footer-ext { opacity: 1; transform: none; }
  .tc-footer a.tc-footer-link.tc-footer-link-accent:hover { color: var(--tc-ink); }
}
.tc-footer-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.875rem;
  margin: 0.75rem 0 0;
  padding: 0.875rem 0 0;
  border-top: 1px solid rgba(var(--tcp-line-rgb), 0.6);
  color: var(--tc-dim);
  font-size: 0.72rem;
  list-style: none;
}
.tc-footer-legend > li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
}
.tc-footer .tc-footer-hours {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 1rem 0 0;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--tc-line);
  border-radius: 0.75rem;
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--tc-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}
.tc-footer-hours .tc-dot { margin-top: 0.4em; }

/* 列布局：手机单列 → 576 两列（品牌通栏，落单的“支持”列通栏且两列排）→ 768 三列 → 992 品牌 + 三列 */
@media (min-width: 576px) {
  .tc-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-footer-brand { grid-column: 1 / -1; }
  .tc-footer-list-2up { grid-template-columns: minmax(0, 1fr); }
  .tc-footer-col-support { grid-column: 1 / -1; }
  .tc-footer-col-support .tc-footer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .tc-footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tc-footer-col-support { grid-column: auto; }
  .tc-footer-col-support .tc-footer-list { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 992px) {
  .tc-footer-cols {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 2.75rem 3rem;
    padding: 5rem 0 3.5rem;
  }
  .tc-footer-brand { grid-column: auto; }
  .tc-footer .tc-footer-tagline { max-width: 34ch; }
  .tc-footer-list { margin-top: 1rem; }
  .tc-footer a.tc-footer-link,
  .tc-footer a.tc-footer-link:hover,
  .tc-footer a.tc-footer-link:focus { min-height: 2.25rem; }
}

/* 支付方式 */
.tc-footer-pay {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
  background: linear-gradient(180deg, rgba(var(--tcp-surface-rgb), 0.92), rgba(var(--tcp-bg-rgb), 0.92));
}
.tc-footer-pay-main {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tc-footer .tc-footer-pay-title {
  flex: none;
  margin: 0;
  padding: 0;
  color: var(--tc-ink);
  font-family: var(--tc-font-display);
  font-size: 0.86rem;
  font-weight: 600;
}
.tc-footer-pay-list,
.tc-footer-pay-facts {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-footer-pay-list { gap: 0.5rem; }
.tc-footer-pay-facts {
  align-items: center;
  gap: 0.5rem 1.25rem;
  color: var(--tc-muted);
  font-size: 0.85rem;
}
.tc-footer-pay-facts > li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.tc-footer-pay-facts .bi { font-size: 1rem; line-height: 1; }
.tc-c-green { color: var(--tc-green); }
.tc-c-yellow { color: var(--tc-yellow); }
@media (min-width: 576px) {
  .tc-footer-pay-main {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
}
@media (min-width: 992px) {
  .tc-footer-pay {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
  }
}

/* 18+ 免责声明 */
.tc-footer-disclaimer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 2rem;
}
.tc-footer-disclaimer .tc-chip { flex: none; }
.tc-footer .tc-footer-disclaimer p {
  margin: 0;
  padding: 0;
  color: var(--tc-dim);
  font-size: 0.78rem;
  line-height: 1.65;
}
.tc-footer-disclaimer strong {
  margin-right: 0.375rem;
  color: var(--tc-muted);
  font-weight: 600;
}
@media (min-width: 576px) {
  .tc-footer-disclaimer { flex-direction: row; gap: 1rem; }
}

/* 底栏：版权 · 域名 / 备案号 · 主题署名 / 语言切换 */
.tc-footer-bottom {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(var(--tcp-line-rgb), 0.7);
}
.tc-footer-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.tc-footer .tc-footer-copy,
.tc-footer .tc-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: var(--tc-dim);
  text-align: center;
}
.tc-footer .tc-footer-copy { gap: 0.25rem 0.75rem; font-size: 0.82rem; }
.tc-footer .tc-footer-legal { gap: 0.25rem 1rem; font-size: 0.75rem; }
.tc-footer-sep {
  width: 1px;
  height: 0.75rem;
  background-color: var(--tc-line);
}
.tc-footer a.tc-footer-domain,
.tc-footer a.tc-footer-domain:focus {
  color: var(--tc-muted);
  font-family: var(--tc-font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.2s;
}
.tc-footer .tc-footer-legal a,
.tc-footer .tc-footer-legal a:focus {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--tc-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.tc-footer-credit { white-space: nowrap; }
/* 后台「Footer代码」（通常是 <li><a>…</a></li> 形式的底部链接或统计脚本），与备案号同一行的样式 */
.tc-footer ul.tc-footer-code { list-style: none; }
.tc-footer ul.tc-footer-code:empty { display: none; }
.tc-footer ul.tc-footer-code > li { margin: 0; padding: 0; }
.tc-footer a.tc-footer-domain:hover,
.tc-footer .tc-footer-legal a:hover,
.tc-footer a.tc-footer-domain:focus-visible,
.tc-footer .tc-footer-legal a:focus-visible { color: var(--tc-cyan); }
@media (min-width: 576px) {
  .tc-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
  .tc-footer-meta { align-items: flex-start; }
  .tc-footer .tc-footer-copy,
  .tc-footer .tc-footer-legal {
    justify-content: flex-start;
    text-align: left;
  }
}
/* 宽屏：版权、备案 / 署名、后台 Footer代码 排成一行（像主站底栏），窄屏仍按列居中。 */
@media (min-width: 992px) {
  .tc-footer-meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.25rem;
  }
  .tc-footer .tc-footer-legal + .tc-footer-legal::before,
  .tc-footer .tc-footer-copy + .tc-footer-legal::before {
    content: "";
    width: 1px;
    height: 0.9em;
    margin-right: 0.25rem;
    background: rgba(var(--tcp-line-rgb), 0.9);
  }
}

/* 中 / EN 切换胶囊（主站 LangSwitch 的 footer 版） */
.tc-lang {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--tc-line);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.03);
  font-family: var(--tc-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
}
.tc-lang .tc-lang-item {
  position: relative;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  color: var(--tc-dim);
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}
.tc-lang .tc-lang-item.is-active {
  background-color: rgba(var(--tcp-cyan-rgb), 0.15);
  color: var(--tc-cyan);
}
.tc-lang a.tc-lang-item::after {
  content: "";
  position: absolute;
  top: -0.75rem;
  right: 0;
  bottom: -0.75rem;
  left: 0;
}
.tc-lang a.tc-lang-item:focus { color: var(--tc-dim); }
.tc-lang a.tc-lang-item:hover,
.tc-lang a.tc-lang-item:focus-visible { color: var(--tc-ink); }

/* 页脚底部裁切的大字标 */
.tc-footer-bigmark {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.tc-footer-bigmark span {
  display: block;
  height: 0.6em;
  overflow: hidden;
  color: transparent;
  background-image: linear-gradient(90deg, rgba(var(--tcp-magenta-rgb), 0.25), rgba(var(--tcp-purple-rgb), 0.2), rgba(var(--tcp-cyan-rgb), 0.2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--tc-line);
  font-family: var(--tc-font-display);
  font-size: clamp(3.25rem, 15.5vw, 14.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(180deg, #000 15%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 15%, transparent 96%);
}
@media (forced-colors: active) {
  .tc-footer-bigmark { display: none; }
}

/* 返回顶部按钮（.scrollToTopBtn）沿用主题的类名与 main.js 行为，外观由 topcheat.css 统一负责，这里不重复。 */

/* ------------------------------------------------------------
 * 4. 侧栏转化卡片（topcheat-sidebar-cta.php）—— “重点卡片”：洋红描边 + 洋红光晕
 * ------------------------------------------------------------ */
.tc-side-cta {
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin: 0 0 20px;
  padding: 1.35rem 1.25rem 1.2rem;
  border: 1px solid rgba(var(--tcp-magenta-rgb), 0.42);
  border-radius: var(--tc-radius);
  background: linear-gradient(180deg, rgba(var(--tcp-surface-rgb), 0.95), rgba(var(--tcp-bg-rgb), 0.95));
  box-shadow: 0 24px 60px -34px rgba(var(--tcp-magenta-rgb), 0.6);
  color: var(--tc-ink);
  font-family: var(--tc-font-sans);
}
.tc-side-cta::before {
  content: "";
  position: absolute;
  top: 0;
  right: 1.25rem;
  left: 1.25rem;
  height: 1px;
  background: var(--tcp-glow-line);
  opacity: 0.8;
}
.tc-side-cta-fx {
  position: absolute;
  top: -8rem;
  right: -7rem;
  z-index: -1;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--tcp-magenta-rgb), 0.24), transparent);
  pointer-events: none;
}
.tc-side-cta .tc-side-cta-title {
  margin: 0.9rem 0 0;
  padding: 0;
  color: var(--tc-ink);
  font-family: var(--tc-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
/* 中文标题只在标点处换行（992–1199 的窄侧栏里不会断成“辅 / 助”），整句没有断点时 anywhere 兜底 */
:lang(zh) .tc-side-cta .tc-side-cta-title {
  letter-spacing: 0;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.tc-side-cta .tc-side-cta-text {
  margin: 0.5rem 0 0;
  padding: 0;
  color: var(--tc-muted);
  font-size: 0.86rem;
  line-height: 1.65;
}
/* 5 格最多 48px 一格、靠左排；侧栏窄（992–1199px 只有 ~190px）时一起等比缩小。 */
.tc-side-cta-games {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 3rem));
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.tc-side-cta-games > li { margin: 0; padding: 0; min-width: 0; }
.tc-side-cta a.tc-side-cta-game {
  display: block;
  border-radius: 0.7rem;
  text-decoration: none;
  transition: transform 0.35s var(--tc-ease-out-expo), box-shadow 0.35s var(--tc-ease-out-expo);
}
.tc-side-cta a.tc-side-cta-game .tc-tile {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0.7rem;
}
@supports not (aspect-ratio: 1 / 1) {
  .tc-side-cta a.tc-side-cta-game .tc-tile { height: 2.5rem; }
}
.tc-side-cta .tc-tile-more {
  border-color: rgba(var(--tcp-cyan-rgb), 0.3);
  border-style: dashed;
  background-color: rgba(var(--tcp-cyan-rgb), 0.06);
  color: var(--tc-cyan);
  font-size: 0.78rem;
  letter-spacing: 0;
}
@media (hover: hover) {
  .tc-side-cta a.tc-side-cta-game:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 22px -10px rgba(var(--tcp-cyan-rgb), 0.55);
  }
}
.tc-side-cta a.tc-btn.tc-btn-block { margin-top: 1.1rem; }
.tc-side-cta-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--tc-dim);
  font-size: 0.76rem;
  line-height: 1.4;
}
.tc-side-cta-facts > li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}
.tc-side-cta-facts > li:first-child .bi { color: var(--tc-yellow); }
.tc-side-cta-facts > li + li .bi { color: var(--tc-cyan); }

/* ------------------------------------------------------------
 * 5. 文章末尾转化卡片（topcheat-post-cta.php）
 *    若落在 .post_container / .wznrys 里，下面的属性都显式写出，压过正文排版规则。
 * ------------------------------------------------------------ */
.tc-post-cta {
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin: 2rem 0 0.5rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid rgba(var(--tcp-magenta-rgb), 0.42);
  border-radius: var(--tc-radius);
  background: linear-gradient(180deg, var(--tc-surface), var(--tc-bg));
  box-shadow: 0 30px 70px -44px rgba(var(--tcp-magenta-rgb), 0.7);
  color: var(--tc-ink);
  font-family: var(--tc-font-sans);
  line-height: 1.6;
}
.tc-post-cta::before {
  content: "";
  position: absolute;
  top: 0;
  right: 2rem;
  left: 2rem;
  height: 1px;
  background: var(--tcp-glow-line);
  opacity: 0.85;
}
.tc-post-cta-fx {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.tc-post-cta-grid {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: var(--tcp-grid);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 100% 0%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 90% at 100% 0%, #000 10%, transparent 75%);
}
.tc-post-cta-glow {
  position: absolute;
  top: -14rem;
  right: -10rem;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(var(--tcp-magenta-rgb), 0.22), transparent);
}
.tc-post-cta-glow::after {
  content: "";
  position: absolute;
  bottom: -30rem;
  left: -34rem;
  width: 36rem;
  height: 30rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--tcp-purple-rgb), 0.18), transparent);
}
.tc-post-cta-body { position: relative; }
.tc-post-cta .tc-post-cta-title {
  margin: 0.9rem 0 0;
  padding: 0;
  border: 0;
  color: var(--tc-ink);
  font-family: var(--tc-font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.tc-post-cta .tc-post-cta-title::before,
.tc-post-cta .tc-post-cta-title::after { display: none; }
:lang(zh) .tc-post-cta .tc-post-cta-title { letter-spacing: 0; line-height: 1.3; }
.tc-post-cta .tc-post-cta-text {
  max-width: 44rem;
  margin: 0.6rem 0 0;
  padding: 0;
  color: var(--tc-muted);
  font-size: 0.95rem;
  line-height: 1.75;
}
.tc-post-cta ul.tc-post-cta-games {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.tc-post-cta .tc-post-cta-games > li { margin: 0; line-height: inherit; }
.tc-post-cta a.tc-game-chip { gap: 0.55rem; padding-right: 0.8rem; }
.tc-post-cta a.tc-game-chip .tc-dot { margin-left: 0.15rem; }
.tc-post-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
@media (min-width: 576px) {
  .tc-post-cta { padding: 1.9rem 2rem; }
  .tc-post-cta-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* ------------------------------------------------------------
 * 手机：Hero 与文章卡片里的游戏芯片改成一行横向滑动（右缘渐隐提示还有更多），
 * 不会被 6–8 行芯片撑高。4px 内边距 + 等量负外边距给焦点环留位置，不被滚动容器裁掉。
 * 放在各组件规则之后，才能覆盖它们的 margin / padding。
 * ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .tc-hero-games .tc-game-chips,
  .tc-post-cta ul.tc-post-cta-games {
    flex-wrap: nowrap;
    margin-right: -4px;
    margin-left: -4px;
    padding: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-left: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .tc-hero-games .tc-game-chips::-webkit-scrollbar,
  .tc-post-cta ul.tc-post-cta-games::-webkit-scrollbar { display: none; }
  .tc-hero-games .tc-game-chips > li,
  .tc-post-cta .tc-post-cta-games > li {
    flex: none;
    scroll-snap-align: start;
  }
  .tc-hero-games .tc-game-chips > li:last-child,
  .tc-post-cta .tc-post-cta-games > li:last-child { padding-right: 2.5rem; }
}

/* ------------------------------------------------------------
 * 减少动态效果：停掉呼吸 / 光晕动画与悬停位移，颜色变化保留。
 * ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .tc-dot-pulse::after,
  .tc-hero-glow { animation: none; }
  .tc-topbar *,
  .tc-hero *,
  .tc-footer *,
  .tc-side-cta *,
  .tc-post-cta * {
    transition-duration: 0.01ms !important;
  }
  a.tc-btn:hover,
  a.tc-game-chip:hover,
  .tc-footer a.tc-social:hover,
  .tc-side-cta a.tc-side-cta-game:hover,
  .tc-footer a.tc-footer-logo:hover .tc-footer-mark,
  a.tc-btn:hover .tc-btn-arrow,
  a.tc-btn:hover .tc-btn-send,
  .tc-topbar a.tc-topbar-tg:hover .tc-topbar-tg-arrow {
    transform: none !important;
  }
}