/* ============================================================
   position.css —— 只服务 position.html（模块B2 站位）。
   卡片外壳沿用 list.css，这里改成「一行一个角色」：左边立绘+名字+结论标签，
   右边是从 wiki 抄来的原文节选。所以要把 list.css 桌面端的两列网格改回一列。
   ============================================================ */

.list { padding-block: 16px 8px; }

/* ---------- 角色索引：搜索框下面把 9 个人都摆出来，点了就筛 ---------- */

.pos-index {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-block: 12px 2px;
}
.pos-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;
}
.pos-index button:active { transform: translateY(1px); }
.pos-index button:first-child { color: var(--gold); }


/* 一行一个，桌面端也不分两列：右边的原文比较长，分两列会挤成豆腐块 */
@media (min-width: 768px) {
  .list { grid-template-columns: 1fr; }
}

.item.pos {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
  align-items: start;
}

/* ---------- 左栏：立绘 + 名字 + 结论 ---------- */

.pos-side { display: flex; flex-direction: column; align-items: center; gap: 7px; }

.pos-art {
  width: 76px; height: 96px;
  /* 图是人工挑的，构图别裁：contain 完整放进框里 */
  object-fit: contain;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-sink);
}
.pos-side .item-name { text-align: center; line-height: 1.3; }

.pos-rule {
  padding: 2px 8px;
  font-size: 11px; letter-spacing: .04em; white-space: nowrap;
  color: var(--gold);
  border: 1px solid var(--line); border-radius: 3px;
}

/* ---------- 右栏：结论 + 原文 ---------- */

.pos-tip {
  margin: 0 0 11px;
  font-size: 14px; line-height: 1.65; color: var(--ink);
}

.src { display: grid; gap: 9px; margin: 0; }
.src > div {
  padding-left: 10px;
  border-left: 2px solid var(--line);
}
.src dt {
  margin-bottom: 2px;
  font-size: 11px; letter-spacing: .08em; color: var(--gold);
}
.src dd {
  margin: 0;
  font-size: 13px; line-height: 1.7; color: var(--ink-dim);
}

@media (min-width: 768px) {
  .item.pos { grid-template-columns: 108px 1fr; gap: 20px; }
  .pos-art { width: 108px; height: 136px; }
  .pos-index button:hover { color: var(--ink); border-color: var(--gold); }
}