/* Badges (docs/badges.md): the icons, the guide (/guide), the profile's badges and the account page's picker.
   The small badge before a name in the rankings and on the landing page is in style.css (.badge-mark). */

/* Tier colours: the rings of the icons (tools/make-badge-icons.ps1). */
.tier-bronze { --tier: #e0a070; --tier-bg: rgba(224, 160, 112, 0.12); }
.tier-silver { --tier: #dfe4ee; --tier-bg: rgba(223, 228, 238, 0.10); }
.tier-gold { --tier: #f6d06a; --tier-bg: rgba(246, 208, 106, 0.12); }
.tier-veil { --tier: var(--accent-hi); --tier-bg: var(--accent-soft); }

.badge-ico { display: inline-block; flex: none; border-radius: 50%; vertical-align: middle; }

/* --- guide --- */
.guide-sub {
    margin: 1.6rem 0 0.7rem;
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}
.guide-sub:first-child { margin-top: 0.4rem; }

.guide-steps { margin: 0.4rem 0 0; padding-left: 1.5rem; display: flex; flex-direction: column; gap: 10px; }
.guide-steps li { padding-left: 4px; line-height: 1.6; }
.guide-steps li::marker { color: var(--accent-hi); font-weight: 700; }

.guide-costs th { white-space: nowrap; }
.guide-costs td, .guide-costs th { padding-top: 8px; padding-bottom: 8px; }

.guide-cap p { margin: 0 0 0.5rem; line-height: 1.6; }
.guide-cap strong { color: #fff; font-size: 1.1em; }

.guide-points { margin: 0.4rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 10px; line-height: 1.6; }
.guide-points li::marker { color: var(--accent-hi); }
.guide-points strong { color: #fff; }

.badge-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 10px;
}
.badge-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--tier, var(--line-strong));
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
    min-width: 0;
}
.badge-card-body { min-width: 0; flex: 1; }
.badge-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.badge-name { font-weight: 600; color: #fff; }
.badge-tier { background: var(--tier-bg); color: var(--tier); }
.tag-prize { background: rgba(52, 211, 153, 0.12); color: var(--ok); }
.badge-how { margin-top: 4px; color: var(--muted); font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere; }
.badge-hint { margin-top: 4px; color: var(--accent-hi); font-size: 0.86rem; font-style: italic; line-height: 1.5; }
.badge-holders { margin-top: 6px; color: var(--faint); font-size: 0.8rem; }
/* the launch race: "Open" or "Claimed by <name> on <date>" (one winner on the server) */
.badge-race { margin-top: 6px; color: var(--muted); font-size: 0.84rem; line-height: 1.5; overflow-wrap: anywhere; }
.badge-race .tag { margin-right: 4px; font-size: 0.7rem; }
.badge-race b { color: var(--text); font-weight: 600; }

/* --- the collection (account page, profile "All badges") and the secret badges --- */
.badge-count-line { margin: 0 0 0.4rem; }
.badge-collection-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.badge-card.locked .badge-ico { filter: grayscale(1) brightness(0.5); }
.badge-card.locked { border-left-color: var(--line-strong); background: rgba(0, 0, 0, 0.18); }
.badge-card.locked .badge-name { color: var(--muted); }
.badge-card.shown { box-shadow: 0 0 0 1px var(--accent-line) inset; }
.badge-earned { margin-top: 4px; color: var(--ok); font-size: 0.86rem; }
.badge-secret-tag { background: var(--accent-soft); color: var(--accent-hi); }
.badge-masked { border-left-color: var(--accent-line); border-style: dashed; border-left-style: solid; }
.badge-masked .badge-name { color: var(--muted); letter-spacing: 0.1em; }
.badge-progress { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.badge-progress-bar {
    flex: 1 1 80px;
    max-width: 160px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.badge-progress-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--tier, var(--accent-hi)); }
.badge-progress-text { color: var(--muted); font-size: 0.8rem; }

.badge-collection { flex-basis: 100%; min-width: 0; }
.badge-collection > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.9rem;
    padding: 2px 0;
}
.badge-collection > summary:hover .badge-collection-title { color: #fff; }
.badge-collection-title { color: var(--accent-hi); font-weight: 600; }
.badge-collection-count { color: var(--muted); }
.badge-collection-body { padding-top: 0.4rem; }
.badge-collection-body .guide-sub { margin-top: 1rem; font-size: 0.92rem; }
.profile-card .badge-collection .guide-sub:first-child { margin-top: 0; }

/* --- profile (armory) --- */
.profile-badge-mark { display: flex; align-items: center; gap: 2px; margin-top: 8px; color: var(--muted); font-size: 0.86rem; }
.profile-badge-mark:empty { display: none; }
.profile-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.profile-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 92px;
    padding: 8px 4px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
}
.profile-badge.shown { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line) inset; }
.profile-badge.locked .badge-ico { filter: grayscale(1) brightness(0.45); }
.profile-badge.locked { opacity: 0.75; }
.profile-badge-name { font-size: 0.78rem; font-weight: 600; color: #fff; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; max-width: 100%; }
.profile-badge-date { font-size: 0.72rem; color: var(--faint); }
.profile-badges-foot { margin: 0.8rem 0 0; font-size: 0.85rem; }
.profile-badges-toggle { margin-top: 0.8rem; }

/* --- account page picker --- */
.badge-picker { display: flex; flex-direction: column; gap: 10px; }
.badge-picker-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
}
.badge-picker-name { min-width: 120px; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 8px; }
.badge-picker select { flex: 1 1 220px; min-width: 0; max-width: 100%; }
.badge-picker-note { color: var(--faint); font-size: 0.85rem; flex-basis: 100%; }

@media (max-width: 599.98px) {
    .profile-badge { width: calc(33.333% - 7px); padding: 8px 2px; }
    .profile-badge-name { font-size: 0.72rem; }
    .guide-costs th { white-space: normal; vertical-align: bottom; }
    .guide-costs td, .guide-costs th { padding-left: 6px; padding-right: 6px; }
}