/* ============================================================
   resonance.css —— 只服务 resonance.html（共鸣码）。
   搜索优先：86 个角色不铺开成 86 张卡片，默认只给可点的角色名索引，
   输入或点击之后才出卡片。改这一页只动本文件 + js/resonance.js + data/resonance.json。
   ============================================================ */

.rc-hint {
  margin: 14px 0 0;
  font-size: 13px; color: var(--ink-mute);
}
.rc-hint b { color: var(--gold); font-weight: 600; }

/* ---------- 角色名索引：可点的标签云 ---------- */

.rc-index {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-block: 14px 4px;
}
.rc-index button {
  padding: 5px 10px;
  font-family: inherit; font-size: 13px;
  color: var(--ink-dim);
  background: var(--bg-raise);
  border: 1px solid var(--line); border-radius: 4px;
  cursor: pointer;
}
.rc-index button:active { transform: translateY(1px); }

.rc-index .rc-group {
  width: 100%;
  margin: 10px 0 2px;
  font-size: 11px; letter-spacing: .18em; color: var(--ink-mute);
}
.rc-index .rc-group:first-child { margin-top: 0; }

/* ---------- 结果卡片 ---------- */

.rc-list { margin: 0; padding-block: 16px 4px; list-style: none; }

.rc {
  padding: 15px;
  margin-bottom: 10px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.rc-name {
  margin: 0 0 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 19px; font-weight: 600; letter-spacing: .05em;
}
.rc.is-generic .rc-name { color: var(--gold); }

/* 一套方案 */
.rc-scheme { padding-top: 11px; }
.rc-scheme + .rc-scheme {
  margin-top: 12px;
  border-top: 1px dashed var(--line);
}

.rc-line { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.rc-reso { font-size: 15px; font-weight: 600; color: var(--ink); }
.rc-tune {
  font-size: 12px; color: var(--ink-dim);
  padding: 1px 7px;
  border: 1px solid var(--line); border-radius: 3px;
}
.rc-tune::before { content: "调频 "; color: var(--ink-mute); }

.rc-note { margin: 6px 0 0; font-size: 13px; color: var(--ink-dim); }

/* 分享码：手机上放不下就横向滚动，不撑破卡片 */
.code-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 9px 11px;
  background: var(--bg-sink);
  border: 1px solid var(--line); border-radius: 8px;
}
.code-row code {
  flex: 1; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
  font-size: 12px; color: var(--ink);
  white-space: nowrap; overflow-x: auto;
  scrollbar-width: none;
}
.code-row code::-webkit-scrollbar { display: none; }

/* ---------- 出处 ---------- */

.rc-source {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-mute);
}

@media (min-width: 768px) {
  .rc-index button:hover { color: var(--ink); border-color: var(--gold); }
  .rc { padding: 17px 18px; }
  .rc-name { font-size: 20px; }
}