/* Silkroad-themed scrollbar */
:root{
  --sr-scroll-track: #0f1011; /* very dark track */
  --sr-scroll-thumb-dark: #2f2f2f; /* base thumb color */
  --sr-scroll-gold-light: #f6d365;
  --sr-scroll-gold-mid:  #fda085;
  --sr-scroll-gold-dark: #c99b3b;
  --sr-scroll-width: 10px;
}

/* Firefox */
html{
  scrollbar-width: thin;
  scrollbar-color: var(--sr-scroll-thumb-dark) var(--sr-scroll-track);
}

/* WebKit browsers */
::-webkit-scrollbar{
  width: var(--sr-scroll-width);
  height: var(--sr-scroll-width);
}

::-webkit-scrollbar-track{
  background: var(--sr-scroll-track);
}

/* default thumb: dark and unobtrusive; becomes gold while scrolling */
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--sr-scroll-thumb-dark), #444);
  border-radius: 8px;
  border: 2px solid rgba(15,16,17,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 1px 4px rgba(0,0,0,0.6);
}

::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, #3a3a3a, #555);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 6px rgba(0,0,0,0.6);
}

/* corner & resizer */
::-webkit-scrollbar-corner{ background: var(--sr-scroll-track); }

/* Small screens: reduce scrollbar width */
@media (max-width: 768px){
  :root{ --sr-scroll-width: 8px; }
}

/* Optionally allow runtime overrides */
/* Example: window.SilkroadScrollbarThumb = '#aa8800' */
@media (prefers-reduced-motion: reduce){
  ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover { transition: none !important; }
}

/* When user is actively scrolling, make the thumb brighter and glow */
html.scrolling {
  /* Firefox uses two solid colors (thumb, track) — use the mid/dark gold for thumb */
  scrollbar-color: var(--sr-scroll-gold-dark) var(--sr-scroll-track);
}

html.scrolling ::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--sr-scroll-gold-mid) 0%, var(--sr-scroll-gold-dark) 100%);
  box-shadow: 0 0 18px rgba(201,155,59,0.28), inset 0 1px 0 rgba(255,255,255,0.1);
  transform: scaleY(1.02);
}

html.scrolling ::-webkit-scrollbar-thumb:hover{
  box-shadow: 0 0 22px rgba(201,155,59,0.32), inset 0 1px 0 rgba(255,255,255,0.12);
}