/* ========================================================================
   BOMBARERA SKINS V79 — PIXEL-PERFECT COLLECTION POLISH
   Final live layer. Keeps the V77/V78 UX and legacy 40-character roster,
   but gives the collection more breathing room, consistent card geometry,
   larger undistorted heroes and cleaner responsive behaviour.
   ======================================================================== */

body[data-ui-context="skins"] .screen--skins .skins-content{
  padding:clamp(10px,1vw,18px)!important;
}

body[data-ui-context="skins"] .skins-v77{
  width:100%!important;
  max-width:none!important;
  grid-template-rows:64px minmax(0,1fr)!important;
  gap:10px!important;
}

/* Header: slightly calmer, stronger alignment. */
body[data-ui-context="skins"] .skins-v77__topbar{
  height:64px!important;
  min-height:64px!important;
  padding:8px 12px!important;
  border-radius:18px!important;
}
body[data-ui-context="skins"] .skins-v77__back{height:44px!important;min-height:44px!important}
body[data-ui-context="skins"] .skins-v77__title-icon{width:40px!important;height:40px!important}
body[data-ui-context="skins"] .skins-v77__wallet{height:44px!important;min-height:44px!important}

/* Collection shell. */
body[data-ui-context="skins"] .skins-v77__collection{
  gap:12px!important;
  padding:16px!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 16% 0%,rgba(50,201,255,.10),transparent 29%),
    radial-gradient(circle at 86% 4%,rgba(168,89,255,.11),transparent 32%),
    linear-gradient(180deg,rgba(7,21,45,.92),rgba(3,12,27,.97))!important;
}
body[data-ui-context="skins"] .skins-v77__intro{min-height:82px!important;gap:20px!important}
body[data-ui-context="skins"] .skins-v77__intro h1{
  font-size:clamp(30px,2.15vw,42px)!important;
  line-height:.98!important;
}
body[data-ui-context="skins"] .skins-v77__intro p{
  max-width:860px!important;
  margin-top:8px!important;
  font-size:12.5px!important;
  line-height:1.35!important;
}
body[data-ui-context="skins"] .skins-v77__collection-stat{
  flex-basis:220px!important;
  min-height:64px!important;
}

/* Filters read as one intentional control strip. */
body[data-ui-context="skins"] .skins-v77__filters{
  min-height:48px!important;
  gap:8px!important;
  padding:5px!important;
  border-radius:15px!important;
}
body[data-ui-context="skins"] .skins-v77__filter{
  min-width:112px!important;
  height:38px!important;
  border-radius:11px!important;
  font-size:11.5px!important;
}

/* Catalog: more space between cards, no compressed five-up layout on normal desktop. */
body[data-ui-context="skins"] .skins-v77__grid-scroll{
  padding:4px 7px 12px 2px!important;
  scrollbar-gutter:stable;
}
body[data-ui-context="skins"] .skins-v77__grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
}

/* Card geometry is deliberately explicit so all 40 heroes align pixel-perfect. */
body[data-ui-context="skins"] .skins-v77__card{
  height:258px!important;
  min-height:258px!important;
  grid-template-rows:minmax(0,1fr) 38px 40px!important;
  border-width:1px!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--card-accent) 16%,transparent),transparent 45%),
    linear-gradient(180deg,rgba(20,43,76,.96),rgba(7,19,38,.99))!important;
  box-shadow:0 14px 30px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
body[data-ui-context="skins"] .skins-v77__card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 32%,transparent 72%,color-mix(in srgb,var(--card-accent) 5%,transparent));
}
body[data-ui-context="skins"] .skins-v77__card:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 20px 38px rgba(0,0,0,.32),0 0 28px color-mix(in srgb,var(--card-accent) 13%,transparent),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body[data-ui-context="skins"] .skins-v77__card.is-active{
  border-color:#70efb0!important;
  box-shadow:0 0 0 1px rgba(112,239,176,.20),0 18px 36px rgba(0,0,0,.30),0 0 25px rgba(80,230,165,.10)!important;
}
body[data-ui-context="skins"] .skins-v77__card-top{
  top:11px!important;
  left:11px!important;
  right:11px!important;
}
body[data-ui-context="skins"] .skins-v77__card-rarity,
body[data-ui-context="skins"] .skins-v77__new{
  min-height:24px!important;
  padding-inline:9px!important;
  font-size:8px!important;
}
body[data-ui-context="skins"] .skins-v77__portrait{
  grid-row:1!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  overflow:hidden!important;
}
body[data-ui-context="skins"] .skins-v77__portrait::after{
  content:"";
  position:absolute;
  left:18%;right:18%;bottom:7px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.48),rgba(0,0,0,0) 72%);
  pointer-events:none;
}
body[data-ui-context="skins"] .skins-v77__portrait canvas{
  width:100%!important;
  height:100%!important;
  display:block!important;
}
body[data-ui-context="skins"] .skins-v77__card-copy{
  grid-row:2!important;
  min-width:0!important;
  padding:8px 12px 7px!important;
  align-items:center!important;
  background:linear-gradient(180deg,rgba(5,15,31,.34),rgba(5,15,31,.91))!important;
  border-top:1px solid rgba(255,255,255,.025);
}
body[data-ui-context="skins"] .skins-v77__card-copy strong{
  font-size:15px!important;
  line-height:1!important;
}
body[data-ui-context="skins"] .skins-v77__card-copy small{
  max-width:42%!important;
  font-size:9px!important;
  color:#9eb1c8!important;
}
body[data-ui-context="skins"] .skins-v77__card-bottom{
  grid-row:3!important;
  min-height:40px!important;
  height:40px!important;
  padding:0 12px!important;
  background:linear-gradient(180deg,#07152a,#061124)!important;
  border-top:1px solid rgba(116,194,239,.08);
}
body[data-ui-context="skins"] .skins-v77__card-bottom b{font-size:10.5px!important}
body[data-ui-context="skins"] .skins-v77__card-bottom em{font-size:8.5px!important}

/* Detail dialog: use more of the screen while retaining the Brawl-like information hierarchy. */
body[data-ui-context="skins"] .skins-v77__detail{
  width:min(1580px,calc(100vw - 28px))!important;
  height:min(800px,calc(100dvh - 28px))!important;
  grid-template-columns:minmax(270px,.82fr) minmax(430px,1.24fr) minmax(280px,.86fr)!important;
  gap:14px!important;
  padding:14px!important;
}
body[data-ui-context="skins"] .skins-v77__detail-stage canvas{
  width:100%!important;
  height:100%!important;
}

/* Large desktop / zoomed-out browsers: use the available width instead of leaving dead side gutters. */
@media (min-width:1780px){
  body[data-ui-context="skins"] .skins-v77__grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  body[data-ui-context="skins"] .skins-v77__card{height:270px!important;min-height:270px!important}
}

@media (max-width:1320px) and (min-width:1051px){
  body[data-ui-context="skins"] .skins-v77__grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body[data-ui-context="skins"] .skins-v77__card{height:252px!important;min-height:252px!important}
  body[data-ui-context="skins"] .skins-v77__intro h1{font-size:30px!important}
  body[data-ui-context="skins"] .skins-v77__collection-stat{flex-basis:190px!important}
}

@media (max-width:1050px){
  body[data-ui-context="skins"] .skins-v77{width:100%!important}
  body[data-ui-context="skins"] .skins-v77__grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
  body[data-ui-context="skins"] .skins-v77__card{height:248px!important;min-height:248px!important}
}

@media (max-width:760px){
  body[data-ui-context="skins"] .skins-v77__collection{padding:10px!important}
  body[data-ui-context="skins"] .skins-v77__intro{min-height:0!important}
  body[data-ui-context="skins"] .skins-v77__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  body[data-ui-context="skins"] .skins-v77__card{height:224px!important;min-height:224px!important;border-radius:16px!important}
  body[data-ui-context="skins"] .skins-v77__card-copy{padding-inline:9px!important}
  body[data-ui-context="skins"] .skins-v77__card-copy strong{font-size:13px!important}
  body[data-ui-context="skins"] .skins-v77__card-copy small{font-size:8px!important}
  body[data-ui-context="skins"] .skins-v77__card-bottom{padding-inline:9px!important}
  body[data-ui-context="skins"] .skins-v77__filter{min-width:96px!important}
}

@media (max-width:440px){
  body[data-ui-context="skins"] .skins-v77__card{height:210px!important;min-height:210px!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}
}