/* =========================================================
   NinjaStats — The Hive
   Design tokens
   ========================================================= */
:root{
  --bg:#06070b;
  --bg-2:#0a0c13;
  --txt:#e9ecf6;
  --txt-2:#a2aabd;
  --txt-3:#6b7386;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.055);
  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.055);

  --a1:#7c5cff;      /* violet */
  --a2:#22d3ee;      /* cyan   */
  --a3:#f472b6;      /* pink   */
  --ok:#34d399;
  --warn:#fbbf24;
  --bad:#fb7185;

  --accent:var(--a1);
  --grad:linear-gradient(115deg,var(--a1),var(--a2) 55%,var(--a3));

  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px;
  --pad:clamp(16px,4vw,28px);
  --maxw:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-2:cubic-bezier(.65,0,.35,1);
  --shadow:0 30px 70px -30px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15.5px; line-height:1.55; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{overflow:hidden}
h1,h2,h3{margin:0; letter-spacing:-.035em; line-height:1.05; font-weight:800}
p{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
input{font:inherit}
img{display:block; max-width:100%}
::selection{background:rgba(124,92,255,.35)}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums}

/* scrollbar */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1); border-radius:99px; border:3px solid transparent; background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2); background-clip:content-box}

/* =========================================================
   Ambient background
   ========================================================= */
.bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.bg__aurora{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; mix-blend-mode:screen}
.bg__aurora--a{width:60vw;height:60vw;left:-14vw;top:-22vw;background:radial-gradient(circle,#5b3dff,transparent 62%);animation:drift1 24s var(--ease-2) infinite alternate}
.bg__aurora--b{width:52vw;height:52vw;right:-12vw;top:-8vw;background:radial-gradient(circle,#0ea5e9,transparent 62%);animation:drift2 30s var(--ease-2) infinite alternate}
.bg__aurora--c{width:56vw;height:56vw;left:22vw;top:32vw;background:radial-gradient(circle,#db2777,transparent 66%);opacity:.3;animation:drift3 36s var(--ease-2) infinite alternate}
@keyframes drift1{to{transform:translate3d(12vw,10vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-14vw,14vh,0) scale(1.2)}}
@keyframes drift3{to{transform:translate3d(8vw,-16vh,0) scale(.9)}}

.bg__grid{
  position:absolute; inset:-1px;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 10%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 10%,transparent 75%);
}
.bg__fx{position:absolute; inset:0; width:100%; height:100%; opacity:.75}
.bg__noise{
  position:absolute; inset:0; opacity:.038; mix-blend-mode:overlay;
  background-image:url('../noise.svg');
}
.bg__vignette{position:absolute; inset:0; background:radial-gradient(ellipse 120% 80% at 50% -10%,transparent 40%,rgba(3,4,7,.85) 100%)}

/* top scanning bar during fetches */
.scan{position:fixed; top:0; left:0; right:0; height:2px; z-index:100; opacity:0; transition:opacity .25s}
.scan.is-on{opacity:1}
.scan i{display:block; height:100%; width:38%; border-radius:99px; background:var(--grad);
  box-shadow:0 0 22px rgba(124,92,255,.85); animation:scan 1.1s var(--ease-2) infinite}
@keyframes scan{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}

/* =========================================================
   Layout primitives
   ========================================================= */
main{position:relative; z-index:1}
section{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}

.glass{
  position:relative;
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  border:1px solid var(--line);
  border-radius:var(--r-l);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:var(--shadow);
}
.glass::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 30%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1px;
}
.card-pad{padding:clamp(18px,3vw,26px)}

.card-head{margin-bottom:18px}
.card-head h3{font-size:16px; letter-spacing:-.02em}
.card-head p{font-size:12.5px; color:var(--txt-3); margin-top:5px}

.btn{
  position:relative; padding:10px 18px; border-radius:99px; font-size:13px; font-weight:600;
  background:var(--grad); color:#08090d; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .3s;
  box-shadow:0 10px 30px -12px rgba(124,92,255,.9);
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 16px 40px -14px rgba(124,92,255,1)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--ghost{background:rgba(255,255,255,.05); color:var(--txt); border:1px solid var(--line); box-shadow:none}
.btn--ghost:hover{background:rgba(255,255,255,.1); box-shadow:none}
.btn[disabled]{opacity:.45; pointer-events:none}

/* reveal on scroll */
[data-reveal]{opacity:0; transform:translateY(26px) scale(.985); filter:blur(6px)}
[data-reveal].is-in{opacity:1; transform:none; filter:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);
  transition-delay:var(--d,0ms)}

/* =========================================================
   Nav
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:24px;
  max-width:var(--maxw); margin:0 auto; padding:16px var(--pad);
  transition:padding .4s var(--ease);
}
.nav::after{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:rgba(6,7,11,.92); backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line-2); transition:opacity .4s;
}
.nav.is-stuck::after{opacity:1}
.nav.is-stuck{padding-block:11px}

.nav__brand{display:flex; align-items:center; gap:11px}
.nav__logo{
  display:grid; place-items:center; width:34px; height:34px; border-radius:11px;
  background:var(--grad); box-shadow:0 8px 24px -10px rgba(124,92,255,.9);
}
.nav__logo svg{width:20px; height:20px; fill:none; stroke:#0a0b10; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round}
.nav__word{font-weight:800; font-size:15.5px; letter-spacing:-.03em}
.nav__word em{font-style:normal; color:var(--txt-3)}

/* lien Discord, colle a la marque en haut a gauche */
.nav__discord{
  display:grid; place-items:center; width:34px; height:34px; border-radius:11px; flex:none;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  transition:transform .35s var(--ease), background .35s, border-color .35s, box-shadow .35s;
}
.nav__discord svg{width:18px; height:14px; fill:var(--txt-2); transition:fill .35s}
.nav__discord:hover{
  transform:translateY(-2px); background:#5865f2; border-color:#5865f2;
  box-shadow:0 12px 26px -12px rgba(88,101,242,.95);
}
.nav__discord:hover svg{fill:#fff}
.nav__discord:focus-visible{outline:2px solid #5865f2; outline-offset:3px}

.nav__links{display:flex; gap:6px; margin-left:auto}
.nav__links a{
  position:relative; padding:8px 14px; border-radius:99px; font-size:13.5px; color:var(--txt-2);
  transition:color .3s, background .3s;
}
.nav__links a:hover{color:var(--txt); background:rgba(255,255,255,.05)}

.nav__right{display:flex; align-items:center; gap:10px}
[hidden]{display:none !important}
.nav__mini{
  display:flex; align-items:center; gap:8px; padding:5px 12px 5px 5px; border-radius:99px;
  border:1px solid var(--line); background:rgba(255,255,255,.04); font-size:12.5px; font-weight:600;
  animation:pop .5s var(--ease) both;
}
.nav__mini img{width:24px; height:24px; border-radius:50%; object-fit:cover; background:rgba(255,255,255,.08)}
.nav__mini:hover{background:rgba(255,255,255,.09)}


/* =========================================================
   Hero
   ========================================================= */
.hero{position:relative; padding-top:clamp(40px,9vh,90px); padding-bottom:clamp(50px,10vh,110px)}
.hero__inner{max-width:820px; margin:0 auto; text-align:center; display:grid; justify-items:center; gap:22px}

.pill{
  display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 11px; border-radius:99px;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  font-size:12px; color:var(--txt-2); font-weight:500;
}
.pill .dot{width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

.hero__title{font-size:clamp(40px,7.4vw,78px); font-weight:900; letter-spacing:-.05em}
.hero__title .line{display:block; overflow:hidden; padding-block:.06em}
.hero__title .line>span{display:block; animation:riseIn 1.1s var(--ease) both}
.hero__title .line:nth-child(2)>span{animation-delay:.12s}
@keyframes riseIn{from{transform:translateY(110%) rotate(2deg); opacity:0}to{transform:none; opacity:1}}
.grad{
  background:var(--grad); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:hue 9s linear infinite;
}
@keyframes hue{to{background-position:200% 0}}

.hero__sub{max-width:600px; color:var(--txt-2); font-size:15.5px}

/* search */
.search{width:min(620px,100%); position:relative; z-index:20}
.search__box{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:9px 9px 9px 18px; border-radius:99px;
  background:rgba(12,14,22,.72); border:1px solid var(--line);
  backdrop-filter:blur(18px);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.95);
  transition:border-color .35s, box-shadow .35s, transform .35s var(--ease);
}
.search__box::after{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; opacity:0;
  background:var(--grad);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude; transition:opacity .4s; pointer-events:none;
}
.search.is-focus .search__box{transform:translateY(-2px); box-shadow:0 30px 70px -26px rgba(124,92,255,.55)}
.search.is-focus .search__box::after{opacity:1}
.search__icon{width:19px; height:19px; flex:none; fill:none; stroke:var(--txt-3); stroke-width:2; stroke-linecap:round}
.search input{
  flex:1; min-width:0; background:none; border:0; outline:none; color:var(--txt);
  font-size:16px; font-weight:500; padding-block:9px;
}
.search input::placeholder{color:var(--txt-3)}
.search__kbd{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--txt-3);
  border:1px solid var(--line); border-radius:7px; padding:2px 7px; background:rgba(255,255,255,.03);
}
.search.is-focus .search__kbd{opacity:0}
.search__go{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%; flex:none;
  background:var(--grad); transition:transform .3s var(--ease), filter .3s;
}
.search__go svg{width:18px; height:18px; fill:none; stroke:#0a0b10; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.search__go:hover{transform:scale(1.07) rotate(3deg); filter:brightness(1.1)}

.suggest{
  position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:30;
  list-style:none; margin:0; padding:6px; max-height:290px; overflow:auto;
  background:rgba(11,13,20,.94); border:1px solid var(--line); border-radius:var(--r-m);
  backdrop-filter:blur(20px); box-shadow:0 30px 70px -20px rgba(0,0,0,.95);
  animation:pop .3s var(--ease) both; text-align:left;
}
@keyframes pop{from{opacity:0; transform:translateY(-8px) scale(.98)}to{opacity:1; transform:none}}
.suggest li{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:12px;
  font-size:14px; cursor:pointer; transition:background .2s;
}
.suggest li b{font-weight:600}
.suggest li span{margin-left:auto; font-size:11px; color:var(--txt-3); font-family:'JetBrains Mono',monospace}
.suggest li:hover,.suggest li.is-on{background:rgba(255,255,255,.07)}
.suggest li i{
  display:grid; place-items:center; width:26px; height:26px; border-radius:8px; font-style:normal;
  background:rgba(124,92,255,.16); color:var(--a1); font-size:11px; font-weight:800;
}
.suggest .empty{color:var(--txt-3); font-size:13px; justify-content:center; cursor:default}

.chips{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center}
.chips__label{font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--txt-3)}
.chips__row{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.chip{
  padding:6px 13px; border-radius:99px; font-size:12.5px; border:1px solid var(--line);
  background:rgba(255,255,255,.035); color:var(--txt-2); transition:.3s var(--ease);
}
.chip:hover{color:var(--txt); background:rgba(255,255,255,.09); transform:translateY(-1px)}

.hero__stats{display:flex; gap:clamp(18px,5vw,54px); flex-wrap:wrap; justify-content:center; margin-top:14px}
.hero__stats div{display:grid; gap:2px; text-align:center}
.hero__stats b{font-size:21px; font-weight:800; font-family:'JetBrains Mono',monospace; letter-spacing:-.04em}
.hero__stats span{font-size:11px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.12em}

.hero__fade{position:absolute; left:0; right:0; bottom:0; height:120px; background:linear-gradient(transparent,var(--bg)); pointer-events:none; opacity:.0}

/* =========================================================
   Player: profile card
   ========================================================= */
.player{display:grid; gap:clamp(18px,2.6vw,26px); padding-bottom:70px; scroll-margin-top:90px}
.player[hidden]{display:none}

.profile{overflow:hidden; padding:clamp(20px,3vw,30px); animation:cardIn .8s var(--ease) both}
@keyframes cardIn{from{opacity:0; transform:translateY(24px) scale(.99)}to{opacity:1; transform:none}}
.profile__glow{
  position:absolute; inset:-40% -10% auto; height:260px; pointer-events:none; opacity:.55;
  background:radial-gradient(ellipse at 20% 0%,var(--accent),transparent 62%); filter:blur(48px);
}
.profile__id{display:flex; align-items:center; gap:clamp(14px,2.4vw,22px); position:relative}

.avatar{position:relative; width:clamp(66px,9vw,92px); height:clamp(66px,9vw,92px); flex:none}
.avatar img{
  width:100%; height:100%; border-radius:22px; object-fit:cover;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
  animation:pop .6s var(--ease) both;
}
.avatar__ring{
  position:absolute; inset:-6px; border-radius:28px; pointer-events:none;
  background:conic-gradient(from 180deg,var(--a1),var(--a2),var(--a3),var(--a1));
  opacity:.5; filter:blur(9px); animation:spin 9s linear infinite;
}
@keyframes spin{to{transform:rotate(1turn)}}

.profile__meta{min-width:0}
.profile__rankline{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:5px}
.rank{
  font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  padding:4px 10px; border-radius:7px; background:rgba(255,255,255,.08); color:var(--txt-2);
}
.rank[data-r="ULTIMATE"]{background:linear-gradient(120deg,#fbbf24,#f59e0b); color:#2a1a00}
.rank[data-r="PLUS"]{background:linear-gradient(120deg,#34d399,#10b981); color:#00251a}
.rank[data-r="VIP"]{background:linear-gradient(120deg,#60a5fa,#3b82f6); color:#001233}
.rank[data-r="MODERATOR"],.rank[data-r="HELPER"]{background:linear-gradient(120deg,#818cf8,#6366f1); color:#0b0630}
.rank[data-r="NONE"]{background:rgba(255,255,255,.07)}
.title{font-size:12.5px; color:var(--txt-2); font-weight:500}

.profile__name{font-size:clamp(26px,4.4vw,42px); font-weight:900; letter-spacing:-.045em}
.profile__pills{display:flex; gap:7px; flex-wrap:wrap; margin-top:10px}
.mpill{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px;
  font-size:11.5px; color:var(--txt-2); border:1px solid var(--line-2); background:rgba(255,255,255,.035);
}
.mpill b{color:var(--txt); font-weight:600; font-family:'JetBrains Mono',monospace; font-size:11.5px}

.profile__kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(122px,1fr)); gap:1px;
  margin-top:26px; border-radius:var(--r-m); overflow:hidden; background:var(--line-2);
  border:1px solid var(--line-2);
}
.kpi{padding:15px 16px; background:rgba(10,12,19,.55); display:grid; gap:3px; position:relative; overflow:hidden}
.kpi::after{content:''; position:absolute; left:0; top:0; width:100%; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:0; transition:opacity .4s}
.kpi:hover::after{opacity:.8}
.kpi b{font-size:clamp(19px,2.4vw,25px); font-weight:800; font-family:'JetBrains Mono',monospace; letter-spacing:-.045em}
.kpi span{font-size:10.5px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.11em}
.kpi small{font-size:11px; color:var(--txt-3)}

.profile__foot{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line-2);
}
.freshness{font-size:12px; color:var(--txt-3); display:flex; align-items:center; gap:8px}
.freshness i{width:5px; height:5px; border-radius:50%; background:var(--ok); display:inline-block}
.freshness.is-stale i{background:var(--warn)}
.profile__actions{display:flex; gap:9px; flex-wrap:wrap}

/* =========================================================
   Analysis (radar + bars)
   ========================================================= */
.analysis{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(18px,2.6vw,26px)}
@media(max-width:860px){.analysis{grid-template-columns:1fr}}

.radar{display:grid; place-items:center}
.radar svg{width:100%; max-width:380px; height:auto; overflow:visible}
.radar .grid-poly{fill:none; stroke:rgba(255,255,255,.07); stroke-width:1}
.radar .axis{stroke:rgba(255,255,255,.07); stroke-width:1}
.radar .shape{
  fill:url(#radarFill); stroke:var(--a2); stroke-width:2; stroke-linejoin:round;
  filter:drop-shadow(0 0 14px rgba(34,211,238,.35));
  transform-origin:center; animation:radarIn 1.2s var(--ease) both .15s;
}
@keyframes radarIn{from{transform:scale(.2); opacity:0}to{transform:scale(1); opacity:1}}
.radar .pt{fill:var(--a2); animation:pop .5s var(--ease) both}
.radar text{font-size:9.5px; fill:var(--txt-3); font-weight:600; letter-spacing:.04em; text-transform:uppercase}
.radar .val{fill:var(--txt); font-family:'JetBrains Mono',monospace; font-size:8.5px}

.bars{display:grid; gap:13px}
.bar__row{display:grid; grid-template-columns:78px 1fr 64px; align-items:center; gap:12px; font-size:12.5px}
.bar__name{color:var(--txt-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar__track{height:8px; border-radius:99px; background:rgba(255,255,255,.055); overflow:hidden}
.bar__fill{
  display:block; height:100%; border-radius:99px; width:0;
  background:linear-gradient(90deg,var(--c,#7c5cff),color-mix(in oklab,var(--c,#7c5cff),#fff 35%));
  box-shadow:0 0 16px -2px var(--c,#7c5cff);
  transition:width 1.1s var(--ease); transition-delay:var(--d,0ms);
}
.bar__val{text-align:right; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--txt-2)}

/* =========================================================
   Mode grid
   ========================================================= */
.modes-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:8px}
.modes-head h3{font-size:clamp(19px,2.6vw,25px); letter-spacing:-.035em}
.seg{display:flex; gap:2px; padding:4px; border-radius:99px; border:1px solid var(--line); background:rgba(255,255,255,.035)}
.seg button{padding:6px 14px; border-radius:99px; font-size:12.5px; color:var(--txt-3); transition:.3s var(--ease)}
.seg button:hover{color:var(--txt)}
.seg button.is-on{background:rgba(255,255,255,.1); color:var(--txt)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:clamp(12px,1.6vw,17px)}

.mode{
  --c:var(--a1);
  position:relative; overflow:hidden; cursor:pointer; text-align:left;
  padding:17px; border-radius:var(--r-m);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
  border:1px solid var(--line);
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
  opacity:0; transform:translateY(20px);
  animation:modeIn .7s var(--ease) forwards; animation-delay:var(--d,0ms);
}
@keyframes modeIn{to{opacity:1; transform:none}}
.mode::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .45s; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in oklab,var(--c),transparent 84%),transparent 60%);
}
.mode:hover{transform:translateY(-5px); border-color:color-mix(in oklab,var(--c),transparent 55%); box-shadow:0 26px 50px -28px color-mix(in oklab,var(--c),transparent 20%)}
.mode:hover::before{opacity:1}
.mode.is-empty{opacity:.42; filter:saturate(.35)}
.mode.is-empty:hover{transform:none}

.mode__top{display:flex; align-items:center; gap:12px}
.mode__tile{
  display:grid; place-items:center; width:42px; height:42px; border-radius:13px; flex:none;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:-.02em;
  color:var(--c); background:color-mix(in oklab,var(--c),transparent 86%);
  border:1px solid color-mix(in oklab,var(--c),transparent 72%);
  text-shadow:0 0 18px color-mix(in oklab,var(--c),transparent 40%);
}
.mode__name{font-weight:700; font-size:14.5px; letter-spacing:-.02em}
.mode__sub{font-size:11px; color:var(--txt-3); display:flex; align-items:center; gap:6px}
.mode__prestige{color:var(--warn); font-size:10px; letter-spacing:.08em}

.mode__ring{margin-left:auto; position:relative; width:52px; height:52px; flex:none}
.mode__ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.mode__ring circle{fill:none; stroke-width:4; stroke-linecap:round}
.mode__ring .bgc{stroke:rgba(255,255,255,.07)}
.mode__ring .fg{stroke:var(--c); stroke-dasharray:var(--circ); stroke-dashoffset:var(--circ);
  transition:stroke-dashoffset 1.3s var(--ease); transition-delay:var(--d,0ms);
  filter:drop-shadow(0 0 6px color-mix(in oklab,var(--c),transparent 45%))}
.mode__lvl{
  position:absolute; inset:0; display:grid; place-items:center; line-height:1;
  font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700;
}
.mode__lvl small{display:block; font-size:7.5px; color:var(--txt-3); letter-spacing:.14em; margin-top:2px}

.mode__stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px}
.mstat{padding:9px 10px; border-radius:11px; background:rgba(255,255,255,.035); border:1px solid var(--line-2)}
.mstat b{display:block; font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700; letter-spacing:-.03em}
.mstat span{font-size:9.5px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.1em}

.mode__foot{display:flex; align-items:center; justify-content:space-between; margin-top:13px; font-size:11px; color:var(--txt-3)}
.mode__xp{display:flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace}
.mode__go{display:flex; align-items:center; gap:5px; color:color-mix(in oklab,var(--c),#fff 20%); opacity:0; transform:translateX(-6px); transition:.4s var(--ease)}
.mode:hover .mode__go{opacity:1; transform:none}

/* =========================================================
   Skeleton / state
   ========================================================= */
.sk{border-radius:var(--r-m); background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.04) 70%);
  background-size:220% 100%; animation:shimmer 1.5s linear infinite}
@keyframes shimmer{to{background-position:-120% 0}}
.sk--profile{height:230px; border-radius:var(--r-l)}
.sk-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:16px}
.sk--card{height:172px}

.state{padding-bottom:70px}
.state__box{text-align:center; display:grid; justify-items:center; gap:10px; padding:44px 26px; animation:cardIn .6s var(--ease) both}
.state__icon{
  display:grid; place-items:center; width:54px; height:54px; border-radius:18px; font-size:24px; font-weight:800;
  background:rgba(251,113,133,.12); color:var(--bad); border:1px solid rgba(251,113,133,.22);
}
.state h3{font-size:19px}
.state p{color:var(--txt-2); font-size:14px; max-width:430px}

/* =========================================================
   Sections: boards & network
   ========================================================= */
.sec-head{margin:clamp(40px,7vw,80px) 0 26px; display:grid; gap:9px; max-width:640px}
.sec-kicker{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--a2); font-weight:700}
.sec-head h2{font-size:clamp(26px,4.2vw,40px); font-weight:900; letter-spacing:-.045em}
.sec-head p{color:var(--txt-2); font-size:14.5px}

.gamechips{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px}
.gchip{
  --c:var(--a1);
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:99px;
  font-size:12.5px; font-weight:600; color:var(--txt-3);
  border:1px solid var(--line-2); background:rgba(255,255,255,.03); transition:.35s var(--ease);
}
.gchip i{width:7px; height:7px; border-radius:50%; background:var(--c); opacity:.6; transition:.3s}
.gchip:hover{color:var(--txt); transform:translateY(-2px); background:rgba(255,255,255,.07)}
.gchip.is-on{
  color:var(--txt); border-color:color-mix(in oklab,var(--c),transparent 55%);
  background:color-mix(in oklab,var(--c),transparent 88%);
  box-shadow:0 10px 30px -18px var(--c);
}
.gchip.is-on i{opacity:1; box-shadow:0 0 10px var(--c)}

.board{--c:var(--a1); padding:8px; overflow:hidden; min-height:180px}
.brow{
  display:grid; grid-template-columns:52px minmax(0,1fr) repeat(3,minmax(58px,86px));
  align-items:center; gap:10px; padding:11px 14px; border-radius:14px; font-size:13px;
  transition:background .3s; opacity:0; animation:modeIn .55s var(--ease) forwards; animation-delay:var(--d,0ms);
}
.brow:hover{background:rgba(255,255,255,.05); cursor:pointer}
.brow--head{font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--txt-3); padding-block:8px}
.brow--head:hover{background:none; cursor:default}
.brow--me{background:color-mix(in oklab,var(--c),transparent 88%); box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c),transparent 65%)}
.brank{font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--txt-3)}
.brow:nth-child(2) .brank{color:#fbbf24}
.brow:nth-child(3) .brank{color:#d4d4d8}
.brow:nth-child(4) .brank{color:#d97706}
.bname{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bval{text-align:right; font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--txt-2)}
.bval--main{color:var(--txt); font-weight:700}
@media(max-width:620px){
  .brow{grid-template-columns:40px minmax(0,1fr) 70px}
  .brow .bval:nth-last-child(-n+2){display:none}
}

.netgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:12px; padding-bottom:80px}
.netcard{
  --c:var(--a1); position:relative; overflow:hidden; padding:16px; border-radius:var(--r-m);
  border:1px solid var(--line-2); background:rgba(255,255,255,.03); transition:.45s var(--ease);
}
.netcard:hover{transform:translateY(-4px); border-color:color-mix(in oklab,var(--c),transparent 60%); background:rgba(255,255,255,.055)}
.netcard b{display:block; font-family:'JetBrains Mono',monospace; font-size:21px; font-weight:800; letter-spacing:-.045em}
.netcard span{font-size:11.5px; color:var(--txt-3)}
.netcard .netbar{display:block; height:3px; border-radius:99px; margin-top:11px; background:rgba(255,255,255,.06); overflow:hidden}
.netcard .netbar i{display:block; height:100%; width:0; border-radius:99px; background:var(--c); transition:width 1.2s var(--ease); transition-delay:var(--d,0ms)}

/* =========================================================
   Footer
   ========================================================= */
.foot{
  position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  padding:26px var(--pad) 40px; border-top:1px solid var(--line-2);
  display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap;
  font-size:12px; color:var(--txt-3);
}
.foot strong{color:var(--txt-2); margin-right:8px; font-weight:700}
.foot__left{max-width:620px}

/* =========================================================
   Drawer (mode detail)
   ========================================================= */
.drawer{position:fixed; inset:0; z-index:90; display:flex; justify-content:flex-end}
.drawer[hidden]{display:none}
.drawer__scrim{position:absolute; inset:0; background:rgba(4,5,9,.6); backdrop-filter:blur(7px); animation:fade .4s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer__panel{
  --c:var(--a1);
  position:relative; width:min(560px,100%); height:100%; overflow-y:auto; overflow-x:hidden;
  border-radius:var(--r-xl) 0 0 var(--r-xl); border-right:0;
  padding:clamp(20px,3vw,30px); animation:slideIn .55s var(--ease) both;
}
@keyframes slideIn{from{transform:translateX(60px); opacity:0}to{transform:none; opacity:1}}
@media(max-width:600px){
  .drawer__panel{border-radius:var(--r-xl) var(--r-xl) 0 0; height:92%; margin-top:auto; width:100%; animation-name:slideUp}
  @keyframes slideUp{from{transform:translateY(60px); opacity:0}to{transform:none; opacity:1}}
}
.drawer__x{
  position:absolute; top:18px; right:18px; z-index:3; display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid var(--line);
  transition:.3s var(--ease);
}
.drawer__x svg{width:15px; height:15px; fill:none; stroke:var(--txt-2); stroke-width:2; stroke-linecap:round}
.drawer__x:hover{background:rgba(255,255,255,.14); transform:rotate(90deg)}

.dhead{display:flex; align-items:center; gap:14px; margin-bottom:6px}
.dhead .mode__tile{width:50px; height:50px; border-radius:15px; font-size:12px}
.dhead h3{font-size:24px; letter-spacing:-.04em}
.dhead p{font-size:12px; color:var(--txt-3)}

.dlevel{margin-top:22px; padding:18px; border-radius:var(--r-m); background:rgba(255,255,255,.035); border:1px solid var(--line-2)}
.dlevel__top{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px}
.dlevel__big{font-family:'JetBrains Mono',monospace; font-size:34px; font-weight:800; letter-spacing:-.05em; line-height:1}
.dlevel__big small{font-size:12px; color:var(--txt-3); font-weight:600; letter-spacing:.1em; margin-left:8px}
.dlevel__xp{font-size:11.5px; color:var(--txt-3); font-family:'JetBrains Mono',monospace; text-align:right}
.dtrack{height:10px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; position:relative}
.dtrack i{
  display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--c),color-mix(in oklab,var(--c),#fff 40%));
  box-shadow:0 0 18px -1px var(--c); transition:width 1.3s var(--ease) .15s; position:relative;
}
.dtrack i::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); animation:sheen 2.4s linear infinite}
@keyframes sheen{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.dnote{
  margin-top:14px; padding:10px 12px; border-radius:11px; font-size:11.5px; line-height:1.45;
  color:var(--txt-2); background:color-mix(in oklab,var(--c),transparent 90%);
  border:1px solid color-mix(in oklab,var(--c),transparent 78%);
}

.dsec{margin-top:26px}
.dsec__t{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-3); margin-bottom:12px; display:flex; align-items:center; gap:9px}
.dsec__t::after{content:''; flex:1; height:1px; background:var(--line-2)}

.dstats{display:grid; grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:9px}
.dstat{padding:12px 13px; border-radius:13px; background:rgba(255,255,255,.035); border:1px solid var(--line-2);
  opacity:0; animation:modeIn .5s var(--ease) forwards; animation-delay:var(--d,0ms)}
.dstat b{display:block; font-family:'JetBrains Mono',monospace; font-size:17px; font-weight:700; letter-spacing:-.04em}
.dstat span{font-size:10px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.09em}

.dvs{display:grid; gap:14px}
.dvs__row{display:grid; gap:7px}
.dvs__lab{display:flex; justify-content:space-between; font-size:12px; color:var(--txt-2)}
.dvs__lab b{font-family:'JetBrains Mono',monospace; color:var(--txt)}
.dvs__bars{display:grid; gap:4px}
.dvs__bar{height:7px; border-radius:99px; background:rgba(255,255,255,.055); overflow:hidden}
.dvs__bar i{display:block; height:100%; width:0; border-radius:99px; transition:width 1.1s var(--ease); transition-delay:var(--d,0ms)}
.dvs__bar--me i{background:linear-gradient(90deg,var(--c),color-mix(in oklab,var(--c),#fff 35%)); box-shadow:0 0 14px -2px var(--c)}
.dvs__bar--top i{background:rgba(255,255,255,.22)}
.dvs__legend{display:flex; gap:14px; font-size:10.5px; color:var(--txt-3); letter-spacing:.06em; text-transform:uppercase}
.dvs__legend span{display:flex; align-items:center; gap:6px}
.dvs__legend i{width:8px; height:3px; border-radius:99px; background:var(--c)}
.dvs__legend .g{background:rgba(255,255,255,.3)}

.drank{
  display:flex; align-items:center; gap:14px; padding:16px; border-radius:var(--r-m);
  background:color-mix(in oklab,var(--c),transparent 90%);
  border:1px solid color-mix(in oklab,var(--c),transparent 72%);
}
.drank b{font-family:'JetBrains Mono',monospace; font-size:28px; font-weight:800; letter-spacing:-.05em; color:color-mix(in oklab,var(--c),#fff 25%)}
.drank span{font-size:12px; color:var(--txt-2)}
.dmini{font-size:12px; color:var(--txt-3); display:grid; gap:7px}

.dload{display:grid; place-items:center; gap:10px; padding:26px; color:var(--txt-3); font-size:12.5px}
.spin{width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,.12); border-top-color:var(--c); animation:spin .8s linear infinite}

/* =========================================================
   Toasts
   ========================================================= */
.toasts{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:120; display:grid; gap:9px; width:min(420px,calc(100% - 32px))}
.toast{
  display:flex; align-items:center; gap:11px; padding:13px 16px; border-radius:15px; font-size:13px;
  background:rgba(13,15,23,.94); border:1px solid var(--line); backdrop-filter:blur(18px);
  box-shadow:0 22px 50px -20px rgba(0,0,0,.95); animation:toastIn .45s var(--ease) both;
}
.toast.out{animation:toastOut .35s var(--ease-2) forwards}
@keyframes toastIn{from{opacity:0; transform:translateY(18px) scale(.96)}to{opacity:1; transform:none}}
@keyframes toastOut{to{opacity:0; transform:translateY(12px) scale(.97)}}
.toast i{width:7px; height:7px; border-radius:50%; background:var(--a2); flex:none; box-shadow:0 0 10px var(--a2)}
.toast.err i{background:var(--bad); box-shadow:0 0 10px var(--bad)}
.toast.ok i{background:var(--ok); box-shadow:0 0 10px var(--ok)}

/* =========================================================
   Responsive & motion
   ========================================================= */
@media(max-width:760px){
  .nav__links{display:none}
  .profile__id{flex-direction:column; align-items:flex-start; text-align:left}
  .modes-head{gap:12px}
  .seg{width:100%; justify-content:space-between}
  .seg button{flex:1; text-align:center; padding-inline:6px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1; transform:none; filter:none}
}