/*
 * 九星気学的四張星卡（plates/nstar.ts）。
 *
 * 依五行上色（2026-09-26 會議建議：一白水星用藍、九紫火星用紅紫…）。
 * 比對服務的頁面整頁明示 light（見 MatchingPageRenderer.page），所以這裡只定義淺色。
 */

.ns-plate {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.25rem 0;
}

/* 手機：2×2 */
@media (max-width: 480px) {
  .ns-plate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ns-card {
  border: 1px solid var(--ns-line);
  border-radius: 0.75rem;
  background: var(--ns-bg);
  color: var(--ns-ink);
  padding: 0.75rem 0.5rem;
  text-align: center;
}

.ns-position {
  font-size: 0.75rem;
  color: var(--ch-muted, #68717d);
  margin-bottom: 0.25rem;
}

.ns-name {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.ns-card--WATER { --ns-bg: #eff6ff; --ns-line: #bfdbfe; --ns-ink: #1e3a8a; }
.ns-card--WOOD  { --ns-bg: #f0fdf4; --ns-line: #bbf7d0; --ns-ink: #14532d; }
.ns-card--FIRE  { --ns-bg: #fdf2f8; --ns-line: #fbcfe8; --ns-ink: #831843; }
.ns-card--EARTH { --ns-bg: #fefce8; --ns-line: #fde68a; --ns-ink: #713f12; }
.ns-card--METAL { --ns-bg: #f8fafc; --ns-line: #cbd5e1; --ns-ink: #334155; }

/* 差異盤：亮相同 —— 不同的星退成淡色，相同的星加粗框 */
.ns-plate--diff .ns-card { opacity: 0.45; }
.ns-plate--diff .ns-card.is-same { opacity: 1; box-shadow: 0 0 0 2px var(--ns-line) inset; border-color: var(--ns-ink); }