/*
---
generated_by: GLM-5.3 (ZCode agent, Reflect experience v2 Task 6)
date: 2026-09-14
core_logic: Cards 页（#page-cards）纸感编辑风换装——全部规则 #page-cards 或 Cards 专属 id/class 作用域，
  不触碰壳区与其他页面。语言：衬线大标 + rust mono 眉标（components.css .eyebrow）、细线纸面板
  （#cards-form 纸卡 + 苔绿平移阴印）、RWS 牌面为主视觉事实（object-fit contain 不裁切；夜色纸背
  只做织纹细框 + rust 圆点记号）、位置标签/价格行 mono 元数据化。仪式三相位类
  （rc-shuffle/rc-fan/rc-fan-3/rc-flip/rc-done）与 rc-* 类名是 cards-view.js 契约，只换视觉参数
  不动时序（翻面 .5s/--i 级联、平移角度原样保留）；空态边角唯一素描 .rc-corner-sketch 位于
  #cards-form 内部（抽牌后随表单隐藏，RWS 出现时素描自动省略，§6.4）。色值一律 tokens 变量
  （夜背织纹 rgba 为纸光 token 的 alpha 形式）；hover/焦点 0.16s ∈ 120–220ms 档。
test_record: 协议 A–F 全绿（2026-09-14）：node --check 三 JS；8102 静态伺服 + chrome-devtools MCP
  en/zh-CN × 390/1280 表单态 + DOM 构造终态截图（docs/reflect/ui-shots/v2-cards/）；断言
  scrollWidth≤clientWidth、img naturalWidth>0、禁串零命中、rc-btn/主 CTA ≥44px、img 无 filter 变形
  （目检）；#/ 与 #/shop 回归无塌陷；reduced-motion 代码路径核查（ceremonyTimeline(true) 零步直达
  done + CSS @media 降级块在链）+ 终态同构截图。
recent_changes:
  - 2026-09-14: 初版——Cards 页纸感编辑风换装（index.html cards 区块 + app.js STRINGS cardsEyebrow 配套）。
  - 2026-09-20: R-cards-1（demo移植冲刺 task-8）——新增 .rc-mood 表单首屏 RWS 牌图 mood 位
    （愚者/星星/月亮固定 3 张复用，微倾斜 + rc-mood-in 一次性入场动画，零 reduce 分支）；
    其余规则零变化。
*/

/* ============ 页首：眉标（components .eyebrow）+ 衬线大标 + 导语 ============ */
#page-cards .page-h1 {
  margin: 0;
  font-family: var(--reflect-serif);
  font-size: clamp(30px, 5vw, 38px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--reflect-ink);
}
#page-cards .page-lead {
  margin: var(--reflect-space-8) 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--reflect-ink-soft);
}
/* 表单内的安抚小字（Nothing is drawn until you begin）：辅助行，收小一号 */
#cards-form .page-lead { font-size: 14px; line-height: 1.55; }
#page-cards .body-p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--reflect-ink-soft);
}

/* ============ 抽牌表单：细线纸面板 + 苔绿平移阴印（demo 礼物卡语言） ============ */
#cards-form {
  position: relative;
  padding: 20px;
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-paper-wash);
  box-shadow: 7px 8px 0 var(--reflect-moss-wash);
}
@media (min-width: 768px) {
  #cards-form { padding: 24px; }
}

/* 空态边角唯一素描（≤128×100 量级；aria-hidden + alt=""，无展签）；
   随 #cards-form 隐藏 → RWS 牌面出现时素描自动省略 */
.rc-corner-sketch {
  flex: none;
  width: 100px;
  height: 78px;
  margin: 0 0 0 auto;
  box-shadow: 6px 7px 0 var(--reflect-moss-wash);
}
.rc-corner-sketch::after { inset: 5px; } /* .sketch 内衬线框在小版位收窄 */
@media (min-width: 768px) {
  .rc-corner-sketch { width: 128px; height: 100px; }
}

/* ============ R-cards-1（demo移植冲刺 task-8，2026-09-20）：表单首屏 RWS 牌图 mood 位 ============
   78 张在盘资产固定复用（愚者/圣杯一/月亮，index.html 静态 src；不随机、零抽牌语义——牌面唯一
   来源仍是 POST /cards/draws）。纯装饰静物：小幅横排 + 微倾斜摆法（--tilt 每张定值）+
   一次性入场动画（错峰浮落到位，animation-fill-mode backwards 起于透明、终态=倾斜静置）。
   零 reduce 分支（2026-09-18 全站红线：动画无条件播放）；零外链资产；v3.3 起宿主=.chook
   免费钩子带（页顶常驻，不随表单隐藏；圣杯一替换星星）。 */
.rc-mood {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  margin: 0 0 var(--reflect-space-16);
}
.rc-mood-card {
  width: 64px;
  border: 1px solid var(--reflect-line);
  border-radius: 5px;
  background: var(--reflect-paper-light);
  box-shadow: 4px 5px 0 var(--reflect-moss-wash);
  transform: rotate(var(--tilt, 0deg));
  animation: rc-mood-in .55s cubic-bezier(.2, .7, .3, 1) backwards;
}
.rc-mood-card--1 { --tilt: -6deg; animation-delay: .05s; }
.rc-mood-card--2 { --tilt: 2deg; animation-delay: .16s; }
.rc-mood-card--3 { --tilt: 7deg; animation-delay: .27s; }
@keyframes rc-mood-in {
  from { opacity: 0; transform: rotate(var(--tilt, 0deg)) translateY(12px); }
  to { opacity: 1; transform: rotate(var(--tilt, 0deg)) translateY(0); }
}
@media (min-width: 768px) {
  .rc-mood { gap: 26px; margin-bottom: var(--reflect-space-24); }
  .rc-mood-card { width: 84px; border-radius: 6px; }
}

/* ============ v3.3 免费钩子带（notes.md §v3.3 卡牌节）：rc-mood 从 #cards-form 内上移
   页顶夜色带 64→92px（倾斜角/纸边框/入场动画原样，仅改尺寸+夜底重铺）；
   徽标/标题两态由 cards-view.js paintFreeHook 驱动（免费窗口=cardsFreeDrawBadge +
   cardsFreeDrawAvailable{d}；窗口结束=shopCrystalsTarotBody 价格行）。样式语言对齐
   shop.css .sy-free-hero（夜底/赭徽标同令牌，设计稿 _src/tabs.css 移植，色全走令牌）。 */
.chook {
  position: relative;
  background: var(--reflect-night);
  color: var(--reflect-paper-light);
  padding: 30px 20px 26px;
  overflow: hidden;
}
.chook::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 34%, rgba(180, 139, 72, .22), transparent 70%);
  pointer-events: none;
}
.chook .rc-mood {
  position: relative;
  gap: 22px;
  margin: 0;
}
.chook .rc-mood-card {
  width: 92px;
  border-color: rgba(248, 245, 237, .4);
  box-shadow: 4px 6px 0 rgba(180, 139, 72, .18);
}
.chook-tx {
  position: relative;
  margin-top: 24px;
}
.chook-free {
  display: inline-block;
  font-family: var(--reflect-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  padding: 3px 10px 3px 12px;
  border-radius: var(--reflect-radius-pill);
  background: var(--reflect-ochre);
  color: var(--reflect-night);
}
.chook-ti {
  font-family: var(--reflect-serif);
  font-size: 23px;
  line-height: 1.35;
  font-weight: 600;
  margin-top: 10px;
}
@media (min-width: 768px) {
  .chook .rc-mood-card { width: 120px; }
  .chook { padding: 36px 24px 30px; }
}

/* 字段标签：mono 小节标（list-panel h3 同语言） */
.rc-label {
  font-family: var(--reflect-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--reflect-ink-soft);
}
.rc-field { gap: var(--reflect-space-8); }

/* 单/三牌切换：mono 大写细线纸钮；当前态墨边 + 苔绿洗 + rust 圆点记号（壳底栏同语言） */
.rc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--reflect-space-8);
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-sm);
  background: var(--reflect-paper-light);
  color: var(--reflect-ink);
  font-family: var(--reflect-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .16s var(--reflect-ease), border-color .16s var(--reflect-ease), color .16s var(--reflect-ease);
}
.rc-btn:hover {
  border-color: var(--reflect-ink);
  background: var(--reflect-paper-light);
}
.rc-btn:focus-visible {
  outline: 2px solid var(--reflect-rust);
  outline-offset: 2px;
}
.rc-btn[disabled] { opacity: .5; cursor: not-allowed; }
.rc-seg { gap: var(--reflect-space-8); }
.rc-seg .rc-btn[aria-pressed="true"] {
  border-color: var(--reflect-ink);
  background: var(--reflect-moss-wash);
  color: var(--reflect-ink);
  font-weight: 700;
}
.rc-seg .rc-btn[aria-pressed="true"]::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--reflect-rust);
}

/* 问题输入：纸面透明 + 细线；键盘焦点走 base.css rust outline */
.rc-question {
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-sm);
  font-family: var(--reflect-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--reflect-ink);
  background: transparent;
  resize: vertical;
}
.rc-question:focus {
  outline: none;
  border-color: var(--reflect-ink);
  box-shadow: none;
}

/* 主 CTA：墨面纸字 mono 大写（rust 留给焦点/hover 记号） */
#page-cards .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--reflect-space-8);
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--reflect-ink);
  border-radius: var(--reflect-radius-sm);
  background: var(--reflect-ink);
  color: var(--reflect-paper-light);
  font-family: var(--reflect-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s var(--reflect-ease), border-color .16s var(--reflect-ease);
}
#page-cards .btn-primary:hover {
  border-color: var(--reflect-moss);
  background: var(--reflect-moss);
  color: var(--reflect-paper-light);
}
#page-cards .btn-primary:focus-visible {
  outline: 2px solid var(--reflect-rust);
  outline-offset: 2px;
}
#page-cards .btn-primary[disabled] { opacity: .55; cursor: not-allowed; }
#page-cards .btn-primary[disabled]:hover { background: var(--reflect-ink); border-color: var(--reflect-ink); }

/* 价格行 / 迁移提示：mono 元数据小字 */
#page-cards .birth-hint {
  font-family: var(--reflect-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--reflect-ink-soft);
}
#cards-price-hint { margin: 0; text-align: center; letter-spacing: .04em; }
#cards-claim-note { margin: var(--reflect-space-12) 0 0; }

/* ============ 诚实错误：陶锈洗纸框（不伪造牌面） ============ */
#cards-error {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding: var(--reflect-space-16);
  border: 1px solid var(--reflect-rust);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-rust-wash);
}
#cards-error[hidden] { display: none !important; }

/* ============ 仪式舞台：牌背夜色织纹纸框 + rust 圆点；三相位类/时序原样 ============ */
#cards-stage .rc-cards-form { gap: var(--reflect-space-8); }
#page-cards #cards-caption {
  margin: 0;
  text-align: center;
  font-family: var(--reflect-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--reflect-ink-soft);
}
#cards-skip {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-bottom: 1px solid var(--reflect-line);
  border-radius: 0;
  background: transparent;
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .16s var(--reflect-ease), border-color .16s var(--reflect-ease);
}
#cards-skip:hover {
  color: var(--reflect-rust);
  border-bottom-color: var(--reflect-rust);
  background: transparent;
}
#cards-skip:focus-visible {
  outline: 2px solid var(--reflect-rust);
  outline-offset: 2px;
}

/* ============ 解读区（2026-09-18 demo v8.2 移植）：#cards-reading 即夜抽舞台内的
   .reading in-stage 纸面板，全部排版/逐句打字/分层入场规则见文件尾 night-draw 移植段；
   本段以上的旧 rc-face/rc-back 翻面几何与 rc-r2 面板随 cards-ritual/cards-animation 一并退役。 ============ */

/* ============================================================
   2026-09-18 demo v8.2 移植（night-draw 洗牌/扇形/三幕/逐句读牌/排版分层）
   源 = demos/reflect-web-demo/night-draw.css 忠实变换（.cards-night → #cards-stage 作用域），
   与 demo 的差异仅四处：①衬线栈换 D26 令牌 var(--reflect-serif)（不引 Libre Baskerville 字重依赖）
   ②正文 15→16px（Cards 详设 §11.1 阅读契约）③去 demo 专属 .plate/.result-strip/.draw-bubble
   ④.reading-lore（牌义折叠）与 .reading-reversed 共用折叠样式。色值保持 demo 拍板色不动。
   ============================================================ */
#cards-stage {
  --card-w: 142px;
  --card-h: 228px;
  --amber-glow: rgba(232, 180, 90, 0.55);
  --amber-soft: rgba(212, 136, 75, 0.38);
  --gold: #c9b08a;
  --gold-dim: rgba(201, 176, 138, 0.35);
}
#cards-stage .cards-night-stage {
  /* 暖夜调 + 赤陶微光 vignette——「烛光房」而非「黑洞」；进场 0.6s 由亮渐暗（nd-stage-in） */
  background:
    radial-gradient(ellipse 120% 60% at 50% -6%, rgba(196, 92, 58, 0.06), transparent 55%),
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(72, 58, 42, 0.28), transparent 58%),
    linear-gradient(180deg, #17140f 0%, #0d0b08 100%);
  border-radius: 18px;
  padding: 14px 8px 20px;
  border: 1px solid rgba(201, 176, 138, 0.22);
  margin: 12px 0 18px;
  color: #ebe4da;
  overflow: hidden;
  animation: nd-stage-in 0.6s ease both;
}
@keyframes nd-stage-in {
  from { filter: brightness(1.55) saturate(0.8); }
  to { filter: none; }
}
#cards-stage .caption {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 2px 0 10px;
}
#cards-stage .table {
  position: relative;
  width: 100%;
  height: 210px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  perspective: 900px;
  --fan-bottom: 24px;
}
#cards-stage .table.can-pan { cursor: grab; }
#cards-stage .table.held { overflow: hidden; }
#cards-stage .fan {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 100%;
}
#cards-stage .slot {
  position: absolute;
  bottom: var(--fan-bottom, 24px);
  left: 50%;
  width: var(--card-w);
  height: var(--card-h);
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, 0);
  transform-origin: 50% 100%;
  z-index: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
  opacity: 1;
  transition: opacity 0.45s ease, filter 0.45s ease;
}
#cards-stage .slot:disabled { cursor: default; }
#cards-stage .slot.ready:hover { filter: drop-shadow(0 12px 22px rgba(232,180,90,0.35)); }
#cards-stage .slot.aside { opacity: 0.18; filter: blur(1px) grayscale(0.4); pointer-events: none; }
/* 三幕时间轴态：未选牌 dim 让位（注意力给翻牌那张）→ 凝视拍 solo 浮起 */
#cards-stage .slot.dimmed { opacity: 0.4; filter: brightness(0.75); }
#cards-stage .slot.dimmed.aside { opacity: 0.18; filter: blur(1px) grayscale(0.4); }
#cards-stage .slot.gaze .lift {
  transform: translateY(-8px) scale(1.06);
  transition: transform 0.45s cubic-bezier(0.2, 1.12, 0.32, 1);
}
#cards-stage .slot.picked { filter: drop-shadow(0 16px 28px rgba(232,180,90,0.45)); }
#cards-stage .slot.glowing .flip { box-shadow: 0 0 28px var(--amber-glow); }
#cards-stage .lift {
  display: block;
  width: 100%;
  height: 100%;
  transform: var(--lift, none);
  transform-style: preserve-3d;
}
#cards-stage .scene {
  display: block;
  width: 100%;
  height: 100%;
  perspective: 800px;
}
#cards-stage .flip {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.2, 0.9, 0.28, 1);
  border-radius: 10px;
}
#cards-stage .flip.revealed { transform: rotateY(180deg); }
#cards-stage .face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  background: #1d2b23; /* 牌背苔绿（D26 同源；金线光影不变） */
}
#cards-stage .face.back { transform: rotateY(0deg); }
#cards-stage .face.front {
  transform: rotateY(180deg);
  background: #f4ebe0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#cards-stage .face.back svg { width: 100%; height: 100%; display: block; }
#cards-stage .face.front .art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}
#cards-stage .spine {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #e6c86a, #8a6a18);
  opacity: 0.35;
  z-index: 2;
  backface-visibility: hidden;
}
/* 2026-09-18 拍板：全站永不执行 prefers-reduced-motion（AGENTS.md 红线），原降级块已删 */
#cards-stage .reading {
  margin: 8px 0 20px;
  padding: 18px 16px 20px;
  background: linear-gradient(180deg, #faf6ef 0%, #f2ebe1 100%);
  border: 1px solid #e4d9c8;
  border-radius: 16px;
  color: #1c1915;
  box-shadow: 0 10px 28px rgba(28, 25, 21, 0.06);
}
#cards-stage .reading[hidden] { display: none !important; }
/* 分层入场（峰终定律/渐进披露）：容器亮起 0.35s，内部按
   标题→引语→正文逐段→关键词 chips→对应→操作 逐层浮现；
   正文句序 --si / 句距 --sd 由 cards-view 注入 */
#cards-stage .reading.show { animation: nd-reading-in 0.35s ease both; }
@keyframes nd-reading-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes nd-layer-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes nd-chip-in {
  from { opacity: 0; transform: scale(0.72); }
  70% { transform: scale(1.05); }
  to { opacity: 1; transform: scale(1); }
}
#cards-stage .reading.show .reading-head { animation: nd-layer-in 0.4s ease 0.05s both; }
#cards-stage .reading.show .reading-quote { animation: nd-layer-in 0.45s ease 0.16s both; }
/* 逐句读牌：正文不再整段浮现，句子按 --si * --sd 逐句显（间隔由 cards-view
   按句总数定，总时长 ~5.2s 封顶）；chips/对应/操作的 delay 由 JS 内联（跟在最后一句后） */
#cards-stage .reading .sent {
  /* 基础态可见（skip/reduced 禁动画时不丢内容）；隐态只由动画 from+fill both 提供 */
  animation: nd-sent-in 0.5s ease both;
  animation-delay: calc(0.3s + var(--si, 0) * var(--sd, 0.42s));
}
@keyframes nd-sent-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
/* skip（揭晓中/逐句中点击任意处）：直达终态，全部入场动画关闭 */
#cards-stage .reading.instant,
#cards-stage .reading.instant * { animation: none !important; }
#cards-stage .reading-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
#cards-stage .reading-head-side { display: flex; align-items: center; gap: 6px; }
/* 唯一主 CTA=实底赤陶、字重 600、宽随内容（Continue in Reflect；拍板①②） */
#cards-stage .reading .action-btn.primary {
  background: #c45c3a;
  color: #fff;
  border-color: #c45c3a;
  font-weight: 600;
  min-height: 44px;
  padding: 10px 22px;
  width: max-content;
  text-align: center;
}
#cards-stage .reading .action-btn.primary:hover { background: #a94a2c; border-color: #a94a2c; }
#cards-stage .reading-title {
  font-family: var(--reflect-serif, Georgia, serif);
  font-size: 1.45rem;
  margin: 0;
  color: #1c1915;
}
#cards-stage .orient {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c45c3a;
  border: 1px solid rgba(196, 92, 58, 0.35);
  border-radius: 999px;
  padding: 3px 10px;
}
#cards-stage .orient.reversed {
  color: #6a5a48;
  border-color: rgba(106, 90, 72, 0.4);
}
#cards-stage .reading-quote {
  margin: 0 0 16px;
  padding-left: 14px;
  border-left: 2px solid #c45c3a;
  font-family: var(--reflect-serif, Georgia, serif);
  font-style: italic;
  font-size: 1.08rem;
  color: #3a342c;
  line-height: 1.5;
}
#cards-stage .reading-body {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
  color: #2a241c;
}
/* 排版分层：段首角色小标（阵位/传统义 前缀升格为 kicker，正文去前缀） */
#cards-stage .reading .para-kicker {
  display: block;
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c45c3a;
  opacity: 0.9;
}
/* 无前缀短段（≤2 句）升格点睛句：斜体衬线、柔色，与引语同族不同权 */
#cards-stage .reading .reading-aside {
  margin: 0 0 16px;
  font-family: var(--reflect-serif, Georgia, serif);
  font-style: italic;
  color: #6a5a48;
  line-height: 1.55;
}
#cards-stage .reading .chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}
#cards-stage .reading .chips .chip { display: inline-flex; width: auto; }
#cards-stage .reading .chip {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: #ebe3d6;
  color: #5a5248;
}
#cards-stage .correspondences {
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
#cards-stage .corr-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
}
#cards-stage .corr-row dt {
  width: auto;
  color: #8a8278;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
}
#cards-stage .corr-row dd { margin: 0; color: #1c1915; }
#cards-stage .reading-hooks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #e4d9c8;
}
#cards-stage .cards-foot-note {
  font-size: 12px;
  color: #7a7268;
  line-height: 1.45;
}
/* 牌义折叠（.reading-lore）与逆位折叠（.reading-reversed）共用：默认收起，点开逐句重放 */
#cards-stage .reading-reversed,
#cards-stage .reading-lore {
  margin: 6px 0 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(58, 52, 44, 0.15);
}
#cards-stage .reading-reversed summary,
#cards-stage .reading-lore summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
#cards-stage .reading-reversed summary::-webkit-details-marker,
#cards-stage .reading-lore summary::-webkit-details-marker { display: none; }
#cards-stage .reading-reversed .rev-label,
#cards-stage .reading-lore .rev-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #6a5a48;
}
#cards-stage .reading-reversed summary::after,
#cards-stage .reading-lore summary::after {
  content: "+";
  margin-left: auto;
  font-size: 15px;
  color: #8a8278;
}
#cards-stage .reading-reversed[open] summary::after,
#cards-stage .reading-lore[open] summary::after { content: "–"; }
#cards-stage .reading-reversed .rev-body,
#cards-stage .reading-lore .rev-body { margin-top: 10px; }

/* —— CARDS-DRAW-UX: in-place reading——解读在夜抽舞台内原位展开（去内滚动小窗）—— */
#cards-stage .cards-night-stage.has-reading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
}
#cards-stage .reading.in-stage {
  position: relative;
  z-index: 5;
  margin: 0;
  background: var(--paper, #f6f0e6);
  color: var(--ink, #1c1915);
  border: 1px solid rgba(28, 25, 21, 0.12);
  border-radius: 14px;
  padding: 14px 14px 16px;
  /* 无 max-height+overflow-y 内滚动小窗——解读自然撑开，随页面滚动（禁双层滚动条） */
  box-shadow: none;
}
#cards-stage .table.with-reading { margin-bottom: 0; }

/* ============ 2026-09-18 移植补充：引擎徽章 / 阵位牌行 / 行动卡 / 钩子钮 / 分段控件 ============ */
/* 引擎逆位徽章（cards-night.js fillFace 注入；与 .orient 同族、夜面反白） */
#cards-stage .orient-badge {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--reflect-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3e0a8;
  background: rgba(122, 87, 32, 0.92);
  border-radius: 9999px;
  padding: 1px 8px;
  white-space: nowrap;
}
/* 阵位牌行：缩略牌图（逆位倒置）+ 牌名 + 方位徽章 */
#cards-stage .reading .cardline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
#cards-stage .reading .cardline img {
  flex: none;
  width: 44px;
  height: 71px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid rgba(28, 25, 21, 0.18);
  background: #efe6d8;
}
#cards-stage .reading .cardline img.rev { transform: rotate(180deg); }
#cards-stage .reading .cardline .cardname {
  font-family: var(--reflect-serif, Georgia, serif);
  font-weight: 600;
  font-size: 15px;
  color: #1c1915;
}
/* 「今天的一小步」行动卡：赤陶左肋高亮 */
#cards-stage .reading .reading-action {
  margin: 0 0 14px;
  border-left: 3px solid #c45c3a;
  background: rgba(196, 92, 58, 0.08);
  border-radius: 0 12px 12px 0;
  padding: 12px 14px;
}
#cards-stage .reading .reading-action .para-kicker { margin-bottom: 6px; }
#cards-stage .reading .reading-action p { margin: 0; font-size: 16px; line-height: 1.6; color: #2a241c; }
/* 钩子钮基座（Continue=primary 赤陶实底；Home=ghost 细线） */
#cards-stage .reading .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(28, 25, 21, 0.35);
  border-radius: 10px;
  background: transparent;
  color: #1c1915;
  font-family: var(--reflect-sans, system-ui, sans-serif);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#cards-stage .reading .action-btn:hover { background: rgba(28, 25, 21, 0.06); }
#cards-stage .reading .action-btn:focus-visible { outline: 2px solid #c45c3a; outline-offset: 2px; }
/* 分段控件（拍板①②）：连体容器 + 墨底选中 + 价格副行（HIG segmented control 范式） */
#cards-form .rc-seg.spread-seg {
  display: flex;
  gap: 0;
  padding: 0;
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-sm);
  overflow: hidden;
  background: var(--reflect-paper-light);
}
#cards-form .rc-seg.spread-seg .rc-btn {
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-height: 52px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 6px 10px;
}
#cards-form .rc-seg.spread-seg .rc-btn + .rc-btn { border-left: 1px solid var(--reflect-line); }
#cards-form .rc-seg.spread-seg .rc-btn:hover { background: rgba(28, 25, 21, 0.05); border-color: transparent; }
#cards-form .rc-seg.spread-seg .rc-btn[aria-pressed="true"] {
  background: var(--reflect-ink);
  color: var(--reflect-paper-light);
  border-color: transparent;
  font-weight: 700;
}
#cards-form .rc-seg.spread-seg .rc-btn[aria-pressed="true"]::before { display: none; }
#cards-form .seg-price {
  font-family: var(--reflect-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--reflect-ink-soft);
}
#cards-form .rc-seg.spread-seg .rc-btn[aria-pressed="true"] .seg-price { color: var(--reflect-paper-light); opacity: 0.75; }


/* ================= PR-G 动效（C1 跟手倾斜 / C2 扇形收展；motion_spec §2，2026-10-07） =================
   C1 ▲修订：只跟指针不接陀螺仪；m-tilt 包裹层由 cards-view.js 动态创建（img 原位不换）。
   C2：data-spread=single 两侧牌收进中牌后 / three 展开成扇，380ms snap。零 reduce 分支。 */
.chook .rc-mood { perspective: 700px; }
.m-tilt {
  display: block;
  position: relative;
  transform-style: preserve-3d;
  transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0) rotate(var(--fr, 0deg)) scale(var(--fs, 1)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--m-fan-dur) var(--m-ease-snap); /* 回位 380ms snap */
}
.m-tilt.m-tracking { transition: transform 90ms linear; } /* 跟手 90ms linear */
.m-tilt::after { /* 高光层：随倾角透明度变化（--gl 由 JS 写） */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  pointer-events: none;
  opacity: var(--gl, 0);
  background: linear-gradient(calc(110deg + var(--ry, 0deg) * 4), transparent 30%, rgba(255, 248, 230, .35) 50%, transparent 70%);
  transition: opacity 200ms linear;
}
/* C2 扇形收展：单张=两侧牌退到中牌后压暗；三张=展开成扇 */
.rc-mood[data-spread="single"] .m-tilt:nth-child(1) { --fx: 30px; --fs: .9; --fr: -4deg; }
.rc-mood[data-spread="single"] .m-tilt:nth-child(3) { --fx: -30px; --fs: .9; --fr: 4deg; }
.rc-mood[data-spread="single"] .m-tilt:nth-child(2) { --fy: -6px; --fs: 1.04; z-index: 2; }
.rc-mood[data-spread="single"] .m-tilt:nth-child(1) .rc-mood-card,
.rc-mood[data-spread="single"] .m-tilt:nth-child(3) .rc-mood-card { filter: brightness(.82); }
.rc-mood[data-spread="three"] .m-tilt:nth-child(1) { --fx: -10px; --fr: -6deg; --fy: 6px; }
.rc-mood[data-spread="three"] .m-tilt:nth-child(3) { --fx: 10px; --fr: 6deg; --fy: 6px; }
.rc-mood[data-spread="three"] .m-tilt:nth-child(2) { --fy: -4px; }
.rc-mood .rc-mood-card { transition: filter var(--m-fan-dur) var(--m-ease-out); }