From 6c95c64398e9e7968a3435bd31ce90e9643f0ab1 Mon Sep 17 00:00:00 2001
From: Tim <timoliptak@gmail.com>
Date: Tue, 7 Jul 2026 11:00:56 +0200
Subject: [PATCH] Skore: slim scrollbar v style hry namiesto OS defaultu

Zoznam kol v Standings (herny sidebar aj mobilny panel) pouzival hrubu
systemovu lavicu scrollbaru, ktora nesedela do velvet/gold temy. Novy
.velvet-scroll (index.css) da tenky priehladny track a zlaty polopriehladny
thumb (webkit + Firefox scrollbar-color).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/components/Standings.tsx |  2 +-
 frontend/src/index.css                | 21 +++++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Standings.tsx b/frontend/src/components/Standings.tsx
index fdf4c07..09fe1db 100644
--- a/frontend/src/components/Standings.tsx
+++ b/frontend/src/components/Standings.tsx
@@ -148,7 +148,7 @@ export default function Standings({ standings, guesses = [], players, myOrder, d
   });
 
   const scrollableRounds = (
-    <div className={`flex-1 min-h-0 overflow-y-auto px-3 ${desktop ? '' : 'max-h-[45vh]'}`}>
+    <div className={`velvet-scroll flex-1 min-h-0 overflow-y-auto px-3 ${desktop ? '' : 'max-h-[45vh]'}`}>
       {rows}
 
       {/* Active round placeholder */}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 8b758f3..f71b75c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -30,6 +30,27 @@
   }
 }
 
+/* Slim, on-theme scrollbar (velvet felt + gold accent) for opt-in scroll areas
+   such as the in-game score list, instead of the chunky OS default. */
+.velvet-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(201, 168, 76, 0.35) transparent;
+}
+.velvet-scroll::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+.velvet-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.velvet-scroll::-webkit-scrollbar-thumb {
+  background: rgba(201, 168, 76, 0.28);
+  border-radius: 4px;
+}
+.velvet-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(201, 168, 76, 0.5);
+}
+
 /* Velvet-table animations (design handoff). Declared as raw CSS so they work
    both via Tailwind's animate-* utilities and inline `animation:` strings. */
 @keyframes tp {