.difficulty-badge {
  --difficulty-color: #5f3dcc;
  --difficulty-bg: #faf8ff;
  --difficulty-border: #e2daf8;
  display: inline-flex;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--difficulty-border);
  border-radius: 999px;
  background: var(--difficulty-bg);
  color: var(--difficulty-color);
  font-family: var(--sans, var(--vv-font, Arial, sans-serif));
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
}

.difficulty-badge--medium {
  --difficulty-bg: #eee8ff;
  --difficulty-border: #d7caf8;
}

.difficulty-badge--hard {
  --difficulty-bg: #ded3fb;
  --difficulty-border: #c6b5f2;
}

.difficulty-badge__bars {
  display: inline-flex;
  height: 18px;
  align-items: flex-end;
  gap: 3px;
}

.difficulty-badge__bar {
  display: block;
  width: 5px;
  border: 1.5px solid #cfc3f1;
  border-radius: 3px 3px 1px 1px;
  background: transparent;
  box-sizing: border-box;
}

.difficulty-badge__bar:nth-child(1) { height: 8px; }
.difficulty-badge__bar:nth-child(2) { height: 13px; }
.difficulty-badge__bar:nth-child(3) { height: 18px; }
.difficulty-badge__bar.is-filled {
  border-color: currentColor;
  background: currentColor;
}

.game-card-body > .difficulty-badge {
  margin-top: 10px;
}

.event-detail__content > .difficulty-badge {
  margin: -7px 0 14px;
}

.difficulty-badge--preview {
  margin: 2px 0 6px;
}

@media (max-width: 767px) {
  .difficulty-badge {
    min-height: 32px;
    padding: 6px 11px;
    font-size: 12px;
  }
}