/* pixel-badge */

.pixel-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-pixel);
  font-size: var(--font-size-pixel-min);
  text-transform: uppercase;
  background-color: var(--panel-light);
  border: 2px solid var(--border);
  color: var(--text-main);
  line-height: 1.4;
}

.pixel-badge--gold {
  background-color: var(--btn-gold);
  color: var(--text-dark);
}

.pixel-badge--green {
  background-color: var(--btn-green);
  color: var(--text-dark);
}

.pixel-badge--blue {
  background-color: var(--btn-blue);
  color: var(--text-main);
}

.pixel-badge--red {
  background-color: var(--btn-red);
  color: var(--text-main);
}

.pixel-badge__icon {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.pixel-badge--earned {
  box-shadow: 0 0 0 2px var(--btn-gold);
}

@media (max-width: 479px) {
  .pixel-badge {
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: none;
    font-size: var(--font-size-xs);
  }
}