:root{
  --bg:#0a070c; --panel:#140e17; --panel2:#1b131f; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --text:#f6eef2; --muted:#a8969f; --dim:#6f6168;
  --acc:#ff3d2e; --acc-rgb:255,61,46; --sun:linear-gradient(120deg,#ff8a50,#ff4a2a 35%,#e8222b 65%,#8b0a1e);
  --brand:linear-gradient(120deg,#ff9a3c,#ff4f81);
  --t1:#ffcf4d; --t2:#ff9a3c; --t3:#ff5b8a; --t4:#b78cff; --t5:#7dd3ff;
  --gold:#ffcf4d; --silver:#cfd6e4; --bronze:#e0965a;
  --r:20px; --display:"Unbounded",system-ui,sans-serif; --body:"Onest",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100vh;isolation:isolate}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.px{image-rendering:pixelated}
code{font-family:var(--mono);font-size:.9em;background:rgba(255,255,255,.07);border:1px solid var(--line);padding:.1em .45em;border-radius:7px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
main.wrap{min-height:calc(100vh - 160px)}
.glow{position:fixed;inset:-30% -10% auto auto;width:900px;height:900px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(232,34,43,.22),rgba(139,10,30,.08) 45%,transparent 70%);filter:blur(30px)}
.grid-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000,transparent 75%);mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000,transparent 75%)}

/* header */
.top{position:sticky;top:0;z-index:30;background:rgba(10,7,12,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font:700 18px var(--display);letter-spacing:-.01em;white-space:nowrap}
.brand img{width:30px;height:30px;filter:drop-shadow(0 0 12px rgba(255,110,100,.5))}
.brand .duel,.grad{background:var(--sun);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{font:600 12px var(--body);color:var(--dim);letter-spacing:.12em;text-transform:uppercase;margin-left:4px}
.nav{display:flex;align-items:center;gap:22px}
.nav a{color:var(--muted);font-weight:500;font-size:15px}
.nav a:hover,.nav a.on{color:var(--text)}
.back{display:inline-flex;align-items:center;gap:8px;margin-top:28px;color:var(--muted);font-weight:600;font-size:15px}
.back:hover{color:var(--text)}
.back span{transition:transform .2s}.back:hover span{transform:translateX(-4px)}
.back.narrow{display:flex;width:min(620px,100%);margin:28px auto 0}
.back+.card{margin-top:14px}
.back+.player-page{padding-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 18px;border-radius:13px;border:0;cursor:pointer;white-space:nowrap;
  font:600 15px var(--body);color:#fff;background:var(--sun);box-shadow:0 10px 28px -12px rgba(232,34,43,.8);transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{color:var(--text);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line2)}
.btn.discord{color:#fff;background:#5865f2;box-shadow:0 10px 28px -12px rgba(88,101,242,.9)}
.btn svg{width:19px;height:19px;flex:none}
.nav .btn{height:40px}
.nav .btn img{width:24px;height:24px;border-radius:6px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:end;padding:48px 0 22px}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;background:var(--sun);-webkit-background-clip:text;background-clip:text;color:transparent}
h1{font:800 clamp(34px,5vw,58px)/1.05 var(--display);letter-spacing:-.035em;margin:12px 0 12px}
.lead{color:var(--muted);max-width:600px;font-size:16.5px}
.hero-side{display:grid;gap:10px;justify-items:end}
.search{display:flex;gap:8px;width:min(420px,100%)}
.search input{flex:1;min-width:0;height:46px;padding:0 16px;border-radius:13px;border:1px solid var(--line2);background:var(--panel);color:var(--text);font:500 15.5px var(--body);outline:none}
.search input:focus{border-color:rgba(var(--acc-rgb),.6)}
.search .btn{height:46px}
.legend{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.legend span{font:700 11px var(--mono);padding:3px 8px;border-radius:7px;background:rgba(255,255,255,.04);border:1px solid var(--line)}

/* kit bar */
.kitbar{position:sticky;top:66px;z-index:20;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px;margin:8px 0 26px;
  border-radius:18px;background:rgba(20,14,23,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line)}
.kitbar::-webkit-scrollbar{display:none}
.kb{--c:var(--acc);flex:none;display:flex;align-items:center;gap:8px;height:46px;padding:0 10px;border-radius:13px;border:1px solid transparent;background:none;
  color:var(--muted);font:600 14px var(--body);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.kb img{width:32px;height:32px;transition:transform .25s}
.kb span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .3s}
.kb:hover{color:var(--text);background:rgba(255,255,255,.04)}
.kb:hover img{transform:translateY(-2px) rotate(-6deg)}
.kb.on{color:var(--text);background:color-mix(in srgb,var(--c) 16%,transparent);border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.kb.on span{max-width:140px}
.kb.sep{margin-right:6px}
.kb.sep::after{content:"";width:1px;height:26px;background:var(--line2);margin-left:10px}

/* kit tile (icon + tier) */
.kt{--c:#888;flex:none;width:52px;height:60px;border-radius:12px;display:grid;justify-items:center;align-content:center;gap:1px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 30%,#140e17),color-mix(in srgb,var(--c) 14%,#140e17));
  border:1px solid color-mix(in srgb,var(--c) 40%,transparent);position:relative}
.kt img{width:28px;height:28px}
.kt b{font:800 12.5px var(--display);letter-spacing:-.02em;line-height:1.2}
.kt.none{background:rgba(255,255,255,.025);border:1px dashed var(--line)}
.kt.none img{opacity:.22;filter:grayscale(1)}
.kt.none b{color:var(--dim);font-weight:500}
.kt.ht::after{content:"";position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.kt[data-tip]:hover::before{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;
  font:600 12px var(--body);padding:4px 8px;border-radius:8px;background:#000;border:1px solid var(--line2);color:var(--text);z-index:5;pointer-events:none}
.tiles{display:flex;gap:6px}

/* title badge */
.ttl{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--body);letter-spacing:.02em;padding:3px 9px 3px 7px;border-radius:999px;
  color:var(--tc);background:color-mix(in srgb,var(--tc) 13%,transparent);border:1px solid color-mix(in srgb,var(--tc) 35%,transparent)}
.ttl::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--tc);border-radius:2px}

/* bust */
.bust{overflow:hidden;flex:none}
.bust img{width:100%;height:auto}

/* podium */
.podium{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:16px;align-items:end;margin:6px 0 18px}
.pd{--m:var(--silver);position:relative;display:grid;justify-items:center;text-align:center;padding:0 18px 20px;border-radius:24px;cursor:pointer;
  background:linear-gradient(180deg,color-mix(in srgb,var(--m) 16%,#140e17),#140e17 70%);border:1px solid color-mix(in srgb,var(--m) 38%,transparent);
  transition:transform .25s,box-shadow .25s}
.pd:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px color-mix(in srgb,var(--m) 70%,transparent)}
.pd.p1{--m:var(--gold);order:2;padding-bottom:26px}.pd.p2{order:1}.pd.p3{--m:var(--bronze);order:3}
.pd .bust{width:118px;height:132px;margin-top:-34px;filter:drop-shadow(0 18px 22px rgba(0,0,0,.55))}
.pd.p1 .bust{width:140px;height:158px;margin-top:-46px}
.pd .place{position:absolute;top:14px;left:16px;font:800 34px/1 var(--display);color:var(--m);opacity:.9}
.pd.p1 .place{font-size:42px}
.pd .crown{position:absolute;top:-30px;left:50%;transform:translateX(-50%) rotate(-8deg);width:48px;color:var(--gold);filter:drop-shadow(0 0 14px rgba(255,207,77,.7));z-index:2}
.pd .nm{font:800 20px var(--display);letter-spacing:-.02em;margin-top:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd.p1 .nm{font-size:24px}
.pd .meta{display:flex;align-items:center;gap:10px;margin:8px 0 14px;color:var(--muted);font-size:14px}
.pd .meta b{color:var(--text);font:800 15px var(--display)}
.pd .tiles{flex-wrap:wrap;justify-content:center}
.pd .kt{width:44px;height:52px}.pd .kt img{width:24px;height:24px}.pd .kt b{font-size:11.5px}
.podium-wrap{padding-top:44px}

/* overall list */
.rank-list{display:grid;gap:10px;padding-bottom:70px}
.row{display:grid;grid-template-columns:44px 64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:8px 14px 8px 12px;border-radius:18px;background:var(--panel);border:1px solid var(--line);
  transition:border-color .2s,transform .2s,background .2s;cursor:pointer;min-height:76px}
.row:hover{border-color:rgba(var(--acc-rgb),.4);transform:translateX(4px);background:var(--panel2)}
.pos{font:800 22px var(--display);color:var(--dim);text-align:center}
.row .bust{width:64px;height:64px;align-self:end;margin-bottom:-8px}
.who{min-width:0;display:grid;gap:5px;justify-items:start}
.who b{font:700 18px var(--display);letter-spacing:-.02em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .sub{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13.5px}
.who .sub i{font-style:normal;font-weight:700;color:var(--text)}
.row .tiles .kt{width:46px;height:54px}.row .tiles .kt img{width:24px;height:24px}

/* kit page */
.kit-head{--c:var(--acc);position:relative;overflow:hidden;display:flex;align-items:center;gap:20px;padding:22px 26px;border-radius:24px;margin-bottom:16px;
  background:linear-gradient(110deg,color-mix(in srgb,var(--c) 34%,#140e17),#140e17 75%);border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.kit-head::after{content:"";position:absolute;right:-60px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%);pointer-events:none}
.kit-head>img{width:64px;height:64px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.kit-head h2{font:800 clamp(26px,4vw,38px)/1.05 var(--display);letter-spacing:-.03em;margin:0}
.kit-head p{color:var(--muted);font-size:14.5px;margin-top:4px}
.kit-head .btn{margin-left:auto;position:relative;z-index:1}
.cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding-bottom:70px}
.col{--tc:var(--t5);border-radius:var(--r);background:var(--panel);border:1px solid var(--line);overflow:hidden;align-self:start}
.col h3{display:flex;align-items:center;gap:8px;font:800 17px var(--display);letter-spacing:-.02em;padding:14px 16px;color:var(--tc);
  background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 14%,transparent),transparent);border-bottom:1px solid color-mix(in srgb,var(--tc) 25%,transparent)}
.col h3 svg{width:20px;height:20px}
.col h3 small{margin-left:auto;font:600 12px var(--body);color:var(--dim)}
.col ul{list-style:none;padding:8px;display:grid;gap:3px}
.col li a{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;cursor:pointer}
.col li a:hover{background:rgba(255,255,255,.05)}
.col li img{width:30px;height:30px;border-radius:7px}
.col li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:14.5px}
.col li em{font:700 10.5px var(--mono);font-style:normal;padding:2px 6px;border-radius:6px;color:var(--tc);border:1px solid color-mix(in srgb,var(--tc) 40%,transparent)}
.col li em.ht{color:#140e17;background:var(--tc);border-color:transparent}
.col .empty{color:var(--dim);font-size:14px;padding:10px 8px}
.c1{--tc:var(--t1)}.c2{--tc:var(--t2)}.c3{--tc:var(--t3)}.c4{--tc:var(--t4)}.c5{--tc:var(--t5)}
.t-HT1,.t-LT1{color:var(--t1)}.t-HT2,.t-LT2{color:var(--t2)}.t-HT3,.t-LT3{color:var(--t3)}.t-HT4,.t-LT4{color:var(--t4)}.t-HT5,.t-LT5{color:var(--t5)}

.empty-state{padding:60px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line2);border-radius:var(--r);margin-bottom:60px}
.empty-state b{display:block;color:var(--text);font:700 20px var(--display);margin-bottom:8px}

/* player card (page + modal) */
.pcard{display:grid;grid-template-columns:220px minmax(0,1fr);gap:30px;align-items:start}
.pcard .render{position:relative;display:grid;place-items:center;padding:22px 10px 14px;border-radius:22px;
  background:radial-gradient(circle at 50% 30%,rgba(var(--acc-rgb),.22),transparent 65%),var(--panel2);border:1px solid var(--line)}
.pcard .render img{height:300px;width:auto;filter:drop-shadow(0 20px 24px rgba(0,0,0,.5))}
.ptop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.p-name{font:800 clamp(28px,4vw,44px)/1.05 var(--display);letter-spacing:-.03em;word-break:break-all;margin:6px 0 10px}
.p-pos{text-align:right;flex:none}
.p-pos b{display:block;font:800 34px/1 var(--display)}
.p-pos span{color:var(--dim);font-size:12.5px}
.p-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--muted);font-size:14.5px}
.p-line i{font-style:normal;color:var(--text);font-weight:700}
.p-kits{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:22px 0 18px}
.p-kits .kt{width:auto;height:88px;border-radius:16px;gap:3px}
.modal .ptop{padding-right:46px}
.p-kits .kt img{width:36px;height:36px}
.p-kits .kt b{font-size:17px}
.p-kits .kt small{font:600 11px var(--body);color:var(--muted)}
.p-actions{display:flex;gap:8px;flex-wrap:wrap}
.p-actions .btn{height:40px;font-size:14px}
details.hist-box{margin-top:16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
details.hist-box summary{cursor:pointer;list-style:none;padding:12px 16px;font-weight:600;display:flex;align-items:center;gap:8px}
details.hist-box summary::-webkit-details-marker{display:none}
details.hist-box summary::after{content:"▾";margin-left:auto;color:var(--dim);transition:transform .2s}
details.hist-box[open] summary::after{transform:rotate(180deg)}
.hist{list-style:none;display:grid;gap:6px;padding:0 10px 12px;max-height:300px;overflow:auto}
.hist li{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:9px 12px;border-radius:12px;background:var(--panel);font-size:14px}
.hist li img{width:20px;height:20px}
.hist time{color:var(--dim);font-size:12.5px;margin-left:auto}
.hist .arrow-up{color:#7dff6a}.hist .arrow-down{color:#ff6b6b}
.player-page{padding:46px 0 70px}
.player-page .pcard{padding:26px;border-radius:26px;background:var(--panel);border:1px solid var(--line)}

dialog.modal{margin:auto;width:min(860px,calc(100% - 24px));max-height:calc(100dvh - 24px);border:1px solid var(--line2);border-radius:28px;padding:26px;
  background:linear-gradient(180deg,#1b131f,#120c15);color:var(--text);box-shadow:0 40px 120px -20px rgba(0,0,0,.8)}
dialog.modal::backdrop{background:rgba(5,3,7,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
dialog.modal[open]{animation:pop .25s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}}
.modal .x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:12px;border:0;background:rgba(255,255,255,.06);color:var(--muted);font-size:20px;cursor:pointer}
.modal .x:hover{color:var(--text);background:rgba(255,255,255,.1)}
.modal .foot-brand{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);color:var(--dim);font-size:13px}
.modal .foot-brand b{font:800 14px var(--display);color:var(--muted)}

/* profile / verify */
.card{max-width:620px;margin:50px auto 80px;padding:34px;border-radius:26px;background:var(--panel);border:1px solid var(--line)}
.card h1{font-size:clamp(28px,4vw,40px)}
.card p{color:var(--muted);margin:10px 0}
.tab{flex:none;height:40px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font:600 14px var(--body);cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--text);border-color:var(--line2)}
.steps{counter-reset:s;list-style:none;display:grid;gap:12px;margin:22px 0}
.steps li{position:relative;padding-left:44px;color:var(--muted)}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font:800 14px var(--display);color:#fff;background:var(--sun)}
.code-box{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0;padding:16px 18px;border-radius:16px;border:1.5px solid rgba(var(--acc-rgb),.5);background:rgba(var(--acc-rgb),.07)}
.code-box code{font-size:20px;background:none;border:0;padding:0;font-weight:700}
.msg{min-height:22px;font-size:14.5px;margin-top:10px}
.msg.err{color:#ff7a7a}.msg.ok{color:#7dff6a}
.me{display:flex;align-items:center;gap:14px;margin:18px 0}
.me img{width:52px;height:52px;border-radius:50%}
.linked{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;background:rgba(125,255,106,.07);border:1px solid rgba(125,255,106,.3);margin:16px 0}
.linked img{width:48px;height:48px;border-radius:10px;image-rendering:pixelated}
.card .search{margin-top:20px;width:100%;max-width:480px}

.foot{border-top:1px solid var(--line);padding:30px 0 40px;color:var(--dim);font-size:13.5px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
.foot a{color:var(--muted)}

@media (max-width:1060px){
  .row{grid-template-columns:36px 56px minmax(0,1fr);row-gap:8px;padding-bottom:12px}
  .row .bust{width:56px;height:56px;margin-bottom:0;align-self:center}
  .row .tiles{grid-column:1/-1;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-side{justify-items:start}
  .legend{justify-content:flex-start}
  .podium{grid-template-columns:minmax(0,1fr);gap:46px}
  .pd.p1,.pd.p2,.pd.p3{order:0}
  .cols{grid-template-columns:minmax(0,1fr)}
  .pcard{grid-template-columns:minmax(0,1fr);gap:18px}
  .pcard .render img{height:210px}
  .kit-head{flex-wrap:wrap}
  .kit-head .btn{margin-left:0;width:100%}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .nav a.hide-sm{display:none}
  .brand small{display:none}
  .kitbar{top:66px;margin-left:-4px;margin-right:-4px}
  .row{grid-template-columns:28px 48px minmax(0,1fr);gap:10px;padding:8px 10px 10px}
  .row .bust{width:48px;height:48px}
  .pos{font-size:17px}
  .who b{font-size:16px}
  dialog.modal{padding:20px 16px;border-radius:22px}
  .p-pos b{font-size:26px}
  .p-kits{grid-template-columns:repeat(4,minmax(0,1fr))}
  .card{padding:24px 18px;margin-top:28px}
  .code-box{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}