/*
 * Inventory visual compatibility layer
 * Source of truth: CSGuessr V32.4 DEEP OPTIMIZATION ANALYTICS SEO
 * Keep this file loaded after presentation and theme stylesheets.
 */

html body .site-shell.page-inventory .inventory-page{
  max-width:1260px!important;
  min-height:calc(100vh - 76px)!important;
  margin:0 auto!important;
  padding:54px max(4vw,24px) 100px!important;
}

html body .site-shell.page-inventory .skin-grid{
  grid-template-columns:repeat(4,1fr)!important;
  gap:10px!important;
  margin-top:13px!important;
  display:grid!important;
}

html body .site-shell.page-inventory .skin-card{
  border:1px solid #313c47!important;
  border-top:3px solid var(--rarity)!important;
  background:#1b2832!important;
  border-radius:14px!important;
  min-height:305px!important;
  padding:18px!important;
  position:relative!important;
  overflow:hidden!important;
}

html body .site-shell.page-inventory .skin-art{
  background:radial-gradient(circle,var(--skin-accent),transparent 67%)!important;
  border-bottom:1px solid #29343e!important;
  place-items:center!important;
  height:125px!important;
  display:grid!important;
  position:relative!important;
  overflow:visible!important;
}

@supports (color:color-mix(in lab,red,red)){
  html body .site-shell.page-inventory .skin-art{
    background:radial-gradient(circle,color-mix(in srgb,var(--skin-accent) 22%,transparent),transparent 67%)!important;
  }
}

html body .site-shell.page-inventory .skin-art .skin-image{
  z-index:1!important;
  object-fit:contain!important;
  filter:drop-shadow(0 10px 10px #00000094)!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  padding:5px!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  transition:transform .2s!important;
}

html body .site-shell.page-inventory .skin-card:hover .skin-art .skin-image{
  transform:scale(1.07) rotate(-1deg)!important;
}

html body .site-shell.page-inventory .skin-art i{
  background:linear-gradient(90deg,transparent,var(--skin-accent),transparent)!important;
  width:80%!important;
  height:1px!important;
  position:absolute!important;
  bottom:19px!important;
}

html body .site-shell.page-inventory .skin-card>small{
  color:var(--rarity)!important;
  text-transform:uppercase!important;
  margin-top:13px!important;
  font-size:9px!important;
  font-weight:800!important;
  display:block!important;
}

html body .site-shell.page-inventory .skin-card h3{
  color:#87929c!important;
  margin:7px 0 2px!important;
  font-size:12px!important;
}

html body .site-shell.page-inventory .skin-card h4{
  font:800 20px/1 var(--font-display)!important;
  text-transform:uppercase!important;
  margin:0!important;
}

html body .site-shell.page-inventory .skin-card>p{
  color:#66727d!important;
  margin:5px 0 15px!important;
  font-size:9px!important;
}

html body .site-shell.page-inventory .skin-card>div:last-child{
  justify-content:space-between!important;
  align-items:center!important;
  gap:8px!important;
  display:flex!important;
}

html body .site-shell.page-inventory .skin-card>div strong{
  font:800 15px/1 var(--font-display)!important;
}

html body .site-shell.page-inventory .skin-card button{
  color:#929da7!important;
  cursor:pointer!important;
  background:transparent!important;
  border:1px solid #3d4954!important;
  height:31px!important;
  padding:0 10px!important;
  font-size:9px!important;
  font-weight:800!important;
}

html body .site-shell.page-inventory .skin-card-buttons{
  display:flex!important;
  gap:6px!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
}

html body .site-shell.page-inventory .skin-card-buttons .sell-skin{
  border-color:#d69a45!important;
  background:#2a2117!important;
  color:#f6c945!important;
}

html body .site-shell.page-inventory .inventory-console.compact .skin-grid{grid-template-columns:repeat(6,1fr)!important}
html body .site-shell.page-inventory .inventory-console.compact .skin-card{min-height:245px!important;padding:10px!important}
html body .site-shell.page-inventory .inventory-console.compact .skin-art{height:105px!important}
html body .site-shell.page-inventory .inventory-console.compact .skin-card h4{font-size:16px!important}
html body .site-shell.page-inventory .inventory-console.compact .skin-card p{margin:3px 0 8px!important}

/* The later viewport transform changes the V32.4 card proportions. */
@supports selector(html:has(.site-shell.page-inventory)){
  html[data-csg-ui-scale]:has(.site-shell.page-inventory) .site-shell>main,
  html[data-csg-ui-scale]:has(.site-shell.page-inventory) .site-shell>footer{
    transform:none!important;
  }
}

@media (width<=1000px){
  html body .site-shell.page-inventory .skin-grid{grid-template-columns:repeat(2,1fr)!important}
  html body .site-shell.page-inventory .inventory-console.compact .skin-grid{grid-template-columns:repeat(4,1fr)!important}
}

@media (width<=620px){
  html body .site-shell.page-inventory .inventory-page{padding:36px 12px 70px!important}
  html body .site-shell.page-inventory .skin-grid{grid-template-columns:1fr!important}
  html body .site-shell.page-inventory .inventory-console.compact .skin-grid{grid-template-columns:repeat(2,1fr)!important}
}