/* Flat, filtered collection on Profile; the reveal below remains shared with the post-match view. */
.skin-collection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-3); }
.skin-choice { display: grid; align-content: start; gap: var(--ds-space-3); min-width: 0; padding: var(--ds-space-3); border: 1px solid var(--ds-line); background: var(--ds-surface); }
.skin-choice-heading { display: flex; align-items: center; gap: var(--ds-space-3); min-width: 0; }
.skin-choice-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.skin-choice-name { color: var(--ds-text); font: 800 var(--ds-fs-md)/1.1 var(--ds-font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.skin-choice-weapon { color: var(--ds-text-muted); font: 700 var(--ds-fs-xs)/1.2 var(--ds-font-display); letter-spacing: .1em; text-transform: uppercase; }
.skin-choice[data-owned="false"] .skin-choice-name, .skin-choice[data-owned="false"] .skin-swatch { opacity: .72; }
.skin-hint { margin: 0; color: var(--ds-text-muted); font-size: var(--ds-fs-sm); overflow-wrap: anywhere; }
.skin-swatch { width: 1.5rem; height: 1.5rem; border-radius: .35rem; background: linear-gradient(135deg, var(--skin-a), var(--skin-b)); border: 1px solid rgb(255 255 255 / .25); flex: none; }
.skin-swatch[data-rarity="epic"], .skin-swatch[data-rarity="legendary"] { box-shadow: 0 0 .5rem var(--skin-glow, currentColor); }
.skin-rarity { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .45rem; border-radius: 1rem; border: 1px solid currentColor; }
.skin-rarity[data-rarity="common"] { color: #b6bdd0; }
.skin-rarity[data-rarity="rare"] { color: #6fb1ff; }
.skin-rarity[data-rarity="epic"] { color: #c69bff; }
.skin-rarity[data-rarity="legendary"] { color: #ffd24a; }
.skins-reveal { margin-block: .75rem; padding: .75rem 1rem; border-radius: .5rem; border: 1px solid #ffd24a; }
.skins-reveal ul { list-style: none; margin: .5rem 0; padding: 0; }
.skins-reveal li { display: flex; align-items: center; gap: .5rem; margin-block: .3rem; }
@media (prefers-reduced-motion: no-preference) { .skins-reveal:not([hidden]) { animation: skin-reveal .6s ease-out; } }
@keyframes skin-reveal { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
@media (max-width: 620px) { .skin-collection { grid-template-columns: minmax(0, 1fr); } }