.roster-grid{display:block;width:100%;max-width:1400px;margin:0 auto;padding:2rem 1rem}.roster-grid__title{text-align:center;margin-bottom:2rem;font-size:2rem}.roster-grid-filter-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:start;gap:var(--roster-filter-gap, 1rem);padding:var(--roster-filter-padding, 1rem 1.5rem);margin-bottom:2rem;background-color:var(--roster-filter-bg-color, rgba(255, 255, 255, .05));border-radius:var(--roster-filter-border-radius, 12px);border:1px solid var(--roster-filter-border-color, rgba(255, 255, 255, .1))}.roster-grid-filter-group{display:flex;flex-direction:column;gap:.25rem}.roster-grid-filter-container select{-webkit-appearance:none;appearance:none;background-color:var(--roster-filter-input-bg, rgba(0, 0, 0, .3));color:var(--roster-filter-text-color, #ffffff);font-size:var(--roster-filter-font-size, 14px);font-weight:500;padding:.625rem 2.5rem .625rem 1rem;border:1px solid var(--roster-filter-input-border, rgba(255, 255, 255, .2));border-radius:var(--roster-filter-input-radius, 8px);cursor:pointer;min-width:150px;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}.roster-grid-filter-container select:hover{border-color:var(--roster-filter-input-hover-border, rgba(255, 255, 255, .4));background-color:var(--roster-filter-input-hover-bg, rgba(0, 0, 0, .4))}.roster-grid-filter-container select:focus{outline:none;border-color:var(--roster-filter-focus-color, #ffd700);box-shadow:0 0 0 3px #ffd70033}.roster-grid-filter-container select option{background-color:#1a1a1a;color:#fff;padding:.5rem}.roster-grid-filter-toggle{display:flex;align-items:center;gap:.5rem}.roster-grid-filter-toggle input[type=checkbox]{-webkit-appearance:none;appearance:none;width:20px;height:20px;background-color:var(--roster-filter-input-bg, rgba(0, 0, 0, .3));border:1px solid var(--roster-filter-input-border, rgba(255, 255, 255, .2));border-radius:4px;cursor:pointer;position:relative;transition:border-color .2s ease,background-color .2s ease}.roster-grid-filter-toggle input[type=checkbox]:hover{border-color:var(--roster-filter-input-hover-border, rgba(255, 255, 255, .4))}.roster-grid-filter-toggle input[type=checkbox]:checked{background-color:var(--roster-filter-checkbox-checked-bg, #ffd700);border-color:var(--roster-filter-checkbox-checked-bg, #ffd700)}.roster-grid-filter-toggle input[type=checkbox]:checked:after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)}.roster-grid-filter-toggle input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 3px #ffd7004d}.roster-grid-filter-toggle label{font-size:var(--roster-filter-font-size, 14px);color:var(--roster-filter-text-color, #ffffff);cursor:pointer;-webkit-user-select:none;user-select:none}.roster-grid-filter-label{font-size:var(--roster-filter-label-size, 12px);color:var(--roster-filter-label-color, #888);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}#search-input{padding:.7rem 2rem}@media screen and (max-width:749px){#search-input{width:100%}.roster-grid-filter-container{flex-direction:column;align-items:stretch;gap:.75rem}.roster-grid-filter-container select{width:100%;min-width:unset}.roster-grid-filter-toggle{justify-content:center}}.roster-grid__container{display:grid;grid-template-columns:repeat(var(--roster-cards-per-row, 4),1fr);gap:var(--roster-card-gap, 16px)}.roster-grid__group{grid-column:1 / -1;margin-top:2rem;margin-bottom:1rem}.roster-grid__group:first-child{margin-top:0}.roster-grid__group-title{font-size:1.5rem;font-weight:600;padding-bottom:.5rem;border-bottom:2px solid currentColor}.roster-card{position:relative;aspect-ratio:var(--roster-card-aspect-ratio, .75);border-radius:var(--roster-card-border-radius, 8px);overflow:hidden;background-color:#1a1a1a;transform:translateZ(0);will-change:transform;transition:transform .3s ease,box-shadow .3s ease}.roster-card:hover,.roster-card:focus-within{transform:scale(1.03);box-shadow:0 8px 25px #0000004d;z-index:1}.roster-card__link{display:block;position:absolute;top:0;right:0;bottom:0;left:0;text-decoration:none;color:inherit}.roster-card__link:focus{outline:none}.roster-card__link:focus-visible{outline:3px solid #fff;outline-offset:-3px}.roster-card__image--primary,.roster-card__image--secondary{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:opacity .3s ease,transform .3s ease}.roster-card:hover .roster-card__image,.roster-card:focus-within .roster-card__image{transform:scale(1.05)}.roster-card__image--secondary{opacity:0}.roster-card:hover .roster-card__image--secondary,.roster-card:focus-within .roster-card__image--secondary{opacity:1}@media(prefers-reduced-motion:reduce){.roster-card__image--primary,.roster-card__image--secondary{transition:none}.roster-card:hover .roster-card__image--secondary,.roster-card:focus-within .roster-card__image--secondary{opacity:1}.roster-card:hover .roster-card__image--primary,.roster-card:focus-within .roster-card__image--primary{opacity:0}}.roster-card__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,var(--roster-overlay-color, #000) 0%,rgba(0,0,0,calc(var(--roster-overlay-opacity, .4) * .7)) 40%,transparent 70%);pointer-events:none;transition:background .3s ease}.roster-card:hover .roster-card__overlay,.roster-card:focus-within .roster-card__overlay{background:linear-gradient(to top,var(--roster-overlay-color, #000) 0%,rgba(0,0,0,calc(var(--roster-overlay-opacity, .4) + .2)) 50%,rgba(0,0,0,.1) 80%)}.roster-card__content{position:absolute;bottom:0;left:0;right:0;padding:1rem;display:flex;flex-direction:column;gap:.25rem;pointer-events:none}.roster-card__nickname{font-size:var(--roster-nickname-font-size, 12px);color:var(--roster-nickname-color, #ccc);font-style:italic;text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.roster-card__name{font-size:var(--roster-name-font-size, 18px);font-weight:var(--roster-name-font-weight, 700);color:var(--roster-name-color, #fff);margin:0;line-height:1.2;text-shadow:0 2px 4px rgba(0,0,0,.5)}.roster-card__championships{display:flex;flex-direction:column;gap:.125rem;margin-top:.25rem}.roster-card__championship{font-size:var(--roster-championship-font-size, 11px);color:var(--roster-championship-color, #ffd700);font-weight:500;line-height:1.3;text-shadow:0 1px 2px rgba(0,0,0,.7)}.roster-card__factions{position:absolute;top:.5rem;left:.5rem;right:.5rem;display:flex;flex-wrap:wrap;gap:.375rem;z-index:2}.roster-card__faction{font-size:var(--roster-faction-font-size, 12px);color:var(--roster-faction-color, #aaa);background:#0009;padding:.25rem .5rem;border-radius:4px;text-decoration:none;transition:color .2s ease,background-color .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.roster-card__faction:hover,.roster-card__faction:focus{color:var(--roster-faction-hover-color, #fff);background:#000c}.roster-card__faction:focus-visible{outline:2px solid #fff;outline-offset:2px}.roster-card__featured{display:var(--roster-show-featured-badge, none);position:absolute;top:.5rem;right:.5rem;background:linear-gradient(135deg,gold,#ff8c00);color:#000;font-size:10px;font-weight:700;padding:.25rem .5rem;border-radius:4px;text-transform:uppercase;letter-spacing:.05em;z-index:2}.roster-grid__footer{display:flex;justify-content:center;align-items:center;margin-top:2rem;min-height:48px}.roster-grid__load-more{background:linear-gradient(135deg,#333,#222);color:#fff;border:none;padding:.875rem 2rem;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:background .2s ease,transform .2s ease}.roster-grid__load-more:hover{background:linear-gradient(135deg,#444,#333);transform:translateY(-2px)}.roster-grid__load-more:focus-visible{outline:3px solid #fff;outline-offset:2px}.roster-grid__load-more:disabled{opacity:.5;cursor:not-allowed;transform:none}.roster-grid__loading{display:flex;align-items:center;justify-content:center;gap:.5rem}.roster-grid__loading[hidden]{display:none}.roster-grid__spinner{width:24px;height:24px;border:3px solid rgba(0,0,0,.1);border-top-color:#000;border-radius:50%;animation:roster-spin .8s linear infinite}@keyframes roster-spin{to{transform:rotate(360deg)}}.roster-grid__end-sentinel{height:1px;width:100%}.roster-card--skeleton{animation:roster-pulse 1.5s ease-in-out infinite}.roster-card--skeleton .roster-card__content{opacity:0}@keyframes roster-pulse{0%,to{background-color:#2a2a2a}50%{background-color:#3a3a3a}}.roster-grid__no-results{grid-column:1 / -1;text-align:center;padding:3rem 1rem;color:#888;font-size:1rem}.roster-grid__no-results p{margin:0}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.roster-card,.roster-card__image,.roster-card__overlay,.roster-grid__load-more,.roster-card__faction{transition:none}.roster-card:hover,.roster-card:focus-within{transform:none}.roster-card:hover .roster-card__image,.roster-card:focus-within .roster-card__image{transform:none}.roster-grid__spinner{animation:none;border-top-color:transparent;border-right-color:#fff;border-bottom-color:#fff}.roster-card--skeleton{animation:none}}@media(prefers-contrast:high){.roster-card__link:focus-visible{outline-width:4px}.roster-card__faction:focus-visible{outline-width:3px}.roster-card__overlay{background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.7) 50%,transparent 80%)}}
/*# sourceMappingURL=/cdn/shop/t/26/assets/roster-grid.css.map */