/* MCGO — katalog ve skin sayfası */

.catbar{display:grid;grid-template-columns:minmax(200px,300px) minmax(180px,240px) 1fr;align-items:center;gap:10px}
.catbar__rar{display:flex;flex-wrap:wrap;gap:4px}
.catbar__rar .chip span{max-width:0;overflow:hidden;transition:max-width .2s}
.catbar__rar .chip:hover span,.catbar__rar .chip[aria-pressed="true"] span{max-width:160px}
.catbar__rar .chip[data-rarity=""] {padding-inline:12px}
.catbar__count{grid-column:1/-1;margin:0;font-size:14px}
@media (max-width:900px){.catbar{grid-template-columns:1fr 1fr}.catbar__rar{grid-column:1/-1}}
@media (max-width:520px){.catbar{grid-template-columns:1fr}}
.tile[hidden]{display:none}

.skinpage .phead{padding-bottom:10px}
.skinview{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);gap:clamp(20px,4vw,48px);align-items:start}
.skinview__stage{position:relative;background:radial-gradient(60% 60% at 50% 50%,color-mix(in srgb,var(--rc) 22%,transparent),transparent 70%),linear-gradient(180deg,rgba(6,8,11,.85),rgba(12,16,22,.9));box-shadow:inset 0 0 0 1px var(--line-2),inset 0 -3px 0 var(--rc)}
.skinview__model{aspect-ratio:16/11}
.skinview__hint{position:absolute;left:14px;bottom:12px;font-size:12px;pointer-events:none}
.skinview__info{display:grid;gap:12px;justify-items:start}
.skinview__info h1 small{display:block;font:500 15px/1.2 var(--f-body);text-transform:none;color:var(--muted);text-shadow:none;margin-bottom:8px}
.skinview__facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%}
.skinview__facts li{display:grid;gap:6px;padding:12px 14px;background:#090c10;box-shadow:inset 0 0 0 1px var(--line)}
.skinview__facts small{font:400 10px/1 var(--f-pix);letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.skinview__facts b{font-weight:600}
.incases{list-style:none;display:grid;gap:6px;width:100%}
.incases a{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:14px;padding:8px 14px 8px 8px;text-decoration:none;background:linear-gradient(90deg,color-mix(in srgb,var(--glow) 14%,transparent),rgba(255,255,255,.02)),#0b0f14;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s,transform .15s}
.incases a:hover{transform:translateX(3px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--glow) 50%,transparent)}
.incases a > img{width:56px;height:56px;object-fit:contain}
.incases a > span{display:grid;gap:6px;justify-items:start}
.incases b{font:700 13px/1.2 var(--f-pix);text-transform:uppercase}
.incases em{font:700 15px/1 var(--f-pix);font-style:normal;color:#fff}
@media (max-width:900px){.skinview{grid-template-columns:1fr}}