@charset "UTF-8";
/* ============================================================================
 * CardSpicy · One Piece 索引页（page #3192 / slug one-piece-cards）自有样式
 * ----------------------------------------------------------------------------
 * 设计铁律：**能不加就不加**。
 *   排版、网格、贴片、浮层形状、翻向、折叠区全部来自宝可梦 Tips 母版
 *   （cs-tips151.php 入队的 tips151.css / tips-types.css / tips151-flip.js）。
 *   本页通过 `cs_tips151_page_ids` 过滤器入队，所以那套规则自动生效、与宝可梦页
 *   **逐像素同款**（列数 3/4/6/8、首末列贴边、首行浮层朝下、浮层翻向）。
 *
 * 这里只补三件母版**没有**的东西：
 *   ① 六个海贼王颜色点（母版只有 -t10/-t5/-cr/-ck 四个品牌色变体，不够用）
 *   ② 浮层放宽 + 可滚动（母版 292px 装不下「印刷效果」全文）
 *   ③ 效果段落与代码行的分隔细线
 *
 * 🔴 全部选择器都挂在 `body.cs-op-page` 下（body 类由 cs-onepiece.php 加）。
 *   ⇒ 对 #86 / #1549 零影响，不依赖入队顺序也能覆盖母版。
 * ========================================================================== */

/* ---------------------------------------------------------------- ① 颜色点 */
/* 贴片里的小圆点：.cs151-i 母版已给了尺寸/圆形/默认灰底，这里只改底色。
   双色领袖由 PHP 输出**两个真实色点**（红+绿），不合成渐变 —— 避免凭空造出第三色。 */
body.cs-op-page .cs151-i.csop-red    { background: #c8352c; }
body.cs-op-page .cs151-i.csop-green  { background: #2f7d4f; }
body.cs-op-page .cs151-i.csop-blue   { background: #2b6cb0; }
body.cs-op-page .cs151-i.csop-purple { background: #734fa0; }
body.cs-op-page .cs151-i.csop-black  { background: #2a2a2a; }
body.cs-op-page .cs151-i.csop-yellow { background: #d9a521; }
/* 兜底：没有颜色信息的贴片（系列总表）用母版的柔灰 */
body.cs-op-page .cs151-i.csop-other  { background: var(--c-soft, #8a8880); }

/* 双色贴片里两个点挨紧一点，别把名字挤走 */
body.cs-op-page .cs151-c .cs151-i + .cs151-i { margin-left: -0.14rem; }

/* ---------------------------------------------------------------- ② 浮层 */
/* 母版 .cs151-p 是 width: min(292px, calc(100vw - 34px))。
   海贼王卡牌的「印刷效果」原文可达 400+ 字符，292px 下要 10 行以上。
   放宽到 340px 并允许纵向滚动 —— 🔴 不做行数截断，效果原文一个字都不省略。 */
@media (min-width: 560px) {
  body.cs-op-page .cs151-c .cs151-p { width: min(340px, calc(100vw - 34px)); }
}
body.cs-op-page .cs151-c .cs151-p {
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------------- ③ 效果段 */
/* 浮层里的「印刷效果」原文：与上面的数据集行之间拉一条细线，读起来分段清楚。 */
body.cs-op-page .csop-eff {
  display: block;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--c-rule, #edeae2);
  font-variant-numeric: normal;
  word-break: break-word;
}

/* 浮层里的三列档案（Colour/Life/Power）在窄面板里字号略收一点，
   避免 "Red/Green" 这种长值换行把三列撑歪。母版 .cs151-p3 i 是 0.83rem。 */
body.cs-op-page .cs151-p3 i { font-size: 0.78rem; }
body.cs-op-page .cs151-p3 b { letter-spacing: 0.06em; }

/* ------------------------------------------------- ④ 印刷史 / 变体（R146 新增） */
/* 每条卡片的「跨产品复刻」与「异画变体数」。母版没有这一类行，故自建。
   视觉上紧跟 .cs151-pd（系列行），字号更小、颜色更淡，读作脚注而非正文。 */
body.cs-op-page .csop-rep {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.695rem;
  line-height: 1.4;
  color: var(--c-soft, #8a8880);
  word-break: break-word;
}
body.cs-op-page .csop-rep + .csop-rep { margin-top: 0.14rem; }

/* ------------------------------------------------- ⑤ 逐卡介绍文字（R146 新增） */
/* 由官方字段拼出的介绍段。放在印刷史与效果原文之间，是浮层里唯一的「散文」层，
   故给足行距、用正文色（--c-ink 的柔化版），与灰色脚注拉开层次。 */
body.cs-op-page .csop-desc {
  display: block;
  margin-top: 0.42rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--c-rule, #edeae2);
  font-size: 0.755rem;
  line-height: 1.5;
  color: #4a4a46;
  word-break: break-word;
}

/* 浮层里「Top 10 角色」图例：数字在前、产品数在后，与色点图例同一行高。 */
body.cs-op-page .cs151-legend li > span { color: var(--c-soft, #8a8880); font-size: 0.72rem; }