/* ---------- Badges page (public/badges/index.php) ---------- */
.badges-page { max-width: 900px; margin: 0 auto; }

.badges-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: .5rem;
}

.badge-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 5px);
    padding: .6rem .5rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
}

.badge-card-icon {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--badge-color, var(--indigo)) 16%, var(--surface));
    color: var(--badge-color, var(--indigo)); font-size: .95rem;
    margin-bottom: .05rem;
}

.badge-card h3 { margin: 0; font-family: var(--font-display); font-size: .72rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.badge-card p {
    margin: 0; font-size: .64rem; line-height: 1.25; color: var(--ink-soft);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden;
}

.badge-card.is-locked { opacity: .55; }
.badge-card.is-locked .badge-card-icon { background: var(--paper); color: var(--ink-soft); filter: grayscale(1); }

.badge-card-earned {
    margin-top: .1rem; font-size: .62rem; font-weight: 700; color: var(--success);
    display: inline-flex; align-items: center; gap: .2rem;
}

.badge-card-progress { width: 100%; margin-top: .1rem; display: flex; flex-direction: column; gap: .15rem; }
.badge-card-progress-track { height: 4px; width: 100%; background: var(--paper); border-radius: 999px; overflow: hidden; }
.badge-card-progress-fill { height: 100%; background: var(--badge-color, var(--indigo)); border-radius: 999px; }
.badge-card-progress span { font-size: .6rem; color: var(--ink-soft); }

/* ---------- Compact "Badges" strip on profile pages ---------- */
.badges-strip { display: flex; flex-wrap: nowrap; gap: .2rem; overflow-x: auto; padding-bottom: .1rem; -webkit-overflow-scrolling: touch; }
.badges-strip-item {
    display: flex; flex-direction: column; align-items: center; gap: .12rem; width: 42px; flex-shrink: 0;
    text-decoration: none;
}
.badges-strip-icon {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--badge-color, var(--indigo)) 16%, var(--surface));
    color: var(--badge-color, var(--indigo)); font-size: .8rem;
    border: 1px solid var(--border);
}
.badges-strip-name { font-size: .56rem; text-align: center; line-height: 1.1; color: var(--ink-soft); }