/* ============================================================
   euphoria.css —— 只服务 euphoria.html（狂想推荐度）。
   卡片外壳、键值行、时间戳沿用 list.css，这里只加这一页独有的：
   推荐度分档标题、档位徽标、机制标签、筛选按钮、没有头像时的占位块。

   分档颜色只借 base.css 里已有的四个色（gold / live / ink-mute / seal），
   不新增颜色变量：五档靠「亮 → 暗」的明度梯度区分，不靠色相打架。
   ============================================================ */

/* ---------- 筛选区 ---------- */

/* 搜索框和清空按钮一行：清空是隐藏态时不占位，所以用 flex 而不是绝对定位 */
.kx-filter { display: flex; gap: 8px; align-items: stretch; }
.kx-filter input { flex: 1 1 auto; min-width: 0; }
.kx-clear { flex: none; align-self: stretch; }

.picks {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding-block: 10px 2px;
}
.pick {
  padding: 5px 12px;
  font: inherit; font-size: 13px; color: var(--ink-dim);
  background: none;
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer;
}
.pick.is-on { color: var(--bg); background: var(--gold); border-color: var(--gold); }

/* ---------- 名单：抄共鸣码页的可点标签云，样式刻意一致 ---------- */

.kx-hint {
  display: flex; align-items: baseline; gap: 10px;
  margin: 12px 0 0;
  font-size: 13px; color: var(--ink-mute);
}
.kx-hint b { color: var(--gold); font-weight: 600; }

/* 名单的收起按钮：和档位标题右侧那个「收起」同一套样子 */
.fold-btn {
  margin-left: auto; flex: none;
  padding: 2px 0;
  font-family: var(--sans); font-size: 11px; letter-spacing: .08em;
  color: var(--gold); background: none; border: 0;
  cursor: pointer;
}

.kx-index {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-block: 12px 4px;
}
.kx-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;
}
.kx-index button:active { transform: translateY(1px); }

/* ---------- 分档 ---------- */

.tier { padding-top: 14px; }

/* 标题就是收起按钮：整条可点，手机上不用瞄准小图标 */
.tier-sect { margin: 0; }
.tier-head {
  display: flex; align-items: baseline; gap: 9px;
  width: 100%;
  padding: 4px 0;
  font: inherit;
  font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: .08em;
  color: var(--ink); text-align: left;
  background: none; border: 0;
  cursor: pointer;
}
.tier-head::before {
  content: ""; flex: none;
  width: 3px; height: 15px;
  background: var(--edge, var(--ink-mute));
}
.tier-head i {
  font-style: normal; font-size: 11px; letter-spacing: .06em; color: var(--ink-mute);
  font-family: var(--sans); font-weight: 400;
}
/* 收起 / 展开 的字样推到最右边，和兑换码页的展开按钮同一套说法 */
.tier-head .fold {
  margin-left: auto; flex: none;
  font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: .08em;
  color: var(--gold);
}
.tier .list { padding-block: 10px 0; }

/* 五档的强调色：推荐最亮，往下逐级压暗 */
.tier[data-tier="rec"]  { --edge: var(--gold); }
.tier[data-tier="good"] { --edge: var(--live); }
.tier[data-tier="mid"]  { --edge: var(--ink-dim); }
.tier[data-tier="meh"]  { --edge: var(--ink-mute); }
.tier[data-tier="no"]   { --edge: var(--seal); }

/* ---------- 卡片内 ---------- */

/* 没有头像的角色（没进心相表的那几个）用名字首字占位，
   比留空洞好：卡片高度一致，列表不会看起来缺一块 */
.face-ph {
  flex: none;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  font-family: var(--serif); font-size: 20px; color: var(--ink-mute);
  background: var(--bg-sink);
  border: 1px solid var(--line); border-radius: 6px;
}

/* 档位徽标：筛选后卡片会脱离分档标题，所以每张卡自己也要标一下 */
.tier-tag {
  flex: none;
  padding: 1px 8px;
  font-size: 11px; letter-spacing: .06em; color: var(--edge, var(--ink-mute));
  border: 1px solid currentColor; border-radius: 3px;
}

/* 狂想名：这一页的主角，用衬线放大，和角色名区分开 */
.eu-name {
  display: block;
  margin-bottom: 8px;
  font-family: var(--serif); font-size: 15px; letter-spacing: .04em;
  color: var(--gold);
}

/* 机制标签：wiki 原文是一串空格分隔的词，拆成小块才扫得动。
   老狂想 wiki 没标这套标签，整块不渲染，不占高度 */
.mech { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.mech span {
  padding: 1px 7px;
  font-size: 11px; color: var(--ink-dim);
  background: var(--bg-sink);
  border: 1px solid var(--line); border-radius: 3px;
}

/* 双狂想的提醒：一条淡灰小字，别抢评价的位置 */
.dual-note {
  margin: 8px 0 0;
  font-size: 11px; letter-spacing: .04em; color: var(--ink-mute);
}

@media (min-width: 768px) {
  .face-ph { width: 52px; height: 52px; font-size: 22px; }
  .tier-head { font-size: 17px; }
}