.directory-index{--hub-header-height:83px;--hub-nav-height:66px}
.directory-index .player-hub-nav{position:sticky;top:var(--hub-header-height);z-index:15;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;padding:10px 2px;margin:26px 0 36px;background:#0c0d0f;border-block:1px solid #303038;box-shadow:0 8px 16px #0003;isolation:isolate}
.directory-index .player-hub-nav a{flex:0 0 auto;white-space:nowrap;min-height:44px;display:flex;align-items:center;padding:10px 14px;font-size:13px;border-radius:6px}
.directory-index .player-hub-nav a[aria-current="location"]{color:#ffb08d;border-color:#ff8656;background:#281c18}
.directory-index .player-hub-nav a:focus-visible{outline-offset:-3px}
.directory-index :is(#directory,#compare,#teams,#world-ranking,#player-skins,#player-questions){scroll-margin-top:calc(var(--hub-header-height) + var(--hub-nav-height) + 16px - var(--hub-scroll-padding,0px))}
@media(max-width:1050px){.directory-index{--hub-header-height:128px}.directory-index .player-hub-nav{margin-top:20px}}

.player-skins-widget{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px;background:#17181d;border:1px solid #414149;border-radius:12px;color:#f3f1f7;text-decoration:none}.player-skins-widget:hover{border-color:#ff8656;background:#1d1c20}.player-skins-widget:focus-visible{outline:2px solid #ffab86;outline-offset:4px}.player-skins-widget p{margin:0 0 18px;color:#b8b5bd;line-height:1.65;max-width:680px}.player-skins-widget svg{width:80px;height:80px;flex:0 0 80px;color:#ff9d78}.player-skins-cta{color:#ffab86;font-size:14px}.player-skins-cta span{margin-left:12px}@media(max-width:550px){.player-skins-widget{padding:22px;gap:16px}.player-skins-widget svg{width:48px;height:48px;flex-basis:48px}}

.skin-showcase-heading{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:22px}.skin-showcase-heading h2{margin-bottom:10px}.skin-showcase-heading p{margin:0;color:#b8b5bd;max-width:700px;line-height:1.6}.skin-rail-pause{flex:0 0 44px;width:44px;height:44px;border:1px solid #49464f;border-radius:50%;color:#ddd;background:#19181e;font-size:18px;cursor:pointer}.skin-rail-pause[hidden]{display:none}.skin-rail{display:block;overflow:hidden;position:relative;border:1px solid #343039;border-radius:12px;background:#121116;color:#fff;text-decoration:none}.skin-rail-track{display:flex;width:max-content;animation:skin-rail-loop 44s linear infinite;animation-play-state:paused}.skin-showcase.is-visible .skin-rail-track{animation-play-state:running}.skin-rail-track ul{display:flex;list-style:none;gap:12px;padding:16px 12px 16px 0;margin:0}.skin-rail-card{--rail-accent:#ab91ff;width:204px;flex:0 0 204px;padding:14px 16px 18px;background:radial-gradient(ellipse at 50% 35%,#40315066,transparent 70%),#1b1821;border-bottom:2px solid var(--rail-accent)}.skin-rail-card.tone-1{--rail-accent:#f0a46f}.skin-rail-card.tone-2{--rail-accent:#85b3ea}.skin-rail-card img{display:block;width:100%;height:130px;object-fit:contain;filter:drop-shadow(0 10px 10px #0006)}.skin-rail-card strong,.skin-rail-card>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.skin-rail-card strong{font-size:14px;margin-top:8px}.skin-rail-card>span{font-size:13px;color:var(--rail-accent);margin-top:5px}.skin-rail-cta{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-top:1px solid #343039;font-size:14px;color:#ffad86;background:#151318}.skin-rail-cta>span{font-size:22px}.skin-rail:hover{border-color:#a57867}.skin-rail:focus-visible,.skin-rail-pause:focus-visible{outline:2px solid #ffab86;outline-offset:4px}@keyframes skin-rail-loop{to{transform:translateX(-50%)}}@media(max-width:550px){.skin-rail-card{width:164px;flex-basis:164px;padding:10px 12px 14px}.skin-rail-card img{height:108px}.skin-showcase-heading{gap:12px}.skin-showcase-heading p{font-size:14px}}@media(prefers-reduced-motion:reduce){.skin-rail-track{animation:none}.skin-rail{overflow-x:auto}.skin-rail-track ul[aria-hidden]{display:none}.skin-rail-pause{display:none}}

.skin-rail-card{background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--rail-accent) 32%,transparent),transparent 72%),#1b1821}.skin-rail-card img{filter:drop-shadow(0 0 9px color-mix(in srgb,var(--rail-accent) 60%,transparent)) drop-shadow(0 0 22px color-mix(in srgb,var(--rail-accent) 30%,transparent))}

.directory-more{margin:24px 0}.directory-more[hidden]{display:none}.team-player-status{display:block;font-size:11px;font-weight:400;opacity:.75}.player-team a:has(.team-player-status){align-items:flex-start;flex-direction:column}
