/* cards.css — 武器卡片网格 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
.card {
  position: relative;
  display: block;
  padding: 12px 12px 10px;
  background: #202024;
  border: 1px solid #32323a;
  border-left: 3px solid #f0a030;   /* 传奇橙 */
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: background .12s;
}
.card:hover, .card:focus-visible { background: #28282e; }

.card .name { font-size: 15.5px; font-weight: 600; color: #f0c060; }
.card .en { font-size: 12px; color: #999; margin-top: 1px; }
.tier-badge {
  position: absolute; top: 10px; right: 10px;
  font-size: 11.5px; font-weight: 700; line-height: 1;
  padding: 4px 7px; border-radius: 6px;
}
.tier-t0 { background: #6e1414; color: #ff9c9c; }
.tier-t1 { background: #6e4310; color: #ffc987; }
.tier-t2 { background: #23405c; color: #9cc8ef; }

.card .meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-top: 8px; font-size: 12.5px; color: #b8b8be;
}
.dot {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; vertical-align: -1px;
}
.tag {
  padding: 2px 7px; border-radius: 5px;
  background: #2b2b32; color: #c0c0c6; font-size: 11.5px;
}
.card .src { margin-top: 7px; font-size: 12.5px; color: #9a9aa2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 元素色 */
.el-kinetic    { background: #b0b0b8; }
.el-fire       { background: #e2571e; }
.el-shock      { background: #38a0ff; }
.el-corrosive  { background: #8bc634; }
.el-cryo       { background: #8fd8f0; }
.el-radiation  { background: #e0c437; }

/* 角色徽章（简写首字，卡片上紧凑显示，模态里给全名） */
.role-amara  { color: #c77bff; }
.role-fl4k   { color: #7fd862; }
.role-moze   { color: #ffb35c; }
.role-zane   { color: #6fc3ff; }

@media (max-width: 640px) {
  /* minmax(0,1fr): 卡片 .src 的 nowrap 不许把轨道最小宽撑爆 */
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .card { padding: 10px 9px 9px; }
  .card .name { font-size: 14px; }
  .card .src { font-size: 11.5px; }
  .tier-badge { top: 8px; right: 8px; }
}