/* ============ TIER STARS (5 级评分系统) ============ */
/* 5 颗星,每多一颗色调越往主色偏 */
.tier-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: middle;
}
.tier-stars .star {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") no-repeat center / contain;
  transition: transform 0.15s;
}
.tier-stars .star.empty {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
  border-radius: 0;
}

/* 5 个等级的不同色调 (跟 Soft Glass v2 主色 #5b6cd1 + 强调 #f59e9e 协调) */
.tier-stars.tier-I { color: #b8b6b0; }            /* 灰:空心感强 */
.tier-stars.tier-II { color: #c9a87c; }           /* 暖沙土 */
.tier-stars.tier-III { color: #f59e9e; }          /* 柔粉 (强调色) */
.tier-stars.tier-IV { color: #5b6cd1; }           /* 紫蓝主色 */
.tier-stars.tier-V {
  background: linear-gradient(135deg, #5b6cd1 0%, #8c9ce0 50%, #f59e9e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.tier-stars.tier-V .star {
  /* V 用渐变不能用 mask currentColor,改成 inline SVG */
  background: linear-gradient(135deg, #5b6cd1 0%, #8c9ce0 50%, #f59e9e 100%);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") no-repeat center / contain;
}

/* size 变量 */
.tier-stars.size-xs { font-size: 10px; gap: 1px; }
.tier-stars.size-sm { font-size: 12px; }
.tier-stars.size-md { font-size: 16px; }
.tier-stars.size-lg { font-size: 22px; gap: 3px; }
.tier-stars.size-xl { font-size: 32px; gap: 4px; }

/* 5 颗全亮的发光效果 */
.tier-stars.glow { filter: drop-shadow(0 0 6px rgba(91,108,209,0.4)); }

/* 带文字标签 (横向) */
.tier-stars-labeled {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.65rem;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
}
.tier-stars-labeled.tier-I { color: #8b8982; background: #f4f3ef; border-color: #e8e6e0; }
.tier-stars-labeled.tier-II { color: #a07d4a; background: rgba(201,168,124,0.10); border-color: rgba(201,168,124,0.30); }
.tier-stars-labeled.tier-III { color: #c47272; background: rgba(245,158,158,0.10); border-color: rgba(245,158,158,0.30); }
.tier-stars-labeled.tier-IV { color: #3f4ec4; background: rgba(91,108,209,0.10); border-color: rgba(91,108,209,0.30); }
.tier-stars-labeled.tier-V { color: #2a3a9c; background: linear-gradient(135deg, rgba(91,108,209,0.15) 0%, rgba(245,158,158,0.15) 100%); border-color: rgba(91,108,209,0.40); }

/* tier-card 大卡片版本 */
.tier-star-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 1.25rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: var(--shadow-sm);
}
.tier-star-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: currentColor;
  opacity: 0.6;
}
.tier-star-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tier-star-card.tier-I { color: #b8b6b0; }
.tier-star-card.tier-II { color: #c9a87c; }
.tier-star-card.tier-III { color: #f59e9e; }
.tier-star-card.tier-IV { color: #5b6cd1; }
.tier-star-card.tier-V {
  background: linear-gradient(135deg, rgba(91,108,209,0.06) 0%, rgba(245,158,158,0.06) 100%);
  border-color: rgba(91,108,209,0.30);
}
.tier-star-card.tier-V::before { background: linear-gradient(135deg, #5b6cd1 0%, #f59e9e 100%); }
.tier-star-card.current {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.tier-star-card.current::after {
  content: '你在这里';
  position: absolute;
  top: 8px; right: 8px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--primary);
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.1em;
  border: 1px solid var(--primary-soft);
}
.tier-star-card .stars {
  margin-bottom: 0.75rem;
}
.tier-star-card .desc {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0.85rem;
  min-height: 1.7em;
  text-align: center;
}
.tier-star-card .req {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.6;
  text-align: center;
}
.tier-star-card .reward {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: currentColor;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--line);
  text-align: center;
  width: 100%;
}

@media (max-width: 700px) {
  .tier-stars.size-xl { font-size: 24px; }
}