/* Collection titles share one material palette across home, forum and pickers. */
.f-collection-mini{--cl-fill:linear-gradient(115deg,#edfdf8,#d6f3ee);--cl-edge:linear-gradient(135deg,#fff,#8ed6ce 45%,#d2fff4);--cl-ink:#155c57;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;flex:none;gap:4px;box-sizing:border-box;height:23px;padding:0 8px 0 5px;border:1px solid transparent;border-radius:8px;background:var(--cl-fill) padding-box,var(--cl-edge) border-box;color:var(--cl-ink);box-shadow:0 1px 3px #153c3c15,inset 0 1px #ffffff65;font:normal 750 10.5px/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.025em;white-space:nowrap;vertical-align:middle;overflow:hidden}
.f-collection-mini b{position:relative;z-index:1;font:inherit}
.f-collection-symbol{position:relative;z-index:1;display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;filter:drop-shadow(0 1px 1px #00000012)}
.f-collection-mini::after{content:"";position:absolute;z-index:0;inset:-20% -35%;background:linear-gradient(110deg,transparent 33%,#ffffff35 48%,transparent 62%);transform:translateX(-100%);animation:collection-sheen 7s ease-in-out infinite;pointer-events:none}
.f-collection-t8::after{display:none}
.f-collection-t12{--cl-fill:linear-gradient(110deg,#273669,#423273 60%,#292c56);--cl-edge:linear-gradient(120deg,#c5e5ff,#a38ee9 43%,#f1d5ff 75%,#8ec4f5);--cl-ink:#eee8ff;box-shadow:0 1px 4px #5f459c28,0 0 8px #9a7bdf18,inset 0 1px #e7dcff35}
.f-collection-t12 .f-collection-symbol{color:#bfcaff;fill:#a8c0ff33}
.f-collection-t16{--cl-fill:linear-gradient(112deg,#49341c,#2e261d 56%,#5b4123);--cl-edge:linear-gradient(125deg,#fff0b0,#c39237 35%,#fff5cf 62%,#b97c25 86%,#f5d58c);--cl-ink:#ffe9ac;box-shadow:0 2px 5px #a0732530,0 0 9px #e4b45325,inset 0 1px #ffedb850}
.f-collection-t16::after{animation-duration:5.8s}
.f-collection-t16 .f-collection-symbol{color:#ffdb7e;filter:drop-shadow(0 0 3px #efb74865)}
.f-collection-t20{--cl-fill:radial-gradient(90% 170% at 0 0,#43506155,transparent 65%),linear-gradient(110deg,#17282e,#1e1937 60%,#302431);--cl-edge:conic-gradient(from 215deg,#f9e3a7,#8ae1d3,#a7bbff,#e1b3ed,#fff0bd,#80d9d2,#f9e3a7);--cl-ink:#fff3d6;height:25px;padding-inline:6px 9px;border-radius:9px;box-shadow:0 2px 5px #29203b30,0 0 8px #a392e42b,0 0 12px #e4c37b1c,inset 0 1px #fff0ca40}
.f-collection-t20::after{animation-duration:4.8s;background:linear-gradient(110deg,transparent 30%,#bceee936 44%,#f9dda435 51%,transparent 65%)}
.f-collection-t20 .f-collection-symbol{width:18px;height:18px;color:#f6dda1;fill:#c8a25124;filter:drop-shadow(0 0 3px #ffe3a15c)}
.f-collection-mini.pf,.f-collection-mini.f-exp-collection{height:27px;font-size:12px;padding-inline:7px 10px}
.dm-exp-identity.f-collection-mini{width:auto;max-width:none;min-width:0}
.dark .f-collection-t8,html.theme-dark .f-collection-t8{--cl-fill:linear-gradient(115deg,#173f40,#193036);--cl-edge:linear-gradient(135deg,#a7e5da,#4b8d8d 50%,#a6dcd5);--cl-ink:#c7f4e9}
@keyframes collection-sheen{0%,62%{transform:translateX(-100%)}84%,100%{transform:translateX(100%)}}

.f-badge-modal{overflow:hidden}
.f-badge-backdrop{display:flex;align-items:center;justify-content:center;min-height:100%;height:100%}
.f-badge-modal .f-badge-panel{display:flex;flex-direction:column;box-sizing:border-box;width:100%;max-width:560px;max-height:calc(100vh - 32px);max-height:min(760px,calc(100dvh - 32px));min-height:0;padding:0;border-radius:22px;overflow:hidden;box-shadow:0 24px 80px #18233730}
.f-badge-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px 0;flex:none}
.f-badge-eyebrow{font-size:10px;letter-spacing:.16em;color:rgb(var(--c-muted));font-weight:650}
.f-badge-heading h2{margin:3px 0 0;font-size:21px;line-height:1.3;letter-spacing:-.03em}
.f-badge-heading>strong{font-size:21px;letter-spacing:-.04em;color:rgb(var(--c-brand));font-variant-numeric:tabular-nums}
.f-badge-sub{flex:none;margin:8px 24px 11px;color:rgb(var(--c-muted));font-size:12px;line-height:1.5}
.f-badge-total-track{flex:none;height:5px;margin:0 24px 16px;border-radius:99px;background:rgb(var(--c-line));overflow:hidden}
.f-badge-total-track>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6bbcb1,#7c8bd5,#ba91ce);transition:width .3s ease}
.f-badge-scroll{flex:1;min-height:0;padding:0 24px 20px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgb(var(--c-line-strong)) transparent;touch-action:pan-y pinch-zoom}
.f-badge-scroll:focus-visible{outline:2px solid rgb(var(--c-brand));outline-offset:-3px}
.f-collection-section{margin-top:15px}.f-collection-section h3,.f-badge-section-title{margin:0;font-size:13px;font-weight:700}.f-collection-section>p{margin:4px 0 12px;color:rgb(var(--c-muted));font-size:11.5px;line-height:1.6}
.f-collection-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.f-collection-card{min-width:0;padding:13px 12px 10px;border:1px solid rgb(var(--c-line));border-radius:13px;background:rgb(var(--c-surface-2));transition:border-color .2s ease,background .2s ease}
.f-collection-card:not(.is-unlocked) .f-collection-mini{filter:saturate(.45);opacity:.72;box-shadow:none}
.f-collection-card:not(.is-unlocked) .f-collection-mini::after{animation:none}
.f-collection-card.is-unlocked{background:rgb(var(--c-card));border-color:rgb(var(--c-line-strong))}
.f-collection-card>p{min-height:17px;margin:8px 0;color:rgb(var(--c-muted));font-size:10.5px;line-height:1.55}
.f-collection-card>button{width:100%;min-height:29px;border:1px solid rgb(var(--c-line));border-radius:7px;background:rgb(var(--c-card));color:rgb(var(--c-ink));font-family:inherit;font-size:11px;line-height:1.4;font-weight:600;cursor:pointer}
.f-collection-card>button[aria-pressed="true"]{color:rgb(var(--c-brand));border-color:rgb(var(--c-brand) / .3);background:rgb(var(--c-brand-soft))}
.f-collection-card>button:disabled{color:rgb(var(--c-faint));cursor:default;background:transparent}
.f-collection-card>button:not(:disabled):hover{border-color:rgb(var(--c-brand) / .5)}
.f-collection-card>button:focus-visible{outline:2px solid rgb(var(--c-brand));outline-offset:2px}
.f-badge-section-title{margin-top:22px}.f-badge-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding:12px 24px;border-top:1px solid rgb(var(--c-line));background:rgb(var(--c-card))}.f-badge-footer>span{font-size:11px;color:rgb(var(--c-faint))}
#identityBadgeModal>div,#nicknameModal [role="dialog"]{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:400px){.f-badge-heading{padding:16px 16px 0}.f-badge-sub{margin-inline:16px}.f-badge-total-track{margin-inline:16px}.f-badge-scroll{padding-inline:16px}.f-collection-cards{grid-template-columns:1fr}.f-collection-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px}.f-collection-card>.f-collection-mini{justify-self:start}.f-collection-card>p{grid-column:1;margin:5px 0 0}.f-collection-card>button{grid-column:2;grid-row:1 / 3;width:auto;min-width:74px;padding:5px 7px}.f-badge-footer{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){.f-collection-mini::after{animation:none;display:none}.f-collection-card,.f-badge-total-track>span{transition:none}}