/* Shared fantasy-gold scrollbar skin.
   Loaded after page themes so legacy mana-blue scrollbars cannot resurface. */
:root {
  --fantasy-scroll-thumb-top: #f5d77f;
  --fantasy-scroll-thumb-mid: #c88a27;
  --fantasy-scroll-thumb-bottom: #70420b;
  --fantasy-scroll-track: rgba(5, 7, 7, 0.88);
  --fantasy-scroll-border: rgba(255, 226, 145, 0.52);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(205, 151, 50, 0.92) var(--fantasy-scroll-track);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  border: 1px solid rgba(198, 145, 46, 0.16);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 224, 145, 0.025), transparent 45%, rgba(255, 224, 145, 0.025)),
    var(--fantasy-scroll-track) !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.82) !important;
}

*::-webkit-scrollbar-thumb {
  min-width: 32px;
  min-height: 32px;
  border: 2px solid rgba(5, 7, 7, 0.92) !important;
  border-radius: 999px;
  background:
    linear-gradient(180deg, var(--fantasy-scroll-thumb-top), var(--fantasy-scroll-thumb-mid) 48%, var(--fantasy-scroll-thumb-bottom)) !important;
  box-shadow:
    inset 0 1px rgba(255, 247, 205, 0.48),
    0 0 8px rgba(217, 161, 53, 0.28) !important;
}

*::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, #ffe9a7, #e0a43a 48%, #8a5410) !important;
  box-shadow:
    inset 0 1px rgba(255, 250, 224, 0.6),
    0 0 11px rgba(231, 180, 71, 0.42) !important;
}

*::-webkit-scrollbar-corner {
  background: #050707 !important;
}

*::-webkit-scrollbar-button:single-button {
  width: 10px;
  height: 10px;
  border: 0;
  background-color: rgba(5, 7, 7, 0.94) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 7px 7px !important;
}

*::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23dca642' d='M5 2 9 7H1z'/%3E%3C/svg%3E") !important;
}

*::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23dca642' d='m5 8 4-5H1z'/%3E%3C/svg%3E") !important;
}

*::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23dca642' d='m2 5 5-4v8z'/%3E%3C/svg%3E") !important;
}

*::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23dca642' d='m8 5-5-4v8z'/%3E%3C/svg%3E") !important;
}

/* These legacy selectors carried !important mana-blue declarations. Match
   them with greater specificity so every catalogue and match scroller is gold. */
body :is(
  .filter-select,
  .custom-filter-select-menu,
  .collection-container,
  .shop-cards-container,
  .deck-editor-collection,
  .editor-sidebar-cards,
  .leaderboard-list,
  .avatar-progression-table-wrap,
  .game-log,
  .log-panel,
  .dust-list,
  .pack-opening-cards,
  .result-card
) {
  scrollbar-color: rgba(205, 151, 50, 0.92) var(--fantasy-scroll-track) !important;
}

body :is(
  .filter-select,
  .custom-filter-select-menu,
  .collection-container,
  .shop-cards-container,
  .deck-editor-collection,
  .editor-sidebar-cards,
  .leaderboard-list,
  .avatar-progression-table-wrap,
  .game-log,
  .log-panel,
  .dust-list,
  .pack-opening-cards,
  .result-card
)::-webkit-scrollbar-thumb,
html body.in-game :is(.ability-panel, .hand-cards)::-webkit-scrollbar-thumb {
  border-color: rgba(5, 7, 7, 0.92) !important;
  background:
    linear-gradient(180deg, var(--fantasy-scroll-thumb-top), var(--fantasy-scroll-thumb-mid) 48%, var(--fantasy-scroll-thumb-bottom)) !important;
}

html body.in-game :is(.ability-panel, .hand-cards) {
  scrollbar-color: rgba(205, 151, 50, 0.92) var(--fantasy-scroll-track) !important;
}

body.in-game .hand-cards::-webkit-scrollbar-thumb {
  background:
    linear-gradient(90deg, var(--fantasy-scroll-thumb-bottom), var(--fantasy-scroll-thumb-mid) 48%, var(--fantasy-scroll-thumb-top)) !important;
}

/* The desktop hand also exposes a range-based scroller when the cards exceed
   the available width. It follows the same gold language as the native bar. */
body.in-game .hand-scroll-range {
  border-color: rgba(231, 188, 91, 0.58) !important;
  background:
    linear-gradient(90deg, #c88a27 0 var(--scroll-progress), rgba(5, 7, 7, 0.9) var(--scroll-progress) 100%) !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.48),
    inset 0 1px rgba(255, 238, 184, 0.12) !important;
}

body.in-game .hand-scroll-range::-webkit-slider-thumb {
  border-color: rgba(255, 232, 164, 0.72) !important;
  background: linear-gradient(90deg, #77470c, #d69d35 48%, #f4d67c) !important;
  box-shadow: 0 0 12px rgba(217, 161, 53, 0.34), inset 0 1px rgba(255, 250, 220, 0.46) !important;
}

body.in-game .hand-scroll-range::-moz-range-thumb {
  border-color: rgba(255, 232, 164, 0.72) !important;
  background: linear-gradient(90deg, #77470c, #d69d35 48%, #f4d67c) !important;
  box-shadow: 0 0 12px rgba(217, 161, 53, 0.34), inset 0 1px rgba(255, 250, 220, 0.46) !important;
}

body.in-game .hand-scroll-btn {
  border-color: rgba(231, 188, 91, 0.6) !important;
  background: linear-gradient(180deg, rgba(91, 65, 24, 0.98), rgba(24, 18, 8, 0.98)) !important;
  color: #ffe7a0 !important;
  box-shadow: 0 0 11px rgba(214, 157, 45, 0.18), inset 0 1px rgba(255, 241, 193, 0.18) !important;
}

body.in-game .hand-scroll-btn:hover {
  border-color: #ffe09a !important;
  background: linear-gradient(180deg, #8a601e, #3b2507) !important;
}