/* A player's collection (/players/{steamid}/collection): every custom set piece, legendary and gun on the server, lit
   with a gold edge when the player owns it right now, greyed out when not. Owned or not, never where. Built on the
   site tokens (site.css) and the profile panels (players.css). */
.pro-tabs { display: flex; min-width: 0; }

/* The totals: how much of it they own, set big. */
.col-total {
    display: grid; gap: 18px 32px; align-items: end; padding: clamp(18px, 3vw, 28px);
    background: radial-gradient(90% 140% at 0% 100%, oklch(0.8 0.135 78 / .14), transparent 60%), linear-gradient(170deg, var(--panel-2), var(--bg-deep));
    border: 1px solid var(--line); border-radius: 6px;
}
.col-total__main { display: grid; gap: 10px; min-width: 0; }
.col-total__title { display: flex; align-items: baseline; gap: 10px; margin: 0; font-weight: 400; }
.col-total__title b { color: var(--gold); font: 400 clamp(4rem, 16vw, 7rem)/.82 var(--font-display); font-variant-numeric: tabular-nums; }
.col-total__title span { color: var(--ink-3); font: 400 clamp(1.8rem, 6vw, 2.8rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.col-total__line { margin: 0; color: var(--ink-2); }
.col-bar { height: 8px; overflow: hidden; background: var(--bg-deep); box-shadow: inset 0 0 0 1px var(--line-soft); border-radius: 99px; }
.col-bar i { display: block; height: 100%; background: linear-gradient(90deg, oklch(0.62 0.12 72), var(--gold)); border-radius: 99px; }
.col-total__kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 10px; margin: 0; }
.col-total__kinds div { display: grid; gap: 6px; padding: 12px 14px; background: oklch(0 0 0 / .25); border: 1px solid var(--line-soft); border-radius: 4px; min-width: 0; }
.col-total__kinds dt { color: var(--ink-3); font: 700 .75rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; }
.col-total__kinds dd { margin: 0; color: var(--ink); font: 400 2rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.col-total__kinds small { margin-left: 4px; color: var(--ink-3); font-size: 1.1rem; }

.col-part { display: grid; gap: 4px; min-width: 0; }
.col-sets { display: grid; gap: 14px; }

/* A set: its name and count, then its pieces. A complete set glows. */
.col-set { display: grid; gap: 12px; padding: clamp(14px, 2vw, 18px); background: var(--panel); border: 1px solid var(--line-soft); border-radius: 6px; min-width: 0; }
.col-set--plain { padding: 0; background: none; border: 0; }
.col-set.is-complete { border-color: var(--gold); box-shadow: 0 0 0 1px oklch(0.8 0.135 78 / .3), 0 18px 40px -24px oklch(0.8 0.135 78 / .45); }
.col-set__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.col-set__title { margin: 0; color: var(--ink); font: 400 clamp(1.6rem, 3vw, 2.2rem)/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.col-set__count { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; color: var(--ink-3); font: 700 1rem/1 var(--font-label); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.col-set__count b { color: var(--ink); font: 400 1.6rem/1 var(--font-display); }
.col-set.is-complete .col-set__count b { color: var(--gold); }
.col-set__done { padding: 4px 9px; color: var(--gold-ink); background: var(--gold); border-radius: 99px; font: 700 .72rem/1.2 var(--font-label); letter-spacing: .12em; text-transform: uppercase; }

/* The tiles: the item's picture and its name. Owned: lit, gold edge, a small tag. Not owned: the picture greyed. */
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(136px, 100%), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.col-item {
    position: relative; display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 8px; padding: 10px; min-width: 0;
    background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 6px;
}
.col-set:not(.col-set--plain) .col-item { background: var(--bg-deep); }
.col-item__art { display: grid; place-items: center; aspect-ratio: 1; width: 100%; min-width: 0; overflow: clip; background: radial-gradient(70% 70% at 50% 58%, oklch(1 0 0 / .05), transparent 70%), var(--bg-deep); border-radius: 4px; }
.col-item__art img { width: 72%; height: auto; }
.col-item__none { color: var(--ink-3); font: 400 2.4rem/1 var(--font-display); text-transform: uppercase; }
.col-item__name { color: var(--ink); font: 700 1rem/1.15 var(--font-label); letter-spacing: .02em; overflow-wrap: anywhere; }
.col-item__perks { margin-top: -4px; color: var(--ink-3); font-size: .8rem; line-height: 1.3; }
.col-item__tag {
    position: absolute; top: 8px; right: 8px; padding: 3px 8px; color: var(--gold-ink); background: var(--gold); border-radius: 99px;
    font: 700 .68rem/1.2 var(--font-label); letter-spacing: .12em; text-transform: uppercase;
}

.col-item.is-owned { border-color: var(--gold); box-shadow: inset 0 0 0 1px oklch(0.8 0.135 78 / .5), 0 10px 26px -16px oklch(0.8 0.135 78 / .6); }
.col-item.is-owned .col-item__art { background: radial-gradient(70% 70% at 50% 58%, oklch(0.8 0.135 78 / .28), transparent 70%), var(--bg-deep); }
.col-item.is-owned .col-item__art img { filter: drop-shadow(0 10px 14px oklch(0 0 0 / .6)); }
.col-item.is-owned .col-item__perks { color: var(--blight); }
.col-item.is-missing .col-item__art { filter: grayscale(1); opacity: .35; }
.col-item.is-missing .col-item__name { color: var(--ink-3); }
.col-item.is-missing { border-style: dashed; }

@media (min-width: 760px) {
    .col-total { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .col-grid { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }
}
@media (max-width: 380px) {
    .col-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .col-item { padding: 8px; }
    .col-item__tag { top: 6px; right: 6px; }
}