/* ============================================================
   psychube.css —— 只服务 psychube.html（模块C 心相搭配）。
   卡片外壳、键值行、时间戳都在 list.css 里，跟另两页共用。
   这里只加心相页独有的部分：角色立绘头像 + 心相图标行。
   图片是 webp 带透明通道，深色底上直接叠，不要给它们加实底背景色。
   ============================================================ */

/* 有头像时卡片头部要垂直居中，list.css 默认的 baseline 会把图顶歪 */
.item-top.with-face { align-items: center; }
.item-top.with-face .item-name { flex: 1 1 auto; }

.face {
  flex: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-sink);
  /* 图已经在导出时裁成头肩方块了，这里不再二次裁 */
  object-fit: cover;
}

/* 心相按优先级从上往下排，第一个就是首选 */
.psy {
  display: grid; gap: 8px;
  margin: 0 0 11px; padding: 0;
  list-style: none;
}
.psy-row { display: flex; align-items: center; gap: 10px; }
.psy-ico {
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: 5px;
  background: var(--bg-sink);
}
.psy-name { font-size: 14px; color: var(--ink-dim); }
.psy-row.best .psy-name { color: var(--ink); font-weight: 600; }

/* 使用条件：中毒 / 短线 / 带纸圈这类前提，跟心相名分开显示才不会看串 */
.psy-cond {
  flex: none;
  padding: 1px 6px;
  font-size: 11px; color: var(--ink-mute);
  border: 1px solid var(--line); border-radius: 3px;
}
.psy-flag {
  margin-left: auto; flex: none;
  font-size: 11px; letter-spacing: .08em; color: var(--gold);
}

@media (min-width: 768px) {
  .face { width: 52px; height: 52px; }
}