/* ─── Scrollbar ─────────────────────────────────────────────────────────────── */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ─── Body ──────────────────────────────────────────────────────────────────── */
body { -webkit-font-smoothing: antialiased; }

/* ─── Game Cards ─────────────────────────────────────────────────────────────── */
.game-card {
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.25s ease;
}
.game-card:hover {
    transform: translateY(-3px);
}

/* ─── Float logo animation ───────────────────────────────────────────────────── */
@keyframes float {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.float-hover:hover { animation: float 1.8s ease-in-out infinite; }

/* ─── Upvote Button ──────────────────────────────────────────────────────────── */
.upvote-btn { transition: all 0.18s ease; }
.upvote-btn:active { transform: scale(0.94); }
.upvote-btn.voted {
    background-color: #eff6ff;
    border-color: #0ea5e9;
    color: #0ea5e9;
}
.upvote-btn.voted i { color: #0ea5e9; }
.upvote-btn.voted i { animation: bounceUp 0.4s ease; }

@keyframes bounceUp {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* ─── Chain Filter Pills ─────────────────────────────────────────────────────── */
.filter-btn {
    background-color: #f8fafc;
    color: #64748b;
    border: 1px solid transparent;
}
.filter-btn:hover { background-color: #f1f5f9; color: #0f172a; }
.filter-btn.active {
    background-color: #e0f2fe;
    color: #0ea5e9;
    border-color: rgba(14,165,233,0.2);
}

/* ─── Feed tab active underline ──────────────────────────────────────────────── */
.feed-tab { cursor: pointer; }

/* ─── Banner overlay (base) ──────────────────────────────────────────────────── */
.card-banner-overlay {
    position: absolute;
    inset: 0;
}

/* ─── Scroll Loader fade ─────────────────────────────────────────────────────── */
#scroll-loader { transition: opacity 0.3s ease; }

/* ─── Sidebar scroll track ───────────────────────────────────────────────────── */
.sidebar-inner { scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent; }
.sidebar-inner::-webkit-scrollbar { width: 4px; }
.sidebar-inner::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }

/* ─── Premium Sponsored Card Animated Borders ────────────────────────────────── */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes rotateBorder {
    to { --angle: 360deg; }
}

/* Wrapper that creates the animated border effect */
.sponsor-wrap {
    position: relative;
    border-radius: 20px;
    padding: 2px; /* border thickness */
    background: conic-gradient(from var(--angle), transparent 70%, var(--glow-color) 100%);
    animation: rotateBorder 3s linear infinite;
}

.sponsor-wrap::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    background: inherit;
    filter: blur(8px);
    opacity: 0.5;
    z-index: -1;
}

/* Rank colours — soft elegant pastels for light theme */
.sponsor-wrap.rank-1 { --glow-color: #818cf8; background: conic-gradient(from var(--angle), #c7d2fe 0%, #818cf8 25%, #6366f1 50%, #818cf8 75%, #c7d2fe 100%); }
.sponsor-wrap.rank-2 { --glow-color: #38bdf8; background: conic-gradient(from var(--angle), #bae6fd 0%, #38bdf8 25%, #0ea5e9 50%, #38bdf8 75%, #bae6fd 100%); }
.sponsor-wrap.rank-3 { --glow-color: #a78bfa; background: conic-gradient(from var(--angle), #ede9fe 0%, #a78bfa 25%, #7c3aed 50%, #a78bfa 75%, #ede9fe 100%); }

/* Inner card sits on top of the border */
.sponsor-wrap .game-card { border-radius: 18px !important; border: none !important; }

/* Badge colours per rank — soft, readable on white */
.sponsor-badge-1 { background: linear-gradient(135deg, #6366f1, #818cf8); color: #fff; }
.sponsor-badge-2 { background: linear-gradient(135deg, #0ea5e9, #38bdf8); color: #fff; }
.sponsor-badge-3 { background: linear-gradient(135deg, #7c3aed, #a78bfa); color: #fff; }

/* Subtle inner glow on the card banner */
.sponsor-rank-1 .card-banner-overlay { background: linear-gradient(to top, rgba(99,102,241,0.25) 0%, rgba(0,0,0,0.45) 60%, transparent 100%); }
.sponsor-rank-2 .card-banner-overlay { background: linear-gradient(to top, rgba(14,165,233,0.25) 0%, rgba(0,0,0,0.45) 60%, transparent 100%); }
.sponsor-rank-3 .card-banner-overlay { background: linear-gradient(to top, rgba(124,58,237,0.25) 0%, rgba(0,0,0,0.45) 60%, transparent 100%); }