/* Bombarera v90 — compact skin catalog
   Goal: keep the collection readable, but show more heroes at once.
   This layer only changes the catalog grid/cards; hero header and detail view stay intact. */

body[data-ui-context="skins"] .skins-v77__grid-scroll{
  padding:3px 6px 12px 2px!important;
}

body[data-ui-context="skins"] .skins-v77__grid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:11px!important;
}

body[data-ui-context="skins"] .skins-v77__card{
  height:238px!important;
  min-height:238px!important;
  grid-template-rows:minmax(0,1fr) 38px 38px!important;
  border-radius:18px!important;
}

body[data-ui-context="skins"] .skins-v77__card-top{
  top:9px!important;
  left:9px!important;
  right:9px!important;
}

body[data-ui-context="skins"] .skins-v77__card-rarity,
body[data-ui-context="skins"] .skins-v77__new{
  min-height:22px!important;
  padding-inline:8px!important;
}

body[data-ui-context="skins"] .skins-v80__ability{
  left:9px!important;
  right:9px!important;
  bottom:6px!important;
  height:25px!important;
  padding-inline:7px!important;
  gap:6px!important;
}

body[data-ui-context="skins"] .skins-v80__ability i{
  width:17px!important;
  height:17px!important;
  flex-basis:17px!important;
}

body[data-ui-context="skins"] .skins-v77__card-copy{
  min-height:38px!important;
  padding:7px 10px 6px!important;
}

body[data-ui-context="skins"] .skins-v77__card-copy strong{
  font-size:15px!important;
}

body[data-ui-context="skins"] .skins-v77__card-bottom{
  height:38px!important;
  min-height:38px!important;
  padding-inline:10px!important;
}

/* Full desktop: six heroes per row instead of five oversized cards. */
@media (min-width:1500px){
  body[data-ui-context="skins"] .skins-v77__grid{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:11px!important;
  }
  body[data-ui-context="skins"] .skins-v77__card{
    height:232px!important;
    min-height:232px!important;
  }
}

/* Standard desktop / laptop: five compact cards still keep labels readable. */
@media (max-width:1499px) and (min-width:1181px){
  body[data-ui-context="skins"] .skins-v77__grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:10px!important;
  }
  body[data-ui-context="skins"] .skins-v77__card{
    height:228px!important;
    min-height:228px!important;
  }
}

/* Smaller laptops: four columns, not the old three giant cards. */
@media (max-width:1180px) and (min-width:821px){
  body[data-ui-context="skins"] .skins-v77__grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
  }
  body[data-ui-context="skins"] .skins-v77__card{
    height:226px!important;
    min-height:226px!important;
  }
}

/* Tablet keeps comfortable touch targets. */
@media (max-width:820px) and (min-width:601px){
  body[data-ui-context="skins"] .skins-v77__grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:9px!important;
  }
  body[data-ui-context="skins"] .skins-v77__card{
    height:224px!important;
    min-height:224px!important;
  }
}

/* Phones: preserve the existing two-column interaction model. */
@media (max-width:600px){
  body[data-ui-context="skins"] .skins-v77__grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  body[data-ui-context="skins"] .skins-v77__card{
    height:218px!important;
    min-height:218px!important;
    border-radius:16px!important;
  }
  body[data-ui-context="skins"] .skins-v77__card-copy strong{font-size:13.5px!important}
}

@media (max-width:420px){
  body[data-ui-context="skins"] .skins-v77__card{
    height:204px!important;
    min-height:204px!important;
  }
  body[data-ui-context="skins"] .skins-v80__ability{display:none!important}
  body[data-ui-context="skins"] .skins-v77__card-copy small{display:none!important}
  body[data-ui-context="skins"] .skins-v77__card-bottom em{display:none!important}
}