/* Shared country-tier badges for Discovery and Statistics. */
.gt-tier-badge {
  --gt-tier-rgb: 148, 163, 184;
  --gt-tier-ink: #64748b;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 28px;
  padding: 5px 9px 5px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(var(--gt-tier-rgb), .42);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(var(--gt-tier-rgb), .2), rgba(var(--gt-tier-rgb), .07)),
    var(--gt-card, #fff);
  color: color-mix(in srgb, var(--gt-tier-ink) 82%, var(--gt-text, #101820));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 5px 14px rgba(var(--gt-tier-rgb), .12);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .025em;
  line-height: 1;
  text-shadow: none;
  vertical-align: middle;
}

.gt-tier-badge::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -60% auto -60% -55%;
  width: 42%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .62), transparent);
  opacity: 0;
  transform: translateX(-180%) rotate(10deg);
  pointer-events: none;
}

.gt-tier-badge__icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(var(--gt-tier-rgb), .38);
  border-radius: 50%;
  background: rgba(var(--gt-tier-rgb), .16);
  color: var(--gt-tier-ink);
  font-size: .66rem;
}

.gt-tier-badge__label { white-space: nowrap; }

.gt-tier-bronze { --gt-tier-rgb: 184, 115, 51; --gt-tier-ink: #a85f22; }
.gt-tier-silver { --gt-tier-rgb: 148, 163, 184; --gt-tier-ink: #718096; }
.gt-tier-gold { --gt-tier-rgb: 234, 179, 8; --gt-tier-ink: #b77900; }
.gt-tier-diamond { --gt-tier-rgb: 56, 189, 248; --gt-tier-ink: #1281a7; }
.gt-tier-ruby { --gt-tier-rgb: 244, 63, 94; --gt-tier-ink: #d51f48; }
.gt-tier-emerald { --gt-tier-rgb: 16, 185, 129; --gt-tier-ink: #07845e; }
.gt-tier-hacker { --gt-tier-rgb: 168, 85, 247; --gt-tier-ink: #7e22ce; }

[data-bs-theme="dark"] .gt-tier-badge {
  color: color-mix(in srgb, rgb(var(--gt-tier-rgb)) 74%, #fff);
  background:
    linear-gradient(135deg, rgba(var(--gt-tier-rgb), .2), rgba(var(--gt-tier-rgb), .065)),
    var(--gt-card, #111b24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 6px 18px rgba(0, 0, 0, .18);
}

[data-bs-theme="dark"] .gt-tier-badge__icon {
  color: color-mix(in srgb, rgb(var(--gt-tier-rgb)) 78%, #fff);
}

.gt-tier-badge.is-tier-unlocked {
  animation: gt-tier-unlock-pop .72s cubic-bezier(.2, .85, .25, 1.2) both;
}

.gt-tier-badge.is-tier-unlocked::after {
  animation: gt-tier-unlock-shine .72s ease-out both;
}

@keyframes gt-tier-unlock-pop {
  0% { transform: scale(.88); box-shadow: 0 0 0 0 rgba(var(--gt-tier-rgb), .38); }
  48% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(var(--gt-tier-rgb), 0); }
  100% { transform: none; }
}

@keyframes gt-tier-unlock-shine {
  0% { opacity: 0; transform: translateX(-180%) rotate(10deg); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: translateX(520%) rotate(10deg); }
}

@media (max-width: 575.98px) {
  .gt-country-summary .gt-tier-badge {
    width: 28px;
    min-width: 28px;
    padding: 4px;
  }

  .gt-country-summary .gt-tier-badge__label { display: none; }
  .gt-country-summary .gt-tier-badge__icon { border: 0; background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .gt-tier-badge.is-tier-unlocked,
  .gt-tier-badge.is-tier-unlocked::after { animation: none !important; }
}
