/* ── Site navigation (user-facing-ready, Phase 0) ────────────────────────
   Shared across every user-facing surface so the product is navigable:
   lobby -> play -> leaderboard -> collection -> kyc -> referral -> home.
   Mobile-first: horizontally scrollable pill bar, no hamburger. */

.qp-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, .08));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.qp-nav::-webkit-scrollbar { display: none; }

.qp-nav a {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: var(--radius-sm, 8px);
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-secondary, rgba(255, 255, 255, .7));
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}

.qp-nav a:hover,
.qp-nav a:focus-visible {
    color: var(--text-primary, #fff);
    background: var(--surface-elevated, rgba(255, 255, 255, .04));
}

.qp-nav a.qp-nav--active {
    color: var(--surface, #0b0f14);
    background: var(--accent, #4ade80);
    border-color: var(--accent, #4ade80);
    border-bottom: 2px solid var(--accent-action, var(--accent));
}

/* mobile: keep it one row, scrollable */
@media (max-width: 480px) {
    .qp-nav a { padding: 7px 13px; font-size: .8rem; }
    .qp-nav { flex-wrap: wrap; }
}