/**
 * Themed scrollbars — Firefox + WebKit (Chrome, Edge, Safari).
 * Black/gold club palette; rounded, slim tracks.
 */

:root {
  --scrollbar-track: rgba(9, 6, 3, 0.94);
  --scrollbar-thumb-top: #f2d16b;
  --scrollbar-thumb-mid: #c99a1b;
  --scrollbar-thumb-bottom: #7a530d;
  --scrollbar-thumb-hover-top: #fff7d6;
  --scrollbar-thumb-hover-bottom: #d4a017;
}

/* Firefox — applies to scrollable elements */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-mid) var(--scrollbar-track);
}

/* WebKit — viewport + nested overflow */
*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 100px;
  margin: 4px;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--scrollbar-thumb-top) 0%,
    var(--scrollbar-thumb-mid) 42%,
    var(--scrollbar-thumb-bottom) 100%
  );
  border-radius: 100px;
  border: 3px solid var(--scrollbar-track);
  background-clip: padding-box;
  min-height: 48px;
  min-width: 48px;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    var(--scrollbar-thumb-hover-top) 0%,
    var(--scrollbar-thumb-mid) 40%,
    var(--scrollbar-thumb-hover-bottom) 100%
  );
  border: 3px solid var(--scrollbar-track);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #d4a017 0%, #4a3208 100%);
  border: 3px solid var(--scrollbar-track);
  background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}