/* ========================================================================
   BOMBARERA V91 — RARITY FILTER LIGHTING
   The rarity filter strip now uses the same rarity language as skin cards.
   No layout/JS changes: only visual hierarchy, hover and active states.
   ======================================================================== */

body[data-ui-context="skins"] .skins-v77__filter{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  --filter-a:#63ddff;
  --filter-b:#4b83c4;
  --filter-fill:rgba(20,42,70,.72);
  --filter-line:rgba(99,221,255,.18);
  --filter-glow:rgba(99,221,255,.08);
  border-color:var(--filter-line)!important;
  background:
    radial-gradient(circle at 50% 120%,var(--filter-glow),transparent 62%),
    linear-gradient(135deg,var(--filter-fill),rgba(10,24,45,.76))!important;
  color:#c7d6e6!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,filter .16s ease!important;
}

body[data-ui-context="skins"] .skins-v77__filter::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:12px;
  right:12px;
  bottom:-1px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--filter-a),var(--filter-b),transparent);
  opacity:.48;
  box-shadow:0 0 10px color-mix(in srgb,var(--filter-a) 38%,transparent);
  transition:opacity .16s ease,box-shadow .16s ease;
}

body[data-ui-context="skins"] .skins-v77__filter strong{
  position:relative;
  z-index:1;
  color:inherit;
}

body[data-ui-context="skins"] .skins-v77__filter span{
  position:relative;
  z-index:1;
  border:1px solid color-mix(in srgb,var(--filter-a) 18%,transparent);
  background:color-mix(in srgb,var(--filter-a) 9%,rgba(255,255,255,.045))!important;
  color:color-mix(in srgb,var(--filter-a) 66%,#c8d5e4 34%)!important;
  transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
}

/* ALL — Bombarera cyan + violet, representing the whole collection. */
body[data-ui-context="skins"] .skins-v77__filter[data-skin-filter="all"]{
  --filter-a:#62e5ff;
  --filter-b:#9a6cff;
  --filter-fill:rgba(23,66,96,.72);
  --filter-line:rgba(98,229,255,.25);
  --filter-glow:rgba(84,209,255,.12);
}

/* COMMON — calm steel/cyan. */
body[data-ui-context="skins"] .skins-v77__filter[data-skin-filter="common"]{
  --filter-a:#63ddff;
  --filter-b:#3b87b7;
  --filter-fill:rgba(18,57,82,.70);
  --filter-line:rgba(101,220,255,.24);
  --filter-glow:rgba(76,199,255,.11);
}

/* RARE — electric cyan/blue. */
body[data-ui-context="skins"] .skins-v77__filter[data-skin-filter="rare"]{
  --filter-a:#55ecff;
  --filter-b:#4c7dff;
  --filter-fill:rgba(12,57,105,.72);
  --filter-line:rgba(82,225,255,.32);
  --filter-glow:rgba(54,221,255,.16);
}

/* EPIC — violet/magenta. */
body[data-ui-context="skins"] .skins-v77__filter[data-skin-filter="epic"]{
  --filter-a:#bd78ff;
  --filter-b:#ff5fc8;
  --filter-fill:rgba(63,32,105,.72);
  --filter-line:rgba(202,123,255,.31);
  --filter-glow:rgba(177,92,255,.15);
}

/* LEGENDARY — gold/amber. */
body[data-ui-context="skins"] .skins-v77__filter[data-skin-filter="legendary"]{
  --filter-a:#ffd35d;
  --filter-b:#ff9f43;
  --filter-fill:rgba(87,58,24,.72);
  --filter-line:rgba(255,207,91,.34);
  --filter-glow:rgba(255,193,63,.16);
}

/* OWNED — collection status, kept distinct from rarity with mint + Bombarera violet. */
body[data-ui-context="skins"] .skins-v77__filter[data-skin-filter="owned"]{
  --filter-a:#62f0b5;
  --filter-b:#9b72ff;
  --filter-fill:rgba(22,67,65,.70);
  --filter-line:rgba(98,240,181,.27);
  --filter-glow:rgba(98,240,181,.12);
}

body[data-ui-context="skins"] .skins-v77__filter:hover{
  color:#fff!important;
  border-color:color-mix(in srgb,var(--filter-a) 58%,transparent)!important;
  background:
    radial-gradient(circle at 50% 110%,color-mix(in srgb,var(--filter-a) 22%,transparent),transparent 65%),
    linear-gradient(135deg,color-mix(in srgb,var(--filter-a) 16%,var(--filter-fill)),rgba(12,27,50,.82))!important;
  box-shadow:0 8px 20px rgba(0,0,0,.16),0 0 16px color-mix(in srgb,var(--filter-a) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
body[data-ui-context="skins"] .skins-v77__filter:hover::before{opacity:.82}

body[data-ui-context="skins"] .skins-v77__filter.is-active{
  color:#fff!important;
  border-color:color-mix(in srgb,var(--filter-a) 72%,white 6%)!important;
  background:
    radial-gradient(circle at 50% 105%,color-mix(in srgb,var(--filter-a) 30%,transparent),transparent 66%),
    linear-gradient(135deg,color-mix(in srgb,var(--filter-a) 26%,var(--filter-fill)),color-mix(in srgb,var(--filter-b) 20%,rgba(12,26,50,.90)))!important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.20),
    0 0 22px color-mix(in srgb,var(--filter-a) 17%,transparent),
    inset 0 1px 0 rgba(255,255,255,.13)!important;
}
body[data-ui-context="skins"] .skins-v77__filter.is-active::before{
  left:8px;
  right:8px;
  height:3px;
  opacity:1;
  box-shadow:0 0 14px color-mix(in srgb,var(--filter-a) 62%,transparent);
}
body[data-ui-context="skins"] .skins-v77__filter.is-active span{
  border-color:color-mix(in srgb,var(--filter-a) 62%,white 6%)!important;
  background:linear-gradient(135deg,var(--filter-a),var(--filter-b))!important;
  color:#07111f!important;
  box-shadow:0 0 13px color-mix(in srgb,var(--filter-a) 28%,transparent);
}

/* Gold count needs dark ink for contrast. */
body[data-ui-context="skins"] .skins-v77__filter[data-skin-filter="legendary"].is-active span{
  color:#251608!important;
}

@media (max-width:700px){
  body[data-ui-context="skins"] .skins-v77__filter::before{left:9px;right:9px}
}

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