/* 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--boss {
  background: linear-gradient(180deg, #c62828 0%, #7f1010 100%);
  border-color: var(--btn-gold);
  color: #fff8e7;
  letter-spacing: 0.06em;
  box-shadow:
    0 0 0 1px rgba(255, 200, 60, 0.35),
    0 0 10px rgba(198, 40, 40, 0.45);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.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);
  }
}