/* Painel do dono · Jogadores (24/10/2026). So tokens aqui em cima; o site e escuro. */
:root{color-scheme:dark;
  --fundo:#0f0a17;--painel:#18111f;--painel2:#20172b;--linha:#3a2b4b;--linha2:#4d3a63;
  --texto:#f1eaf8;--suave:#bcaecc;--fraco:#8c7da0;--ouro:#f2cd73;--roxo:#b98cff;--roxo2:#7a4bc0;
  --fase:#5fd0a0;--praca:#7fb2f0;--lobby:#a99bbd;--pvp:#f58f8f;--alerta:#ffb36b;--ruim:#ff8f8f;
  --raio:8px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--fundo);color:var(--texto);font:14px/1.45 "Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--ouro)}
button,input,select{font:inherit;color:inherit;background:var(--painel2);border:1px solid var(--linha2);border-radius:6px;padding:7px 11px}
button{cursor:pointer}
button:hover{border-color:var(--roxo)}
input[type=search]{min-width:0}
.pilula{display:inline-block;min-width:20px;padding:0 6px;border-radius:99px;background:var(--roxo2);color:#fff;font-style:normal;font-size:12px;text-align:center}
.pilula.aviso{background:#a2531c}
.vazio{color:var(--fraco);padding:18px 4px}
.nota{color:var(--fraco);font-size:12px}

/* topo */
.topo{position:sticky;top:0;z-index:5;display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:10px 16px;background:#140d1d;border-bottom:1px solid var(--linha)}
.marca{display:flex;flex-direction:column;text-decoration:none;color:var(--ouro);line-height:1.1;margin-right:6px}
.marca b{letter-spacing:.12em;font-size:16px}.marca small{color:var(--suave);font-size:11px}
.abas{display:flex;gap:6px;flex-wrap:wrap}
.abas button{background:transparent;border-color:transparent;padding:8px 12px}
.abas button[aria-selected=true]{background:var(--painel2);border-color:var(--roxo);color:#fff}
.topo-dir{margin-left:auto;display:flex;gap:14px;align-items:center}
.alerta-link,.voltar{text-decoration:none;font-size:13px}
.aviso-geral{margin:12px 16px 0;padding:10px 14px;border:1px solid #8a4a2a;background:#2a1712;border-radius:var(--raio);color:#ffd2b8}
main{padding:14px 16px 40px;max-width:1700px;margin:0 auto}
.manut{margin:0 0 12px;padding:10px 14px;border:1px solid #c98a2a;background:#2b1d0c;border-radius:var(--raio);color:#ffd99a;font-weight:600}
.parada{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;padding:5px 0;border-bottom:1px solid #2a1f37;cursor:pointer}
.parada:hover{color:#fff}

/* faixa de regioes */
.faixa{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}
.regioes{display:flex;gap:10px;flex-wrap:wrap}
.regiao{background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);padding:9px 13px;min-width:150px}
.regiao b{font-size:20px;color:var(--ouro);margin-right:6px}
.regiao small{display:block;color:var(--suave)}
.estado{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--fraco);font-size:12px}
.chk{display:flex;gap:5px;align-items:center;cursor:pointer}
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filtros #fTexto{flex:1 1 260px}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chips button{padding:6px 10px;font-size:13px}
.chips button[aria-pressed=true]{background:var(--roxo2);border-color:var(--roxo);color:#fff}

/* lista online */
.tab-online{width:100%;border-collapse:collapse}
.tab-online th{position:sticky;top:57px;background:#140d1d;color:var(--suave);font-weight:600;font-size:12px;text-align:left;padding:8px;border-bottom:1px solid var(--linha);z-index:1}
.tab-online td{padding:8px;border-bottom:1px solid #2a1f37;vertical-align:top}
.tab-online tbody tr{cursor:pointer}
.tab-online tbody tr:hover{background:#1f1629}
.conta{font-weight:600}
.sub{display:block;color:var(--fraco);font-size:12px}
.face{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;color:#160f1f;font-weight:700;font-size:12px;margin-right:7px;vertical-align:middle;flex:none}
.pers{display:flex;align-items:center}
.tipo{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:4px;margin-right:6px;color:#0f0a17}
.tipo.fase,.tipo.entrando{background:var(--fase)}.tipo.praca{background:var(--praca)}.tipo.lobby,.tipo.escolhendo{background:var(--lobby)}.tipo.pvp{background:var(--pvp)}
.reg{display:inline-block;font-size:11px;padding:1px 6px;border:1px solid var(--linha2);border-radius:4px;color:var(--suave);margin-right:6px}
.onde b{font-weight:600}
.cadeado{color:var(--alerta);font-size:12px;margin-left:4px}
.com{display:flex;gap:4px;flex-wrap:wrap}
.comp{display:inline-flex;align-items:center;gap:4px;font-size:12px;background:#241a31;border:1px solid var(--linha2);border-radius:99px;padding:1px 8px 1px 2px;cursor:pointer}
.comp .face{width:18px;height:18px;font-size:10px;margin:0}
.comp.off{opacity:.55}
.al{color:var(--alerta);font-weight:700;margin-left:6px}
.velho{color:var(--fraco);font-size:11px;font-style:italic}

/* por sala */
.salas{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.cartao{background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);padding:12px}
.cartao h4{margin:0 0 4px;font-size:15px}
.cartao .membros{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.membro{display:flex;align-items:center;gap:6px;cursor:pointer;padding:3px;border-radius:5px}
.membro:hover{background:#241a31}
.titulo-grupo{margin:18px 0 8px;font-size:13px;color:var(--suave);text-transform:uppercase;letter-spacing:.08em}

.servidores{margin-top:22px;color:var(--suave)}
.servidores summary{cursor:pointer;color:var(--roxo)}
.serv{display:inline-block;margin:6px 8px 0 0;padding:5px 9px;border:1px solid var(--linha);border-radius:6px;font-size:12px}

/* busca e ficha */
.busca{display:flex;gap:8px;margin-bottom:10px}
.busca input{flex:1}
.resultados{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-bottom:12px}
.res{background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);padding:8px 10px;cursor:pointer;display:flex;align-items:center;gap:8px}
.res:hover{border-color:var(--roxo)}
.res .sub{font-size:11px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#5b4d6b;flex:none}
.dot.on{background:var(--fase);box-shadow:0 0 6px var(--fase)}
.ficha-topo{background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);padding:14px;margin-bottom:12px}
.ficha-topo h2{margin:0 0 4px;font-size:20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.numeros{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:10px}
.num{background:var(--painel2);border:1px solid var(--linha);border-radius:6px;padding:7px 9px}
.num b{display:block;font-size:16px;color:var(--ouro)}
.num span{font-size:11px;color:var(--suave)}
.agora{margin-top:8px;padding:8px 10px;border-left:3px solid var(--fase);background:#132019;border-radius:4px}
.agora.off{border-left-color:var(--lobby);background:#1a1522}
.personagens{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px}
.pcard{flex:0 0 auto;min-width:170px;background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);padding:9px 11px;cursor:pointer}
.pcard:hover{border-color:var(--roxo)}
.pcard[aria-current=true]{border-color:var(--ouro);box-shadow:0 0 0 1px var(--ouro) inset}
.pcard b{display:flex;align-items:center}
.tag{display:inline-block;font-size:10px;font-weight:700;padding:1px 5px;border-radius:3px;background:#2e2140;color:var(--suave);margin-left:4px;vertical-align:middle}
.tag.jogando{background:var(--fase);color:#0f0a17}
.tag.cash{background:#5a3b12;color:#ffd99a}
.tag.lig{background:#2b3550;color:#bcd2ff}
.tag.exp{background:#4a1f1f;color:#ffc2c2}

.inv-topo{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 10px}
.inv-topo h3{margin:0;font-size:17px}
.inv-topo input{flex:1 1 240px}
.nav-sec{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.nav-sec a{font-size:12px;text-decoration:none;color:var(--suave);background:var(--painel2);border:1px solid var(--linha);border-radius:99px;padding:3px 10px}
.nav-sec a:hover{color:#fff;border-color:var(--roxo)}
.sec{margin-bottom:16px}
.sec h4{margin:0 0 6px;font-size:14px;color:var(--ouro);display:flex;gap:8px;align-items:baseline}
.sec h4 small{color:var(--fraco);font-weight:400}
.sec h5{margin:8px 0 4px;font-size:12px;color:var(--suave);font-weight:600}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.it{position:relative;display:flex;gap:8px;align-items:center;background:var(--painel);border:1px solid var(--linha);border-radius:6px;padding:5px 7px;cursor:pointer;min-width:0}
.it:hover{border-color:var(--roxo)}
.it img{width:40px;height:40px;object-fit:contain;flex:none;background:#120c19;border-radius:4px}
.it .nm{min-width:0;flex:1}
.it .nm b{display:block;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.it .nm em{display:block;font-style:normal;font-size:11px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it .qtd{position:absolute;left:5px;bottom:3px;font-size:11px;font-weight:700;color:#fff;text-shadow:0 0 3px #000,0 0 2px #000}
.it .cs{color:var(--ouro);font-weight:700}
.carta{background:var(--painel);border:1px solid var(--linha);border-radius:6px;padding:7px 9px;margin-bottom:6px}
.carta .grade{margin-top:6px}
.pet{background:var(--painel);border:1px solid var(--linha);border-radius:6px;padding:7px 9px;margin-bottom:6px}
.alertas-lista{display:flex;flex-direction:column;gap:4px}
.alertas-lista div{font-size:12px;background:#2a1d14;border:1px solid #5a3a22;border-radius:5px;padding:5px 8px}

dialog{background:var(--painel);color:var(--texto);border:1px solid var(--roxo);border-radius:10px;max-width:560px;width:calc(100% - 32px);padding:16px}
dialog::backdrop{background:rgba(5,2,10,.7)}
dialog h3{margin:0 0 6px}
dialog .linhas{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:13px;margin:8px 0}
dialog .linhas span:nth-child(odd){color:var(--suave)}
dialog form{text-align:right;margin-top:10px}

@media (max-width:900px){
  .tab-online thead{display:none}
  .tab-online,.tab-online tbody,.tab-online tr,.tab-online td{display:block;width:100%}
  .tab-online tr{border:1px solid var(--linha);border-radius:var(--raio);margin-bottom:8px;background:var(--painel)}
  .tab-online td{border:0;padding:4px 10px}
  .tab-online td[data-r]:before{content:attr(data-r) " ";color:var(--fraco);font-size:11px}
  .topo{position:static;gap:6px 12px}
  .abas button{padding:6px 8px}
  .topo-dir{margin-left:0}
  .grade{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}