/* =============================================================================
 *  Lyra · screen "dual-card" · 屏幕专属样式（人性化词卡 · DESIGN §5.3/§5.5）
 *  ★FE-5 重建：大汉字 hero + 上方振假名 ruby + 读音(罗马音 mono) + 释义 +
 *    「看脸/听音」柔弧(SVG soft arc，非竖柱/环/数字) + 教练语 + 真·已会类比 + furigana 例句。
 *  纪律：只用令牌、零裸色（FE-13）；罗马音 var(--mono)；柔弧令牌色、不刺眼 neon；深/浅都可读。
 * ========================================================================== */

[data-screen="dual-card"] .wc-scroll { padding: 6px 18px 26px; }

/* 顶栏 */
[data-screen="dual-card"] .wc-head {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0 4px; margin-bottom: 6px;
}
[data-screen="dual-card"] .wc-head-spacer { flex: 1; }

/* —— 词卡容器：surface 卡 + 发丝线框 + 内嵌细金线（Atlas 性格）—— */
[data-screen="dual-card"] .wc-card {
  position: relative;
  background: var(--panel);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--line);
  padding: 34px 24px 26px;
  margin-bottom: 18px;
  overflow: hidden;
}
[data-screen="dual-card"] .wc-card::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid var(--line); border-radius: 20px; pointer-events: none;
}

/* —— hero：大汉字 + 上方振假名 ruby —— */
[data-screen="dual-card"] .wc-hero { text-align: center; margin-bottom: 16px; position: relative; z-index: 1; }
[data-screen="dual-card"] .wc-hero-word {
  font-family: var(--jp); font-weight: 600; font-size: 46px; color: var(--ink);
  letter-spacing: .04em; line-height: 1.08;
}
[data-screen="dual-card"] .wc-hero-word ruby { ruby-position: over; ruby-align: center; }
[data-screen="dual-card"] .wc-hero-word rt {
  font-family: var(--jp); font-size: .42em; font-weight: 400;
  color: var(--accent); letter-spacing: .04em;
}

/* —— 读音：假名 + 罗马音（罗马音 mono）—— */
[data-screen="dual-card"] .wc-read {
  margin-top: 14px; display: flex; justify-content: center; align-items: baseline; gap: 10px;
}
[data-screen="dual-card"] .wc-read-kana {
  font-family: var(--jp); font-size: 15px; color: var(--ink-muted); letter-spacing: .08em;
}
[data-screen="dual-card"] .wc-read-roma {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--ink-subtle); letter-spacing: .02em;
}

/* —— 释义 —— */
[data-screen="dual-card"] .wc-gloss {
  text-align: center; font-size: 18px; color: var(--ink); font-weight: 500;
  line-height: 1.5; margin-bottom: 8px; position: relative; z-index: 1;
}
[data-screen="dual-card"] .wc-pos-row {
  display: flex; justify-content: center; gap: 8px; margin-bottom: 4px; position: relative; z-index: 1;
}
[data-screen="dual-card"] .wc-pos-chip {
  font-size: 11px; padding: 2.5px 10px; border-radius: 999px;
  color: var(--ink-muted); background: var(--fill-soft);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* 分隔细金线 */
[data-screen="dual-card"] .wc-hairline {
  height: 1px; margin: 22px -24px 24px;
  background: linear-gradient(90deg, transparent, var(--hairline-strong) 20%, var(--hairline-strong) 80%, transparent);
}

/* —— 柔弧「看脸 / 听音」（SVG 半圆，非竖柱/环/数字）—— */
[data-screen="dual-card"] .wc-arcs {
  display: flex; gap: 16px; justify-content: center; position: relative; z-index: 1;
}
[data-screen="dual-card"] .wc-arc { flex: 1; max-width: 160px; text-align: center; }
[data-screen="dual-card"] .wc-arc-svg { width: 100%; }
[data-screen="dual-card"] .wc-arc-svg svg { width: 100%; height: auto; display: block; }
[data-screen="dual-card"] .wc-arc-track {
  fill: none; stroke: var(--fill-soft); stroke-width: 8; stroke-linecap: round;
  /* 发丝线让轨道在浅底也可见 */
  filter: none;
}
[data-screen="dual-card"] .wc-arc-track { stroke: color-mix(in srgb, var(--ink) 12%, transparent); }
[data-screen="dual-card"] .wc-arc-fill {
  fill: none; stroke-width: 8; stroke-linecap: round;
  transition: stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1);
}
/* 看脸 = 暖白偏蓝白(done 阶)的柔光；听音 = 琥珀(learn 阶)——柔和、非刺眼 neon */
[data-screen="dual-card"] .wc-arc-sight .wc-arc-fill { stroke: var(--s-done); }
[data-screen="dual-card"] .wc-arc-ear .wc-arc-fill { stroke: var(--accent); }
[data-screen="dual-card"] .wc-arc-cap { margin-top: -6px; }
[data-screen="dual-card"] .wc-arc-label {
  display: block; font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: .3px;
}
[data-screen="dual-card"] .wc-arc-sub { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

/* —— 教练语（按 coachState 选）—— */
[data-screen="dual-card"] .wc-coach {
  margin-top: 20px; background: var(--fill-soft);
  border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--hairline);
  padding: 13px 16px; position: relative; z-index: 1;
}
[data-screen="dual-card"] .wc-coach-tx { font-size: 15px; color: var(--ink); line-height: 1.55; }

/* —— 真·已掌握同类词（空则该区不渲染）—— */
[data-screen="dual-card"] .wc-analogy { margin-top: 18px; position: relative; z-index: 1; }
[data-screen="dual-card"] .wc-analogy-lab {
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 10px;
}
[data-screen="dual-card"] .wc-analogy-row { display: flex; flex-wrap: wrap; gap: 8px; }
[data-screen="dual-card"] .wc-ana-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--jp); font-size: 16px; color: var(--ink);
  padding: 6px 12px; border-radius: var(--r-sm);
  background: var(--fill-soft); box-shadow: inset 0 0 0 1px var(--hairline);
}
[data-screen="dual-card"] .wc-ana-read { font-size: 11px; color: var(--ink-faint); }

/* —— 带 furigana 的例句 —— */
[data-screen="dual-card"] .wc-ex { margin-top: 22px; position: relative; z-index: 1; }
[data-screen="dual-card"] .wc-ex-label {
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 12px;
}
[data-screen="dual-card"] .wc-ex-jp {
  font-family: var(--jp); font-size: 20px; line-height: 2.0; color: var(--ink-muted); letter-spacing: .03em;
}
[data-screen="dual-card"] .wc-ex-jp ruby { ruby-position: over; }
[data-screen="dual-card"] .wc-ex-jp ruby rt {
  font-family: var(--jp); font-size: .46em; color: var(--ink-subtle); font-weight: 400;
}
[data-screen="dual-card"] .wc-tok { position: relative; }
[data-screen="dual-card"] .wc-tok.hot { color: var(--ink); }
[data-screen="dual-card"] .wc-tok.hot ruby rt { color: var(--accent); }
[data-screen="dual-card"] .wc-tok.hot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); border-radius: 2px; opacity: .82;
}
[data-screen="dual-card"] .wc-ex-cn { font-size: 13px; color: var(--ink-faint); margin-top: 12px; line-height: 1.5; }

/* —— 行动 —— */
[data-screen="dual-card"] .wc-acts { display: flex; flex-direction: column; gap: 10px; }
[data-screen="dual-card"] .wc-add {
  min-height: 44px; font-size: 14.5px; color: var(--ink);
  border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line-strong);
  background: var(--fill-soft);
}
[data-screen="dual-card"] .wc-add:hover { background: var(--fill-hover); }
[data-screen="dual-card"] .wc-add.is-on {
  color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
[data-screen="dual-card"] .wc-add:disabled { cursor: default; opacity: .9; }
[data-screen="dual-card"] .wc-source {
  min-height: 44px; font-size: 13.5px; color: var(--ink-dim);
  border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line);
  background: var(--fill-soft);
}
[data-screen="dual-card"] .wc-source span[lang="ja"] { font-family: var(--jp); color: var(--ink); }
[data-screen="dual-card"] .wc-source:hover { color: var(--ink); background: var(--fill-hover); }

/* —— 直接访问词卡时的空态 —— */
[data-screen="dual-card"] .wc-empty {
  margin-top: 72px;
  padding: 28px 22px;
  text-align: center;
  background: var(--panel);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--line);
}
[data-screen="dual-card"] .wc-empty-k {
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-subtle); margin-bottom: 10px;
}
[data-screen="dual-card"] .wc-empty-title {
  font-family: var(--display); font-size: 30px; line-height: 1.08;
  color: var(--ink); font-weight: 600; margin-bottom: 10px;
}
[data-screen="dual-card"] .wc-empty-copy {
  font-size: 14px; color: var(--ink-muted); line-height: 1.55; margin-bottom: 18px;
}

/* —— 流式骨架：未水合时 释义/教练语为脉冲占位，弧/读音先到位 —— */
[data-screen="dual-card"] .wc-skeleton-line {
  height: 1.1em; width: 60%; margin: 4px auto 8px; border-radius: 6px;
  background: linear-gradient(90deg, var(--fill-soft), var(--fill-hover), var(--fill-soft));
  background-size: 200% 100%; animation: wcShimmer 1.3s ease-in-out infinite;
}
[data-screen="dual-card"] .wc-scroll.is-loading .wc-coach { opacity: .72; }

@keyframes wcShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  [data-screen="dual-card"] .wc-arc-fill { transition: none; }
  [data-screen="dual-card"] .wc-skeleton-line { animation: none; }
}