/* static/css/style.css */
body {
    font-family: 'Inter', sans-serif;
}

/* ---------------------------------------------------------------------------
   READABILITY: site-wide brighten of dim slate text.
   The UI used slate-500/600/700 for body/labels on a near-black background,
   which was too dim to read. These override the Tailwind text classes
   (style.css loads after app.css, so these win). Revert from
   /tmp/style.css.PRE-TEXTFIX if not kept. Brightened ~2 steps each,
   keeping the cool slate hue.
   --------------------------------------------------------------------------- */
.text-slate-700 { color: #94a3b8 !important; }   /* was ~#334155 (barely visible) */
.text-slate-600 { color: #a9b6cc !important; }   /* was ~#475569 (dim)            */
.text-slate-500 { color: #b6c2d6 !important; }   /* was ~#64748b (dim)            */
/* gray variants used in a few spots — match the same readable tone */
.text-gray-600  { color: #a9b6cc !important; }
.text-gray-500  { color: #b6c2d6 !important; }

/* ---------------------------------------------------------------------------
   READABILITY: minimum font size on ALL screens. The UI used 7–10px text for
   helper/subtitle lines (e.g. "Top up your game score") which is unreadable on
   phones AND desktop. Floor the tiny size classes up everywhere.
   Revert from /tmp/style.css.PRE-TEXTFIX.
   --------------------------------------------------------------------------- */
.text-\[7px\]  { font-size: 11px !important; line-height: 1.45 !important; }
.text-\[8px\]  { font-size: 11px !important; line-height: 1.45 !important; }
.text-\[9px\]  { font-size: 11.5px !important; line-height: 1.45 !important; }
.text-\[10px\] { font-size: 12px !important; line-height: 1.45 !important; }
.text-\[11px\] { font-size: 12px !important; line-height: 1.45 !important; }

.main-gradient-bg {
    background:
        radial-gradient(70% 55% at 80% -5%, rgba(231,181,63,0.10), transparent 60%),
        radial-gradient(60% 50% at 0% 100%, rgba(21,184,134,0.06), transparent 65%),
        radial-gradient(circle at top right, #0d1322, #070b14);
    background-attachment: fixed;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0f1d;
}

::-webkit-scrollbar-thumb {
    background: #232c40;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3a3320;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* Hide scrollbar but keep scrollable — used on tab filters */
.scrollbar-hide {
    -ms-overflow-style: none;   /* IE/Edge */
    scrollbar-width: none;      /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;              /* Chrome/Safari */
}

/* Filter Utilities */
.filter-hidden {
    display: none !important;
}