/* 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); }

/* in a profile's badge row each badge is trimmed to its own shape (fitBadge), with an even gap between */
.llpage-badges.badges { gap: 10px; }
.llpage-badges .badge.fit { width: auto; aspect-ratio: var(--k); }

/* while a badge's name tag is showing, its row (and the profile header) sit above every other part of the page,
   so the tag is never hidden behind the name, bio or buttons, even when those have been moved or layered */
.llpage-badges:has(.badge:hover, .badge:focus-visible, .badge.open) { position: relative; z-index: 999 !important; }
.llpage-head:has(.badge:hover, .badge:focus-visible, .badge.open) { position: relative; z-index: 50; }