form[data-filters] .filters__row,
form.filters__row {
  align-items: flex-end;
  row-gap: 10px;
}








select.filters__select:not([name="sort"]):has(option:checked:not([value=""])),
select.filters__select[name="sort"]:has(option[value="rarity"]:checked),
input.filters__select:not(:placeholder-shown),
.filters__search:not(:placeholder-shown) {
  border-color: var(--accent);
  color: var(--accent);
}


.filters__search--flat:not(:placeholder-shown) {
  box-shadow: inset 0 0 0 1px var(--accent);
}






























.chara-grid .chara-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 190px auto 164px;
}










.eq-grid .eq-link {
  position: relative;
  width: 118px;
  height: 118px;
  transition: transform 0.16s ease-out;
}
.eq-grid .eq-link:hover { transform: translateY(-4px); }


.eq-grid .eq-link::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 3;
  border: 1px solid transparent;
  border-radius: 8px;
  pointer-events: none;
  transition: border-color 0.16s ease-out;
}
.eq-grid .eq-link:hover::after { border-color: rgba(255, 206, 110, 0.45); }
.eq-grid .eq-link:focus-visible { outline: none; transform: translateY(-4px); }




.eq-grid .eq-link:focus-visible::after {
  border-width: 2px;
  border-color: var(--focus);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .eq-grid .eq-link,
  .eq-grid .eq-link::after,
  .filters__clear { transition: none; }
  .eq-grid .eq-link:hover,
  .eq-grid .eq-link:focus-visible { transform: none; }
}





@media (max-width: 560px) {
  .fgroup { flex: 1 1 140px; }
  .fgroup .filters__select,
  .fgroup .filters__search { width: 100%; }
  

  .eq-grid { gap: 14px; }
}








@media (max-width: 415px) {
  .chara-grid .chara-card { zoom: .85; } 
}
@media (max-width: 359px) {
  .chara-grid .chara-card { zoom: .74; } 
}