/* ========================================================================
   BOMBARERA SKINS V80 — PREMIUM COLLECTION PASS
   Final polish layer over V77/V79. Focus: stronger visual hierarchy,
   cleaner catalog rhythm, premium rarity language and a more game-like
   hero detail screen without changing the 40-character roster or economy.
   ======================================================================== */

body[data-ui-context="skins"] .screen--skins .skins-content{
  padding:clamp(10px,1.05vw,18px)!important;
}
body[data-ui-context="skins"] .skins-v77{
  grid-template-rows:66px minmax(0,1fr)!important;
  gap:12px!important;
}

/* Page header: remove duplicate coin counter and use the space for context. */
body[data-ui-context="skins"] .skins-v77__topbar{
  min-height:66px!important;
  height:66px!important;
  padding:9px 12px!important;
  border-color:rgba(101,220,255,.24)!important;
  background:
    radial-gradient(circle at 22% -40%,rgba(82,214,255,.18),transparent 38%),
    linear-gradient(180deg,rgba(10,28,57,.95),rgba(5,17,37,.97))!important;
  box-shadow:0 14px 36px rgba(0,7,22,.28),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
body[data-ui-context="skins"] .skins-v77__title-lockup strong{font-size:20px!important;letter-spacing:.01em!important}
body[data-ui-context="skins"] .skins-v77__title-lockup small{font-size:8px!important;letter-spacing:.14em!important;color:#74dfff!important}
body[data-ui-context="skins"] .skins-v80__active-hero{
  min-width:190px;max-width:280px;height:46px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:center;
  padding:5px 12px 5px 7px;border:1px solid rgba(104,239,177,.25);border-radius:14px;
  background:linear-gradient(135deg,rgba(40,128,102,.16),rgba(8,23,44,.84));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
body[data-ui-context="skins"] .skins-v80__active-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:rgba(104,239,177,.12);color:#6ff0ae}
body[data-ui-context="skins"] .skins-v80__active-svg{width:17px;height:17px}
body[data-ui-context="skins"] .skins-v80__active-hero>span:last-child{min-width:0;display:flex;flex-direction:column;gap:3px}
body[data-ui-context="skins"] .skins-v80__active-hero small{font:1000 7px/1 'Exo 2',sans-serif;letter-spacing:.13em;color:#78bba4}
body[data-ui-context="skins"] .skins-v80__active-hero strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:1000 13px/1 'Exo 2',sans-serif;color:#eafff6}

/* Collection shell: more depth but less visual noise behind the cards. */
body[data-ui-context="skins"] .skins-v77__collection{
  gap:13px!important;
  padding:18px!important;
  border-radius:26px!important;
  border-color:rgba(105,204,255,.23)!important;
  background:
    radial-gradient(circle at 11% 0%,rgba(48,202,255,.12),transparent 30%),
    radial-gradient(circle at 92% 3%,rgba(169,91,255,.13),transparent 31%),
    linear-gradient(180deg,rgba(7,22,46,.95),rgba(3,12,28,.985))!important;
  box-shadow:0 28px 64px rgba(0,5,18,.38),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
body[data-ui-context="skins"] .skins-v77__intro{
  min-height:88px!important;
  padding:0 2px!important;
}
body[data-ui-context="skins"] .skins-v77__eyebrow{font-size:9px!important;color:#72e9ff!important;text-shadow:0 0 18px rgba(87,222,255,.18)}
body[data-ui-context="skins"] .skins-v77__intro h1{
  font-size:clamp(31px,2.3vw,44px)!important;
  letter-spacing:-.045em!important;
  text-shadow:0 8px 24px rgba(0,0,0,.26);
}
body[data-ui-context="skins"] .skins-v77__intro p{max-width:900px!important;font-size:12.5px!important;color:#b5c7da!important}
body[data-ui-context="skins"] .skins-v77__collection-stat{
  flex-basis:228px!important;min-height:68px!important;padding:11px 13px!important;
  border-color:rgba(111,213,255,.24)!important;
  background:linear-gradient(145deg,rgba(12,35,66,.78),rgba(8,21,43,.86))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 24px rgba(0,0,0,.12);
}
body[data-ui-context="skins"] .skins-v77__collection-stat>i{height:6px!important}

/* Filters: equal rhythm, stronger active state, no oversized empty strip. */
body[data-ui-context="skins"] .skins-v77__filters{
  min-height:50px!important;padding:6px!important;gap:7px!important;border-radius:16px!important;
  background:linear-gradient(180deg,rgba(7,20,40,.78),rgba(3,13,29,.72))!important;
  border-color:rgba(108,198,250,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
body[data-ui-context="skins"] .skins-v77__filter{
  min-width:116px!important;height:38px!important;border-radius:11px!important;
  background:rgba(18,36,61,.70)!important;color:#b8c8d9!important;
}
body[data-ui-context="skins"] .skins-v77__filter:hover{background:rgba(25,49,79,.86)!important}
body[data-ui-context="skins"] .skins-v77__filter.is-active{
  background:linear-gradient(135deg,rgba(32,161,211,.40),rgba(110,74,210,.36))!important;
  border-color:rgba(102,229,255,.58)!important;
  box-shadow:0 8px 20px rgba(35,156,220,.12),inset 0 1px 0 rgba(255,255,255,.10)!important;
}

/* Catalog: larger, more collectible cards with a consistent full-body stage. */
body[data-ui-context="skins"] .skins-v77__grid-scroll{padding:4px 8px 14px 2px!important}
body[data-ui-context="skins"] .skins-v77__grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
body[data-ui-context="skins"] .skins-v77__card{
  height:286px!important;min-height:286px!important;
  grid-template-rows:minmax(0,1fr) 42px 42px!important;
  border-radius:22px!important;
  border-color:color-mix(in srgb,var(--card-accent) 34%,rgba(112,191,238,.22))!important;
  background:
    radial-gradient(circle at 50% 36%,color-mix(in srgb,var(--card-accent) 21%,transparent),transparent 43%),
    radial-gradient(circle at 18% 0%,rgba(255,255,255,.055),transparent 30%),
    linear-gradient(180deg,rgba(21,46,80,.98),rgba(7,19,38,.995))!important;
  box-shadow:0 16px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
body[data-ui-context="skins"] .skins-v77__card::before{
  height:4px!important;opacity:1!important;
  box-shadow:0 0 20px color-mix(in srgb,var(--card-accent) 62%,transparent)!important;
}
body[data-ui-context="skins"] .skins-v77__card::after{
  background:
    linear-gradient(125deg,rgba(255,255,255,.07),transparent 24%,transparent 72%,color-mix(in srgb,var(--card-accent) 7%,transparent)),
    linear-gradient(180deg,transparent 48%,rgba(0,5,16,.20) 72%,rgba(0,5,16,.46))!important;
}
body[data-ui-context="skins"] .skins-v77__card:hover{
  transform:translateY(-5px) scale(1.006)!important;
  border-color:color-mix(in srgb,var(--card-accent) 78%,white 8%)!important;
  box-shadow:0 24px 44px rgba(0,0,0,.34),0 0 30px color-mix(in srgb,var(--card-accent) 16%,transparent),inset 0 1px 0 rgba(255,255,255,.09)!important;
}
body[data-ui-context="skins"] .skins-v77__card.is-active{
  border-color:#73f1b4!important;
  box-shadow:0 0 0 2px rgba(104,239,177,.12),0 22px 42px rgba(0,0,0,.32),0 0 30px rgba(78,226,163,.13)!important;
}
body[data-ui-context="skins"] .skins-v77__card-top{top:12px!important;left:12px!important;right:12px!important}
body[data-ui-context="skins"] .skins-v77__card-rarity,
body[data-ui-context="skins"] .skins-v77__new{
  min-height:25px!important;padding-inline:10px!important;font-size:8px!important;
  background:rgba(3,11,24,.74)!important;border-color:color-mix(in srgb,var(--card-accent) 25%,rgba(255,255,255,.10))!important;
  box-shadow:0 6px 14px rgba(0,0,0,.14);
}
body[data-ui-context="skins"] .skins-v77__portrait{overflow:hidden!important}
body[data-ui-context="skins"] .skins-v77__portrait-glow{
  inset:10% 8% 0!important;
  background:radial-gradient(circle,color-mix(in srgb,var(--card-accent) 27%,transparent),transparent 64%)!important;
  filter:blur(7px)!important;
}
body[data-ui-context="skins"] .skins-v77__portrait::after{
  left:20%!important;right:20%!important;bottom:5px!important;height:20px!important;
  background:radial-gradient(ellipse,rgba(0,0,0,.55),rgba(0,0,0,0) 72%)!important;
}
body[data-ui-context="skins"] .skins-v80__ability{
  position:absolute;z-index:6;left:12px;right:12px;bottom:8px;min-width:0;height:27px;
  display:flex;align-items:center;gap:7px;padding:0 9px;border:1px solid color-mix(in srgb,var(--card-accent) 24%,rgba(255,255,255,.07));border-radius:9px;
  background:rgba(3,12,26,.70);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#d7e6f5;font:900 8.5px/1 'Exo 2',sans-serif;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.16);
}
body[data-ui-context="skins"] .skins-v80__ability i{flex:0 0 18px;width:18px;height:18px;display:grid;place-items:center;border-radius:6px;background:color-mix(in srgb,var(--card-accent) 13%,rgba(8,20,39,.8));color:var(--card-accent)}
body[data-ui-context="skins"] .skins-v80__ability-icon{width:12px;height:12px}
body[data-ui-context="skins"] .skins-v77__card-copy{
  padding:9px 13px 8px!important;
  background:linear-gradient(180deg,rgba(4,13,28,.58),rgba(4,13,28,.96))!important;
  border-top:1px solid rgba(255,255,255,.035)!important;
}
body[data-ui-context="skins"] .skins-v77__card-copy strong{font-size:16px!important;letter-spacing:-.015em!important}
body[data-ui-context="skins"] .skins-v77__card-copy small{font-size:9px!important;color:#a8bad0!important}
body[data-ui-context="skins"] .skins-v77__card-bottom{
  min-height:42px!important;height:42px!important;padding:0 13px!important;
  background:linear-gradient(180deg,#07162b,#051022)!important;
  border-top:1px solid rgba(116,194,239,.09)!important;
}
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;color:#79e8ff!important}
body[data-ui-context="skins"] .skins-v77__card-bottom.is-owned em{color:#79e8ff!important}
body[data-ui-context="skins"] .skins-v77__card-bottom.is-active em{color:#7affba!important}

/* Hero detail: stronger Brawl-like hierarchy, still Bombarera. */
body[data-ui-context="skins"] .skins-v77__detail-layer{
  background:
    radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--skin-accent) 19%,transparent),transparent 36%),
    radial-gradient(circle at 10% 20%,rgba(53,205,255,.10),transparent 28%),
    linear-gradient(135deg,rgba(2,10,26,.97),rgba(5,21,49,.97) 50%,rgba(19,11,48,.97))!important;
}
body[data-ui-context="skins"] .skins-v77__detail{
  width:min(1600px,calc(100vw - 30px))!important;
  height:min(820px,calc(100dvh - 30px))!important;
  grid-template-columns:minmax(280px,.82fr) minmax(470px,1.30fr) minmax(300px,.88fr)!important;
  gap:15px!important;padding:15px!important;border-radius:28px!important;
  box-shadow:0 34px 90px rgba(0,0,0,.52),0 0 60px color-mix(in srgb,var(--skin-accent) 8%,transparent),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
body[data-ui-context="skins"] .skins-v77__detail-info,
body[data-ui-context="skins"] .skins-v77__detail-stats{
  padding:20px!important;border-radius:22px!important;
  background:linear-gradient(180deg,rgba(10,29,57,.86),rgba(5,15,33,.94))!important;
}
body[data-ui-context="skins"] .skins-v77__detail-info h2{font-size:clamp(36px,3.1vw,54px)!important;margin-top:16px!important}
body[data-ui-context="skins"] .skins-v77__detail-desc{font-size:13px!important;line-height:1.5!important;color:#c1cfdd!important}
body[data-ui-context="skins"] .skins-v77__rank-card,
body[data-ui-context="skins"] .skins-v77__skill-card{border-radius:17px!important}
body[data-ui-context="skins"] .skins-v77__detail-stage{
  border-radius:24px!important;
  background:
    radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--skin-accent) 25%,transparent),transparent 40%),
    linear-gradient(180deg,rgba(12,39,77,.82),rgba(4,15,34,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 45px rgba(0,0,0,.20)!important;
}
body[data-ui-context="skins"] .skins-v77__detail-stage::before{
  content:attr(data-hero-name);position:absolute;z-index:1;left:50%;top:13%;transform:translateX(-50%);
  width:94%;overflow:hidden;text-align:center;white-space:nowrap;
  font:1000 clamp(58px,6vw,104px)/.86 'Exo 2',sans-serif;letter-spacing:-.07em;text-transform:uppercase;
  color:color-mix(in srgb,var(--skin-accent) 12%,transparent);opacity:.85;pointer-events:none;
}
body[data-ui-context="skins"] .skins-v77__detail-stage::after{
  content:"";position:absolute;z-index:2;left:7%;right:7%;bottom:7%;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--skin-accent) 55%,transparent),transparent);pointer-events:none;
}
body[data-ui-context="skins"] .skins-v77__stage-badge{top:18px!important;min-height:29px!important;font-size:8.5px!important}
body[data-ui-context="skins"] .skins-v77__hero-nav{width:46px!important;height:70px!important;border-radius:15px!important}
body[data-ui-context="skins"] .skins-v77__detail-stats{padding-top:66px!important}
body[data-ui-context="skins"] .skins-v77__power-head span{font-size:12px!important}
body[data-ui-context="skins"] .skins-v77__power-head strong{width:46px!important;height:46px!important;font-size:22px!important}
body[data-ui-context="skins"] .skins-v77__metrics{gap:11px!important;margin-top:16px!important}
body[data-ui-context="skins"] .skins-v77__metrics .skins-locker-v7__metric{min-height:44px!important;border-radius:13px!important}
body[data-ui-context="skins"] .skins-v77__purchase .skins-locker-v7__cta{min-height:56px!important;font-size:14px!important;border-radius:15px!important}

/* Laptop: three cards are intentionally preferred to squeezing four. */
@media (max-width:1399px) and (min-width:1051px){
  body[data-ui-context="skins"] .skins-v77__grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
  body[data-ui-context="skins"] .skins-v77__card{height:278px!important;min-height:278px!important}
  body[data-ui-context="skins"] .skins-v77__collection{padding:14px!important}
  body[data-ui-context="skins"] .skins-v77__intro{min-height:76px!important}
  body[data-ui-context="skins"] .skins-v77__intro h1{font-size:31px!important}
  body[data-ui-context="skins"] .skins-v77__detail{grid-template-columns:minmax(245px,.78fr) minmax(390px,1.18fr) minmax(270px,.82fr)!important}
}
@media (min-width:1900px){
  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:292px!important;min-height:292px!important}
}
@media (max-width:1050px){
  body[data-ui-context="skins"] .skins-v80__active-hero{min-width:170px}
  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:260px!important;min-height:260px!important}
  body[data-ui-context="skins"] .skins-v80__ability{left:9px;right:9px}
}
@media (max-width:760px){
  body[data-ui-context="skins"] .skins-v77{grid-template-rows:auto auto!important}
  body[data-ui-context="skins"] .skins-v77__topbar{height:auto!important;min-height:60px!important}
  body[data-ui-context="skins"] .skins-v80__active-hero{display:none!important}
  body[data-ui-context="skins"] .skins-v77__collection{padding:10px!important;gap:10px!important}
  body[data-ui-context="skins"] .skins-v77__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body[data-ui-context="skins"] .skins-v77__card{height:238px!important;min-height:238px!important;border-radius:17px!important;grid-template-rows:minmax(0,1fr) 38px 38px!important}
  body[data-ui-context="skins"] .skins-v80__ability{height:24px;bottom:5px;font-size:7.5px!important}
  body[data-ui-context="skins"] .skins-v77__card-copy{padding:8px 9px 7px!important}
  body[data-ui-context="skins"] .skins-v77__card-copy strong{font-size:13.5px!important}
  body[data-ui-context="skins"] .skins-v77__card-bottom{height:38px!important;min-height:38px!important;padding-inline:9px!important}
  body[data-ui-context="skins"] .skins-v77__filter{min-width:98px!important}
}
@media (max-width:440px){
  body[data-ui-context="skins"] .skins-v77__card{height:224px!important;min-height:224px!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}
}

@media (prefers-reduced-motion:reduce){
  body[data-ui-context="skins"] .skins-v77__card,
  body[data-ui-context="skins"] .skins-v77__filter,
  body[data-ui-context="skins"] .skins-v77__stage-glow{transition:none!important;animation:none!important}
}