/* ── Rang lista screen ──────────────────────────────────────── */
#screen-rang { display: none; flex: 1; flex-direction: column; min-height: 0; }
#screen-rang.active { display: flex; }

.rang-body { flex: 1; overflow-y: auto; padding: 16px 20px; background: var(--clr-bg); }

/* Stat cards */
.stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.stat-card {
  border-radius: var(--r-lg);
  padding: 10px 12px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.stat-card:hover { opacity: 0.9; transform: translateY(-1px); }
.stat-card.dimmed { opacity: 0.45; }
.stat-label {
  font-size: var(--fs-2xs); font-weight: 600; margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.stat-num { font-size: 22px; font-weight: 700; }
.stat-sub { font-size: var(--fs-2xs); margin-top: 2px; }

/* Rang table */
.rang-table-wrap { overflow-x: auto; }
#rang-table { width: 100%; }
#rang-table th { white-space: nowrap; }
#rang-table td { white-space: nowrap; }
.rang-rank { color: var(--clr-muted); font-weight: 500; text-align: center; }
.rang-name { font-weight: 500; color: var(--clr-primary); max-width: 200px;
             overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.rang-name:hover { text-decoration: underline; color: var(--clr-accent); }
.rang-ipi  { font-weight: 600; font-size: var(--fs-md); }
.rang-kp   { color: #546e7a; }
.rang-ism-label { font-size: var(--fs-xs); font-weight: 500; }

.rang-empty {
  text-align: center; padding: 48px 20px;
  color: var(--clr-muted); font-size: var(--fs-sm);
}