/* 落地页共享层（2026-08-11 新建）。
   🔴 边界：**只放本层新引入的东西**，不动 seo-page-*.css / seo-longtail.css 那 6 份。
   那 6 份是同一套样式的历史分叉副本 —— 实测 28 个共有选择器里只有 1 个内容一致，
   其余 27 个是真实的设计分歧（h2 固定 30px vs clamp+居中、.final 深底反白 vs 只留白…）。
   合并它们 = 替 27 个选择器重做设计决定，而这 38 页零自动化测试、承载全部 SEO 流量、
   改坏了静默（页面照开、版式垮）。那是独立的债，单独立项，别混进功能改动里。

   本文件解决的是**我自己新增的重复**：第二 CTA 与视频区原本是 38 + 11 处内联样式。 */

/* 第二 CTA「先打一场，不用相机」→ /tower。淡绿底把它和页内锚点按钮（纯白）区分开：
   橙=主操作 / 淡绿=另一个真入口 / 纯白=跳本页某一段。三种按钮方言共用这一个类。 */
/* 🔴 color 必须跟 background 一起定，别只定底色（2026-08-11 实锅，7 页中招）：
   深底的 `.final{color:#fff}` 会被按钮**继承**，于是白字压淡绿 = 对比度 1.1:1，等于隐形。
   同一类坑在 app 里也记过（白底面板配浅色 --ink）—— 换了底色就要把字色一起要回来。 */
.cta-play { background: #EAF7EE; color: #241B33; }
/* 方言 2（.final 里的 .btn）自身没有描边，单独补 —— 方言 1/3 的基类已自带边框，不能被覆盖。
   currentColor 现在解析成上面那个深色，在深底 .final 上正好是清晰的深描边。 */
.cta-play--outlined { border: 2px solid currentColor; }

/* 竖屏 9:16 素材（reel 视频 / 真机截图）内联展示。宽度锁死 270px —— 落地页正文是长文排版，
   竖屏铺满会把阅读节奏打断；视频靠 poster + preload="none" 不拖首屏。
   两个类共用同一套尺寸：视频与截图并排出现时对不齐会很显眼。 */
.watch__video, .shot {
  max-width: 270px; width: 100%; display: block; margin: 12px auto 0;
  border-radius: 14px; border: 3px solid var(--ink, #241B33);
}
/* 截图图注：说清「这是真机截图」，否则读者默认它是效果图。 */
.shot__cap { display: block; max-width: 270px; margin: 8px auto 0; text-align: center;
  font-size: 13px; opacity: .72; }

/* ===== A1 属性克制表（互动）=====
   🔴 类只定义在这里 —— 6 份 seo-page-*.css 是历史分叉副本，往里加会变成加 6 遍（见本文件头）。
   倍率色只用于「拔群/被抵抗」两端；中性档不上色，避免整表花成一片。 */
.tchips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 14px; }
.tchip { font: inherit; font-weight: 800; font-size: 15px; padding: 9px 14px; border-radius: 999px;
  border: 2px solid var(--ink, #241B33); background: #fff; color: var(--ink, #241B33); cursor: pointer; }
.tchip.on { background: var(--ink, #241B33); color: #fff; }
.type-badge { width: 1em; height: 1em; display: inline-block; vertical-align: -.15em; flex: none; }
.tout { display: flex; flex-direction: column; gap: 8px; max-width: 460px; margin: 0 auto; }
/* 🔴 尺寸按**最长组合**定，不是按默认那组：375px 下最挤的是「Electric → Water ×1.5 Super effective」
   （最长属性名 × 最长标签）。按默认的 Fire 调好会漏掉它 —— 实测就是这么漏的。 */
.trow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 12px; border-radius: 12px; border: 2px solid rgba(36,27,51,.14); background: #fff; font-size: 15px; }
/* 13px 是实测值：最长组合需 301px、可用 307px。flex-wrap 是兜底 —— 将来文案再长就整块换行，
   而不是把左边的属性名断成两截（那个最难看，也是第一版的样子）。 */
.tv { font-weight: 900; white-space: nowrap; font-size: 13px; margin-left: auto; }
.tv.v1_5 { color: #1F8F4B; }   /* 拔群 */
.tv.v0_75 { color: #C0392B; }  /* 被抵抗 */

/* 手绘 before/after 对照图（turn-a-drawing-into-a-monster / ja tegaki-monster）。
   🔴 类只定义在这里 —— 6 份 seo-page-*.css 是历史分叉副本，往里加会变成加 6 遍（见本文件头）。 */
.dcompare { margin: 18px 0 4px; }
.dcompare img { width: 100%; height: auto; display: block; border-radius: 14px; border: 3px solid var(--ink, #241B33); }
.dcompare figcaption { margin: 10px 2px 0; font-size: 13px; line-height: 1.5; opacity: .75; }