@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg:#050408; --panel:rgba(12,9,18,.82); --panel-2:rgba(19,13,29,.94);
  --text:#f8f6fb; --muted:#9b94a6; --line:rgba(255,255,255,.09);
  --accent:#8b5cf6; --scroll-color:#8b5cf6; --gold:#f5bf4b;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,system-ui,sans-serif;background:radial-gradient(circle at 75% 4%,color-mix(in srgb,var(--scroll-color) 13%,transparent),transparent 30%),#050408;overflow-x:hidden;transition:background .45s ease}button,a,input{font:inherit}a{text-decoration:none;color:inherit}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--scroll-color) 3%,transparent) 60%,transparent 100%);transition:background .45s}
.ambient{position:fixed;width:440px;height:440px;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:-1;opacity:.1}.ambient-a{background:var(--scroll-color);top:12%;right:-200px}.ambient-b{background:#5b21b6;bottom:-220px;left:-180px}
.topbar{height:78px;max-width:1380px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.055)}.brand{display:flex;align-items:center;gap:12px}.brand-icon{width:39px;height:39px;border-radius:10px;box-shadow:0 0 28px color-mix(in srgb,var(--scroll-color) 35%,transparent)}.brand-title{font-weight:800;letter-spacing:-.5px}.brand-sub{font-size:9px;letter-spacing:2.5px;color:#a98ce8;margin-top:3px}nav{display:flex;gap:6px}nav a{padding:9px 14px;border-radius:9px;color:#918a9c;transition:.2s}nav a:hover,nav a.active{color:#fff;background:color-mix(in srgb,var(--scroll-color) 13%,transparent)}
main{max-width:1380px;margin:auto;padding:58px 28px 100px}.hero{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}.eyebrow{margin:0 0 8px;color:var(--scroll-color);font-size:11px;font-weight:800;letter-spacing:2.4px;transition:color .4s}.hero h1{margin:0;font-size:clamp(36px,5vw,66px);line-height:1;letter-spacing:-3.5px}.hero h1 span{background:linear-gradient(90deg,#fff,color-mix(in srgb,var(--scroll-color) 75%,white));-webkit-background-clip:text;color:transparent}.hero-text{color:var(--muted);margin:15px 0 0;max-width:690px;line-height:1.6}.live-status{border:1px solid color-mix(in srgb,var(--scroll-color) 30%,transparent);background:rgba(13,9,20,.72);padding:11px 14px;border-radius:12px;color:#b1a9bb;font-size:12px;white-space:nowrap}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--scroll-color);box-shadow:0 0 13px var(--scroll-color);margin-right:8px;transition:.4s}
.rank-toolbar{position:sticky;top:12px;z-index:10;margin-bottom:38px}.toolbar-frame{display:grid;grid-template-columns:auto minmax(240px,340px) minmax(0,1fr);align-items:center;gap:16px;padding:13px 14px;border:1px solid color-mix(in srgb,var(--scroll-color) 35%,rgba(255,255,255,.08));border-radius:18px;background:rgba(8,6,12,.82);backdrop-filter:blur(18px);box-shadow:0 15px 55px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.025);transition:border-color .4s}.toolbar-title{padding:0 8px;min-width:145px}.toolbar-kicker{display:block;color:#777080;font-size:9px;letter-spacing:1.7px;font-weight:800;margin-bottom:4px}.toolbar-title strong{font-size:13px}.search-box{height:42px;display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);border-radius:11px;color:#7f7888}.search-box span{font-size:22px;line-height:0}.search-box input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:12px}.search-box input::placeholder{color:#77717e}.search-box kbd{border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:2px 6px;color:#77717e;font-size:10px}.filter-scroll{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.filter-scroll::-webkit-scrollbar{display:none}.mode-chip{flex:0 0 auto;display:flex;align-items:center;gap:7px;border:1px solid transparent;background:transparent;color:#8d8796;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:11px;font-weight:700;transition:.2s}.mode-chip:hover{background:rgba(255,255,255,.045);color:#eee}.mode-chip.active{color:#fff;background:color-mix(in srgb,var(--scroll-color) 16%,transparent);border-color:color-mix(in srgb,var(--scroll-color) 38%,transparent);box-shadow:inset 0 0 18px color-mix(in srgb,var(--scroll-color) 8%,transparent)}.mode-dot{width:6px;height:6px;border-radius:50%;background:var(--mode-color);box-shadow:0 0 8px var(--mode-color)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:22px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:15px}.section-head h2{margin:0;font-size:24px;letter-spacing:-.8px}.count{color:#837c8d;font-size:12px}.player-list{display:grid;gap:13px}
.player-card{position:relative;min-height:180px;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:100px minmax(0,1fr) 250px 145px;align-items:center;padding:22px 24px;border:1px solid rgba(255,255,255,.075);border-radius:19px;background:linear-gradient(105deg,rgba(7,6,10,.98),rgba(17,12,25,.97) 60%,rgba(28,18,40,.88));box-shadow:0 14px 45px rgba(0,0,0,.23);opacity:0;transform:translateY(28px) scale(.985);transition:transform .3s,border-color .3s,box-shadow .3s,opacity .55s}.player-card.is-visible{opacity:1;transform:none}.player-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--scroll-color) 50%,rgba(255,255,255,.1));box-shadow:0 20px 65px color-mix(in srgb,var(--scroll-color) 11%,transparent)}.card-frame{position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid transparent;background:linear-gradient(120deg,color-mix(in srgb,var(--scroll-color) 35%,transparent),transparent 30%,transparent 70%,rgba(255,255,255,.05)) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.45;transition:.4s}.player-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 50%,color-mix(in srgb,var(--scroll-color) 13%,transparent),transparent 35%);z-index:-1}.featured{min-height:270px;grid-template-columns:140px minmax(0,1fr) 285px 150px;border-color:color-mix(in srgb,var(--scroll-color) 38%,rgba(255,255,255,.08));box-shadow:0 0 0 1px color-mix(in srgb,var(--scroll-color) 7%,transparent),0 25px 80px rgba(0,0,0,.3)}.featured:nth-child(2){min-height:245px}.featured:nth-child(3){min-height:225px}.featured .card-frame{opacity:.75}.featured .player-name{font-size:32px}.rank-wrap{display:flex;align-items:center;justify-content:center}.rank-badge{width:74px;height:84px;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);display:grid;place-items:center;background:linear-gradient(145deg,#ffe17c,#b87310 55%,#603200);box-shadow:inset 0 0 0 3px rgba(255,255,255,.28),0 8px 30px rgba(255,166,0,.16);color:#fff;font-size:27px;font-weight:800;text-shadow:0 2px 5px rgba(0,0,0,.5);position:relative}.rank-small{width:57px;height:65px;font-size:20px;background:linear-gradient(145deg,#a889ba,#5e486d 55%,#302236)}.rank-badge:after{content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.32);clip-path:inherit}.rank-4 .rank-badge,.rank-5 .rank-badge,.rank-6 .rank-badge{background:linear-gradient(145deg,#c9b9d6,#6e6078 55%,#39303f)}
.player-info{min-width:0}.name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.player-name{font-size:23px;font-weight:800;letter-spacing:-.7px}.tier-pill{border:1px solid color-mix(in srgb,var(--scroll-color) 55%,transparent);background:color-mix(in srgb,var(--scroll-color) 13%,transparent);color:#d8c5ff;padding:4px 8px;border-radius:7px;font-size:10px;font-weight:800}.slogan{margin:7px 0 15px;color:#a39aaa;font-size:12px}.ratings{display:flex;gap:16px;flex-wrap:wrap}.rating{min-width:65px}.rating-label{color:#766f7f;font-size:9px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}.rating-value{font-weight:700;font-size:12px}.active-rating .rating-label{color:var(--scroll-color)}.stars{letter-spacing:1px;color:var(--scroll-color);font-size:12px}.overall .stars{color:var(--gold)}.null{color:#625d67;font-weight:600}
.skin-box{align-self:stretch;min-width:0;position:relative;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}.skin-box img{position:absolute;right:0;top:-7%;width:225px;height:118%;object-fit:contain;object-position:center top;image-rendering:pixelated;filter:drop-shadow(0 16px 18px rgba(0,0,0,.52));-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 68%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 68%,transparent 100%);transition:transform .4s,filter .4s}.player-card:hover .skin-box img{transform:translateY(-5px) scale(1.025);filter:drop-shadow(0 18px 23px rgba(0,0,0,.58))}.featured .skin-box img{width:295px;height:125%;top:-8%}.skin-fallback{width:120px;height:120px;margin-top:30px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.025);border:1px dashed rgba(255,255,255,.12);color:#77707f;font-size:10px;text-align:center;padding:10px}
.card-actions{display:flex;justify-content:flex-end;align-items:center}.view-btn{border:1px solid color-mix(in srgb,var(--scroll-color) 58%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--scroll-color) 20%,transparent),rgba(20,12,28,.85));color:#fff;padding:11px 15px;border-radius:10px;cursor:pointer;font-weight:700;font-size:11px;transition:.2s}.view-btn:hover{background:color-mix(in srgb,var(--scroll-color) 22%,transparent);box-shadow:0 0 25px color-mix(in srgb,var(--scroll-color) 20%,transparent)}
.side-panel{display:grid;align-content:start;gap:14px}.panel{border:1px solid rgba(255,255,255,.075);border-radius:17px;padding:18px;background:rgba(10,7,15,.8);box-shadow:0 12px 35px rgba(0,0,0,.2)}.panel-title{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#c2b9ca;margin-bottom:14px}.legend{display:grid;gap:8px}.legend-row{display:flex;align-items:center;gap:10px;font-size:11px;color:#a29aa9}.legend-rank{width:30px;height:30px;display:grid;place-items:center;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:linear-gradient(145deg,#9b67d5,#412552);color:#fff;font-size:8px;font-weight:800}.mode-list{display:grid;gap:5px}.mode-summary-row{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:transparent;color:#aaa2b0;padding:9px 0;text-align:left;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.045)}.mode-summary-row:last-child{border-bottom:0}.mode-summary-row b{display:block;color:#eee8f2;font-size:11px}.mode-summary-row small{display:block;color:#6f6877;font-size:9px;margin-top:3px}.mode-summary-row strong{color:#726b79;transition:.2s}.mode-summary-row:hover strong{color:var(--scroll-color);transform:translateX(3px)}.info-panel p{color:#817987;font-size:10px;line-height:1.65}code{color:#d5b8f4;background:rgba(139,92,246,.08);padding:2px 4px;border-radius:4px}
.empty{padding:60px 20px;text-align:center;border:1px dashed rgba(255,255,255,.1);border-radius:18px;color:var(--muted)}.empty h3{color:#fff;margin-top:0}.hidden{display:none!important}
.modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.74);backdrop-filter:blur(8px)}.profile-modal{position:relative;width:min(800px,100%);max-height:90vh;overflow:auto;border:1px solid color-mix(in srgb,var(--scroll-color) 45%,rgba(255,255,255,.1));border-radius:22px;background:linear-gradient(135deg,#0b0810,#1b1226);box-shadow:0 30px 100px rgba(0,0,0,.7);animation:modalIn .25s ease-out}.close{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:rgba(0,0,0,.35);color:white;cursor:pointer;font-size:22px}.profile-inner{padding:30px}.profile-top{display:grid;grid-template-columns:165px 1fr;gap:25px;align-items:center}.profile-skin{height:230px;display:grid;place-items:end center;overflow:hidden}.profile-skin img{width:215px;height:260px;object-fit:contain;object-position:center top;image-rendering:pixelated;-webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 100%);mask-image:linear-gradient(to bottom,#000 68%,transparent 100%)}.profile-rank{color:var(--scroll-color);font-size:11px;font-weight:800;letter-spacing:1px}.profile-name{margin:6px 0;font-size:36px}.profile-slogan{color:#a69aaa;margin:0 0 18px}.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}.profile-stat{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(0,0,0,.18)}.profile-stat span{display:block;color:#756c7e;font-size:9px;text-transform:uppercase;letter-spacing:1px;margin-bottom:5px}.profile-stat strong{font-size:13px}.links{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}.links a{padding:9px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.1);color:#d6b4f0;font-size:11px}
.scroll-tint{position:fixed;right:0;top:0;width:3px;height:100vh;background:linear-gradient(to bottom,transparent 0 2%,var(--scroll-color) 2% 98%,transparent 98%);box-shadow:0 0 15px var(--scroll-color);opacity:.85;z-index:30;transform-origin:top;transition:background .35s}.scroll-tint:after{content:"";position:absolute;right:0;top:calc(var(--scroll-progress) * 100%);width:9px;height:9px;border-radius:50%;background:var(--scroll-color);box-shadow:0 0 16px var(--scroll-color);transform:translate(3px,-50%)}
@keyframes modalIn{from{opacity:0;transform:scale(.97) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.player-card{opacity:1;transform:none}}
@media(max-width:1100px){.toolbar-frame{grid-template-columns:1fr 1.2fr}.filter-scroll{grid-column:1/-1}.layout{grid-template-columns:1fr}.side-panel{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.topbar{padding:0 16px}nav{display:none}main{padding:35px 16px 70px}.hero{display:block}.live-status{display:inline-block;margin-top:20px}.player-card,.player-card.featured,.featured:nth-child(2),.featured:nth-child(3){grid-template-columns:68px minmax(0,1fr);min-height:200px;padding:18px}.featured{min-height:250px!important}.skin-box{position:absolute;right:4px;top:0;width:200px;height:100%;opacity:.42;z-index:-1}.skin-box img,.featured .skin-box img{width:200px;height:120%;top:-7%}.card-actions{grid-column:2;justify-content:flex-start;margin-top:12px}.ratings{gap:10px}.featured .player-name{font-size:26px}.side-panel{grid-template-columns:1fr}.profile-top{grid-template-columns:1fr}.profile-skin{height:190px}.profile-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rank-toolbar{top:5px}.toolbar-frame{grid-template-columns:1fr;padding:12px}.toolbar-title{display:none}.filter-scroll{grid-column:auto}.hero h1{letter-spacing:-2px}.player-name{font-size:19px}.featured .player-name{font-size:24px}.rank-badge{width:57px;height:65px;font-size:21px}.rank-small{width:48px;height:55px;font-size:17px}.profile-inner{padding:22px}.profile-name{font-size:30px}}

/* Production navigation: compact, floating, and directional. */
.topbar{
  position:fixed;left:50%;top:14px;transform:translate(-50%,0);width:min(1340px,calc(100% - 32px));height:64px;
  z-index:50;padding:0 16px;border:1px solid rgba(255,255,255,.10);border-radius:15px;
  background:rgba(8,7,11,.91);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 10px 35px rgba(0,0,0,.30);transition:transform .28s ease,opacity .28s ease,border-color .35s ease;
}
.topbar.nav-hidden{transform:translate(-50%,-115%);opacity:.15;pointer-events:none}
body{padding-top:0}
main{padding-top:116px}
.hero{max-width:1000px;margin:0 auto 32px;padding:12px 2px 6px;align-items:center}
.hero h1{font-size:clamp(34px,4.2vw,56px);letter-spacing:-2.8px}
.hero-text{font-size:14px;max-width:560px}
.live-status{font-size:11px;padding:9px 12px;border-radius:10px}
.rank-toolbar{position:sticky;top:92px;z-index:20;margin-bottom:34px}
.toolbar-frame{grid-template-columns:auto minmax(220px,330px) minmax(0,1fr);border-radius:14px;padding:10px 12px;box-shadow:0 10px 35px rgba(0,0,0,.28)}
.toolbar-frame:before{content:"";position:absolute;inset:-1px;border-radius:15px;pointer-events:none;border:1px solid color-mix(in srgb,var(--scroll-color) 16%,transparent);opacity:.7}
.toolbar-frame{position:relative}
.toolbar-title strong{font-size:12px}
.player-card{border-radius:15px}
.featured{border-radius:17px}
.featured .player-name{font-size:29px}
@media(max-width:1100px){.rank-toolbar{top:88px}}
@media(max-width:820px){main{padding-top:104px}.topbar{top:9px;width:calc(100% - 18px);height:58px}.rank-toolbar{top:76px}.hero{margin-bottom:24px}}
@media(max-width:560px){main{padding-top:94px}.rank-toolbar{top:70px}.hero h1{font-size:35px}.hero-text{font-size:13px}}
/* Production account/apply layer */
.apply-card{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 18px;padding:22px 24px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(100deg,rgba(16,12,23,.96),rgba(10,8,14,.96));box-shadow:0 12px 35px rgba(0,0,0,.22)}.apply-card h2{margin:0;font-size:clamp(20px,2.2vw,29px);letter-spacing:-1px}.apply-card p:not(.eyebrow){margin:7px 0 0;color:#9b94a6;line-height:1.5;font-size:13px}.apply-btn{border:1px solid color-mix(in srgb,var(--scroll-color) 50%,transparent);background:color-mix(in srgb,var(--scroll-color) 17%,#0a0710);color:#fff;border-radius:11px;padding:12px 17px;font-weight:800;font-size:12px;cursor:pointer;white-space:nowrap;transition:.2s}.apply-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px color-mix(in srgb,var(--scroll-color) 18%,transparent)}.account-modal{position:relative;width:min(520px,calc(100vw - 28px));padding:30px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:#0b0910;box-shadow:0 30px 100px rgba(0,0,0,.65)}.account-title{font-size:28px;letter-spacing:-1px;margin:0 0 7px}.account-muted{color:#938c9d;font-size:13px;line-height:1.55}.discord-login{width:100%;border:0;border-radius:11px;padding:13px 16px;background:#5865f2;color:#fff;font-weight:800;cursor:pointer;margin-top:18px}.profile-editor{display:grid;gap:13px;margin-top:18px}.profile-editor label{font-size:11px;color:#aaa2b2;font-weight:700}.profile-editor input{width:100%;margin-top:6px;padding:11px 12px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#121019;color:#fff;outline:0}.local-pfp{display:flex;align-items:center;gap:13px}.local-pfp img{width:58px;height:58px;border-radius:12px;object-fit:cover;border:1px solid rgba(255,255,255,.1)}.account-actions{display:flex;gap:9px;margin-top:3px}.secondary-btn,.primary-btn{border-radius:9px;padding:10px 13px;cursor:pointer;font-size:12px;font-weight:800}.primary-btn{border:1px solid color-mix(in srgb,var(--scroll-color) 40%,transparent);background:color-mix(in srgb,var(--scroll-color) 15%,#0b0910);color:#fff}.secondary-btn{border:1px solid rgba(255,255,255,.09);background:#121019;color:#aaa2b2}.account-user{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:#100d15}.account-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#211a2b}.account-user strong{display:block}.account-user span{color:#898291;font-size:11px}.apply-note{margin-top:14px;font-size:12px;color:#8e8796}.apply-note.error{color:#ef6a6a}.apply-note.ok{color:#65d391}
@media(max-width:700px){.apply-card{display:block}.apply-btn{margin-top:16px;width:100%}}
/* The navigation was intentionally removed; keep the ranking controls close to the title. */
.rank-toolbar{top:10px!important;margin-bottom:26px}.toolbar-frame{box-shadow:0 10px 38px rgba(0,0,0,.28)}
/* Final production layout: no floating title/navigation bar. */
.topbar{display:none!important}
body{padding-top:0!important}
main{padding-top:42px!important}
.hero{margin-bottom:18px!important;padding-top:0!important}
.rank-toolbar{position:sticky!important;top:10px!important;margin-top:0!important;margin-bottom:30px!important;z-index:20!important}
.toolbar-frame{box-shadow:0 10px 34px rgba(0,0,0,.24)!important}
@media(max-width:820px){main{padding-top:28px!important}.rank-toolbar{top:7px!important}}
@media(max-width:560px){main{padding-top:24px!important}.rank-toolbar{top:5px!important}}