/* Badge medals — icon-only; meaning via hover flyout */

.badge-tag {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  outline: none;
  vertical-align: top;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.badge-tag__medal {
  display: block;
}

.badge-tag--pill .badge-tag__medal {
  width: 44px;
  height: 44px;
}

.badge-tag--micro .badge-tag__medal {
  width: 28px;
  height: 28px;
}

.badge-tag:hover,
.badge-tag:focus-visible {
  z-index: 60000;
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.badge-tag:focus-visible {
  outline: 2px solid var(--green, #b5ff3c);
  outline-offset: 3px;
  border-radius: 8px;
}

html[data-theme="light"] .badge-tag:focus-visible {
  outline-color: #7560ff;
}

.badge-tag .badge-flyout {
  bottom: calc(100% + 10px);
  top: auto;
  transform: translateX(-50%) translateY(8px) scale(0.98);
}

.badge-tag:hover .badge-flyout,
.badge-tag:focus-visible .badge-flyout {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.badge-tag .badge-flyout::after {
  top: auto;
  bottom: -9px;
  border-bottom-color: transparent;
  border-top-color: #d4dafb;
}

.badge-pill-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

main .grid .card .badge-pill-strip,
.featured-player-panel .player .badge-pill-strip {
  margin: 8px 0 0;
}

.badge-micro-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.layout .grid .card .badge-micro-strip {
  margin: 0 0 10px;
}

.badge-tag--pill .badge-tag__medal .badge-emblem__icon svg {
  width: 22px;
  height: 22px;
}

.badge-tag--micro .badge-tag__medal .badge-emblem__icon svg {
  width: 15px;
  height: 15px;
}

.badge-tag--pill .badge-tag__medal .badge-emblem__shell {
  padding: 4px;
}

.badge-tag--micro .badge-tag__medal .badge-emblem__shell {
  padding: 2px;
}

.badge-tag__label {
  display: none !important;
}