.champion-filter-bar{flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.champion-filter-bar__search{flex:1;min-width:200px;max-width:280px;position:relative}.champion-filter-bar__search-icon{color:#6b7280;pointer-events:none;position:absolute;top:50%;left:.875rem;transform:translateY(-50%)}.champion-filter-bar__search-input{color:#fff;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:.375rem;width:100%;padding:.5rem .875rem .5rem 2.5rem;font-size:.875rem;transition:border-color .2s,background-color .2s}.champion-filter-bar__search-input::placeholder{color:#6b7280}.champion-filter-bar__search-input:focus{background:#ffffff14;border-color:#d946ef80;outline:none}.champion-filter-bar__dropdowns{gap:.5rem;display:flex}.champion-filter-bar__select{color:#fff;cursor:pointer;-webkit-appearance:none;appearance:none;background:#ffffff0d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") right .75rem center no-repeat;border:1px solid #ffffff1a;border-radius:.375rem;padding:.5rem 2rem .5rem .75rem;font-size:.875rem;transition:border-color .2s,background-color .2s}.champion-filter-bar__select:focus{border-color:#d946ef80;outline:none}.champion-filter-bar__select option{color:#fff;background:#1a1f2e}.champion-filter-bar__tiers{gap:.25rem;margin-left:auto;display:flex}.champion-filter-bar__tier-btn{color:#9ca3af;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:.375rem;padding:.375rem .75rem;font-size:.75rem;font-weight:600;transition:all .2s}.champion-filter-bar__tier-btn:hover{background:#ffffff1a}.champion-filter-bar__tier-btn--active{color:#fff;background:#d946ef33;border-color:#d946ef66}.champion-filter-bar__tier-btn--tier1.champion-filter-bar__tier-btn--active{color:#d1d5db;background:#9ca3af33;border-color:#9ca3af66}.champion-filter-bar__tier-btn--tier2.champion-filter-bar__tier-btn--active{color:#6ee7b7;background:#10b98133;border-color:#10b98166}.champion-filter-bar__tier-btn--tier3.champion-filter-bar__tier-btn--active{color:#93c5fd;background:#3b82f633;border-color:#3b82f666}.champion-filter-bar__tier-btn--tier4.champion-filter-bar__tier-btn--active{color:#d8b4fe;background:#a855f733;border-color:#a855f766}.champion-filter-bar__tier-btn--tier5.champion-filter-bar__tier-btn--active{color:#fcd34d;background:#f59e0b33;border-color:#f59e0b66}@media (max-width:768px){.champion-filter-bar{flex-direction:column;align-items:stretch}.champion-filter-bar__search{max-width:none}.champion-filter-bar__dropdowns{width:100%}.champion-filter-bar__select{flex:1}.champion-filter-bar__tiers{flex-wrap:wrap;justify-content:center;margin-left:0}}