/* ============================================================
   GameHub — Dark Gaming Theme
   Glassmorphism, neon glows, and atmospheric effects.
   ============================================================ */

/* ── Neon Text Effects ───────────────────────────────────── */
.neon-text {
    color: var(--neon-cyan);
}

.neon-text-purple {
    color: var(--neon-purple);
}

.neon-text-pink {
    color: var(--neon-pink);
}

/* ── Neon Border ─────────────────────────────────────────── */
.neon-border {
    border-color: var(--neon-cyan) !important;
    box-shadow: 0 0 8px rgba(0, 245, 255, 0.3), inset 0 0 8px rgba(0, 245, 255, 0.05);
}

/* ── Glow on hover ───────────────────────────────────────── */
.hover-glow:hover {
    box-shadow: var(--glow-cyan);
    border-color: var(--neon-cyan-dim);
}

/* ── Gradient heading ────────────────────────────────────── */
.gradient-text {
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Cyber divider ───────────────────────────────────────── */
.cyber-divider {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--neon-cyan-dim), transparent);
    margin-block: var(--sp-8);
}

/* ── Scanning line effect (decorative, applied to hero) ─── */
.hero::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 200px;
    top: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(0, 245, 255, 0.06), transparent 70%);
    pointer-events: none;
}

/* ── Rank medals ─────────────────────────────────────────── */
.medal-gold   { color: var(--neon-yellow); filter: drop-shadow(0 0 4px rgba(255,215,0,0.5)); }
.medal-silver { color: #c0c0c0; filter: drop-shadow(0 0 4px rgba(192,192,192,0.4)); }
.medal-bronze { color: #cd7f32; filter: drop-shadow(0 0 4px rgba(205,127,50,0.4)); }

/* ── Active nav indicator ────────────────────────────────── */
.nav-link.active::after {
    content: '';
    display: block;
    height: 2px;
    background: var(--neon-cyan);
    border-radius: var(--r-full);
    box-shadow: var(--glow-cyan);
    margin-top: 2px;
}

/* ── Profile avatar ring ─────────────────────────────────── */
.avatar-ring {
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
}

.avatar-ring img {
    border-radius: 50%;
    display: block;
}

/* ── Input glow on focus ─────────────────────────────────── */
.form-input:focus {
    background: rgba(0, 245, 255, 0.04);
}

/* ── Card scan line (subtle top accent) ──────────────────── */
.glass-card.accent-top {
    border-top: 1px solid var(--neon-cyan-dim);
}

.glass-card.accent-top::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--neon-cyan), transparent);
    margin-bottom: var(--sp-4);
    border-radius: var(--r-full);
}

/* ── Pulsing dot (online indicator) ─────────────────────── */
.dot-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neon-green);
    box-shadow: 0 0 6px var(--neon-green);
    animation: pulse 2s ease infinite;
}

/* ── Sidebar leaderboard widget ──────────────────────────── */
.sidebar-leaderboard h3,
.sidebar-achievements h3 {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
}

/* ── Scrollable sidebar list ─────────────────────────────── */
.sidebar-scroll {
    max-height: 380px;
    overflow-y: auto;
    padding-right: var(--sp-2);
}

/* ── Loading skeleton ────────────────────────────────────── */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        rgba(255,255,255,0.05) 50%,
        var(--bg-tertiary) 75%
    );
    background-size: 400% 100%;
    animation: shimmer 1.5s ease infinite;
    border-radius: var(--r-md);
}

.skeleton-text  { height: 14px; margin-bottom: var(--sp-2); }
.skeleton-title { height: 20px; width: 60%; margin-bottom: var(--sp-3); }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }

/* ── Trophy icon ─────────────────────────────────────────── */
.trophy {
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}