/* Shared by map cards, score rows, leaderboards, and player profiles. */
.calculator-badges { display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; }
.shared-skill-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: var(--theme-space-3);
  min-width: 0;
}

.shared-skill-stat {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  min-width: 0;
  padding-bottom: 0;
  width: var(--skill-width, 88px);
  max-width: 100%;
  text-align: var(--skill-align, end);
}

.shared-skill-stat.show-label,
.shared-skill-strip.show-labels .shared-skill-stat {
  grid-template-columns: 1fr;
}

.shared-skill-strip .shared-skill-stat { width: 100%; }

/* The game's skill glyphs (Rendering/SkillIcons.cs), in the text color. */
.beatori-skill-icon { flex: none; vertical-align: -0.18em; }

.shared-skill-label {
  display: flex;
  align-items: center;
  justify-content: var(--skill-align, end);
  gap: 6px;
  color: var(--theme-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.shared-skill-stat strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.shared-skill-count {
  align-self: end;
  color: var(--theme-text-muted);
  font-size: 0.75rem;
}

.shared-skill-bar {
  position: relative;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: var(--theme-radius-pill);
  background: var(--theme-surface-raised);
}

.shared-skill-bar::after {
  content: "";
  display: block;
  width: var(--fill);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
}

.shared-skill-stat.stream .shared-skill-label,
.shared-skill-stat.stream strong,
.shared-skill-stat.stream .shared-skill-bar {
  color: var(--theme-cyan);
}

.shared-skill-stat.speed .shared-skill-label,
.shared-skill-stat.speed strong,
.shared-skill-stat.speed .shared-skill-bar {
  color: var(--theme-gold);
}

.shared-skill-stat.jack .shared-skill-label,
.shared-skill-stat.jack strong,
.shared-skill-stat.jack .shared-skill-bar {
  color: var(--theme-red);
}

.shared-skill-stat.ln .shared-skill-label,
.shared-skill-stat.ln strong,
.shared-skill-stat.ln .shared-skill-bar {
  color: var(--skill-ln);
}

.shared-skill-stat.overall .shared-skill-label,
.shared-skill-stat.overall strong {
  color: var(--theme-text);
}

@media (max-width: 620px) {
  .shared-skill-strip {
    gap: var(--theme-space-2);
  }

  .shared-skill-label,
  .shared-skill-count {
    font-size: 0.75rem;
  }
}
.shared-skill-stat[data-keymode] .shared-skill-label,
.shared-skill-stat[data-keymode] strong { color: var(--skill-color, var(--theme-text-muted)); }