body {
  background: #0d0d11;
  color: #e2e8f0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: clip;
}

.spotlight-card-active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15) 0%, #0d0d11 100%);
}

.spotlight-card-active:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25) 0%, rgba(var(--accent-rgb), 0.15) 50%, #0d0d11 100%);
}

.spotlight-card-idle {
  background: #121216;
}

.spotlight-card-idle:hover {
  background: #181820;
}

.steam-green-tag {
  background-color: var(--accent-dark);
  color: #ffffff;
}

.steam-dark-tag {
  background-color: #26262b;
  color: var(--accent);
}

.skeleton-pulse {
  background: linear-gradient(90deg, #181214 25%, #261a1d 50%, #181214 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.clean-rank-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  background: rgba(7, 7, 9, 0.85) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f1f5f9 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  z-index: 20 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  pointer-events: none !important;
}

.card-standard-hover {
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.card-standard-hover:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), .2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

.card-standard-hover:hover img {
  transform: scale(1.03);
}

.card-standard-hover:hover .info-text-area {
  background: rgba(var(--accent-rgb), .08) !important;
}

.clipper-grid-card:hover h4,
.card-standard-hover:hover h4,
#registryRealContent a:hover h4,
#podiumShowcase a:hover h4 {
  color: var(--accent) !important;
}

#registryRealContent .brand-accent,
#podiumShowcase .brand-accent,
.clipper-grid-card .brand-accent {
  color: var(--accent) !important;
}

@keyframes rank1Shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes rank2Shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes rank3Shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Primary nav bar sticky configurations */
.primary-sticky-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background-color: #070709 !important;
  width: 100% !important;
  backdrop-filter: blur(16px);
  background: rgba(7, 7, 9, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#registryRealContent {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.rank-label-1 {
  color: #fbbf24;
}

.rank-label-2 {
  color: #cbd5e1;
}

.rank-label-3 {
  color: #d97706;
}

.letter-avatar {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  user-select: none;
}