:root{
  /* Paleta premium (referência)
     Fundo principal:        #070b14
     Fundo secundário:       #0e1422
     Card / superfície:      #151d2e
     Título:                 #f8fafc
     Texto secundário:       #94a3b8
     Botão primário:         #5e6ad2
     Hover primário:         #7b88f0
     Borda:                  rgba(148,163,184,.14)
     Badges / ícones / stats:#a5b4fc
  */
  --bg0:#070b14;
  --bg1:#0e1422;
  --bg-surface:#151d2e;
  /* Ilustração de fundo — ajuste URL / opacidade no :root */
  --bg-illust:url("assets/adt_g08.bmp");
  --bg-illust-opacity:0.11;
  --bg-illust-blur:2px;
  --bg-illust-size:cover;
  --bg-illust-position:center 28%;
  --panel:rgba(21,29,46,.78);
  --panel2:rgba(17,24,38,.65);
  --stroke:rgba(148,163,184,.14);
  --title:#f8fafc;
  --text:#e8edf5;
  --muted:rgba(226,232,240,.78);
  --muted2:#94a3b8;
  /* Único destaque principal — indigo técnico (sem quentes) */
  --accent:#5e6ad2;
  --accent-hover:#7b88f0;
  --accent-soft:rgba(94,106,210,.18);
  --accent-mid:rgba(94,106,210,.42);
  --accent-icon:#a5b4fc;
  --accent2:#34d399;
  --accentWarm:#5e6ad2;
  --accentCyan:#64748b;
  --num-strong:#c7d2fe;
  --danger:#f87171;
  --ok:#34d399;
  --shadow:0 20px 56px rgba(0,0,0,.5);
  --shadow-soft:0 1px 0 rgba(255,255,255,.04) inset;
  --radius:20px;
}

*{box-sizing:border-box}
html{
  scrollbar-color:rgba(94,106,210,.45) rgba(7,11,20,.65);
  scrollbar-width:thin;
}
html,body{min-height:100%}
body{
  margin:0;
  font-size:22px;
  line-height:1.35;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  color:var(--text);
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(1100px 520px at 18% -8%, rgba(49,46,129,.32), transparent 58%),
    radial-gradient(880px 480px at 92% 8%, rgba(30,41,59,.45), transparent 52%),
    radial-gradient(700px 400px at 50% 100%, rgba(15,23,42,.5), transparent 55%),
    linear-gradient(165deg, var(--bg0) 0%, #0a0f1a 48%, var(--bg1) 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:var(--bg-illust);
  background-size:var(--bg-illust-size);
  background-repeat:no-repeat;
  background-position:var(--bg-illust-position);
  opacity:var(--bg-illust-opacity);
  filter:blur(var(--bg-illust-blur)) saturate(1.06) brightness(.97);
  transform:translateZ(0);
}
/* Vinheta leve para o texto/painéis continuarem legíveis sem “poluir” */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(
    ellipse 95% 85% at 50% 38%,
    rgba(7,11,20,0) 0%,
    rgba(7,11,20,.28) 52%,
    rgba(7,11,20,.58) 100%
  );
}

body > *{
  position:relative;
  z-index:1;
}

/* Scrollbar WebKit — alinha ao tema escuro (evita barra cinza “do sistema” gritante) */
::-webkit-scrollbar{
  width:10px;
  height:10px;
}
::-webkit-scrollbar-track{
  background:rgba(7,11,20,.55);
}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(94,106,210,.45), rgba(94,106,210,.2));
  border-radius:999px;
  border:2px solid rgba(7,11,20,.55);
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(123,136,240,.55), rgba(94,106,210,.35));
}

a{color:inherit; text-decoration:none}

.container{
  width:min(1180px, 92vw);
  margin:0 auto;
  padding:26px 0 60px;
}

/* Pagina do jogador: cabecalho com sprite */
.playerPage__head{
  align-items:center !important;
}
.playerPage__headLeft{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}
.playerPage__sprite{
  width:80px;
  height:80px;
  flex:0 0 auto;
  object-fit:contain;
  image-rendering:pixelated;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.simulateBanner{
  border-radius:16px;
  border:1px solid var(--stroke);
  background:linear-gradient(135deg, rgba(21,29,46,.85), rgba(15,23,42,.55));
  color:var(--muted);
  font-weight:800;
  font-size:15px;
  padding:12px 16px;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow:var(--shadow-soft);
}
.simulateBanner strong{
  color:var(--title);
}
.simulateBanner__tag{
  margin-left:auto;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(94,106,210,.35);
  color:var(--accent-icon);
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(12px);
  background:rgba(7,11,20,.72);
  border-bottom:1px solid var(--stroke);
}
.topbar__inner{
  width:min(1180px, 92vw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:14px;
}

.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700;
  letter-spacing:.2px;
}
.brand__dot{
  width:34px;height:34px;border-radius:12px;
  background:linear-gradient(145deg, rgba(94,106,210,.95), rgba(49,46,129,.75));
  box-shadow:0 10px 36px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06) inset;
  border:1px solid rgba(148,163,184,.16);
}
.brand__logo{
  width:34px;
  height:34px;
  border-radius:12px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(7,11,20,.35);
  box-shadow:0 6px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
}

.brand__name{font-size:16px; color:var(--muted)}

.nav{
  display:flex;
  gap:18px;
  align-items:center;
  flex:1;
  justify-content:center;
}
.nav__link{
  color:var(--muted);
  font-size:15px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  transition:all .15s ease;
}
.nav__link:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
  color:var(--text);
}

.topbar__btn{white-space:nowrap}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-weight:600;
  font-size:16px;
  cursor:pointer;
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  background:linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%);
  border-color:rgba(148,163,184,.22);
  box-shadow:0 4px 20px rgba(94,106,210,.28), var(--shadow-soft);
}
.btn--primary:hover{
  background:linear-gradient(180deg, #8b96f5 0%, var(--accent-hover) 100%);
  border-color:rgba(165,180,252,.35);
}
.btn--secondary{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.14);
}
.btn--ghost{
  background:transparent;
  border-color:rgba(255,255,255,.12);
  color:var(--muted);
}
.btn--ghost:hover{
  background:rgba(255,255,255,.04);
  color:var(--text);
}

.hero{
  background:linear-gradient(180deg, rgba(21,29,46,.55), rgba(15,23,42,.35));
  border:1px solid var(--stroke);
  border-radius:26px;
  padding:22px;
  position:relative;
  overflow:hidden;
  box-shadow:0 22px 64px rgba(0,0,0,.45), var(--shadow-soft);
}

.hero::after{
  content:"";
  position:absolute;
  inset:-10px;
  pointer-events:none;
  background-image: url("assets/creepykafra_01blush.bmp");
  background-size: 280px auto;
  background-repeat:no-repeat;
  background-position: 92% 18%;
  opacity:.035;
  filter: blur(1px) saturate(.95);
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  align-items:center;
}
.hero__kicker{
  font-weight:950;
  font-size:12px;
  letter-spacing:.14em;
  color:var(--muted2);
  text-transform:uppercase;
}
.hero__title{
  margin:10px 0 0;
  font-size:40px;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--title);
}
.hero__subtitle{
  margin:12px 0 18px;
  color:var(--muted);
  max-width:560px;
  font-weight:650;
}
.hero__actions{
  display:flex;
  justify-content:flex-start;
  gap:14px;
  flex-wrap:wrap;
}
.hero__right{
  position:relative;
  min-height:148px;
  border-radius:24px;
  border:1px solid var(--stroke);
  background:
    radial-gradient(260px 120px at 32% 22%, rgba(49,46,129,.4), transparent 62%),
    radial-gradient(200px 100px at 82% 70%, rgba(94,106,210,.15), transparent 58%),
    rgba(15,23,42,.45);
  overflow:hidden;
}
.heroBadge{
  position:absolute;
  top:14px; left:14px;
  z-index:2;
  width:48px; height:48px;
  border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  font-size:22px;
}
.heroLines{
  position:absolute; inset:-30px;
  z-index:0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.16) 0px, rgba(255,255,255,.16) 1px, transparent 1px, transparent 10px);
  opacity:.18;
  transform:rotate(-6deg);
}
.heroInsight{
  position:relative;
  z-index:1;
  padding:16px 16px 18px 74px;
  min-height:140px;
  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:center;
}
.heroInsight__title{
  margin:0;
  font-size:11px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted2);
}
.heroInsight__facts{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.heroInsight__fact{
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-size:12.5px;
  line-height:1.4;
  color:rgba(255,255,255,.72);
  font-weight:650;
}
.heroInsight__factIcon{
  flex-shrink:0;
  font-size:15px;
  line-height:1.35;
  margin-top:1px;
}
.heroInsight__factText .heroInsight__strong{
  font-weight:900;
  color:var(--text);
}
@media (max-width: 640px){
  .heroInsight{
    padding-left:14px;
    padding-top:68px;
  }
  .heroBadge{
    left:50%;
    transform:translateX(-50%);
  }
}

.filters{
  margin-top:18px;
}
.filters__grid{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:14px;
  align-items:end;
}
.filters__field{min-width:0}
.filters__field--apply{padding-bottom:2px}

.label{
  display:block;
  font-size:14px;
  color:var(--muted2);
  margin-bottom:6px;
}
.label--invisible{opacity:0; pointer-events:none}

.input{
  width:100%;
  padding:13px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
}
.input--small{padding:10px 11px; border-radius:14px}

.dateRange{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:8px;
}
.dateRange__col .label{margin-bottom:6px}

.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.scopeSeg{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}
.scopeSeg__btn{
  text-align:left;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-weight:900;
  cursor:pointer;
  transition:all .15s ease;
}
.scopeSeg__btn:hover{
  border-color:rgba(255,255,255,.18);
  color:var(--text);
}
.scopeSeg__btn.is-active{
  background:rgba(255,255,255,.06);
  border-color:rgba(94,106,210,.55);
  color:var(--text);
}

.rangePicker{
  position:relative;
  margin-top:8px;
}
.rangePicker__button{
  width:100%;
  text-align:left;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.rangePicker__button:hover{
  border-color:rgba(255,255,255,.18);
}
.rangePicker__popover{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 10px);
  z-index:100;
  display:none;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(22,30,46,.98), rgba(15,23,42,.94));
  backdrop-filter: blur(10px);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  padding:12px;
}
.rangePicker[data-open="true"] .rangePicker__popover{
  display:block;
}
.rangePicker__calHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.rangePicker__nav{
  width:40px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font-weight:900;
}
.rangePicker__nav:hover{
  border-color:rgba(94,106,210,.55);
}
.rangePicker__calTitle{
  font-weight:950;
  color:var(--text);
}
.rangePicker__dow{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:6px;
  color:var(--muted2);
  font-weight:900;
  font-size:12px;
  margin-bottom:8px;
}
.rangePicker__grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:6px;
}
.rangePicker__dayCell.is-empty{
  visibility:hidden;
}
.rangePicker__day{
  width:100%;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:var(--muted2);
  cursor:pointer;
  font-weight:900;
}
.rangePicker__day:hover{
  border-color:rgba(255,255,255,.18);
  color:var(--text);
}
.rangePicker__day.is-selected{
  border-color:rgba(94,106,210,.7);
  background:rgba(94,106,210,.26);
  color:var(--text);
}
.rangePicker__day.is-inRange{
  background:rgba(94,106,210,.18);
  border-color:rgba(94,106,210,.50);
  color:rgba(233,236,255,.95);
}
.rangePicker__footer{
  margin-top:10px;
  color:rgba(233,236,255,.55);
  font-weight:800;
  font-size:12px;
  line-height:1.3;
}

.rangePicker__actions{
  margin-top:10px;
  display:flex;
  justify-content:flex-end;
}
.rangePicker__ok{
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, var(--accent-hover), var(--accent));
  color:rgba(255,255,255,.96);
  font-weight:950;
  cursor:pointer;
}
.rangePicker__ok:hover{
  border-color:rgba(255,255,255,.22);
}
.input::placeholder{color:rgba(233,236,255,.40)}
.input:focus{
  border-color:rgba(94,106,210,.6);
  box-shadow:0 0 0 4px rgba(94,106,210,.15);
}

.check{
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:14px;
}
.check input{
  width:18px; height:18px;
  accent-color: var(--accent);
}
.check--small{font-size:12px; gap:8px}
.check--small input{width:16px;height:16px}

.btn--small{
  padding:8px 10px;
  font-size:15px;
  border-radius:12px;
}

.stats{margin-top:18px}
.stats__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}

.statCard{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(21,29,46,.5), rgba(15,23,42,.35));
  padding:22px 20px;
  min-height:135px;
}
.statCard::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(520px 180px at 30% -30%, var(--cardAccent, rgba(94,106,210,.9)), transparent 60%);
  opacity:.28;
  pointer-events:none;
}
.statCard__icon{
  color:var(--cardAccent, rgba(233,236,255,.7));
  font-weight:700;
  letter-spacing:.03em;
  font-size:28px;
  line-height:1;
}
.statCard__value{
  margin-top:8px;
  font-size:48px;
  font-weight:800;
  letter-spacing:.4px;
  color:var(--title);
}
.statCard__label{
  margin-top:6px;
  color:var(--muted2);
  font-weight:600;
  font-size:18px;
}

.statCard--matches{--cardAccent: rgba(56,189,248,.82);}
.statCard--players{--cardAccent: rgba(52,211,153,.82);}
.statCard--kills{--cardAccent: rgba(148,163,184,.88);}
.statCard--apm{--cardAccent: rgba(94,106,210,.9);}

.shell{
  display:flex;
  min-height:100vh;
}
.sidebar{
  width:350px;
  flex-shrink:0;
  padding:20px 16px 28px;
  position:sticky;
  top:0;
  align-self:flex-start;
  /* Uma única rolagem na página: sem height:100vh + overflow:auto (evita “dupla barra”) */
  min-height:100vh;
  max-height:none;
  overflow:visible;
  border-right:1px solid rgba(255,255,255,.08);
  background:rgba(7,11,20,.58);
  backdrop-filter: blur(12px);
}
.sidebar__brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.sidebar__logo{
  width:48px; height:48px;
  flex-shrink:0;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(30px 30px at 30% 20%, rgba(94,106,210,.35), transparent 60%),
    rgba(255,255,255,.03);
}
.sidebar__logoImg{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:12px;
}
.sidebar__title{
  font-weight:950;
  font-size:18px;
  color:var(--title);
}
.sidebar__subtitle{
  margin-top:2px;
  font-size:13px;
  color:var(--muted2);
  font-weight:700;
}
.sidebar__nav{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sidebar__link{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid transparent;
  color:var(--muted);
  font-weight:850;
  font-size:14px;
}
.sidebar__link:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.10);
  color:var(--text);
}
.sidebar__link.is-active{
  background:rgba(255,255,255,.05);
  border-color:rgba(94,106,210,.45);
  color:var(--text);
}
.sidebar__filter{
  margin-top:14px;
  padding:12px 12px 14px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
}
.sidebar__filter--collapsed{
  padding-bottom:12px;
}
.sidebar__filterHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.sidebar__filter--collapsed .sidebar__filterHead{
  margin-bottom:0;
}
.sidebar__filterTitle{
  font-weight:950;
  margin:0;
  letter-spacing:.01em;
  min-width:0;
  flex:1;
  color:var(--title);
}
.sidebar__filterToggle{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  font-family:inherit;
}
.sidebar__filterToggle:hover{
  border-color:rgba(94,106,210,.45);
  background:rgba(94,106,210,.12);
}
.sidebar__filterToggle:focus-visible{
  outline:2px solid rgba(94,106,210,.65);
  outline-offset:2px;
}
.sidebar__filterToggleIcon{
  font-size:10px;
  line-height:1;
  opacity:.9;
  transition:transform .2s ease;
}
.sidebar__filter:not(.sidebar__filter--collapsed) .sidebar__filterToggleIcon{
  transform:rotate(180deg);
}
.sidebar__filterBody[hidden]{
  display:none !important;
}
/* Modal de classes (seleção múltipla + sprites) */
.classPickerModal{
  position:fixed;
  inset:0;
  z-index:260;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(16px, env(safe-area-inset-top)) 16px 16px;
}
.classPickerModal[hidden]{
  display:none !important;
}
.classPickerModal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(6px);
}
.classPickerModal__dialog{
  position:relative;
  z-index:1;
  width:min(720px, 100%);
  max-height:min(88vh, 900px);
  display:flex;
  flex-direction:column;
  border-radius:22px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, #161d2e, #0f172a);
  box-shadow:0 28px 80px rgba(0,0,0,.65), var(--shadow-soft);
  overflow:hidden;
}
.classPickerModal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 8px;
  flex-shrink:0;
}
.classPickerModal__title{
  margin:0;
  font-weight:950;
  font-size:clamp(17px, 3.5vw, 20px);
  color:var(--title);
}
.classPickerModal__close{
  width:40px;
  height:40px;
  flex-shrink:0;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.classPickerModal__close:hover{border-color:rgba(94,106,210,.5)}
.classPickerModal__hint{
  margin:0;
  padding:0 16px 12px;
  font-size:13px;
  color:var(--muted2);
  font-weight:650;
  line-height:1.45;
  flex-shrink:0;
}
.classPickerModal__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(118px, 1fr));
  gap:10px;
  padding:8px 16px 16px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.classPickerModal__footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
  padding:12px 16px 16px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
  flex-shrink:0;
}
.classModalCard{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:10px 8px 12px;
  border-radius:16px;
  border:2px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  font-family:inherit;
  color:var(--text);
  text-align:center;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.classModalCard:hover{
  border-color:rgba(94,106,210,.35);
  background:rgba(94,106,210,.08);
}
.classModalCard.is-selected{
  border-color:rgba(94,106,210,.75);
  background:rgba(94,106,210,.16);
  box-shadow:0 0 0 2px rgba(94,106,210,.2);
}
.classModalCard__imgWrap{
  width:64px;
  height:64px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
}
.classModalCard__img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  image-rendering:auto;
}
.classModalCard__name{
  font-size:11px;
  font-weight:800;
  line-height:1.25;
  max-width:100%;
  padding:0 2px;
}

/* Seletor de classe — só o botão que abre o modal */
.classPicker{
  position:relative;
  margin-top:8px;
  z-index:30;
}
.classPicker--triggerOnly .classPicker__button:focus-visible{
  outline:2px solid rgba(94,106,210,.7);
  outline-offset:2px;
}
.classPicker__button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-weight:850;
  font-size:15px;
  cursor:pointer;
  font-family:inherit;
}
.classPicker__button:hover{
  border-color:rgba(255,255,255,.20);
  background:rgba(255,255,255,.05);
}
.classPicker__chev{
  flex:0 0 auto;
  font-size:12px;
  color:var(--muted2);
  transition:transform .15s ease;
}
.sidebar__filterRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
}
.sidebar__login{
  width:100%;
  margin-top:14px;
}

.content{
  flex:1;
  padding:24px 0 60px;
}
.content__inner{
  width:min(1180px, 92vw);
  margin:0 auto;
}

.mainGrid{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1.25fr .95fr;
  gap:14px;
  align-items:start;
}

.panel--leader{
  border-radius:26px;
}
.panel--recent{
  border-radius:26px;
}

.panel__hint{
  color:rgba(233,236,255,.45);
  font-size:12px;
  font-weight:800;
  padding-top:6px;
}

.howto{
  margin-top:14px;
}
.howto__card{
  border-radius:26px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(21,29,46,.4), rgba(15,23,42,.25));
  padding:16px;
}
.howto__title{
  font-weight:950;
  font-size:16px;
  margin-bottom:8px;
  color:var(--title);
}
.howto__text{
  color:var(--muted);
  font-weight:650;
  line-height:1.7;
}

.twoCols{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

.panel{
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(21,29,46,.42), rgba(15,23,42,.28));
  padding:20px 18px;
}
.panel__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}
.panel__title{font-weight:900; font-size:22px; color:var(--title)}
.panel__sub{color:var(--muted2); font-size:16px; margin-top:4px}

.tableWrap{overflow:auto}
.table{
  width:100%;
  border-collapse:collapse;
  min-width:620px;
}
.table thead th{
  color:var(--muted2);
  font-weight:700;
  font-size:18px;
  text-align:left;
  padding:16px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* Especificidade acima de `.table thead th` — alinha título com números à direita */
.table thead th.thRight{
  text-align:right;
}
.thRight{text-align:right}
.thMono{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.thRank{width:56px}

/* Ranking completo (muitas colunas) */
.rankingFull__tableWrap{
  -webkit-overflow-scrolling:touch;
}
.table--rankingFull{
  min-width:1100px;
}
.table--rankingFull thead th{
  font-size:14px;
  padding:12px 10px;
  white-space:nowrap;
  letter-spacing:.02em;
}
.table--rankingFull tbody td{
  font-size:15px;
  padding:12px 10px;
  vertical-align:middle;
}
.rankingFull__skillsNum{
  font-weight:900;
  color:var(--num-strong);
}
/* Ranking completo jogadores: coluna nome + botões de ordenação */
.table--rankingFull thead th.rankingFull__jogadorCol,
.table--rankingFull tbody td.rankingFull__jogadorCol{
  text-align:left !important;
}
.table--rankingFull thead th.rankingFull__jogadorCol .tableSortBtn--left{
  justify-content:flex-start;
  text-align:left;
}
.table--rankingFull .tableSortBtn{
  text-transform:none;
  letter-spacing:.02em;
  font-size:13px;
  font-weight:700;
  color:var(--muted2);
  padding:8px 0;
}
.table--rankingFull .tableSortBtn:hover{
  color:var(--text);
}
.table--rankingFull .tableSortBtn:hover .tableSortBtn__icon{
  color:var(--accent-icon);
}
.tableSortBtn__sub{
  font-size:.88em;
  font-weight:650;
  opacity:.88;
  pointer-events:none;
}

.table tbody td{
  padding:16px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:middle;
  font-size:17px;
}
.table tbody tr:hover td{
  background:rgba(255,255,255,.02);
}

.playerSkills{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:320px;
}
.skillsEmpty{
  color:var(--muted2);
  font-weight:700;
}
.skillChip{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
  font-size:14px;
  font-weight:750;
  line-height:1.25;
}
.skillChip__body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.skillUsageSummary{
  grid-column:1 / -1;
  font-size:13px;
  font-weight:700;
  color:var(--muted2);
  margin-bottom:4px;
  padding:0 2px 6px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.skillUsageSummary strong{
  color:var(--num-strong);
  font-weight:900;
}
.skillChip__icon{
  width:26px;
  height:26px;
  flex:0 0 26px;
  object-fit:contain;
  image-rendering:pixelated;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.skillChip__icon--ph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}
.skillChip__name{
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:850;
}
.skillChip__stats{
  font-size:12px;
  font-weight:650;
  line-height:1.35;
  color:rgba(233,236,255,.55);
  font-variant-numeric:tabular-nums;
}
.skillChip__stats strong{
  color:var(--num-strong);
  font-weight:900;
}

/* Perfil do jogador: grade com mais habilidades (top 15) */
.playerProfileSkills .playerSkills{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:10px;
  max-width:none;
}
.playerProfileSkills .skillUsageSummary{
  margin-bottom:2px;
}
.playerSkillsSection .skillChip{
  margin:0;
}

.table__empty{
  padding:26px 10px;
  color:var(--muted2);
  text-align:center;
  font-size:16px;
}

.playerLink{
  display:inline-block;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  color:var(--text);
  font-size:15px;
}
.playerLink--withAvatar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 12px;
}
.playerLink__name{
  font-weight:900;
}
.playerLink__class{
  margin-top:4px;
  display:inline-block;
  font-weight:850;
  font-size:14px;
  color:rgba(233,236,255,.78);
  line-height:1.15;
  max-width:220px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.avatar{
  width:44px;
  height:44px;
  object-fit:contain;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
  flex:0 0 auto;
}
.avatar--tiny{
  width:30px;
  height:30px;
  border-radius:12px;
}

.metaPlayer{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.metaSep{
  color:var(--muted2);
  margin:0 6px;
  font-weight:900;
}
.playerLink:hover{
  border-color:rgba(94,106,210,.5);
}

.recentList{
  padding-top:8px;
}
.recentItem{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  margin-bottom:10px;
}
.recentItem__left{
  min-width:0;
}
.recentItem__title{
  font-weight:800;
  margin-bottom:6px;
  font-size:16px;
}
.recentItem__meta{
  color:var(--muted2);
  font-size:15px;
}
.recentItem__meta--clans{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  font-weight:800;
  color:var(--text);
}
.recentItem__clanGroup{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  min-width:0;
}
/* Pill: um time por lado (partida 1v1). */
.metaClan{
  display:inline-block;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-size:14px;
  font-weight:850;
  line-height:1.25;
}
.metaClan--hero{
  font-size:15px;
  padding:7px 12px;
  font-weight:900;
}
.metaSep--vs{
  font-weight:900;
  color:rgba(94,106,210,.95);
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.06em;
}
.recentItem__right{
  display:flex;
  align-items:center;
  gap:10px;
}
.smallPill{
  color:var(--muted);
  font-size:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  padding:6px 8px;
  border-radius:999px;
}

.table__empty--center{
  text-align:center;
  padding:24px 10px;
}

/* Detalhe da partida — guildas e escalações */
.matchGuildHead{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:12px 16px;
  align-items:center;
  padding:16px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg, rgba(94,106,210,.1), rgba(15,23,42,.55));
  margin-top:4px;
}
.matchGuildHead__side{
  min-width:0;
  text-align:left;
}
.matchGuildHead__side--b{
  text-align:right;
}
.matchGuildHead__label{
  display:block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted2);
  margin-bottom:4px;
}
.matchGuildHead__clans{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:8px;
}
.matchGuildHead__side--b .matchGuildHead__clans{
  justify-content:flex-end;
}
.matchGuildHead__score{
  font-weight:950;
  font-size:28px;
  font-variant-numeric:tabular-nums;
  color:var(--num-strong);
  white-space:nowrap;
  padding:0 8px;
}
.matchRosterWrap{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.matchRosterBlock__title{
  font-weight:900;
  font-size:18px;
  margin-bottom:10px;
  color:var(--text);
}
.matchRosterTable{
  min-width:480px;
}

/* Abas + duas colunas (times) na página de partida */
.matchDetailTabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}
.matchDetailTab{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-weight:800;
  font-size:14px;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-family:inherit;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.matchDetailTab:hover{
  border-color:rgba(94,106,210,.35);
  color:var(--text);
}
.matchDetailTab.is-active{
  border-color:rgba(94,106,210,.55);
  color:var(--text);
  background:rgba(94,106,210,.12);
  box-shadow:0 0 0 1px rgba(94,106,210,.2);
}
.matchDetailPane{min-height:80px}
/* Dois times sempre lado a lado (flex); telas estreitas rolam na horizontal */
.matchPaneStats--dualTeams{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}
.matchTeamsSideBySide{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:16px;
  width:100%;
  /* Duas colunas 7x7 lado a lado; em telas estreitas rola horizontal */
  min-width:600px;
}
.matchTeamCol--dual{
  flex:1 1 0;
  min-width:260px;
  max-width:50%;
}
.matchStatsColHeader{
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted2);
  line-height:1.35;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.matchStatsColHeader strong{
  display:block;
  margin-top:6px;
  font-size:17px;
  font-weight:950;
  text-transform:none;
  letter-spacing:.02em;
  color:var(--text);
}
.matchTeamCol{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:12px 12px 14px;
  background:rgba(255,255,255,.02);
  min-width:0;
}
.matchTeamCol__title{
  font-weight:900;
  font-size:15px;
  margin-bottom:10px;
  color:var(--text);
  letter-spacing:.02em;
}
.matchTeamCol--spanAll{
  width:100%;
  max-width:100%;
}
/* Elenco único (sem time na API) */
.matchStatsSingleFull{
  width:100%;
}
.table--matchTeamStats{
  width:100%;
  min-width:0 !important; /* sobrescreve .table { min-width:620px } */
  table-layout:fixed;
}
.table--matchTeamStats th,
.table--matchTeamStats td{
  padding:8px 6px;
  font-size:13px;
}
.table--matchTeamStats th:first-child,
.table--matchTeamStats td:first-child{
  width:38%;
}
.matchClassCell{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.matchClassCell .avatar{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
}
.matchClassCell__text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.matchClassCell__class{
  font-weight:850;
  font-size:13px;
  color:var(--text);
  line-height:1.2;
}
.matchClassCell__player{
  font-size:12px;
  color:var(--muted2);
  font-weight:700;
}
.table--skillKills{min-width:480px}
.table--skillKills .matchKillSkill{
  color:var(--accent2, rgba(196,181,253,.95));
  font-weight:750;
}
.table--skillKills__dmg{
  font-variant-numeric:tabular-nums;
  font-weight:800;
  color:var(--num-strong);
  white-space:nowrap;
}

@media (max-width: 720px){
  .matchGuildHead{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .matchGuildHead__side,
  .matchGuildHead__side--b{
    text-align:center;
  }
  .matchGuildHead__clans,
  .matchGuildHead__side--b .matchGuildHead__clans{
    justify-content:center;
  }
  .matchGuildHead__score{
    order:-1;
    font-size:32px;
  }
}

.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:120;
}
.modal[data-open="true"]{display:block}
.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}
.modal__content{
  position:relative;
  width:min(520px, 92vw);
  margin:10vh auto 0;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, #161d2e, #0f172a);
  box-shadow:var(--shadow);
}
.modal__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 14px 6px;
}
.modal__title{
  font-weight:900;
  font-size:18px;
  color:var(--title);
}
.modal__close{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
}
.modal__close:hover{border-color:rgba(94,106,210,.5)}
.modal__body{padding:14px 16px 16px}
.formRow{margin-bottom:12px}
.modal__actions{display:flex; justify-content:flex-end; padding-top:4px}
.formError{
  min-height:16px;
  margin-top:10px;
  color:var(--danger);
  font-weight:700;
  font-size:14px;
}
.modal__authSwitch{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.modal__authSwitchRow{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 12px;
}
.modal__authSwitchHint{
  font-size:15px;
  font-weight:650;
  color:var(--muted2);
  line-height:1.3;
}
/* CTA secundário no modal: mesma família/peso que .btn, com acento do projeto */
.modal__authCta{
  font-family:inherit;
  font-weight:700;
  border-color:rgba(94,106,210,.38);
  color:var(--num-strong);
  box-shadow:0 0 0 1px rgba(94,106,210,.08) inset;
}
.modal__authCta:hover{
  border-color:rgba(129,140,248,.55);
  background:rgba(94,106,210,.14);
  color:var(--text);
}

/* Sexo: segmento escuro (evita <select> nativo e estilo branco do botão no Windows) */
.modal__sexSeg{
  display:flex;
  margin-top:8px;
  padding:5px;
  gap:5px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(7,11,20,.45);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.modal__sexBtn{
  -webkit-appearance:none;
  appearance:none;
  flex:1;
  min-width:0;
  margin:0;
  padding:11px 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  background-color:transparent;
  color:var(--muted2);
  font-family:inherit;
  font-weight:800;
  font-size:15px;
  letter-spacing:.12em;
  line-height:1.2;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.modal__sexBtn:hover:not(.modal__sexBtn--active){
  color:var(--text);
  background:rgba(255,255,255,.06);
}
.modal__sexBtn--active{
  color:var(--title);
  background:linear-gradient(180deg, var(--accent-hover), var(--accent));
  box-shadow:0 4px 14px rgba(94,106,210,.32), 0 1px 0 rgba(255,255,255,.12) inset;
}
.modal__sexBtn:focus-visible{
  outline:2px solid rgba(129,140,248,.9);
  outline-offset:2px;
}
.modal__sexBtn:active:not(.modal__sexBtn--active){
  transform:translateY(1px);
}

/* —— Ranking de guildas (pages/guilds.html) —— */
.guildsPage{
  padding-bottom:48px;
}
.guildsHero{
  padding:20px 18px 18px;
  margin-bottom:14px;
}
.guildsHero__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.guildsHero__actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  flex-wrap:wrap;
}
.guildsHero__title{
  margin:0;
  font-weight:950;
  font-size:clamp(22px, 4vw, 28px);
  color:var(--title);
  display:flex;
  align-items:center;
  gap:10px;
}
.guildsHero__icon{
  font-size:1.15em;
  filter:drop-shadow(0 0 14px rgba(94,106,210,.35));
}
.guildsHero__sub{
  margin:6px 0 0;
  color:var(--muted2);
  font-size:16px;
  font-weight:650;
}
.guildsHero__badge{
  flex-shrink:0;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(94,106,210,.35);
  background:rgba(21,29,46,.65);
  color:var(--accent-icon);
  font-weight:900;
  font-size:14px;
  white-space:nowrap;
}
.guildsToolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.guildsToolbar--soloToggle{
  justify-content:flex-end;
}
.guildsSearchWrap{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:min(100%, 240px);
  padding:4px 4px 4px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
}
.guildsSearch__icon{
  opacity:.55;
  font-size:16px;
}
.guildsSearch__input{
  flex:1;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:10px 12px 10px 0 !important;
  min-width:0;
}
.guildsViewToggle{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.guildsViewToggle__btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-weight:850;
  font-size:14px;
  text-decoration:none;
  font-family:inherit;
  cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
a.guildsViewToggle__btn:hover{
  border-color:rgba(94,106,210,.4);
  color:var(--text);
  background:rgba(94,106,210,.1);
}
.guildsViewToggle__btn--active{
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);
  color:var(--text);
  cursor:default;
}
.guildsTableSection{
  margin-top:0;
}
.guildsTableWrap{
  max-width:100%;
}
.table--guilds{
  min-width:980px;
}
.table--guilds thead th{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted2);
  padding:14px 12px;
}
.table--guilds tbody td{
  font-size:16px;
  padding:14px 12px;
}
/* Coluna Guilda: sempre alinhada à esquerda (texto sob o cabeçalho) */
.table--guilds .guildCol{
  text-align:left !important;
  vertical-align:middle;
}
.table--guilds thead th.guildCol{
  text-align:left !important;
}
.guildName{
  display:inline-block;
  text-align:left;
  font-weight:900;
  color:var(--text);
  max-width:100%;
}
.sortHint{
  font-size:11px;
  opacity:.65;
  margin-left:2px;
}

/* Cabeçalho clicável: ordenar (ex.: Pontos nas guildas) */
.tableSortBtn{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  width:100%;
  margin:0;
  padding:6px 0;
  border:none;
  border-radius:8px;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  cursor:pointer;
  text-align:right;
  font-family:inherit;
  line-height:inherit;
}
.tableSortBtn:hover{
  color:var(--text);
}
.tableSortBtn:hover .tableSortBtn__icon{
  opacity:1;
  color:var(--accent-icon);
}
.tableSortBtn:focus-visible{
  outline:2px solid rgba(94,106,210,.65);
  outline-offset:2px;
}
.tableSortBtn__label{
  pointer-events:none;
}
.tableSortBtn__icon{
  flex:0 0 auto;
  min-width:14px;
  font-size:10px;
  line-height:1;
  opacity:.8;
  transition:opacity .15s ease, color .15s ease;
  text-align:center;
}
.tableSortBtn--left{
  justify-content:flex-start;
  text-align:left;
}
.table--guilds thead th.guildCol .tableSortBtn{
  justify-content:flex-start;
  text-align:left;
}
.tableSortBtn--active{
  color:var(--title) !important;
}
.tableSortBtn--active .tableSortBtn__icon{
  opacity:1;
  color:var(--accent-icon);
}
.table--guilds .tableSortBtn{
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:13px;
  font-weight:700;
  color:var(--muted2);
  padding:8px 0;
}
.table--guilds .tableSortBtn:hover{
  color:var(--text);
}
.guildsEmpty{
  text-align:center;
  padding:56px 20px 64px;
  color:var(--muted2);
}
.guildsEmpty__emoji{
  font-size:52px;
  line-height:1;
  margin-bottom:12px;
  opacity:.75;
}
.guildsEmpty__title{
  margin:0 0 8px;
  font-weight:900;
  font-size:18px;
  color:var(--muted);
}
.guildsEmpty__hint{
  margin:0;
  font-size:15px;
  font-weight:650;
  max-width:420px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.45;
}

@media (max-width: 980px){
  .shell{display:block}
  .sidebar{
    position:relative;
    width:auto;
    height:auto;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .content{padding-top:14px}
  .content__inner{width:92vw}
  .hero__grid{grid-template-columns:1fr}
  .stats__grid{grid-template-columns: 1fr 1fr}
  .mainGrid{grid-template-columns:1fr}
  .table{min-width:620px}
}