.attribute-filter{display:flex;flex-wrap:wrap;gap:8px}.attribute-filter-button{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;min-height:48px;padding:0;border:0;border-radius:50%;background-color:var(--attr-btn-bg-color, #999);color:var(--attr-btn-text-color, #fff);font-size:.9rem;font-weight:700;line-height:1;opacity:.6;cursor:pointer;transition:background-color .3s,color .3s,opacity .3s,box-shadow .3s}.attribute-filter-button:hover,.attribute-filter-button:focus-visible,.attribute-filter-button.is-active{background-color:var(--attr-btn-hover-color, var(--attr-btn-bg-color, #999));color:var(--attr-btn-hover-text-color, var(--attr-btn-text-color, #fff))}.attribute-filter-button:hover{opacity:.85}.attribute-filter-button.is-active{opacity:1;box-shadow:0 0 0 2px #fff inset,0 0 4px #0000004d}.attribute-filter-button:focus-visible{outline:2px solid var(--side-active-color);outline-offset:2px}.attribute-filter-button.all{--attr-btn-bg-color: var(--attribute-all-color);--attr-btn-hover-color: var(--attribute-all-hover-color);--attr-btn-text-color: var(--attribute-all-text-color);--attr-btn-hover-text-color: var(--attribute-all-hover-text-color)}.attribute-filter-button.blue{--attr-btn-bg-color: var(--attribute-blue-color);--attr-btn-hover-color: var(--attribute-blue-hover-color);--attr-btn-text-color: var(--attribute-blue-text-color);--attr-btn-hover-text-color: var(--attribute-blue-hover-text-color)}.attribute-filter-button.red{--attr-btn-bg-color: var(--attribute-red-color);--attr-btn-hover-color: var(--attribute-red-hover-color);--attr-btn-text-color: var(--attribute-red-text-color);--attr-btn-hover-text-color: var(--attribute-red-hover-text-color)}.attribute-filter-button.green{--attr-btn-bg-color: var(--attribute-green-color);--attr-btn-hover-color: var(--attribute-green-hover-color);--attr-btn-text-color: var(--attribute-green-text-color);--attr-btn-hover-text-color: var(--attribute-green-hover-text-color)}.attribute-filter-button.yellow{--attr-btn-bg-color: var(--attribute-yellow-color);--attr-btn-hover-color: var(--attribute-yellow-hover-color);--attr-btn-text-color: var(--attribute-yellow-text-color);--attr-btn-hover-text-color: var(--attribute-yellow-hover-text-color)}.attribute-filter-button.heaven{--attr-btn-bg-color: var(--attribute-heaven-color);--attr-btn-hover-color: var(--attribute-heaven-hover-color);--attr-btn-text-color: var(--attribute-heaven-text-color);--attr-btn-hover-text-color: var(--attribute-heaven-hover-text-color)}.attribute-filter-button.dark{--attr-btn-bg-color: var(--attribute-dark-color);--attr-btn-hover-color: var(--attribute-dark-hover-color);--attr-btn-text-color: var(--attribute-dark-text-color);--attr-btn-hover-text-color: var(--attribute-dark-hover-text-color)}.filter-panel{display:flex;width:calc(100% - 40px);max-width:600px;flex-direction:column;align-items:flex-start;box-sizing:border-box;gap:12px;margin:16px 20px 24px;padding:14px;border:1px solid #dfe3e8;border-radius:10px;background:#f8fafc}.filter-panel .attribute-filter{box-sizing:border-box;width:100%;padding-bottom:12px;border-bottom:1px solid #e1e5ea}.filter-panel .filter-section,.filter-panel .checkbox-group,.filter-panel .radio-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.filter-panel .filter-checkbox,.filter-panel .stylish-radio{display:inline-flex;align-items:center;box-sizing:border-box;min-height:36px;gap:0;margin:0;padding:6px 10px;border:1px solid #d8dde3;border-radius:999px;background:#fff;color:#333;font-size:.93rem;line-height:1.25;cursor:pointer;transition:background-color .2s,border-color .2s,box-shadow .2s}.filter-panel .filter-checkbox:hover,.filter-panel .stylish-radio:hover{border-color:#aeb8c3;background:#f4f8fc}.filter-panel .filter-checkbox:has(input:checked),.filter-panel .stylish-radio:has(input:checked){border-color:#78aede;background:#edf6ff;box-shadow:0 0 0 1px #1e88e514}.filter-panel .filter-checkbox:focus-within,.filter-panel .stylish-radio:focus-within{outline:2px solid var(--side-active-color);outline-offset:2px}.filter-panel .filter-checkbox .stylish-checkbox,.filter-panel .stylish-radio input[type=radio]{flex:0 0 auto;margin:0 7px 0 0}.battle-filter-area{max-width:none;margin:0;padding:0;border:0;border-radius:0;background:transparent}.filter-panel.battle-filter-panel{max-width:620px}.battle-filter-row{display:grid;width:100%;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:center}.battle-filter-row.is-top-aligned{align-items:start}.battle-filter-label{display:flex;align-items:center;gap:6px;color:#303943;font-size:.92rem;font-weight:700;line-height:1.35}.battle-filter-control{display:flex;min-width:0;flex-wrap:wrap;align-items:center;gap:8px}.battle-filter-control-stack{flex-direction:column;align-items:stretch}.battle-filter-range .stylish-input{width:88px;margin:0}.battle-filter-separator{color:#66717e}.battle-filter-panel .stylish-select{width:220px;max-width:100%}.battle-filter-actions{display:flex;width:100%;align-items:center;gap:8px;padding-top:2px}.battle-filter-errors{margin:0;padding-left:1.4rem;color:#b3261e;font-size:.9rem}.battle-filter-error-message{color:#b3261e;font-size:.9rem}@media screen and (max-width:768px){.attribute-filter{flex-wrap:nowrap;gap:5px}.attribute-filter-button{width:clamp(32px,calc((100vw - 90px) / 7),42px);height:clamp(32px,calc((100vw - 90px) / 7),42px);min-width:clamp(32px,calc((100vw - 90px) / 7),42px);min-height:clamp(32px,calc((100vw - 90px) / 7),42px);font-size:clamp(.62rem,2.6vw,.82rem)}.filter-panel{width:calc(100% - 20px);margin-left:10px;margin-right:10px;padding:12px}}@media screen and (max-width:520px){.filter-panel{align-items:stretch}.filter-panel .checkbox-group{flex-direction:column;align-items:stretch}.filter-panel .filter-checkbox{width:100%}.filter-panel .radio-group{align-items:center}.battle-filter-row{grid-template-columns:minmax(0,1fr);gap:6px}.battle-filter-panel .stylish-select{width:100%;max-width:240px}}