/* The thin, themed scrollbar every card in the app already wears (see .card in
   src/theme.css). Shared by every page in public/games/ because the default is
   a grey system bar that reads as a foreign element on a game's own panel —
   the owner caught it on the Maze Wordz rules card, and the rest of the shelf
   had exactly the same bar.

   Applied to everything rather than to .card: every one of these pages has at
   least one scroll region (a card, a leaderboard, a rules list) and they do
   not all share a class name. Firefox takes the standard properties, Chromium
   and the Android WebView need ::-webkit-scrollbar.

   --accent is what most of these pages call their gold; Save and Snooker call
   it --gold, hence the fallback chain. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--hi, var(--accent, var(--gold, #ffd34f)))
                   color-mix(in srgb, var(--accent, var(--gold, #ffd34f)) 16%, transparent);
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--accent, var(--gold, #ffd34f)) 16%, transparent);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: var(--hi, var(--accent, var(--gold, #ffd34f)));
}
::-webkit-scrollbar-thumb:hover { background: var(--accent, var(--gold, #ffd34f)); }