.title-badge{
  --title-safe-width: 76%;
  --title-size-scale: 1;
  position: relative;
  display: inline-block;
  width: min(100%, 220px);
  line-height: 0;
  filter: drop-shadow(0 12px 20px rgba(2, 6, 23, 0.28));
}

.title-badge img{
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.title-badge.asset-only{
  width: min(100%, 260px);
}

.title-badge.asset-only img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

.title-badge.asset-only .title-text{
  display: none;
}

.title-badge .title-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 100%;
  max-width: var(--title-safe-width);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  font-size: clamp(12px, calc(13px * var(--title-size-scale)), 18px);
  color: #f8fbff;
  text-shadow:
    0 1px 0 rgba(2, 6, 23, 0.35),
    0 2px 10px rgba(2, 6, 23, 0.32);
  pointer-events: none;
}

.title-badge.size-hero{
  width: min(100%, 252px);
}

.title-badge.size-card{
  width: min(100%, 228px);
}

.title-badge.size-stat{
  width: min(100%, 210px);
}

.title-badge.size-pill{
  width: min(100%, 196px);
}

.title-badge.size-compact{
  width: min(100%, 172px);
}

.title-badge.common{
  --title-safe-width: 80%;
}

.title-badge.rare{
  --title-safe-width: 74%;
}

.title-badge.epic{
  --title-safe-width: 68%;
}

.title-badge.legendary{
  --title-safe-width: 64%;
}

.title-badge.event{
  --title-safe-width: 70%;
}

.title-badge.size-hero .title-text{
  font-size: clamp(13px, calc(16px * var(--title-size-scale)), 20px);
}

.title-badge.size-card .title-text{
  font-size: clamp(12px, calc(15px * var(--title-size-scale)), 17px);
}

.title-badge.size-stat .title-text{
  font-size: clamp(11px, calc(14px * var(--title-size-scale)), 16px);
}

.title-badge.size-pill .title-text{
  font-size: clamp(11px, calc(13px * var(--title-size-scale)), 14px);
}

.title-badge.size-compact .title-text{
  font-size: clamp(10px, calc(12px * var(--title-size-scale)), 13px);
}

.title-badge-host{
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.title-badge-host.block{
  display: block;
}

.title-badge-host.center{
  justify-content: center;
}

@media (max-width: 640px){
  .title-badge.size-hero{
    width: min(100%, 220px);
  }

  .title-badge.size-card{
    width: min(100%, 204px);
  }
}