.hero-tags {
  --steel-line: rgba(255, 255, 255, 0.12);
  --amber: #ff9d22;

  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.tag-anchor {
  width: 0;
  height: 0;
}

.tag {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, -36px) scale(var(--tag-scale, 0.9));
  transform-origin: 50% 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 5px;
  white-space: nowrap;
  background: #10161c;
  border: 1px solid var(--steel-line);
  border-radius: 3px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  opacity: var(--tag-opacity, 1);
  font-family: Rajdhani, "Arial Narrow", sans-serif;
}

.tag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #10161c;
}

.tag-rank {
  width: 22px;
  height: 22px;
  display: block;
  image-rendering: auto;
}

.tag-body {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.tag-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: #f2f5f8;
  text-transform: uppercase;
}

.tag-lv {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--amber);
  text-transform: uppercase;
}

.tag-flag {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 2px;
  margin-left: 2px;
}

.tag-flag--host {
  color: #1a1004;
  background: linear-gradient(180deg, #ffb347, #ef8a12);
}

.tag-flag--ready {
  color: #0b1a10;
  background: linear-gradient(180deg, #6ee7a0, #2fb46c);
}

.tag--empty {
  background: #0e1318;
  border-style: dashed;
  border-color: rgba(255, 157, 34, 0.3);
  padding: 6px 12px;
}

.tag--empty::after {
  border-top-color: #0e1318;
}

.tag-open {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(226, 231, 236, 0.56);
  text-transform: uppercase;
}

.tag-invite {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--amber);
  text-transform: uppercase;
}