@charset "UTF-8";
/* ============================================================================
 * CardSpicy · One Piece 文章页窄屏表格收敛
 * ----------------------------------------------------------------------------
 * 适用：One Piece 文章线的 12 个子页 + 42 篇 post（判据见 cs-onepiece.php
 *       cs_op_is_article()：是 #3192 的子页，或 slug 里含 one-piece 的 post）。
 *       body 类 cs-op-post 由该件加，本文件只挂在那个类下。
 *
 * 为什么需要：
 *   本轮新增的「逐角色卡表」是 **6 列**（Card / Colour / Cost / Power /
 *   Counter / First printed in）。390px 下按主题默认表格样式量得表格自然宽
 *   384px，而正文容器只有 315px ⇒ 最后一列被推出可视区，必须横向滑动才看得到。
 *   表本身仍可滚（父容器 overflow-x:auto），但对一张要逐行读的卡表来说，
 *   默认看不到「首次印刷产品」这一列是不能接受的。
 *
 * 做法：**只在 ≤640px** 把表格改成固定布局并按可用宽度等分，字号与内边距各收一档。
 *   实测 390px 下 6 列正好收进 315px（315 = 315），且每列仍可读。
 *
 * 🔴 桌面端零影响：全部规则包在 @media (max-width: 640px) 里。
 * 🔴 不碰主题与母版：所有选择器都以 body.cs-op-post 开头。
 * 🔴 不让文字挤爆：单元格允许断词，代码列额外允许 break-all（卡号是连续串）。
 * ========================================================================== */

@media (max-width: 640px) {
  body.cs-op-post table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.72rem;
  }
  body.cs-op-post table th {
    font-size: 0.62rem;
    line-height: 1.15;
    padding: 0.3rem 0.18rem;
    vertical-align: bottom;
  }
  body.cs-op-post table td {
    padding: 0.34rem 0.18rem;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  body.cs-op-post table td code,
  body.cs-op-post table th code {
    font-size: 0.68rem;
    word-break: break-all;
  }
  /* 两列/三列的宽表（如「用其复刻的产品」一列很长）给首列固定份额，读起来不跳 */
  body.cs-op-post table th:first-child,
  body.cs-op-post table td:first-child {
    width: 22%;
  }
}