/* Correct the archived active navigation item before deferred JavaScript runs. */
/* The archived social icons are placeholders until /api/social-links loads. */
footer div:has(> a[aria-label="X"]):not([data-skc-social-ready]) {
  visibility: hidden;
}

/* Keep the first painted header identical to the runtime-enhanced layout. */
html:not([data-skc-auth-hint="member"]) header :is(
  button[aria-label="Notifications"],
  button[aria-label="Уведомления"],
  .skc-pop-anchor:has(> button[aria-label="Notifications"]),
  .skc-pop-anchor:has(> button[aria-label="Уведомления"])
) {
  display: none;
}

header a:is([aria-label="Help"], [aria-label="Help Center"], [aria-label="Помощь"]) {
  height: 46px;
}

header button:is([aria-label="Notifications"], [aria-label="Уведомления"]) {
  width: 46px;
  height: 46px;
  padding: 0;
}

header button:is([aria-label="Settings"], [aria-label="Настройки"]) {
  width: 38px;
  height: 46px;
  padding: 0;
}

header :is([data-auth-skeleton], [data-skc-auth-placeholder]) {
  gap: 11px;
  flex-shrink: 0;
}

header :is([data-auth-skeleton], [data-skc-auth-placeholder]),
header :is([data-auth-skeleton], [data-skc-auth-placeholder]) * {
  animation: none !important;
}

header :is([data-auth-skeleton], [data-skc-auth-placeholder]) > div:first-child {
  width: 196px;
  height: 46px;
  border-radius: 8px;
}

header :is([data-auth-skeleton], [data-skc-auth-placeholder]) > div:nth-child(2) {
  width: 44px;
  height: 44px;
  border-radius: 8px;
}

header :is([data-auth-skeleton], [data-skc-auth-placeholder])::after {
  content: '';
  width: 14px;
  height: 14px;
}

@media (max-width: 1350px) {
  header :is([data-auth-skeleton], [data-skc-auth-placeholder]) > div:first-child {
    width: 46px;
  }
}

@media (max-width: 900px) and (min-width: 768px) {
  header :is([data-auth-skeleton], [data-skc-auth-placeholder]) > div:first-child {
    display: none;
  }
}

@media (max-width: 767px) {
  header button:is([aria-label="Settings"], [aria-label="Настройки"]) {
    width: 42px;
    flex-shrink: 0;
  }

  header :is([data-auth-skeleton], [data-skc-auth-placeholder]) > div:first-child {
    width: 110px;
    height: 42px;
  }
}

header [data-skc-auth-pending] {
  position: relative;
}

header [data-skc-auth-pending] > [data-steam-auth] {
  display: none;
}

header [data-skc-auth-placeholder] {
  transition: opacity 240ms ease;
}

header [data-skc-auth-placeholder].is-leaving {
  opacity: 0;
}

header [data-skc-auth-pending] > .skc-account-enter {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

header [data-skc-auth-pending] > .skc-account-enter.is-visible {
  opacity: 1;
}

html:not([data-skc-runtime-ready]) header [class*="gap-7"] > :is(button, a[href*="/market"], a[href*="/giveaways"], a[href*="/tools"]) {
  color: #97979b !important;
}

html:not([data-skc-runtime-ready]) header [class*="gap-7"] > :is(button, a[href*="/market"], a[href*="/giveaways"], a[href*="/tools"])::after {
  width: 0 !important;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.6) !important;
}

html:not([data-skc-runtime-ready]) header [class*="gap-7"] > :is(button, a[href*="/market"], a[href*="/giveaways"], a[href*="/tools"]):hover {
  color: #fff !important;
}

html:not([data-skc-runtime-ready]) header [class*="gap-7"] > :is(button, a[href*="/market"], a[href*="/giveaways"], a[href*="/tools"]):hover::after {
  width: 100% !important;
}

html:not([data-skc-runtime-ready]):has(link[rel="canonical"][href*="/sell"]) header [class*="gap-7"] > button,
html:not([data-skc-runtime-ready]):has(link[rel="canonical"][href*="/market"]) header [class*="gap-7"] > a[href*="/market"],
html:not([data-skc-runtime-ready]):has(link[rel="canonical"][href*="/giveaways"]) header [class*="gap-7"] > a[href*="/giveaways"],
html:not([data-skc-runtime-ready]):has(link[rel="canonical"][href*="/tools"]) header [class*="gap-7"] > a[href*="/tools"] {
  color: #3dff9e !important;
}

html:not([data-skc-runtime-ready]):has(link[rel="canonical"][href*="/sell"]) header [class*="gap-7"] > button::after,
html:not([data-skc-runtime-ready]):has(link[rel="canonical"][href*="/market"]) header [class*="gap-7"] > a[href*="/market"]::after,
html:not([data-skc-runtime-ready]):has(link[rel="canonical"][href*="/giveaways"]) header [class*="gap-7"] > a[href*="/giveaways"]::after,
html:not([data-skc-runtime-ready]):has(link[rel="canonical"][href*="/tools"]) header [class*="gap-7"] > a[href*="/tools"]::after {
  width: 100% !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.7) !important;
}

/* A short, soft bell ring when the notification control is hovered. */
@keyframes skc-notification-bell-ring {
  0%, 100% { transform: rotate(0deg); }
  18% { transform: rotate(-12deg); }
  36% { transform: rotate(10deg); }
  54% { transform: rotate(-7deg); }
  70% { transform: rotate(5deg); }
  84% { transform: rotate(-2deg); }
}

header button:is([aria-label="Notifications"], [aria-label="Уведомления"]) > svg {
  transform-origin: 50% 14%;
  will-change: transform;
}

header button:is([aria-label="Notifications"], [aria-label="Уведомления"]):hover > svg {
  animation: skc-notification-bell-ring 700ms cubic-bezier(.36, .07, .19, .97) both;
}

@media (prefers-reduced-motion: reduce) {
  header button:is([aria-label="Notifications"], [aria-label="Уведомления"]):hover > svg {
    animation: none;
  }
}

/* Keep the long Russian privacy-policy title inside narrow screens. */
@media (max-width: 1023px) {
  html:has(link[rel="canonical"][href*="/ru/privacy-policy/"]) h1 {
    max-width: 100%;
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.12;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
}

@media (max-width: 639px) {
  html:has(link[rel="canonical"][href*="/ru/privacy-policy/"]) h1 {
    font-size: clamp(22px, 6vw, 28px);
  }
}