/* Profile badges: emblems under a streamer's name; the name slides in above on hover, focus or tap */
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.badge {
  position: relative; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 50%; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / .45));
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), filter .3s;
}
.badge svg { width: 100%; height: 100%; display: block; overflow: visible; }
.badge:hover, .badge:focus-visible, .badge.open { transform: translateY(-2px) scale(1.12); filter: drop-shadow(0 6px 10px rgb(0 0 0 / .55)); }
.badge:focus-visible { outline: none; }

/* earned more than once: a small, quiet count tucked into the bottom-right corner */
.badge .mult {
  position: absolute; right: -5px; bottom: -3px; z-index: 2;
  height: 12px; padding: 0 3.5px; border-radius: 6px;
  display: inline-flex; align-items: center;
  font: 700 8.5px/1 "Public Sans", sans-serif; letter-spacing: 0; color: rgb(255 255 255 / .92);
  background: rgb(18 18 20 / .82); box-shadow: 0 0 0 1px rgb(255 255 255 / .16);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.badge .mult i { font-style: normal; font-size: 7px; opacity: .55; margin-right: .5px; }
.badge .mult + .tick, .badge .mult ~ .tick { right: auto; left: -1px; }

/* verified tick: a small coral seal at the bottom right */
.badge .tick {
  position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%;
  background: #fb9280 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.4l2.2 2.2 4.8-5' fill='none' stroke='%231a1a1a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/6px no-repeat;
  box-shadow: 0 0 0 1.5px #17181b;
}

/* the name tag */
.badge-tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 5;
  padding: 7px 11px; border-radius: 10px; white-space: nowrap; pointer-events: none;
  font: 700 12.5px/1.2 "Public Sans", sans-serif; letter-spacing: -.005em; color: #f8f6f2;
  background: rgb(22 22 24 / .92); border: 1px solid rgb(255 255 255 / .12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgb(0 0 0 / .45);
  opacity: 0; transform: translate(calc(-50% + var(--shift, 0px)), 6px) scale(.96); transform-origin: 50% 100%;
  transition: opacity .25s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}
.badge-tip::after {
  content: ""; position: absolute; left: calc(50% - var(--shift, 0px)); top: 100%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: rgb(22 22 24 / .92); border-right: 1px solid rgb(255 255 255 / .12); border-bottom: 1px solid rgb(255 255 255 / .12);
  transform: rotate(45deg);
}
.badge:hover .badge-tip, .badge:focus-visible .badge-tip, .badge.open .badge-tip { opacity: 1; transform: translate(calc(-50% + var(--shift, 0px)), 0) scale(1); }
.badge:hover, .badge:focus-visible, .badge.open { z-index: 6; }

@media (prefers-reduced-motion: reduce) {
  .badge, .badge-tip { transition: opacity .2s; }
  .badge:hover, .badge:focus-visible, .badge.open { transform: none; }
}

/* a streamer's own badge (Pro): their picture inside a polished chrome ring */
.cbadge { display: block; width: 32px; height: 32px; padding: 2.5px; border-radius: 50%;
  background: conic-gradient(from 210deg, #f4f6fa, #8d939d, #ffffff, #6f7580, #e6e9ee, #9aa0aa, #f4f6fa);
  box-shadow: 0 2px 6px rgb(0 0 0 / .45), inset 0 0 0 .5px rgb(255 255 255 / .6); }
.cbadge img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #1c1d22; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .35); }