/* ============================================================
   KENNZY SHELL — chrome compartilhado de TODAS as páginas
   (tokens de tema + topbar + rail + painéis + mobile)

   Como usar em qualquer página:
     <link rel="stylesheet" href="/assets/css/shell.css?v=1">   ← ANTES do <style> da página
     <script defer src="/assets/js/shell.js"></script>      ← ANTES do kennzy-auth.js

   A navbar e o rail são INJETADOS pelo shell.js — nenhuma página
   deve ter markup próprio de topbar/rail. Para adicionar/remover
   um destino do menu, edite só o NAV em assets/js/shell.js.

   Layouts suportados:
     <div class="shell">                        → rail + main
     <div class="shell shell--chlist">          → rail + painel lateral + main
     <div class="shell shell--chlist shell--members"> → + coluna direita
     <body class="shell-fixed">                 → página que rola no body (home)
   ============================================================ */

/* ---------------- TOKENS ---------------- */
:root{
  /* Formatos (sem arredondamento padrão) */
  --r-xs:0px; --r-sm:0px; --r-md:0px; --r-lg:0px; --r-xl:0px; --r-pill:0px; --r-full:9999px;
  /* Espaçamentos compactos */
  --sp-xxs:4px; --sp-xs:4px; --sp-sm:8px; --sp-md:12px; --sp-lg:9px; --sp-xl:15px; --sp-xxl:30px;

  /* Cores - Light Mode (Agressivo default) */
  --primary: #f8f6f0;
  --secondary: #f49200;
  --accent: #b84c35;

  --cream-0: #ffffff;
  --cream-1: #f8f6f0;
  --cream-2: #eae5d9;
  --cream-3: #e0d8c8;
  --cream-4: #c2b8a3;

  --amber-soft: rgba(244, 146, 0, 0.15);
  --accent-soft: rgba(184, 76, 53, 0.15);

  --ink: #2b2824;
  --text-soft: #635b51;
  --text-faint-2: #8f8576;
  --hairline: rgba(43, 40, 36, 0.1);
  --hairline-2: rgba(43, 40, 36, 0.15);

  --on-secondary: #402C0C;
  --on-accent: #FFFFFF;

  --f-display:'Space Grotesk', sans-serif;
  --f-body:'Inter', sans-serif;

  --nav-h:56px;
  --rail-w:76px;
  --chlist-w:248px;
  --members-w:270px;

  --shadow-card:0 1px 2px rgba(70,45,10,.05), 0 4px 16px rgba(70,45,10,.05);
  --shadow-hover:0 6px 26px rgba(70,45,10,.12);

  color-scheme:light;
}

/* ---------------- TEMA ESCURO (AGRESSIVO DEFAULT) ---------------- */
:root[data-theme="dark"]{
  --primary: #171716;
  --secondary: #f49200;
  --accent: #8c6257;

  --cream-0: #27231f;
  --cream-1: #151412;
  --cream-2: #1f1d1a;
  --cream-3: #11100e;
  --cream-4: #3d3731;

  --amber-soft: rgba(244, 146, 0, 0.15);
  --accent-soft: rgba(140, 98, 87, 0.15);

  --ink: #d4ccb4;
  --text-soft: #a39c89;
  --text-faint-2: #7a7463;
  --hairline: rgba(212, 204, 180, 0.1);
  --hairline-2: rgba(212, 204, 180, 0.15);

  --on-secondary: #2A1C05;
  --on-accent: #FFFFFF;

  --shadow-card:0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.5);
  --shadow-hover:0 8px 30px rgba(0,0,0,.6);

  color-scheme:dark;
}

/* ---- ajustes de contraste em widgets compartilhados (só no escuro) ---- */
/* medalha padrão do ranking usa cream-3 (agora quase preto) + texto escuro
   → daria texto invisível; devolve texto claro, mas mantém escuro no
   ouro/prata (que continuam com fundo claro). */
:root[data-theme="dark"] .kzr-item__rank{ color:var(--ink); }
:root[data-theme="dark"] .kzr-item__rank.gold,
:root[data-theme="dark"] .kzr-item__rank.silver{ color:#2A1C05; }
/* tooltip do rail: mantém pílula escura (o token --ink virou claro) */
:root[data-theme="dark"] .rail-tip{ background:#000; color:var(--ink); }
/* rail no escuro: o cream-3 (#0D0B06) é praticamente preto, e atrás dos ícones ele
   lê como buraco na tela e não como superfície. Um passo acima do canvas do site
   (entre --cream-1 e --cream-2) resolve sem clarear o resto.
   Só o rail: o token continua sendo o chip mais escuro em pílulas, badges e
   medidores por todo o site, onde quase-preto é o que se quer. */
:root[data-theme="dark"] .rail{ background:#1A1510; }

/* ---------------- TEMAS CUSTOMIZADOS (PRESETS) ---------------- */
/* Preset Arredondado - Light Mode (Bordas redondas e espaçamento original) */
:root[data-preset="arredondado"] {
  --r-xs:6px; --r-sm:12px; --r-md:14px; --r-lg:16px; --r-xl:28px; --r-pill:50px;
  --sp-xxs:4px; --sp-xs:8px; --sp-sm:12px; --sp-md:16px; --sp-lg:20px; --sp-xl:24px; --sp-xxl:32px;
  
  --primary:#FDF5E7;
  --secondary:#F4A62C;
  --accent:#D30000;
  --cream-0:#FFFDF8;
  --cream-1:#FDF5E7;
  --cream-2:#F8EEDC;
  --cream-3:#F1E6CF;
  --cream-4:#E7D6B6;
  --amber-soft:#FCE7C2;
  --accent-soft:#F7D4D0;
  --ink:#2C2216;
  --text-soft:#6E5D46;
  --text-faint-2:#9A876C;
  --hairline:rgba(70,45,10,.10);
  --hairline-2:rgba(70,45,10,.16);
}

/* Preset Arredondado - Dark Mode */
:root[data-theme="dark"][data-preset="arredondado"] {
  --primary:#17130c;
  --secondary:#F4B402;
  --accent:#E5352B;
  --cream-0:#272016;
  --cream-1:#15110B;
  --cream-2:#1F1912;
  --cream-3:#0D0B06;
  --cream-4:#42341E;
  --amber-soft:#3B2C11;
  --accent-soft:#3C1E1A;
  --ink:#EBE6CF;
  --text-soft:#CBBD9C;
  --text-faint-2:#9C8B6C;
  --hairline:rgba(235,230,207,.10);
  --hairline-2:rgba(235,230,207,.15);
}

/* ---------------- RESET ---------------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--f-body);
  background:var(--cream-1);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:var(--cream-4);border-radius:var(--r-full);border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:var(--text-faint-2);background-clip:padding-box;}
::-webkit-scrollbar-track{background:transparent;}

@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* Some da tela e continua no documento: um leitor de tela lê, um buscador
   indexa, e o desenho não muda um pixel.

   Existe por causa das páginas em grade — a home e a de música são painéis de
   colunas, sem um cabeçalho onde um título caiba, e estavam sem <h1> nenhum.
   Escrever "Kennzy" em cima da grade resolveria o HTML e estragaria a página;
   isto resolve o HTML e não toca no desenho.

   `clip-path` além do `clip` porque o segundo está obsoleto, e nenhum dos dois
   é `display:none` nem `visibility:hidden` — esses dois tiram o elemento da
   árvore de acessibilidade também, que é justamente o que não se quer aqui.
   O texto TEM de descrever a página de verdade; escondê-lo é sobre desenho, e
   nunca sobre dizer ao buscador algo diferente do que o visitante vê. */
.a11y-only{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------------- SHELL (grid) ---------------- */
.shell{
  display:grid;
  grid-template-columns:var(--rail-w) 1fr;
  grid-template-rows:var(--nav-h) 1fr;
  grid-template-areas:"nav nav" "rail main";
  height:100vh;
  height:100dvh;
}
.shell--chlist{
  grid-template-columns:var(--rail-w) var(--chlist-w) 1fr;
  grid-template-areas:"nav nav nav" "rail chlist main";
}
.shell--chlist.shell--members{
  grid-template-columns:var(--rail-w) var(--chlist-w) 1fr var(--members-w);
  grid-template-areas:"nav nav nav nav" "rail chlist main members";
}
/* coluna direita SEM painel lateral (rail + main + members) — usado por
   páginas como loja que só querem a sidebar de ranking. */
.shell--members:not(.shell--chlist){
  grid-template-columns:var(--rail-w) 1fr var(--members-w);
  grid-template-areas:"nav nav nav" "rail main members";
}
.main{grid-area:main;min-width:0;overflow-y:auto;background:var(--cream-1);}
.members{grid-area:members;background:var(--cream-2);border-left:1px solid var(--hairline);overflow-y:auto;padding:var(--sp-md);}

/* modo "fixed": página que rola no body (home / mídia kit) */
body.shell-fixed{height:auto;padding-top:var(--nav-h);padding-left:var(--rail-w);}
body.shell-fixed .topbar{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:60;}
body.shell-fixed .rail{position:fixed;top:var(--nav-h);left:0;bottom:0;width:var(--rail-w);z-index:55;}

/* `data-shell="topbar"`: navbar sem rail (o mídia kit — ver o shell.js).
   O hambúrguer deixa de ser só de celular aqui: sem rail e sem ele a página
   ficaria sem navegação nenhuma no desktop. */
body[data-shell="topbar"].shell-fixed{padding-left:0;}
body[data-shell="topbar"] .topbar__menu{display:grid;}

/* ---------------- TOPBAR ---------------- */
.topbar{
  grid-area:nav;
  display:flex;align-items:center;gap:var(--sp-md);
  padding:0 var(--sp-xl);
  background:var(--cream-0);
  border-bottom:1px solid var(--hairline);
  /* 40 e não 10: o painel da busca cai do topbar para dentro da página, e com
     10 ele empatava com os cabeçalhos grudentos da home (hoje
     `.panel--flat .panel__head`, 12; era o `.col-header` de três colunas, 10)
     — empate resolve por ordem no DOM, e a página vem depois. Enquanto nada
     transbordava do topbar isso não aparecia. Fica abaixo da gaveta (80) e do
     véu (80/90), que precisam cobrir o topbar. */
  z-index:40;
}
.topbar__brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink);flex-shrink:0;}
.topbar__brand-mark{width:30px;height:30px;border-radius:var(--r-sm);overflow:hidden;background:var(--secondary);color:var(--on-secondary);display:grid;place-items:center;font-size:14px;font-weight:800;flex-shrink:0;}
.topbar__brand-mark img{width:100%;height:100%;object-fit:cover;}
.topbar__crumb{display:flex;align-items:center;gap:8px;color:var(--text-faint-2);font-size:15px;font-weight:600;min-width:0; margin-top: 2px;}
.topbar__crumb svg{width:16px;height:16px;flex-shrink:0; opacity: 0.4;}
.topbar__crumb b{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; opacity: 0.5; font-family: var(--f-display); text-transform: uppercase; letter-spacing: 0.5px;}
.topbar__spacer{flex:1;}
.topbar__search{
  display:flex;align-items:center;gap:8px;
  background:var(--cream-2);border:1px solid var(--hairline);
  border-radius:var(--r-pill);padding:8px 16px;color:var(--text-faint-2);font-size:13px;
  /* Cede espaço em vez de empurrar: entre os dois espaçadores, ela ocupa o
     meio até 520px e encolhe quando a marca ou o login pedem lugar. */
  position:relative;flex:0 1 520px;min-width:0;
}
.topbar__search svg{width:14px;height:14px;flex-shrink:0;}
.topbar__search:focus-within{border-color:var(--secondary);background:var(--cream-0);}

.kz-search__input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  font-family:var(--f-body);font-size:13px;color:var(--ink);
}
.kz-search__input::placeholder{color:var(--text-faint-2);}
/* o "x" nativo do type=search vem com o tema do navegador, não com o do site */
.kz-search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}

.kz-search__panel{
  display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
  background:var(--cream-0);border:1px solid var(--hairline-2);border-radius:var(--r-md);
  box-shadow:var(--shadow-hover);max-height:min(70vh,520px);overflow-y:auto;padding:4px;
}
.kz-search__panel.is-open{display:block;}

.kz-search__grouphead{
  padding:8px 10px 4px;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-faint-2);
}
.kz-search__group + .kz-search__group{border-top:1px solid var(--hairline);margin-top:4px;}

.kz-search__item{
  display:flex;align-items:center;gap:10px;padding:7px 10px;
  border-radius:var(--r-sm);text-decoration:none;color:var(--ink);
}
.kz-search__item:hover,.kz-search__item.is-cursor{background:var(--amber-soft);}
.kz-search__art{
  width:30px;height:30px;border-radius:var(--r-xs);object-fit:cover;flex-shrink:0;
  background:var(--cream-2);
}
.kz-search__art--ph{
  display:grid;place-items:center;font-family:var(--f-display);font-weight:800;
  font-size:13px;color:var(--text-faint-2);
}
.kz-search__text{min-width:0;display:flex;flex-direction:column;}
.kz-search__title{
  font-size:13.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kz-search__sub{
  font-size:11.5px;color:var(--text-faint-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kz-search__empty{padding:14px 10px;font-size:13px;color:var(--text-faint-2);text-align:center;}
.kz-search__all{
  display:block;margin-top:4px;padding:9px 10px;border-top:1px solid var(--hairline);
  font-size:12.5px;font-weight:700;color:var(--text-soft);text-align:center;text-decoration:none;
}
.kz-search__all:hover,.kz-search__all.is-cursor{background:var(--amber-soft);color:var(--ink);}
.topbar__icon-btn{
  width:36px;height:36px;border-radius:var(--r-full);background:var(--cream-2);
  display:grid;place-items:center;color:var(--text-soft);transition:background .15s,color .15s;flex-shrink:0;
}
.topbar__icon-btn:hover{background:var(--secondary);color:var(--on-secondary);}
.topbar__icon-btn svg{width:17px;height:17px;}

/* alternador de tema (sol/lua) — injetado pelo shell.js só em páginas temáveis */
/* O par sol/lua serve os DOIS botões de tema: o do topbar (desktop) e o da
   gaveta (celular). Um seletor só para não existirem duas verdades sobre qual
   ícone corresponde a qual tema. */
.topbar__theme .ic-sun,.kz-drawer__theme .ic-sun{display:none;}
.topbar__theme .ic-moon,.kz-drawer__theme .ic-moon{display:block;}
:root[data-theme="dark"] .topbar__theme .ic-sun,
:root[data-theme="dark"] .kz-drawer__theme .ic-sun{display:block;}
:root[data-theme="dark"] .topbar__theme .ic-moon,
:root[data-theme="dark"] .kz-drawer__theme .ic-moon{display:none;}
.topbar__avatar{width:36px;height:36px;border-radius:var(--r-full);overflow:hidden;border:2px solid var(--secondary);flex-shrink:0;background:var(--secondary);}
.topbar__avatar img{width:100%;height:100%;object-fit:cover;}

/* pill genérica de status no topbar (conexão / servidor / live) */
.topbar__live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);background:var(--accent-soft);padding:5px 11px;border-radius:var(--r-full);white-space:nowrap;}
.topbar__live .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite;}
.topbar__live.off{color:var(--text-faint-2);background:var(--cream-3);}
.topbar__live.off .dot{background:var(--text-faint-2);animation:none;}

/* botões mobile (hambúrguer + seções) — só aparecem em telas pequenas */
.topbar__menu,.topbar__sections{
  display:none;width:38px;height:38px;border-radius:var(--r-sm);
  place-items:center;color:var(--text-soft);flex-shrink:0;margin-left:-6px;
}
.topbar__menu:active,.topbar__sections:active{background:var(--cream-2);}
.topbar__menu svg,.topbar__sections svg{width:21px;height:21px;}

/* ---------------- RAIL ---------------- */
.rail{
  grid-area:rail;
  background:var(--cream-3);
  border-right:1px solid var(--hairline);
  display:flex;flex-direction:column;align-items:center;
  padding:var(--sp-md) 0;gap:10px;overflow-y:auto;
}
.rail__link{position:relative;display:block;}
.rail__icon{
  position:relative;
  width:48px;height:48px;border-radius:var(--r-lg);
  background:var(--cream-0);color:var(--text-soft);
  display:grid;place-items:center;
  transition:border-radius .18s cubic-bezier(.34,1.56,.64,1),background .18s,color .18s;
  overflow:hidden;box-shadow:var(--shadow-card);
}
.rail__icon svg{width:22px;height:22px;}
.rail__icon img{width:100%;height:100%;object-fit:cover;}
.rail__link:hover .rail__icon,
.rail__link.is-active .rail__icon{border-radius:var(--r-md);background:var(--secondary);color:var(--on-secondary);}
.rail__link.is-active::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:4px;height:30px;border-radius:0 4px 4px 0;background:var(--accent);}
.rail__link:hover::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:4px;height:18px;border-radius:0 4px 4px 0;background:var(--accent);opacity:.45;}
.rail__link.is-active:hover::before{opacity:1;height:30px;}
/* O botão do grupo: mesma caixa dos outros, mas é <button> — o reset do
   shell.css já tira fundo e borda de button, então só falta o alinhamento. */
.rail__group{ padding:0; display:block; }
.rail__group.is-open .rail__icon{ border-radius:var(--r-md); background:var(--secondary); color:var(--on-secondary); }

/* A listinha do grupo. Mora no <body> (o rail recorta o que sai pelos lados),
   e por isso é `position:fixed` com as coordenadas vindas do botão. */
.rail-flyout{
  position:fixed; z-index:70;
  min-width:190px;
  background:var(--cream-0);
  border:1px solid var(--hairline-2);
  border-radius:var(--r-md);
  box-shadow:0 12px 34px rgba(70,45,10,.22);
  padding:6px;
}
.rail-flyout[hidden]{ display:none; }
.rail-flyout__t{
  font-family:var(--f-display); font-weight:700; font-size:10px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint-2);
  padding:4px 8px 6px;
}
.rail-flyout__i{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:var(--r-sm);
  font-size:13px; font-weight:600; color:var(--ink);
}
.rail-flyout__i svg{ width:17px; height:17px; color:var(--text-soft); flex-shrink:0; }
.rail-flyout__i:hover{ background:var(--cream-2); }
.rail-flyout__i.is-active{ background:var(--amber-soft); color:var(--ink); }
.rail-flyout__i.is-active svg{ color:var(--secondary); }

/* Os .rail__tip dentro do rail só guardam o texto do rótulo (ficam ocultos).
   O balão visível é o .rail-tip, montado no <body> pelo shell.js — assim
   fica acima de qualquer painel vizinho e nunca é recortado pelo rail. */
.rail__link .rail__tip{ display:none; }
.rail-tip{
  position:fixed;transform:translateY(-50%) scale(.92);transform-origin:left center;
  background:var(--ink);color:var(--cream-0);font-size:12.5px;font-weight:600;
  padding:6px 10px;border-radius:var(--r-xs);white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .12s,transform .12s;z-index:1000;
}
.rail-tip.is-visible{opacity:1;transform:translateY(-50%) scale(1);}
.rail__brand .rail__icon{background:var(--secondary);color:var(--on-secondary);}
.rail__divider{width:32px;height:2px;background:var(--hairline-2);border-radius:var(--r-full);margin:2px 0;}
/* empurra o grupo da moderação (Brittico) para o rodapé do rail */
.rail__divider--push{margin-top:auto;}
/* cor própria da moderação (Brittico) — destaque em rosa/accent */
.rail__link--mod .rail__icon{background:var(--accent-soft);color:var(--accent);}
.rail__link--mod:hover .rail__icon,
.rail__link--mod.is-active .rail__icon{background:var(--accent);color:var(--on-accent);}
.rail__link--mod.is-active::before,
.rail__link--mod:hover::before{background:var(--accent);}

/* ---------------- CHLIST (painel lateral da página) ---------------- */
.chlist{
  grid-area:chlist;
  background:var(--cream-2);
  border-right:1px solid var(--hairline);
  display:flex;flex-direction:column;
  min-height:0;
}
.chlist__banner{position:relative;height:100px;flex-shrink:0;background-size:cover;background-position:center 30%;}
.chlist__banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,34,22,0) 40%,rgba(44,34,22,.65) 100%);}
.chlist__header{padding:var(--sp-md);border-bottom:1px solid var(--hairline);flex-shrink:0;display:flex;align-items:center;gap:8px;}
.chlist__title{font-family:var(--f-display);font-weight:800;font-size:18px;color:var(--ink);}
.chlist__live{
  display:inline-flex;align-items:center;gap:5px;margin-left:auto;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:var(--r-full);
}
.chlist__live .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite;}
.chlist__scroll{flex:1;overflow-y:auto;padding:var(--sp-sm) var(--sp-sm) var(--sp-md);}
.chlist__category{padding:14px 8px 6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint-2);}
.ch-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;margin:1px 0;border-radius:var(--r-xs);
  font-size:14.5px;font-weight:600;color:var(--text-soft);cursor:pointer;
  transition:background .12s,color .12s;
}
.ch-item svg{width:16px;height:16px;flex-shrink:0;color:var(--text-faint-2);}
.ch-item:hover{background:var(--amber-soft);color:var(--ink);}
.ch-item.is-active{background:var(--secondary);color:var(--on-secondary);}
.ch-item.is-active svg{color:var(--on-secondary);}
.ch-item__badge{
  margin-left:auto;background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:800;
  border-radius:var(--r-full);min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;
}
.ch-item.is-active .ch-item__badge{background:var(--ink);color:var(--cream-0);}
.ch-item.is-locked{opacity:.5;}
.chlist__userbar{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--cream-3);border-top:1px solid var(--hairline);}
.chlist__userbar-avatar{
  width:32px;height:32px;border-radius:var(--r-full);background:var(--secondary);color:var(--on-secondary);
  display:grid;place-items:center;font-size:15px;position:relative;flex-shrink:0;
}
.chlist__userbar-avatar::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid var(--cream-3);}
.chlist__userbar-avatar.off::after{background:var(--text-faint-2);}
.chlist__userbar-meta{line-height:1.25;min-width:0;}
.chlist__userbar-name{font-size:13px;font-weight:700;color:var(--ink);}
.chlist__userbar-status{font-size:11px;color:var(--text-faint-2);}
.chlist__userbar-gear{margin-left:auto;width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--text-faint-2);}
.chlist__userbar-gear:hover{background:var(--amber-soft);color:var(--ink);}
.chlist__userbar-gear svg{width:16px;height:16px;}

/* ---------------- DRAWER MOBILE (menu de navegação) ---------------- */
.kz-scrim{
  position:fixed;inset:0;background:rgba(44,34,22,.45);z-index:80;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
body.kz-drawer-open .kz-scrim,
body.kz-chlist-open .kz-scrim{opacity:1;pointer-events:auto;}
body.kz-drawer-open,body.kz-chlist-open{overflow:hidden;}

.kz-drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(290px,84vw);z-index:90;
  background:var(--cream-1);border-right:1px solid var(--hairline-2);
  transform:translateX(-105%);transition:transform .22s ease;
  display:flex;flex-direction:column;overflow-y:auto;
  padding:var(--sp-md);gap:2px;
}
body.kz-drawer-open .kz-drawer{transform:none;box-shadow:12px 0 40px rgba(70,45,10,.25);}
.kz-drawer__head{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;font-family:var(--f-display);font-weight:800;font-size:17px;color:var(--ink);border-bottom:1px solid var(--hairline);margin-bottom:8px;}
.kz-drawer__head img{width:32px;height:32px;border-radius:var(--r-sm);object-fit:cover;}
.kz-drawer__link{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:var(--r-md);
  font-size:14.5px;font-weight:600;color:var(--text-soft);
}
.kz-drawer__link svg,.kz-drawer__link img{width:22px;height:22px;flex-shrink:0;}
.kz-drawer__link img{border-radius:var(--r-xs);object-fit:cover;}
.kz-drawer__link:hover{background:var(--cream-2);color:var(--ink);}
.kz-drawer__link.is-active{background:var(--secondary);color:var(--on-secondary);}
.kz-drawer__divider{height:1px;background:var(--hairline);margin:8px 4px;}
/* item da moderação (Brittico) na gaveta mobile — cor própria */
.kz-drawer__link--mod{color:var(--accent);}
.kz-drawer__link--mod svg{color:var(--accent);}
.kz-drawer__link--mod:hover{background:var(--accent-soft);color:var(--accent);}
.kz-drawer__link--mod.is-active{background:var(--accent);color:var(--on-accent);}
.kz-drawer__link--mod.is-active svg{color:var(--on-accent);}

/* Rodapé da gaveta: o que saiu do topbar no celular. `margin-top:auto` prende
   no fim — a gaveta é uma coluna flex, então ele desce sozinho quando o menu
   é curto e acompanha quando é longo. */
.kz-drawer__foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:2px;}
.kz-drawer__act{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:10px 8px;border-radius:var(--r-sm);
  font-family:var(--f-body);font-size:14px;font-weight:600;
  color:var(--text-soft);text-align:left;
}
.kz-drawer__act svg{width:20px;height:20px;flex-shrink:0;}
.kz-drawer__act:hover{background:var(--cream-2);color:var(--ink);}
.kz-drawer__logout:hover{background:var(--accent-soft);color:var(--accent);}
.kz-drawer__logout[hidden]{display:none;}

/* ---------------- RESPONSIVO ---------------- */
@media (max-width:1180px){
  .shell--chlist.shell--members{
    grid-template-columns:var(--rail-w) var(--chlist-w) 1fr;
    grid-template-areas:"nav nav nav" "rail chlist main";
  }
  .shell--members:not(.shell--chlist){
    grid-template-columns:var(--rail-w) 1fr;
    grid-template-areas:"nav nav" "rail main";
  }
  .members{display:none;}
}
@media (max-width:900px){
  /* Encolhe, não some: a busca virou a forma principal de achar qualquer
     coisa no site, e no celular é onde ela mais serve. O painel de resultados
     descola da barra e ocupa a largura da tela, senão sobraria uma coluna de
     150px para ler nomes de perfil. */
  .topbar__search{flex:0 1 200px;padding:8px 12px;}
  .kz-search__panel{position:fixed;top:calc(var(--nav-h) + 6px);left:8px;right:8px;}
}
@media (max-width:520px){
  /* A marca é flex-shrink:0 e leva ~110px só de texto, que é o que faltava
     para a busca, o tema e o login caberem — o topbar transbordava e empurrava
     os dois últimos para fora da tela. font-size:0 apaga o texto e deixa o
     mark, que é uma <img> e não se importa. */
  .topbar__brand{font-size:0;gap:0;}
  .topbar__search{flex:1 1 auto;}
}
@media (max-width:820px){
  /* Os QUATRO arranjos de shell, não três.
     .
     `.shell--members:not(.shell--chlist)` — a home — faltava aqui, e a falta
     não aparecia como "a home ignora o breakpoint": aparecia como uma faixa
     vazia de 76px na esquerda dela em todo celular. A regra de 1180px define
     esse arranjo com `.shell--members:not(.shell--chlist)`, que tem
     especificidade 0-2-0; aqui embaixo ele só era alcançado por `.shell`, que
     tem 0-1-0. O seletor mais fraco perdia, a home ficava com
     `grid-template-columns: 76px 1fr`, e o rail — que está `display:none` —
     deixava a trilha dele para trás, vazia, empurrando o conteúdo.
     .
     Repetir o seletor inteiro é o que empata a especificidade e deixa a ordem
     decidir, que é o que se quer de um breakpoint mais estreito. */
  .shell,.shell--chlist,.shell--chlist.shell--members,
  .shell--members:not(.shell--chlist){
    grid-template-columns:1fr;
    grid-template-areas:"nav" "main";
  }
  .rail{display:none;}
  body.shell-fixed{padding-left:0;}
  body.shell-fixed .rail{display:none;}

  /* Uma palavra sem espaço — um login, uma URL colada, um nome de campeão —
     é a largura mínima da coluna que a contém, e nenhuma grade consegue
     encolher abaixo disso. Numa tela de 360px isso é a diferença entre o
     conteúdo caber e a `.main` ganhar rolagem lateral.
     .
     `break-word` e não `anywhere`: ele só quebra a palavra quando ela sozinha
     não caberia, em vez de aproveitar qualquer letra para quebrar linha. */
  .main{overflow-wrap:break-word;}

  .topbar{gap:10px;padding:0 var(--sp-md);}
  .topbar__menu{display:grid;}
  .topbar__sections.is-avail{display:grid;}

  /* o painel lateral vira gaveta acionada pelo botão de seções */
  .chlist{
    position:fixed;top:var(--nav-h);left:0;bottom:0;width:min(320px,86vw);z-index:85;
    transform:translateX(-105%);transition:transform .22s ease;
    border-right:1px solid var(--hairline-2);
  }
  body.kz-chlist-open .chlist{transform:none;box-shadow:12px 0 40px rgba(70,45,10,.25);}
}
@media (max-width:600px){
  /* A BARRA DE CELULAR: hambúrguer, busca, foto. Mais nada.
     .
     Cada coisa que sai daqui tem para onde ir. A marca e o breadcrumb estão no
     cabeçalho da gaveta, que abre no botão ao lado. O botão de tema e o sair
     foram para o rodapé da gaveta, com o nome escrito por extenso — mais claro
     do que os dois eram como ícone de 28px espremido numa fileira.
     .
     O que sobra é o que só existe aqui: procurar e chegar no próprio perfil. */
  .topbar__brand{display:none;}
  .topbar__crumb{display:none;}
  .topbar__icon-btn.topbar__theme{display:none;}
  /* Sem os espaçadores a busca ocupa o vão inteiro entre o menu e a foto. */
  .topbar__spacer{display:none;}
  .topbar__search{flex:1 1 auto;}

  /* A pílula do usuário vira só a foto: sem fundo, sem borda, sem o botão de
     sair (que está na gaveta) e sem a etiqueta de MOD, que num telefone era
     mais largura do que informação. O <a> continua sendo o link do perfil. */
  .kz-user{background:none;border:none;padding:0;gap:0;}
  .kz-user__badge{display:none;}
  .kz-user__logout{display:none;}
  .kz-user__avatar{width:32px;height:32px;min-width:32px;min-height:32px;}
}
@media (max-width:480px){
  .topbar{gap:8px;padding:0 10px;}
  /* O tema NÃO volta a aparecer aqui. Ele mora no rodapé da gaveta desde os
     600px, e reexibi-lo era o que enchia a barra de novo justamente na tela
     mais estreita. */
  .topbar__icon-btn{display:none;}
  /* pills longas ("DESCONECTADO") encolhem com reticências */
  .topbar__live{min-width:0;overflow:hidden;font-size:10px;padding:4px 8px;}
  .topbar__live > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}

/* ============================================================
   ESQUELETO — os retângulos que ficam no lugar do que ainda não chegou.

   Aqui e não em cada folha porque a home, a loja, a /stats/, a /vods/ e o
   Diskenzy usam os mesmos: uma peça em esqueleto é a marcação de verdade da
   página com `kz-bone` no lugar do texto e das imagens, então quem varia é a
   marcação e não o retângulo. (A /musica/ e o hub de LoL têm os seus, com o
   nome da página, de antes desta regra existir — `mus-bone` e `lol-skeleton`.
   Eles fazem a mesma coisa; unificá-los seria mexer em três páginas para
   trocar um prefixo.)

   A onda é `--cream-1` e o osso é `--cream-2`: no tema claro o `--cream-1` é
   mais claro que o osso, no escuro é mais escuro, e nos dois casos alguma
   coisa se move. Com a mesma cor dos dois lados não haveria onda nenhuma.
   ============================================================ */
.kz-bone{
  position:relative; overflow:hidden;
  background:var(--cream-2);
  border-radius:var(--r-sm);
  /* Um osso não tem texto dentro; sem isto os de uma linha nasceriam com zero
     de altura. */
  min-height:10px;
}
.kz-bone::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, var(--cream-1), transparent);
  animation:kz-shimmer 1.3s infinite;
}
@keyframes kz-shimmer{ 100%{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){ .kz-bone::after{ animation:none; } }

.kz-bone--circle{ border-radius:50%; }
/* Um bloco ignora o `text-align:center` do card que o contém. */
.kz-bone--mid{ margin-left:auto; margin-right:auto; }
/* Proporções: a miniatura de vídeo e a foto quadrada de produto. Vêm com
   `height:auto` no style inline, e é a proporção que dá a altura. */
.kz-bone--169{ aspect-ratio:16/9; }
.kz-bone--square{ aspect-ratio:1; }
/* Uma miniatura genérica dentro de um card de grade. */
.kz-bone--thumb{ aspect-ratio:16/9; }
/* O osso que ocupa o que sobrar da linha — o nome no meio de um ranking, com
   a posição à esquerda e o valor à direita. */
.kz-bone--flex{ flex:1; min-width:0; }

/* Um item em esqueleto não tem o que dizer a um leitor de tela, e é `<a>` ou
   `<div>` com a classe da peça de verdade — inclusive as que têm :hover. */
[data-skel]{ pointer-events:none; }
