.character-portal{width:960px;max-width:calc(100% - 40px);margin:0 20px 28px}.character-count-summary{margin:0 0 12px;font-weight:700}.character-portal-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px;padding:0}.character-portal-filter-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;min-height:48px;padding:0;border:none;border-radius:50%;background-color:var(--attr-btn-bg-color, #999);color:var(--attr-btn-text-color, #fff);font-weight:700;font-size:.9rem;line-height:1;opacity:.6;cursor:pointer;box-shadow:none;transition:background-color .3s,color .3s,opacity .3s,box-shadow .3s}.character-portal-filter-button:hover,.character-portal-filter-button:focus-visible,.character-portal-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))}.character-portal-filter-button:hover{opacity:.85}.character-portal-filter-button.is-active{opacity:1;box-shadow:0 0 0 2px #fff inset,0 0 4px #0000004d}.character-portal-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)}.character-portal-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)}.character-portal-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)}.character-portal-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)}.character-portal-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)}.character-portal-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)}.character-portal-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)}.character-portal-filter-button:focus-visible,.character-portal-item:focus-visible{outline:2px solid var(--side-active-color);outline-offset:2px}.character-portal-sections{display:grid;gap:22px}.character-portal-section.is-filtered-out,.character-portal-item.is-filtered-out{display:none!important}.character-portal-rarity-heading{margin:0 0 10px;padding:8px 10px;border-left:5px solid var(--primary-color);background:#f1f5f9;color:#222;font-size:1.08rem;line-height:1.3}.character-portal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px}.character-portal-item{display:flex;min-width:0;min-height:102px;flex-direction:column;align-items:center;gap:4px;box-sizing:border-box;padding:8px 6px;border:1px solid #d8dde3;border-radius:8px;background:#fff;color:#222;text-align:center;text-decoration:none}.character-portal-item:hover,.character-portal-item:focus-visible{border-color:var(--primary-dark-color);background:#f7fbff}.character-portal-image{width:56px;height:56px;flex:0 0 auto;border-radius:10%}.character-portal-name{display:block;max-width:100%;overflow:hidden;font-size:.72rem;font-weight:700;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.character-portal-empty{margin:16px 0;color:#667085;font-weight:700}@media screen and (max-width:768px){.character-portal{width:auto;max-width:none;margin:0 10px 24px}.character-portal-filter{flex-wrap:nowrap;gap:5px;margin-bottom:16px}.character-portal-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);line-height:1}.character-portal-sections{gap:18px}.character-portal-rarity-heading{margin-bottom:8px;padding:7px 9px;font-size:1rem}.character-portal-grid{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:4px}.character-portal-item{min-height:94px;padding:7px 5px}.character-portal-image{width:50px;height:50px}}