/* Member recognition: quiet insignia in the community, a collection in your account. */
.achievement-icon { display: block; width: 64px; height: 72px; flex-shrink: 0; }
.achievement-icon-shield { fill: currentColor; fill-opacity: .045; }
.achievement-icon-inner { opacity: .3; stroke-width: 1; }
.member-recognition { position: relative; z-index: 2; display: inline-flex; align-items: center; flex-wrap: wrap; gap: .4rem; vertical-align: middle; }
.member-rank, .member-og { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .1rem .5rem .1rem .3rem; border: 1px solid #7d70963d; border-radius: 4px; background: #afa0d908; color: var(--accent-soft); font: 500 .68rem/1.6 var(--sans); letter-spacing: .02em; }
.member-rank .achievement-icon, .member-og .achievement-icon { width: 23px; height: 27px; }
.member-og { border-color: #c77c4366; background: #c77c430c; color: #e5b889; font-weight: 700; letter-spacing: .08em; }
.member-rank, .member-og, .member-earned-badge { cursor: help; }
.member-rank:focus-visible, .member-og:focus-visible, .member-earned-badge:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }
.member-badge-showcase { margin: 1.25rem 0 2.5rem; padding: 1.2rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.member-badge-heading { margin: 0 0 .9rem; color: var(--text-dim); font: 600 .7rem var(--sans); text-transform: uppercase; letter-spacing: .15em; }
.member-badge-list { display: flex; flex-wrap: wrap; gap: .65rem; list-style: none; margin: 0; padding: 0; }
.member-badge-list > li { display: flex; max-width: 100%; }
.member-earned-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .7rem; border: 1px solid #afa0d92c; border-radius: 5px; background: linear-gradient(130deg, #afa0d909, transparent); color: var(--accent-soft); font-size: .76rem; }
.member-earned-badge .achievement-icon { width: 27px; height: 31px; }

.recognition-tooltip { --tooltip-accent: #c4b5df; --tooltip-border: #79658e; position: fixed; z-index: 10000; box-sizing: border-box; width: max-content; max-width: min(20rem, calc(100vw - 24px)); padding: .9rem 1rem; border: 1px solid var(--tooltip-border); border-radius: 9px; background: linear-gradient(135deg, #25202e, #17151f); box-shadow: 0 12px 32px #0007, inset 0 1px #ffffff0a; color: #c4becf; font: .76rem/1.65 var(--sans); text-align: left; letter-spacing: normal; opacity: 0; transform: translateY(6px) scale(.98); transform-origin: var(--tooltip-arrow, 50%) bottom; transition: opacity 160ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1); pointer-events: none; overflow-wrap: anywhere; }
.recognition-tooltip[hidden] { display: none; }
.recognition-tooltip.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.recognition-tooltip[data-placement="below"] { transform: translateY(-6px) scale(.98); transform-origin: var(--tooltip-arrow, 50%) top; }
.recognition-tooltip[data-placement="below"].is-visible { transform: translateY(0) scale(1); }
.recognition-tooltip::after { content: ''; position: absolute; left: var(--tooltip-arrow, 50%); bottom: -5px; width: 8px; height: 8px; border-right: 1px solid var(--tooltip-border); border-bottom: 1px solid var(--tooltip-border); background: #191620; transform: translateX(-50%) rotate(45deg); }
.recognition-tooltip[data-placement="below"]::after { bottom: auto; top: -5px; transform: translateX(-50%) rotate(225deg); }
.recognition-tooltip[data-tone="gold"] { --tooltip-accent: #e5b889; --tooltip-border: #9a714b; background: linear-gradient(135deg, #30251f, #1b171c); }
.recognition-tooltip[data-tone="gold"]::after { background: #211b1d; }
.recognition-tooltip-title { display: block; margin-bottom: .25rem; color: var(--tooltip-accent); font-size: .84rem; font-weight: 600; }
.recognition-tooltip-description { display: block; }
@media (prefers-reduced-motion: reduce) {
    .recognition-tooltip, .recognition-tooltip[data-placement="below"] { transition: none; transform: none; }
}
@media (forced-colors: active) {
    .recognition-tooltip { border-color: CanvasText; background: Canvas; color: CanvasText; }
    .recognition-tooltip-title { color: CanvasText; }
    .recognition-tooltip::after { background: Canvas; border-color: CanvasText; }
}

.achievements-page { --achievement-gold: #e0b17d; --achievement-line: #c77c4350; }
.achievements-page :is(section[id], details[id]) { scroll-margin-top: 1.5rem; }
.achievements-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.8rem; }
.achievements-intro .category-eyebrow, .achievement-section-heading .category-eyebrow, .achievement-privacy .category-eyebrow { margin: 0 0 .45rem; font-size: .64rem; letter-spacing: .14em; }
.achievements-intro h2 { margin: 0; color: var(--heading); font: normal clamp(2rem, 4vw, 2.75rem)/1.1 var(--serif); }
.achievements-intro > p { max-width: 28rem; margin: 0; color: var(--text-dim); font-size: .88rem; line-height: 1.7; }
.army-card { position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; align-items: center; gap: 1.75rem; overflow: hidden; padding: 2.25rem; border: 1px solid #8870936b; border-radius: 8px; background: radial-gradient(ellipse at 4% 50%, #9480be24, transparent 45%), linear-gradient(120deg, #24202d, #14151f 75%); }
.army-card::before { content: ''; position: absolute; top: 0; left: 2rem; right: 2rem; height: 1px; background: linear-gradient(90deg, transparent, #d1c4f075, transparent); }
.army-rank-art { position: relative; display: grid; place-items: center; min-height: 150px; color: var(--accent-soft); }
.army-rank-art::before { content: ''; position: absolute; inset: 0 -10px; border: 1px solid #afa0d913; border-radius: 50%; }
.army-rank-art::after { content: ''; position: absolute; inset: 12px 2px; border: 1px solid #afa0d919; border-radius: 50%; }
.army-rank-art .achievement-icon { width: 110px; height: 125px; filter: drop-shadow(0 5px 15px #0004); }
.army-label { margin: 0 0 .5rem; color: var(--accent-soft); font-size: .65rem; line-height: 1.7; letter-spacing: .16em; font-weight: 600; text-transform: uppercase; }
.army-label span { color: #b3aabd; }
.army-rank-content h3 { margin: 0; color: #f0e9f8; font: normal clamp(1.7rem, 3.5vw, 2.5rem)/1.18 var(--serif); }
.army-rank-caption { margin: .6rem 0 1.4rem; color: #b9b5c5; font-size: .8rem; }
.army-progress-label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .5rem; color: var(--text-dim); font-size: .7rem; }
.army-progress-label strong { color: var(--text); font-weight: 500; }
.achievement-progress { display: block; appearance: none; width: 100%; height: 4px; overflow: hidden; border: 0; border-radius: 4px; background: #30303c; color: var(--accent); }
.achievement-progress::-webkit-progress-bar { background: #30303c; border-radius: 4px; }
.achievement-progress::-webkit-progress-value { background: var(--accent); border-radius: 4px; }
.achievement-progress::-moz-progress-bar { background: var(--accent); border-radius: 4px; }
.army-progress { height: 5px; }
.army-next-copy { margin: .6rem 0 0; color: var(--text-dim); font-size: .69rem; }
.army-next-copy a { white-space: nowrap; margin-left: .3rem; }
.army-earned-total { align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 140px; padding-left: 1.75rem; border-left: 1px solid #afa0d92b; }
.army-earned-total > span { color: #b4aabd; text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; }
.army-earned-total > strong { display: block; margin: .35rem 0 .65rem; color: var(--heading); font: 3.35rem/1.1 var(--serif); }
.army-earned-total small { color: #a49aaf; font: 1.15rem var(--serif); }
.army-earned-total > a { font-size: .72rem; }
.achievement-og-welcome { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.4rem; margin-top: .8rem; border: 1px solid var(--achievement-line); border-radius: 6px; background: linear-gradient(95deg, #c77c4315, transparent 85%); }
.achievement-og-welcome > .achievement-icon { width: 42px; height: 48px; color: var(--achievement-gold); }
.achievement-og-welcome > div { flex: 1; }
.achievement-og-welcome strong { color: #ead4bc; font: 1.1rem var(--serif); }
.achievement-og-welcome p { margin: .3rem 0 0; color: #b9aa9e; font-size: .76rem; }
.achievement-earned-label { color: var(--achievement-gold); font-size: .65rem; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
.achievement-guide { margin: 1.35rem 0 3rem; color: var(--text-dim); font-size: .78rem; }
.achievement-guide > p { margin: 0 0 .4rem; }
.achievement-guide strong { color: #bdb9c8; font-weight: 500; }
.achievement-guide summary { display: inline list-item; cursor: pointer; color: var(--accent-soft); padding: .3rem 0; }
.achievement-guide details > div { max-width: 52rem; padding: .25rem 0; }
.achievement-guide details p { margin: .6rem 0; }
.achievement-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.achievement-section-heading h3, .achievement-privacy h3 { margin: 0; color: var(--heading); font: normal clamp(1.5rem, 2.8vw, 1.9rem)/1.25 var(--serif); }
.achievement-section-heading > p { margin: 0 0 .15rem; color: var(--text-dim); font-size: .65rem; white-space: nowrap; }
.achievement-legend-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin: 0 .35rem 1px .8rem; background: var(--achievement-gold); }
.achievement-legend-dot.is-locked { border: 1px solid #818090; background: transparent; }
.achievement-category-nav { display: flex; flex-wrap: wrap; gap: .2rem 1.5rem; margin: 1.2rem 0 2rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border); }
.achievement-category-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .76rem; color: #b7adca; }
.achievement-group { margin-bottom: 2.1rem; }
.achievement-group > header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .9rem; }
.achievement-group h4 { margin: 0; color: #e3dfe9; font: 1.12rem var(--serif); }
.achievement-group > header p { margin: 0; color: var(--text-dim); font-size: .73rem; }
.achievement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; padding: 0; margin: 0; list-style: none; }
.achievement-card { display: flex; flex-direction: column; min-width: 0; padding: 1.25rem; border: 1px solid #343342; border-radius: 6px; background: #14151bbb; }
.achievement-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .85rem; }
.achievement-card-top .achievement-icon { width: 53px; height: 60px; color: #86818f; }
.achievement-state { padding-top: .3rem; color: #9993a3; font-size: .6rem; letter-spacing: .045em; }
.achievement-state > span { margin-right: .2rem; }
.achievement-card h5 { margin: 0; color: #c9c4d2; font: 1.06rem/1.35 var(--serif); }
.achievement-description { margin: .4rem 0 1.2rem; color: #9da0b0; font-size: .74rem; line-height: 1.7; }
.achievement-card-progress { margin-top: auto; }
.achievement-progress-numbers { display: flex; align-items: center; justify-content: space-between; margin: 0 0 .45rem; color: #a49fac; font-size: .66rem; }
.achievement-card .achievement-progress { height: 3px; }
.achievement-card .achievement-progress::-webkit-progress-value { background: #8f7faf; }
.achievement-card .achievement-progress::-moz-progress-bar { background: #8f7faf; }
.achievement-card.is-earned { border-color: var(--achievement-line); background: radial-gradient(ellipse at 10% 0, #c77c4310, transparent 65%), linear-gradient(135deg, #201b20, #14151b); }
.achievement-card.is-earned h5 { color: #ede0d2; }
.achievement-card.is-earned .achievement-icon { color: var(--achievement-gold); }
.achievement-card.is-earned .achievement-state { color: #d7ab7c; }
.achievement-earned-date { margin: 0; padding-top: .45rem; border-top: 1px solid #c77c432c; color: #c6a88b; font-size: .64rem; }
.achievement-requirement { margin: 0; color: #b2a7bc; font-size: .65rem; }
.achievement-card.is-heritage { grid-column: 1 / -1; display: grid; grid-template-columns: 75px minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; }
.achievement-card.is-heritage .achievement-card-top { grid-row: 1 / 4; flex-direction: column; gap: .1rem; margin: 0; }
.achievement-card.is-heritage .achievement-state { white-space: nowrap; }
.achievement-card.is-heritage h5 { align-self: end; }
.achievement-card.is-heritage .achievement-description { grid-column: 2; align-self: start; margin-bottom: 0; }
.achievement-card.is-heritage .achievement-card-progress { grid-column: 3; grid-row: 1 / 3; margin: 0; }
.achievement-card.is-heritage .achievement-earned-date { border: 0; }
.achievement-ranks { margin-top: 2.75rem; padding: 1.4rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.achievement-ranks summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 44px; cursor: pointer; list-style: none; }
.achievement-ranks summary::-webkit-details-marker { display: none; }
.achievement-ranks summary > span:first-child { display: grid; gap: .35rem; }
.achievement-ranks summary .category-eyebrow { margin: 0; font-size: .62rem; letter-spacing: .14em; }
#rank-ladder-title { color: var(--heading); font: 1.5rem/1.3 var(--serif); }
.achievement-details-cue { display: flex; align-items: center; gap: .8rem; color: var(--accent-soft); font-size: .73rem; white-space: nowrap; }
.achievement-details-cue > span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #afa0d944; border-radius: 50%; font-size: 1rem; transition: transform .48s cubic-bezier(.22, 1, .36, 1); }
.achievement-ranks details[open] .achievement-details-cue > span { transform: rotate(45deg); }
.achievement-rank-tray > p { margin-top: 1.4rem; color: var(--text-dim); font-size: .77rem; }
/* Keep the native disclosure behavior while its content slides in both directions. */
@supports selector(details::details-content) and (transition-behavior: allow-discrete) {
    .achievement-ranks details::details-content {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .48s cubic-bezier(.22, 1, .36, 1), content-visibility .48s allow-discrete;
    }
    .achievement-ranks details[open]::details-content { grid-template-rows: 1fr; }
    .achievement-rank-tray {
        min-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: opacity .32s ease;
    }
    .achievement-ranks details[open] .achievement-rank-tray { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .achievement-ranks details::details-content { transition: none; }
    .achievement-rank-tray, .achievement-details-cue > span { transition: none; }
}
.achievement-rank-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; list-style: none; margin: 1.2rem 0 .2rem; padding: 0; }
.achievement-rank-list li { display: flex; align-items: center; gap: .7rem; padding: .8rem; border: 1px solid #343342; border-radius: 5px; color: #807986; }
.achievement-rank-list .achievement-icon { width: 35px; height: 40px; }
.achievement-rank-list strong { display: block; color: #b9b3c0; font-size: .75rem; font-weight: 500; }
.achievement-rank-list li > div > span { color: #a49aad; font-size: .64rem; }
.achievement-rank-list em { color: var(--achievement-gold); font-style: normal; }
.achievement-rank-list .is-current { border-color: var(--achievement-line); background: #c77c430d; color: var(--achievement-gold); }
.achievement-rank-list .is-current strong { color: #ead8c6; }
.achievement-rank-list .is-reached { color: #bbacd7; }
.achievement-privacy { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3.5rem; padding-top: 2.5rem; }
.achievement-privacy > div > p:last-child { max-width: 23rem; margin: .8rem 0; color: var(--text-dim); font-size: .82rem; }
.achievement-visibility-option { display: flex; align-items: flex-start; gap: .75rem; margin: 0 0 1.2rem; padding: .15rem 0; cursor: pointer; }
.achievement-visibility-option input { flex-shrink: 0; width: 18px; height: 18px; margin: .2rem 0 0; accent-color: var(--accent); cursor: pointer; }
.achievement-visibility-option strong { display: block; margin-bottom: .25rem; color: #dfdae7; font-size: .81rem; font-weight: 500; }
.achievement-visibility-option span span { display: block; color: var(--text-dim); font-size: .74rem; }
.achievement-privacy-note { margin: -.1rem 0 1.25rem; color: var(--text-dim); font-size: .73rem; }
.achievements-page :is(summary, a, input):focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 5px; border-radius: 2px; }

@media (max-width: 960px) {
    .army-card { grid-template-columns: 100px minmax(0, 1fr); gap: 1.5rem; padding: 1.75rem; }
    .army-rank-art .achievement-icon { width: 92px; height: 106px; }
    .army-earned-total { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; padding: 1rem 0 0; border-left: 0; border-top: 1px solid #afa0d92b; }
    .army-earned-total > strong { margin: 0; font-size: 1.75rem; }
    .army-earned-total small { font-size: .9rem; }
    .army-earned-total > a { margin-left: auto; }
    .achievement-privacy { gap: 2rem; }
    .achievement-card.is-heritage { grid-template-columns: 65px minmax(0, 1fr); }
    .achievement-card.is-heritage .achievement-card-progress { grid-column: 2; grid-row: 3; margin-top: .6rem; }
}
@media (max-width: 720px) {
    .achievements-intro { align-items: flex-start; flex-direction: column; gap: 1rem; }
    .achievements-intro > p { max-width: 35rem; }
    .achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .achievement-section-heading { align-items: flex-start; flex-direction: column; gap: .75rem; }
    .achievement-section-heading > p .achievement-legend-dot:first-child { margin-left: 0; }
    .achievement-group > header { align-items: flex-start; flex-direction: column; gap: .3rem; }
    .achievement-og-welcome { align-items: flex-start; padding: 1rem; }
    .achievement-og-welcome > .achievement-earned-label { display: none; }
    .achievement-privacy { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .achievement-rank-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .achievement-category-nav { column-gap: 1.3rem; }
}
@media (max-width: 440px) {
    .army-card { grid-template-columns: 60px minmax(0, 1fr); gap: 1rem; padding: 1.2rem; }
    .army-rank-art { align-self: start; min-height: 85px; }
    .army-rank-art .achievement-icon { width: 60px; height: 72px; }
    .army-rank-art::before, .army-rank-art::after { display: none; }
    .army-label { font-size: .57rem; letter-spacing: .11em; }
    .army-label span { display: block; }
    .army-rank-content h3 { font-size: 1.65rem; }
    .army-rank-caption { font-size: .74rem; margin-bottom: 1.1rem; }
    .army-promotion { margin-left: -76px; }
    .army-progress-label { font-size: .67rem; }
    .army-next-copy a { margin-left: 0; }
    .army-earned-total { gap: .65rem; flex-wrap: wrap; }
    .army-earned-total > span { font-size: .57rem; }
    .army-earned-total > a { font-size: .64rem; }
    .achievement-grid { gap: .65rem; }
    .achievement-card { padding: 1rem .85rem; }
    .achievement-card-top { flex-direction: column; gap: .4rem; }
    .achievement-card h5 { font-size: 1rem; }
    .achievement-description { font-size: .7rem; }
    .achievement-card.is-heritage { column-gap: .6rem; }
    .achievement-ranks summary { align-items: flex-start; gap: 1rem; }
    .achievement-details-cue { font-size: 0; }
    .achievement-details-cue > span { font-size: 1rem; }
    .achievement-rank-list { grid-template-columns: minmax(0, 1fr); }
    .achievement-rank-list li { padding: .7rem; }
    .member-earned-badge { max-width: 100%; }
}
@media (forced-colors: active) {
    .achievement-progress { appearance: auto; }
    .member-rank, .member-og, .achievement-card, .army-card, .achievement-rank-list li { border-color: CanvasText; }
    .achievement-legend-dot { background: CanvasText; }
}