/* Collection and utilities share the existing BattlePass type and accent tokens. */
.collection-grid{display:block}.cosmetic-image{width:100%;height:100%;object-fit:contain}.collection-loadout{display:flex;align-items:center;gap:18px;padding:16px 0;border-block:1px solid var(--line)}.loadout-emblem{width:76px;height:76px;flex:0 0 76px;display:grid;place-items:center}.loadout-unselected{font-size:12px;color:var(--muted);text-align:center}.loadout-copy{min-width:0;flex:1}.loadout-copy h3{font-size:20px;line-height:1.3;margin:3px 0 8px}.loadout-label{margin:0;color:var(--muted);font-size:12px}.collection-totals{display:flex;gap:28px;flex-shrink:0}.collection-totals>div{display:flex;flex-direction:column;gap:5px}.collection-totals strong{font:650 26px/1.1 var(--pass-display);font-variant-numeric:tabular-nums}.collection-totals span{font-size:12px;color:var(--muted)}
.collection-galleries{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:32px}.collection-section{min-width:0}.collection-heading{display:flex;align-items:start;justify-content:space-between;gap:12px;margin:24px 0 14px}.collection-heading h3{font-size:19px;line-height:1.25;margin:0 0 6px}.collection-heading p{font-size:12px;line-height:1.6;color:var(--muted);margin:0;max-width:65ch}.collection-count{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}.badge-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.title-gallery{display:grid;gap:0}
.collection-piece{position:relative;min-width:0;background:#ffffff03;border:1px solid #ffffff12;border-radius:6px;padding:12px;display:flex;flex-direction:column;transition:border-color .16s,background .16s}.collection-piece:hover{border-color:#ffffff38}.collection-piece.selected{border-color:#ff633e88;background:#ff633e09}.collection-state{font-size:11px;line-height:1.4;color:var(--muted)}.selected .collection-state{color:#ffb49d}.owned .collection-state{color:#a6d4b7}.collection-art{height:64px;margin:8px 0;display:grid;place-items:center}.collection-art img{width:64px;height:64px}.locked .collection-art{opacity:.6;filter:saturate(.65)}.collection-piece h4{font-size:12px;line-height:1.4;margin:2px 0;overflow-wrap:anywhere}.collection-source{font-size:11px;line-height:1.5;color:var(--muted);margin:5px 0 10px}.collection-piece>.button{margin-top:auto;min-height:44px;width:100%;padding:8px 6px;font-size:11px}.title-piece{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:3px 12px;background:transparent;border-width:0 0 1px;border-radius:0;padding:12px 0}.title-piece.selected{border-bottom-color:#ff633e66;background:#ff633e06}.title-piece .collection-art{grid-column:1;grid-row:1/5;height:44px;margin:0}.title-piece .collection-art img{width:44px;height:44px}.title-piece .collection-state{grid-column:2;font-size:10px}.title-piece h4{grid-column:2;font-size:14px}.title-piece .chat-preview{grid-column:2;margin:0}.title-piece .collection-source{grid-column:2;margin:0}.title-piece>.button{grid-column:3;grid-row:1/5;min-width:90px;width:auto;margin:0;padding-inline:10px}
.chat-preview{margin:0;min-width:0}.chat-preview>small{display:block;font-size:10px;color:var(--muted);margin-bottom:4px}.chat-preview>div{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:12px;line-height:1.5;color:var(--muted)}.chat-title-text{color:#ffb49d;font-weight:600}.chat-preview b{color:var(--text)}.title-piece .chat-title-text{font-size:11px;font-weight:400;color:var(--muted)}.collection-notice{margin:12px 0;padding:10px 12px;border:1px solid #ffffff16;border-radius:4px;color:var(--muted);font-size:12px;line-height:1.6;background:#ffffff03}.collection-bonus-link{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}.collection-bonus-link p{font-size:12px;color:var(--muted);margin:0}
.bonus-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}.bonus-section{min-width:0}.bonus-section .collection-heading{margin-top:16px}.active-boost{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;background:#ffffff04;border:1px solid var(--line);padding:12px 14px;margin:0 0 12px;font-size:13px;color:var(--muted);border-radius:5px}.active-boost[data-active=true]{color:#b1dfbd;border-color:#a6d4b740;background:#a6d4b708}.active-boost time{font-size:12px}.boost-inventory{display:grid;gap:10px}.boost-option{display:flex;align-items:center;gap:16px;padding:16px;background:#ffffff04;border:1px solid #ffffff16;border-radius:6px;min-width:0}.boost-option>div:nth-child(2){flex:1;min-width:0}.boost-art{flex:0 0 76px;font:700 36px/1 var(--pass-display);color:var(--pass-accent);font-variant-numeric:tabular-nums}.boost-art small{font:500 9px/1.4 var(--font);display:block;margin-top:6px;color:var(--muted)}.boost-option h4{font-size:14px;line-height:1.5;margin:0 0 4px}.boost-option p{font-size:12px;color:var(--muted);line-height:1.6;margin:0;overflow-wrap:anywhere}.boost-option .button{flex-shrink:0;padding-inline:12px}.bonus-help{color:var(--muted);font-size:12px;line-height:1.65;margin:14px 0 0;max-width:65ch}.reroll-balances{display:flex;gap:24px;border-bottom:1px solid var(--line);padding:0 0 12px}.reroll-balances>div{display:flex;align-items:center;gap:8px}.reroll-balances strong{font:650 28px/1.1 var(--pass-display);color:var(--text);font-variant-numeric:tabular-nums}.reroll-balances span{font-size:12px;color:var(--muted)}.reroll-task{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:12px 0}.reroll-task>div{min-width:0}.reroll-task small{font-size:10px;color:var(--muted)}.reroll-task h4{font-size:14px;line-height:1.4;margin:4px 0;overflow-wrap:anywhere}.reroll-task p{font-size:12px;color:var(--muted);margin:0;font-variant-numeric:tabular-nums}.reroll-task .button{flex-shrink:0}.privilege-section{padding-bottom:16px;border-bottom:1px solid var(--line)}.privilege-section .boost-option{margin-top:10px}.bonus-dialog{width:calc(100% - 32px);max-width:540px;max-height:calc(100dvh - 32px);overflow:auto;padding:28px;color:var(--text);background:#191d23;border:1px solid #4a4e55;border-radius:10px}.bonus-dialog::backdrop{background:#000b}.bonus-dialog h2{font-size:24px;line-height:1.3;overflow-wrap:anywhere}.bonus-dialog p{font-size:14px;line-height:1.7;color:var(--muted)}.bonus-dialog-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.bonus-dialog #bonus-result{color:#ffb49d}
@media(max-width:1150px){.badge-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.collection-galleries{gap:24px}.bonus-columns{gap:24px}.boost-option{flex-wrap:wrap}.boost-option>.button{width:100%}}
@media(max-width:850px){.collection-galleries,.bonus-columns{grid-template-columns:minmax(0,1fr);gap:8px}.badge-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}.boost-option{flex-wrap:nowrap}.boost-option>.button{width:auto}.collection-heading{margin-top:24px}}
@media(max-width:600px){.collection-loadout{flex-wrap:wrap;gap:12px}.loadout-emblem{width:58px;height:58px;flex-basis:58px}.loadout-copy h3{font-size:18px}.collection-totals{width:100%;border-top:1px solid var(--line);padding-top:12px;gap:24px}.collection-totals>div{flex-direction:row;align-items:baseline;gap:8px}.collection-totals strong{font-size:22px}.badge-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-heading{flex-wrap:wrap;gap:6px}.collection-heading h3{font-size:18px}.collection-count{white-space:normal}.title-piece{gap:3px 8px;grid-template-columns:36px minmax(0,1fr) auto}.title-piece .collection-art,.title-piece .collection-art img{width:36px;height:36px}.title-piece>.button{min-width:78px;font-size:11px}.collection-bonus-link{align-items:start;flex-direction:column}.boost-option{padding:14px;gap:12px;flex-wrap:wrap}.boost-art{flex-basis:70px;font-size:32px}.boost-option>.button{width:100%}.reroll-balances{gap:14px;flex-wrap:wrap}.reroll-balances span{max-width:100px;line-height:1.4}.reroll-task{gap:10px}.reroll-task .button{padding-inline:10px;font-size:11px}.bonus-dialog{padding:20px}.bonus-dialog-actions .button{width:100%}}
@media(prefers-reduced-motion:reduce){.collection-piece{transition:none}}