/* Credits badge in nav */

.nav-credits {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  margin-inline-end: 8px;
  font-size: 14px;
  font-weight: 900;
  color: var(--ink);
  background: #b8fff5;
  border: 4px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-sticker);
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.nav-credits-icon {
  color: #009e8e;
  font-size: 12px;
  line-height: 1;
}

.nav-credits-count {
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
}

.nav-credits.is-low {
  background: #ffe8b8;
}

@media (max-width: 720px) {
  .nav-credits {
    padding: 6px 12px;
    margin-inline-end: 4px;
  }
}