:root{--gutter-l: clamp(24px, 4.8vw, 45px);--gutter-r: clamp(15px, 3vw, 30px);--page-pad: clamp(8px, 2vw, 16px);--champ-width: clamp(4.813rem, 3.208rem + 7.13vw, 9.625rem)}.main-content{position:relative;z-index:0}.main-content:before{content:"";position:fixed;top:var(--nav-h);left:0;width:100%;height:calc(100% - var(--nav-h));background-size:cover;background-position:center;opacity:.15;z-index:-1;pointer-events:none}.champion-grid-wrapper{width:calc(min(100dvw,1440px) - var(--gutter-l) - var(--gutter-r) - var(--page-pad));margin-inline:auto;padding-top:var(--page-pad)}.champion-grid{--tile-min: 77px;--tile-max: 154px;--gap: clamp(5px, 2vw, 24px);display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--champ-width),max-content));gap:var(--gap);justify-content:center;content-visibility:auto;margin-left:auto;margin-right:auto;width:100%}.champion-empty-message{display:none;grid-column:1 / -1;color:#fff;text-align:center;font-family:Eurostile;font-size:1.6rem;margin:2rem 0}.champion-grid.empty .champion-empty-message{display:block}.champion-cell{display:flex;justify-content:center;align-items:center}.champion-cell img{width:var(--champ-width);height:auto;display:block}.portrait-tech:hover{filter:drop-shadow(0 0 1rem rgb(0,102,200))}.portrait-mystic:hover{filter:drop-shadow(0 0 1rem rgb(200,0,181))}.portrait-cosmic:hover{filter:drop-shadow(0 0 1rem rgb(0,200,191))}.portrait-mutant:hover{filter:drop-shadow(0 0 1rem rgb(222,218,0))}.portrait-skill:hover{filter:drop-shadow(0 0 1rem rgb(200,26,22))}.portrait-science:hover{filter:drop-shadow(0 0 1rem rgb(31,200,22))}.az-sidebar{--azs-height: calc(95svh - var(--nav-h) - var(--page-pad));position:fixed;inset-block-start:calc(var(--nav-h) + var(--page-pad));inset-inline-end:env(safe-area-inset-right);inline-size:var(--gutter-r);height:var(--azs-height);container-type:size;display:grid;grid-template-rows:repeat(26,1fr);align-items:center;justify-content:center;background-color:#0000000d;color:#666;font-family:sans-serif;transition:background-color .3s,color .3s;z-index:1}@media(hover:hover){.az-sidebar:hover{background-color:#0000001a;color:#000}.az-sidebar:hover span:not(.az-sidebar-disabled){color:#fff}}.az-sidebar span{cursor:pointer;margin:.125rem .2rem .125rem 0;user-select:none;transition:color .2s;display:flex;--az-row: calc(100cqh / 26);font-size:clamp(8px,min(calc(var(--az-row) * .9),90cqw),24px);color:#f0f0f0}.az-sidebar span.az-sidebar-disabled{color:#555;cursor:default;pointer-events:none}@media(hover:hover){.az-sidebar span:not(.az-sidebar-disabled):hover{color:#007bff}}@media(hover:none){.az-sidebar{background-color:#0000001a;color:#000;transition:none}}.filter-button{position:fixed;inset-block-start:calc(var(--nav-h) + var(--page-pad));inset-inline-start:calc(env(safe-area-inset-left) + var(--page-pad));inline-size:var(--gutter-l);aspect-ratio:1412 / 2048;display:grid;place-items:center;z-index:1;border:none;font-size:1.5rem;cursor:pointer;color:#999;transition:color .3s}.filter-button svg{width:100%;height:100%;display:block;pointer-events:none}.filter-button:hover{color:#fff}.backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0000004d;z-index:2;display:none;opacity:0;transition:opacity .3s}.backdrop.visible{display:block;opacity:1}