/* Tibianos de 94 - folha unica, sem framework.
   Dois nucleos dividindo CPU com o servidor de jogo nao pedem build de CSS. */

/* Fonte dos titulos: Cinzel, sob a SIL Open Font License 1.1 (o texto vai junto,
   em fontes/OFL-cinzel.txt). So o subconjunto latin, que cobre o portugues.
   Servida daqui e nao do Google: a CSP do site (default-src 'self') nao deixa
   buscar fonte de fora, e assim nenhum terceiro fica sabendo de cada visita.
   Origem: fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt79mT7.woff2, sha256
   09941fb1c169c38fd414536b37690057fc01b3117a5c63dd6571186540c8f370. */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fontes/cinzel-latin.woff2") format("woff2");
}

:root {
  --fundo: #15130f;
  --fundo-alto: #1e1b16;
  --borda: #35302a;
  --texto: #e8e2d6;
  --texto-fraco: #a9a093;
  --dourado: #c8a24a;
  --erro: #7a2d2d;
  --ok: #2d5a35;
  /* Painel da equipe: superficies e as tres cores de estado. Cada estado tem
     o tom do texto e o fundo escuro que o acompanha, para o contraste do
     texto sobre o fundo ficar legivel nos dois. */
  --cartao: #1b1914;
  --cartao-borda: #2e2922;
  --texto-medio: #cfc7b9;
  --verde: #6fcf87;
  --verde-fundo: #1c3324;
  --amarelo: #e3b450;
  --amarelo-fundo: #36301c;
  --vermelho: #ef8a8a;
  --vermelho-fundo: #3a1e1e;
  --azul: #8cbcec;
  --azul-fundo: #1b2a39;
  --raio: 10px;
  /* Paginas publicas. O ouro e um gradiente, e nao uma cor: e o que da o
     relevo dos titulos e do brasao sem imagem nenhuma. */
  --dourado-claro: #f0cf7e;
  --ouro: linear-gradient(180deg, #fbe6a6 0%, #e2b452 45%, #a8761f 100%);
  --linha-ouro: rgba(212, 169, 71, .28);
  --superficie: linear-gradient(180deg, #1c1813, #14110d);
  --sombra: 0 12px 32px rgba(0, 0, 0, .45);
  --fonte-titulo: "Cinzel", "Trajan Pro", Georgia, serif;
  --fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --largura: 1200px;
  --respiro: clamp(16px, 4vw, 32px);
  --altura-topo: 64px;
}

* { box-sizing: border-box; }

/* Classe que poe display (flex, inline-block) ganharia do atributo hidden,
   e o script do mapa esconde e mostra pecas por ele. */
[hidden] { display: none !important; }

/* Icones SVG inline (app/icones.py), pintados com a cor do texto. */
.icone {
  width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.17em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icone .cheio { fill: currentColor; stroke: none; }

html { scroll-padding-top: calc(var(--altura-topo) + 16px); }
body {
  margin: 0; min-height: 100vh;
  display: flex; flex-direction: column;
  background: radial-gradient(1400px 700px at 50% -300px, #241c13, transparent) var(--fundo) no-repeat;
  color: var(--texto);
  font: 16px/1.6 var(--fonte-texto);
}

a { color: var(--dourado); text-decoration: none; }
a:hover { text-decoration: underline; }

.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- topo ----------------------------------------------------------------- */

.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(16, 13, 9, .94);
  border-bottom: 1px solid var(--linha-ouro);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.topo-dentro {
  max-width: var(--largura); margin: 0 auto; min-height: var(--altura-topo);
  padding: 8px var(--respiro);
  display: flex; align-items: center; gap: 24px;
}
.marca {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  font: 700 1.3rem/1 var(--fonte-titulo); letter-spacing: .02em;
  background: var(--ouro); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.marca img { display: block; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7)); }
.marca:hover { text-decoration: none; }

.menu { display: flex; align-items: center; gap: 24px; flex: 1; min-width: 0; }
.menu-paginas { display: flex; gap: 2px; margin: 0 auto; }
.menu-paginas a {
  position: relative; padding: 8px 14px; border-radius: 6px;
  color: var(--texto-medio); font-weight: 500;
}
.menu-paginas a:hover { color: var(--dourado-claro); background: rgba(212, 169, 71, .07); text-decoration: none; }
.menu-paginas a[aria-current="page"] { color: var(--dourado-claro); }
.menu-paginas a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 1px;
  height: 2px; border-radius: 2px; background: var(--ouro);
}
.menu-conta { display: flex; align-items: center; gap: 18px; flex: none; }
.menu-conta > a:not(.botao), .menu-conta button.link { color: var(--texto-medio); }
.menu-conta > a:not(.botao):hover, .menu-conta button.link:hover { color: var(--dourado-claro); }
.menu-conta > a[aria-current="page"]:not(.botao) { color: var(--dourado-claro); }
.menu-chave, .menu-botao { display: none; }
.em-linha { display: inline; margin: 0; }

/* --- estrutura ------------------------------------------------------------ */

main { flex: 1 0 auto; width: 100%; max-width: var(--largura); margin: 0 auto; padding: 40px var(--respiro) 72px; }
main.pagina { max-width: 1000px; }

h1 { font-size: 1.8rem; margin: 0 0 12px; }
h2 { font-size: 1.15rem; margin: 28px 0 10px; }

/* Titulos das paginas publicas na fonte do brasao. O painel da equipe fica na
   fonte do texto: e uma ferramenta, e la o que importa e ler rapido. */
.cabecalho-publico h1, .estreita h1, .painel-jogador h1, .cabecalho-secao h1 {
  font: 700 clamp(1.7rem, 4vw, 2.5rem)/1.15 var(--fonte-titulo);
  color: var(--dourado-claro); letter-spacing: .01em;
}
.painel-jogador h2 { font: 700 1.2rem/1.3 var(--fonte-titulo); color: var(--dourado-claro); }

/* --- pagina inicial ------------------------------------------------------- */

main.inicio { max-width: none; padding: 0 0 80px; }

/* O topo ilustrado e so CSS e SVG: ceu em gradiente, o brilho do por do sol e
   o horizonte com o castelo (horizonte.svg), que o rodape do proprio heroi
   funde no fundo da pagina. */
.heroi {
  position: relative; overflow: hidden;
  min-height: clamp(480px, 74vh, 760px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(48px, 8vh, 110px) var(--respiro) clamp(170px, 19vw, 280px);
  text-align: center;
  background:
    url("horizonte.svg") 70% 100% / max(100%, 1150px) auto no-repeat,
    radial-gradient(38% 34% at 76% 88%, rgba(255, 196, 92, .45), transparent 70%),
    radial-gradient(70% 60% at 74% 92%, rgba(222, 118, 40, .38), transparent 72%),
    radial-gradient(1px 1px at 12% 18%, rgba(255, 240, 210, .7), transparent),
    radial-gradient(1px 1px at 28% 9%, rgba(255, 240, 210, .5), transparent),
    radial-gradient(1.5px 1.5px at 41% 22%, rgba(255, 240, 210, .6), transparent),
    radial-gradient(1px 1px at 63% 12%, rgba(255, 240, 210, .5), transparent),
    radial-gradient(1px 1px at 86% 20%, rgba(255, 240, 210, .6), transparent),
    radial-gradient(1.5px 1.5px at 93% 7%, rgba(255, 240, 210, .45), transparent),
    linear-gradient(180deg, #0b0907 0%, #19120c 38%, #3a2213 74%, #55301a 100%);
}
.heroi::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(rgba(21, 19, 15, 0), var(--fundo));
  pointer-events: none;
}
/* Largo o bastante para o titulo caber numa linha ate a letra maior das telas
   grandes (6.4rem de 17px): com 860 px o nome antigo, "Tibianos de 94",
   quebrava em duas. "EldrinOT" cabe folgado; a largura ficou para nome longo. */
.heroi-dentro { position: relative; z-index: 1; max-width: 1060px; }
.heroi-selo {
  display: inline-block; margin: 0 0 18px; padding: 6px 16px;
  border: 1px solid rgba(240, 207, 126, .4); border-radius: 999px;
  background: rgba(10, 8, 6, .55); color: var(--dourado-claro);
  font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.heroi h1 {
  margin: 0 0 18px;
  font: 800 clamp(2.7rem, 8.4vw, 6.4rem)/1.02 var(--fonte-titulo); letter-spacing: .015em;
  background: linear-gradient(180deg, #fff4cf 0%, #f2cd6c 36%, #c88f2e 68%, #8c5a17 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 28px rgba(240, 170, 70, .25));
}
.chamada { color: var(--texto-fraco); max-width: 640px; margin: 0 auto 24px; }
.heroi .chamada {
  color: #e6dac4; font-size: clamp(1.02rem, 1.5vw, 1.2rem); max-width: 720px; margin-bottom: 32px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}
/* Linhas do mesmo tamanho, sem palavra sozinha no fim ("... a / venda."). */
.heroi h1, .chamada, .cabecalho-publico h1, .titulo-secao { text-wrap: balance; }
.heroi-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* Faixa de status, por cima do pe do heroi. */
.faixa {
  position: relative; z-index: 2;
  width: min(var(--largura) - 2 * 32px, 100% - 2 * var(--respiro));
  /* Encosta no pe do horizonte sem cobri-lo: com mais sobreposicao, a vila da
     esquerda sumia atras da faixa em 1366 px. */
  margin: calc(-1 * clamp(44px, 4.5vw, 72px)) auto 0;
  /* A primeira coluna e um pouco mais larga: "Servidor online" na Cinzel
     encostava na divisoria em 1366 px. */
  display: grid; grid-template-columns: 1.2fr .95fr 1.35fr 1.05fr 1.4fr;
  background: linear-gradient(180deg, rgba(31, 25, 18, .97), rgba(17, 14, 10, .98));
  border: 1px solid rgba(212, 169, 71, .5); border-radius: 14px;
  box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 228, 165, .08);
}
.faixa-celula { min-width: 0; padding: 20px 22px; border-left: 1px solid rgba(212, 169, 71, .16); }
.faixa-celula:first-child { border-left: 0; }
.faixa-titulo {
  display: flex; align-items: center; gap: 9px; margin: 0 0 10px;
  font: 700 .98rem/1.3 var(--fonte-titulo); color: var(--texto);
}
.faixa-titulo .icone { width: 1.3em; height: 1.3em; color: var(--dourado); }
.faixa-sub { margin: 0; color: var(--texto-fraco); font-size: .86rem; }
/* Numero na fonte do texto, nunca na Cinzel: os algarismos dela parecem
   letras ("1x" le "Ix", "10" le "IO"). */
.faixa-numero { margin: 0; font: 800 2.3rem/1 var(--fonte-texto); color: var(--dourado-claro); font-variant-numeric: tabular-nums; }
.ponto { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.ponto.ligado { background: #4fdc6c; box-shadow: 0 0 0 4px rgba(79, 220, 108, .16), 0 0 14px #4fdc6c; }
.ponto.desligado { background: #e35d5d; box-shadow: 0 0 0 4px rgba(227, 93, 93, .16); }
.texto-verde { color: #73e28d; }
.texto-vermelho { color: var(--vermelho); }
.top5 { list-style: none; counter-reset: top; margin: 0 0 8px; padding: 0; font-size: .86rem; }
.top5 li { counter-increment: top; display: flex; gap: 8px; padding: 1px 0; }
.top5 li::before { content: counter(top) "."; flex: none; width: 1.3em; color: var(--dourado); }
.top5-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-medio); }
.top5-nivel { font-weight: 700; font-variant-numeric: tabular-nums; }
.faixa-link { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 600; }
.cidades { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--texto-medio); font-size: .9rem; }
.checklist { list-style: none; margin: 0; padding: 0; color: var(--texto-medio); font-size: .86rem; }
.checklist li { display: flex; align-items: baseline; gap: 8px; padding: 1px 0; }
.checklist .icone { position: relative; top: 2px; color: var(--dourado); }

.destaques {
  width: min(var(--largura) - 2 * 32px, 100% - 2 * var(--respiro)); margin: 52px auto 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
}
.destaque {
  padding: 28px 26px 24px; border-radius: 14px; border: 1px solid var(--linha-ouro);
  background: radial-gradient(120% 80% at 0% 0%, rgba(212, 169, 71, .11), transparent 60%), var(--superficie);
  box-shadow: var(--sombra);
  transition: transform .2s ease, border-color .2s ease;
}
.destaque:hover { transform: translateY(-3px); border-color: rgba(230, 185, 90, .6); }
.destaque-emblema {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px;
  border-radius: 50%; border: 1px solid rgba(230, 185, 90, .6);
  background: radial-gradient(circle at 35% 30%, #3d2e19, #160f0a);
  box-shadow: 0 0 0 5px rgba(212, 169, 71, .07), 0 8px 18px rgba(0, 0, 0, .5);
  color: var(--dourado-claro);
}
.destaque-emblema .icone { width: 30px; height: 30px; stroke-width: 1.6; }
.destaque h2 { margin: 0 0 10px; font: 700 1.3rem/1.25 var(--fonte-titulo); color: var(--dourado-claro); }
.destaque p { margin: 0 0 16px; color: var(--texto-fraco); font-size: .96rem; }
.destaque a, .trilha a { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 600; }

.comecar { width: min(var(--largura) - 2 * 32px, 100% - 2 * var(--respiro)); margin: 72px auto 0; }
.titulo-secao {
  margin: 0 0 40px; text-align: center;
  font: 700 clamp(1.45rem, 3vw, 2.1rem)/1.2 var(--fonte-titulo); color: var(--dourado-claro);
}
.titulo-secao::after {
  content: ""; display: block; width: 140px; height: 2px; margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, var(--dourado), transparent);
}
.trilha { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.trilha li { position: relative; padding: 30px 24px 22px; border: 1px solid var(--borda); border-radius: 14px; background: var(--fundo-alto); }
.trilha-numero {
  position: absolute; top: -18px; left: 24px;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ouro); color: #1a1208; font: 800 1.05rem/1 var(--fonte-texto);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.trilha h3 { margin: 4px 0 8px; font: 700 1.12rem/1.3 var(--fonte-titulo); color: var(--texto); }
.trilha p { margin: 0 0 12px; color: var(--texto-fraco); font-size: .94rem; }

/* --- paginas de conteudo (informacoes, ranking, regras) ------------------- */

.cabecalho-publico { margin: 8px 0 36px; text-align: center; }
.sobretitulo {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;
  color: var(--dourado); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.cabecalho-publico .chamada { margin-bottom: 0; }
.sumario { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.sumario a {
  padding: 6px 14px; border: 1px solid var(--borda); border-radius: 999px;
  background: var(--fundo-alto); color: var(--texto-medio); font-size: .88rem;
}
.sumario a:hover { border-color: var(--dourado); color: var(--dourado-claro); text-decoration: none; }

.bloco {
  margin: 0 0 20px; padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie);
}
.bloco h2 {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font: 700 1.35rem/1.25 var(--fonte-titulo); color: var(--dourado-claro);
}
.bloco h2 .icone { width: 1.05em; height: 1.05em; color: var(--dourado); }
.bloco h3 { margin: 0 0 10px; font-size: .95rem; color: var(--texto); }
.grade-info { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; }
.itens-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.itens-info li { position: relative; padding-left: 22px; color: var(--texto-fraco); }
.itens-info li::before {
  content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px;
  background: var(--dourado); transform: rotate(45deg);
}
.itens-info strong { color: var(--texto); }
.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.numeros div { padding: 14px 16px; border: 1px solid var(--borda); border-radius: 10px; background: #100d0a; }
.numeros dt { color: var(--texto-fraco); font-size: .82rem; }
.numeros dd { margin: 2px 0 0; font: 800 1.75rem/1.1 var(--fonte-texto); color: var(--dourado-claro); }
.estagios { margin-top: 0; }
kbd {
  padding: 2px 6px; border: 1px solid var(--borda); border-bottom-width: 2px; border-radius: 4px;
  background: #100e0b; font: 600 .82em/1 var(--fonte-texto);
}
.regras h2 { margin-bottom: 14px; }
.regra-numero {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ouro); color: #1a1208; font: 800 .95rem/1 var(--fonte-texto);
}

/* Ranking. Categoria e vocacao sao links, sem script. */
.abas { display: flex; gap: 6px; margin-bottom: 12px; padding-bottom: 4px; overflow-x: auto; }
.abas a {
  flex: none; padding: 8px 16px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--fundo-alto); color: var(--texto-medio); font-size: .92rem; font-weight: 600;
}
.abas a:hover { border-color: var(--dourado); text-decoration: none; }
.abas a[aria-current="page"] { border-color: transparent; background: var(--ouro); color: #1a1208; }
.filtro { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 18px; font-size: .9rem; }
.filtro a { color: var(--texto-fraco); }
.filtro a[aria-current="page"] { color: var(--dourado-claro); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.cartao-tabela { overflow: hidden; border: 1px solid var(--borda); border-radius: 14px; background: var(--fundo-alto); }
.lista.ranking { margin: 0; }
.ranking th { background: #17130f; }
.ranking tbody tr:last-child td { border-bottom: 0; }
.ranking tbody tr:hover td { background: rgba(212, 169, 71, .05); }
.ranking .pos { width: 64px; text-align: center; }
.posicao {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%;
  color: var(--texto-fraco); font-weight: 700; font-variant-numeric: tabular-nums;
}
.podio-1 .posicao { background: linear-gradient(180deg, #fbe6a6, #c8962f); color: #1a1208; }
.podio-2 .posicao { background: linear-gradient(180deg, #f1f3f5, #9aa3ad); color: #16181b; }
.podio-3 .posicao { background: linear-gradient(180deg, #f3c9a2, #a8673a); color: #1d120a; }
.ranking .nome { font-weight: 600; }
.ranking .valor { font: 800 1.05rem/1 var(--fonte-texto); color: var(--dourado-claro); }
.so-celular { display: none; }
.vazio-publico { padding: 40px 0; text-align: center; color: var(--texto-fraco); }

/* --- formularios e paginas da conta --------------------------------------- */

.estreita {
  max-width: 470px; margin: 8px auto 0; padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--borda); border-radius: 16px;
  background: var(--superficie); box-shadow: var(--sombra);
}
.estreita.larga { max-width: 760px; }
.estreita > h1 { text-align: center; }
.estreita > h1 + .nota { text-align: center; }
.painel-jogador {
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--borda); border-radius: 16px; background: var(--superficie);
}
.painel-jogador > .cabecalho-secao { margin-top: 28px; }
.painel-jogador > h1:first-child, .painel-jogador > .cabecalho-secao:first-child { margin-top: 0; }

form { display: flex; flex-direction: column; gap: 16px; margin: 20px 0; }
label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
input, select {
  padding: 11px 13px; font-size: 1rem;
  background: #0f0c09; color: var(--texto);
  border: 1px solid var(--borda); border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { outline: none; border-color: var(--dourado); box-shadow: 0 0 0 3px rgba(212, 169, 71, .25); }
small { color: var(--texto-fraco); font-size: .8rem; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border: 1px solid transparent; border-radius: 8px;
  background: linear-gradient(180deg, #f2cb6a, #c8932d); color: #1a1208;
  font: 700 1rem/1.3 var(--fonte-texto); text-align: center; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 16px rgba(0, 0, 0, .35);
  transition: filter .15s ease, transform .15s ease;
}
.botao:hover { filter: brightness(1.08); text-decoration: none; }
.botao:active { transform: translateY(1px); }
.botao.secundario { background: transparent; color: var(--dourado); border-color: var(--dourado); box-shadow: none; }
.botao.contorno {
  background: rgba(16, 12, 8, .6); color: var(--dourado-claro);
  border-color: rgba(230, 185, 90, .7); box-shadow: none;
}
.botao.contorno:hover { background: rgba(212, 169, 71, .14); }
.botao.contorno[aria-current="page"] { border-color: var(--dourado-claro); }
.botao.pequeno { padding: 6px 14px; font-size: .9rem; }
.botao.grande { padding: 14px 28px; font-size: 1.06rem; }
.botao .icone { width: 1.05em; height: 1.05em; }
button.link {
  background: none; border: 0; color: var(--dourado);
  font: inherit; cursor: pointer; padding: 0;
}
button.link:hover { text-decoration: underline; }

/* avisos */
.aviso { padding: 12px 16px; border-radius: 8px; margin: 0 0 20px; }
.aviso.erro { background: var(--erro); color: #ffd9d9; }
.aviso.ok { background: var(--ok); color: #d9ffe0; }
.nota { color: var(--texto-fraco); font-size: .9rem; }
.em-construcao { border-left: 3px solid var(--dourado); padding-left: 12px; }

/* campos extras */
fieldset {
  border: 1px solid var(--borda); border-radius: 8px; padding: 12px 14px; margin: 0;
}
legend { color: var(--texto-fraco); font-size: .9rem; padding: 0 6px; }
.em-linha-radio { flex-direction: row; align-items: center; gap: 8px; display: inline-flex; margin-right: 18px; }
.alerta { color: #e8a0a0; }

.cabecalho-secao {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.cabecalho-secao h1, .cabecalho-secao h2 { margin: 0; }

.botao.perigo { background: #8c3a3a; color: #ffe8e8; align-self: flex-start; box-shadow: none; }
.botao.perigo:hover { background: #a04444; }

/* Acoes da ficha. <details> em vez de abas com script: sao quatro formularios
   que o jogador usa raramente, e fechados eles nao competem com a ficha. */
.caixa {
  background: #17130f; border: 1px solid var(--borda);
  border-radius: 10px; padding: 0 16px; margin-bottom: 10px;
}
.caixa > summary {
  cursor: pointer; padding: 12px 0; font-weight: 600; list-style-position: inside;
}
.caixa > summary:hover { color: var(--dourado); }
.caixa[open] > summary { border-bottom: 1px solid var(--borda); margin-bottom: 4px; }
.caixa > :last-child { margin-bottom: 16px; }
.caixa.perigo > summary { color: #e8a0a0; }
.caixa form { max-width: 420px; }

/* pagina de download */
code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .85em; background: #100e0b; padding: 1px 5px;
  border: 1px solid var(--borda); border-radius: 4px;
}
code.hash { word-break: break-all; font-size: .75em; }
.passos { padding-left: 20px; }
.passos li { margin-bottom: 8px; }
.lista.pares th { vertical-align: top; }

/* tabela */
.lista { width: 100%; border-collapse: collapse; margin: 12px 0; }
.lista th, .lista td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borda);
}
.lista th { color: var(--texto-fraco); font-weight: 600; font-size: .82rem; text-transform: uppercase; }
.lista td.num, .lista th.num { text-align: right; font-variant-numeric: tabular-nums; }
.selo {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: .75rem; font-weight: 600;
}
.selo.online { background: var(--ok); color: #d9ffe0; }
.selo.pendente { background: #5a4a1f; color: #ffeec2; }

.lista.pares th {
  width: 170px; text-transform: none; font-size: .9rem;
  color: var(--texto-fraco); font-weight: 500;
}
.lista.pares td { color: var(--texto); }

/* --- rodape --------------------------------------------------------------- */

.rodape {
  border-top: 1px solid var(--linha-ouro);
  background: linear-gradient(180deg, #120f0b, #0b0907);
  color: var(--texto-fraco); font-size: .88rem;
}
.rodape-dentro {
  max-width: var(--largura); margin: 0 auto; padding: 30px var(--respiro);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
}
.rodape-marca { display: flex; align-items: center; gap: 12px; }
.rodape-marca strong { display: block; font: 700 1.12rem/1.2 var(--fonte-titulo); color: var(--dourado-claro); }
.rodape-marca span { font-size: .8rem; }
.rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.rodape-links a { color: var(--texto-medio); }
.rodape-info { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: .8rem; }
.rodape-aviso {
  margin: 0; padding: 12px var(--respiro) 18px; text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .04); color: #7c7264; font-size: .75rem;
}

/* --- tabelas no celular -------------------------------------------------- */
/* Tabela larga rola de lado dentro da propria caixa, em vez de empurrar a
   pagina inteira para fora da tela. `.rolavel` embrulha as do painel; a regra
   do media query cobre as das paginas do jogador sem mexer nelas. */
.rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rolavel > .lista { margin: 0; }
@media (max-width: 700px) {
  main > section > .lista:not(.pares) { display: block; overflow-x: auto; }
  /* So nas tabelas de varias colunas. As de rotulo/valor (.pares) quebram
     linha: com nowrap, o e-mail do jogador empurrava o selo para fora da tela. */
  .lista:not(.pares) th, .lista:not(.pares) td { white-space: nowrap; }
  .lista.pares td { overflow-wrap: anywhere; }
}

/* --- painel da equipe ---------------------------------------------------- */

/* Largura do painel. As paginas publicas sao texto para ler e param em
   --largura; o painel e ferramenta de tabela e usa a tela: o teto antigo de
   1320 px deixava 600 px vazios num monitor de 1920. A variavel vale para o
   body inteiro, entao topo e rodape seguem junto e a marca alinha com o menu
   lateral. O teto existe para o monitor ultrawide nao esticar uma linha de
   tabela por 3 mil pixels. */
body.painel-equipe { --largura: 2048px; }
main.admin { padding: 24px var(--respiro) 64px; }

/* Medidas comuns do painel. Cartao, tabela de borda a borda e cartao
   empilhado no celular usam as mesmas, e mudam juntas na tela estreita. */
.admin-casca {
  --cartao-px: 18px; --cartao-py: 16px; --vao: 18px;
  --cartao-alto: #16130f;   /* cabecalho de tabela, um degrau abaixo do cartao */
  --linha-hover: #221e17;   /* opaco: a primeira coluna fixa da tabela de itens
                               passa por cima das outras e nao pode ser vazada */
}

/* Casca: menu lateral fixo na rolagem e conteudo ao lado. No celular o menu
   vira uma faixa de abas que rola de lado, acima do conteudo. */
.admin-casca {
  display: grid; grid-template-columns: 224px minmax(0, 1fr);
  gap: 28px; align-items: start;
}
.admin-lateral {
  /* Abaixo do topo do site, que tambem e fixo na rolagem. */
  position: sticky; top: calc(var(--altura-topo) + 16px);
  display: flex; flex-direction: column; gap: 14px;
}
.admin-papel {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--raio);
  background: var(--cartao); border: 1px solid var(--cartao-borda);
}
.admin-papel > .icone { width: 26px; height: 26px; color: var(--dourado); stroke-width: 1.8; }
.admin-papel div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.admin-papel span { color: var(--texto-fraco); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.admin-papel strong { color: var(--dourado); font-size: .95rem; }
.admin-menu { display: flex; flex-direction: column; gap: 2px; }
.admin-menu a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px;
  color: var(--texto-medio); font-size: .95rem;
}
.admin-menu a > span { flex: 1; }
.admin-menu a .icone { width: 19px; height: 19px; color: var(--texto-fraco); stroke-width: 1.8; }
.admin-menu a .seta { width: 16px; height: 16px; color: var(--dourado); }
.admin-menu a:hover { background: var(--fundo-alto); color: var(--texto); text-decoration: none; }
.admin-menu a:hover .icone { color: var(--texto); }
.admin-menu a[aria-current="page"] {
  background: var(--amarelo-fundo); color: var(--dourado); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--dourado);
}
.admin-menu a[aria-current="page"] .icone { color: var(--dourado); }
form.admin-busca { margin: 0; gap: 0; }
.admin-busca input { width: 100%; padding: 8px 12px; font-size: .92rem; }
/* O conteudo e um container: indicadores, colunas e pares de cartoes mudam
   pela largura que SOBRA ao lado do menu, e nao pela da janela. As duas nao
   andam juntas -- em 900 px o menu lateral vira abas e o conteudo ganha
   250 px de uma vez. */
.admin-conteudo { min-width: 0; container: painel / inline-size; }

/* Campo de texto com icone dentro, a esquerda. */
.campo-com-icone { position: relative; display: block; }
.campo-com-icone > .icone {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--texto-fraco); pointer-events: none;
}
.campo-com-icone input { width: 100%; padding-left: 36px; }

/* Cabecalho de toda pagina: icone e titulo, uma linha de contexto e, a
   direita, o estado do dado ou a acao principal. Sempre no mesmo lugar. */
.cabecalho-pagina {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px 20px; margin-bottom: 22px;
}
.cabecalho-pagina h1 { margin: 0; font-size: 1.6rem; line-height: 1.25; }
.cabecalho-pagina .subtitulo { margin: 4px 0 0; color: var(--texto-fraco); font-size: .92rem; }
.cabecalho-pagina .lado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.titulo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.titulo-icone { width: 30px; height: 30px; color: var(--dourado); stroke-width: 1.7; }

/* Pilula clicavel (o menu de atualizacao) e a escura que flutua sobre o mapa. */
.pilula {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; font-size: .85rem;
  background: var(--cartao); border: 1px solid var(--cartao-borda); color: var(--texto-medio);
}
summary.pilula:hover { border-color: var(--dourado); color: var(--texto); }
.pilula.escura {
  background: rgba(16, 14, 11, .88); border-color: rgba(200, 162, 74, .5); color: var(--texto);
}
.pilula.escura .icone { color: var(--dourado); }

/* Menu que abre por <details>, sem script. */
.menu-suspenso { position: relative; }
.menu-suspenso > summary { list-style: none; cursor: pointer; user-select: none; }
.menu-suspenso > summary::-webkit-details-marker { display: none; }
.menu-suspenso .seta { width: 14px; height: 14px; color: var(--texto-fraco); transition: transform .15s; }
.menu-suspenso[open] > summary .seta { transform: rotate(180deg); }
form.menu-lista, .menu-lista {
  position: absolute; z-index: 20; top: calc(100% + 6px); right: 0;
  display: flex; flex-direction: column; gap: 0; margin: 0; padding: 6px; min-width: 170px;
  background: var(--fundo-alto); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}
.menu-lista a, .menu-lista button {
  display: block; padding: 7px 10px; border-radius: 6px; border: 0; background: none;
  color: var(--texto-medio); font: inherit; font-size: .9rem; text-align: left;
  cursor: pointer; white-space: nowrap;
}
.menu-lista a:hover, .menu-lista button:hover { background: var(--cartao); color: var(--texto); text-decoration: none; }
.menu-lista [aria-current="true"] { color: var(--dourado); font-weight: 600; }
.migalhas { font-size: .85rem; color: var(--texto-fraco); margin: 0 0 6px; }
.migalhas a { color: var(--texto-fraco); text-decoration: underline; text-underline-offset: 2px; }

/* Estado do dado: ao vivo, atrasado (ultimo save) ou parado. */
.status {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 4px 12px; border-radius: 999px; font-size: .82rem; border: 1px solid transparent;
}
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status.ao-vivo { color: var(--verde); background: var(--verde-fundo); border-color: #2d5a3a; }
.status.atrasado { color: var(--amarelo); background: var(--amarelo-fundo); border-color: #5c4c22; }
.status.parado { color: var(--vermelho); background: var(--vermelho-fundo); border-color: #6b3030; }
.status.neutro { color: var(--texto-fraco); background: var(--cartao); border-color: var(--cartao-borda); }
.status.neutro::before { display: none; }
.status b { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

/* Indicadores: rotulo e icone em cima, o numero, e uma nota que diz de onde
   ele vem. Os que levam a uma pagina sao links inteiros. */
/* Colunas fixas por largura (6, 3, 2), e nao auto-fill: com auto-fill os seis
   indicadores quebravam em 5 + 1, e o ultimo ficava sozinho numa linha. */
.kpis {
  display: grid; gap: 14px; margin-bottom: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@container painel (min-width: 560px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container painel (min-width: 980px) { .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpis-nota { margin: 0 0 var(--vao); font-size: .8rem; text-align: right; }
.kpi {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px 13px;
  background: linear-gradient(180deg, #201c16, var(--cartao) 70%);
  border: 1px solid var(--cartao-borda); border-radius: var(--raio);
  color: var(--texto); transition: border-color .15s ease, transform .15s ease;
}
a.kpi:hover { border-color: rgba(200, 162, 74, .65); text-decoration: none; transform: translateY(-1px); }
.kpi-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kpi-rotulo { color: var(--texto-medio); font-size: .86rem; font-weight: 600; line-height: 1.3; }
.kpi-icone {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px;
  background: var(--amarelo-fundo); color: var(--dourado);
}
.kpi-icone .icone { width: 17px; height: 17px; }
.kpi .valor {
  font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--dourado-claro);
  font-variant-numeric: tabular-nums;
}
.kpi .valor .fraco { font-size: 1.15rem; font-weight: 600; }
.kpi-nota { display: flex; align-items: center; gap: 4px; margin-top: auto; color: var(--texto-fraco); font-size: .8rem; }
.kpi-nota .icone { width: 14px; height: 14px; }
a.kpi .kpi-nota { color: var(--dourado); }
.kpi.atencao { border-color: #6b3030; }
.kpi.atencao .valor { color: var(--vermelho); }
.kpi.atencao .kpi-icone { background: var(--vermelho-fundo); color: var(--vermelho); }

/* Cartoes e grade de cartoes. */
.cartao {
  background: var(--cartao); border: 1px solid var(--cartao-borda); border-radius: var(--raio);
  padding: var(--cartao-py) var(--cartao-px); margin-bottom: var(--vao); min-width: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.cartao-cabecalho {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; margin-bottom: 14px;
}
.cartao-cabecalho h2 { margin: 0; font-size: 1.02rem; }
.cartao-cabecalho .contagem { color: var(--texto-fraco); font-weight: 400; }
.cartao-cabecalho-lado { color: var(--texto-fraco); font-size: .85rem; }
.cartao-cabecalho-lado strong { color: var(--texto-medio); font-weight: 600; }
.cartao > p:last-child, .cartao > .nota:last-child { margin-bottom: 0; }
.cartao.perigo { border-color: #6b3030; }
/* Dois cartoes lado a lado; um embaixo do outro quando o conteudo estreita. */
.grade-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vao); margin-bottom: var(--vao); }
@container painel (min-width: 900px) { .grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grade-2 > .cartao { margin-bottom: 0; }

/* Visao geral: coluna principal e coluna lateral, cada uma crescendo no seu
   ritmo (flex dentro de grid). Abaixo de 1000 px de conteudo, uma so. */
.painel-colunas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vao); align-items: start; }
@container painel (min-width: 1000px) {
  .painel-colunas { grid-template-columns: minmax(0, 1fr) clamp(330px, 30%, 480px); }
}
.painel-colunas > .coluna { display: flex; flex-direction: column; gap: var(--vao); min-width: 0; }
.painel-colunas .cartao { margin-bottom: 0; }

/* Lista de eventos (logins da equipe): icone, o que aconteceu, quando, e o
   detalhe com a linha inteira embaixo. */
.feed { list-style: none; margin: 0 calc(-1 * var(--cartao-px)) calc(-1 * var(--cartao-py)); padding: 0; }
.feed-item {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center;
  column-gap: 12px; row-gap: 2px; padding: 10px var(--cartao-px);
  border-top: 1px solid var(--cartao-borda);
}
.feed-icone {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  grid-row: span 2; align-self: start;
}
.feed-icone .icone { width: 15px; height: 15px; }
.feed-icone.ok { background: var(--verde-fundo); color: var(--verde); }
.feed-icone.perigo { background: var(--vermelho-fundo); color: var(--vermelho); }
.feed-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: .92rem; }
.feed-titulo strong { color: var(--texto); font-weight: 600; }
.feed-quando { color: var(--texto-fraco); font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.feed-meta { grid-column: 2 / -1; color: var(--texto-fraco); font-size: .78rem; }
/* Sem o detalhe (GM nao ve IP), o icone ocupa so a linha do titulo. */
.feed-item.sem-meta .feed-icone { grid-row: auto; align-self: center; }

/* Alerta que pede acao. Fica no topo da pagina, nao no meio do texto. */
.alerta-caixa {
  padding: 14px 16px; border-radius: var(--raio); border: 1px solid; margin-bottom: 18px;
}
.alerta-caixa strong { display: block; margin-bottom: 2px; }
.alerta-caixa p { margin: 0; font-size: .92rem; }
.alerta-caixa code { background: rgba(0, 0, 0, .25); }
.alerta-caixa.perigo { background: var(--vermelho-fundo); border-color: #6b3030; color: #f5d6d6; }
.alerta-caixa.perigo strong { color: var(--vermelho); }
.alerta-caixa.aviso { background: var(--amarelo-fundo); border-color: #5c4c22; color: #f2e4c4; }
.alerta-caixa.aviso strong { color: var(--amarelo); }
.alerta-caixa.info { background: var(--azul-fundo); border-color: #2c4560; color: #d6e6f5; }
.alerta-caixa.info strong { color: var(--azul); }
/* Dica que acompanha a pagina e nao pede acao: uma faixa baixa com icone, e
   nao uma caixa que empurra a tabela para baixo. */
.alerta-caixa.compacta { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; }
.alerta-caixa.compacta > .icone { width: 18px; height: 18px; margin-top: 2px; color: var(--azul); }
.alerta-caixa.compacta strong { display: inline; margin: 0; }

/* Lista vazia: diz que esta vazia, em vez de deixar um buraco. */
.vazio {
  margin: 0; padding: 18px; text-align: center; font-size: .92rem; color: var(--texto-fraco);
  border: 1px dashed var(--cartao-borda); border-radius: 8px;
}

/* Tabelas do painel. Celula de dado nao quebra linha: data, nome e IP ficam
   numa linha so (a data em duas linhas dobrava a altura da tabela), e a
   tabela larga demais rola de lado dentro do cartao. Coluna de texto livre
   (motivo, detalhe: .longo) quebra. As de rotulo/valor (.pares) quebram
   sempre: la o valor e texto. */
.lista.compacta th, .lista.compacta td { padding: 9px 12px; font-size: .9rem; }
.lista.compacta:not(.pares) td { white-space: nowrap; }
.lista th { white-space: nowrap; }
.lista.compacta thead th { background: var(--cartao-alto, transparent); font-size: .76rem; letter-spacing: .04em; }
.lista tbody tr:hover td { background: var(--linha-hover, rgba(200, 162, 74, .05)); }
.lista tr.apagado td { opacity: .55; }
.lista td.longo, .lista.compacta:not(.pares) td.longo { white-space: normal; min-width: 200px; }
.lista td.vazia { color: var(--texto-fraco); }

/* Tabela de borda a borda dentro do cartao: o cabecalho tingido encosta nas
   laterais e, se a tabela fecha o cartao, a ultima linha encosta no fundo. O
   recuo da primeira e da ultima coluna devolve o alinhamento com o titulo. */
.cartao > .rolavel { margin-inline: calc(-1 * var(--cartao-px)); }
.cartao > .rolavel:last-child {
  margin-bottom: calc(-1 * var(--cartao-py));
  border-bottom-left-radius: calc(var(--raio) - 1px); border-bottom-right-radius: calc(var(--raio) - 1px);
}
.cartao > .rolavel .lista thead th { border-top: 1px solid var(--cartao-borda); }
/* Cartao sem titulo (online, registro): a tabela encosta em cima tambem. */
.cartao > .rolavel:first-child {
  margin-top: calc(-1 * var(--cartao-py));
  border-top-left-radius: calc(var(--raio) - 1px); border-top-right-radius: calc(var(--raio) - 1px);
}
.cartao > .rolavel:first-child .lista thead th { border-top: 0; }
.cartao > .rolavel .lista th:first-child, .cartao > .rolavel .lista td:first-child { padding-left: var(--cartao-px); }
.cartao > .rolavel .lista th:last-child, .cartao > .rolavel .lista td:last-child { padding-right: var(--cartao-px); }
.cartao > .rolavel:last-child .lista tbody tr:last-child td { border-bottom: 0; }
/* Formulario solto no cartao nao traz a margem dos formularios da conta. */
.cartao > form { margin: 0; }
/* Ficha de rotulo/valor dentro do cartao: o rotulo alinha com o titulo. */
.cartao > .lista.pares { margin-bottom: 0; }
.cartao > .lista.pares th { padding-left: 0; }
.cartao > .lista.pares td { padding-right: 0; }

/* Cabecalho que ordena a tabela (th_ordem em _admin_macros.html). A celula
   inteira e o alvo do clique; a seta da coluna da ordem fica em dourado e a
   das outras, apagada, so diz que da para ordenar por ela. */
.lista th.ordenavel { position: relative; }
.lista th.ordenavel a { display: inline-flex; align-items: center; gap: 5px; color: inherit; }
.lista th.ordenavel a::after { content: ""; position: absolute; inset: 0; }
.lista th.ordenavel.num a { flex-direction: row-reverse; }
.lista th.ordenavel:hover { color: var(--texto); }
.lista th.ordenavel a:hover { text-decoration: none; }
.lista th.ordenavel .seta-ordem { width: 14px; height: 14px; opacity: .35; transition: opacity .15s; }
.lista th.ordenavel:hover .seta-ordem { opacity: .8; }
.lista th[aria-sort] { color: var(--dourado); }
.lista th[aria-sort] .seta-ordem { opacity: 1; }
.lista th.ordenavel a:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; border-radius: 3px; }
h1 .fraco { font-weight: 400; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85em; }
.quebra { word-break: break-all; }
.fraco { color: var(--texto-fraco); }
.selo { white-space: nowrap; }
.selo.perigo { background: var(--vermelho-fundo); color: var(--vermelho); }
.selo.neutro { background: var(--fundo-alto); color: var(--texto-medio); border: 1px solid var(--borda); }
.selo.info { background: var(--azul-fundo); color: var(--azul); }

/* Ficha: pares rotulo/valor que refluem de 4 colunas para 1. Flex e nao grid:
   com grid a ultima linha incompleta deixava um buraco da cor da borda; com
   flex os itens dela crescem e fecham a linha. */
.ficha {
  display: flex; flex-wrap: wrap;
  gap: 1px; margin: 0 0 18px; overflow: hidden;
  background: var(--cartao-borda); border: 1px solid var(--cartao-borda); border-radius: var(--raio);
}
.ficha > div { flex: 1 1 210px; background: var(--cartao); padding: 10px 14px; min-width: 0; }
.ficha dt { color: var(--texto-fraco); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.ficha dd { margin: 2px 0 0; overflow-wrap: anywhere; }

/* Botoes lado a lado, e o botao de perigo que ja existia sem alinhar sozinho. */
.botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.botoes .botao.perigo { align-self: auto; }

/* Formularios do painel. */
form.form-grade {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px; margin: 0;
}
.form-grade .inteira { grid-column: 1 / -1; }
.form-grade label { font-size: .88rem; color: var(--texto-medio); }
/* Barra de busca e filtro acima da lista (online, comandos, itens): campos e
   botao da mesma altura, a lupa dentro do campo (campo_busca). */
form.em-linha-form {
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px;
}
.em-linha-form input, .em-linha-form select { height: 38px; padding: 0 12px; font-size: .92rem; }
.em-linha-form .campo-com-icone { flex: 1 1 240px; max-width: 440px; }
.em-linha-form .campo-com-icone input { padding-left: 36px; }
.em-linha-form .botao.pequeno { height: 38px; }
.link-limpar { padding: 0 4px; font-size: .9rem; }
/* So quando a tabela vira cartoes (celular) e o cabecalho que ordena some. */
.so-empilhado { display: none; }

/* Escolha de um entre poucos, como botoes. O radio continua la (teclado e
   leitor de tela), so escondido atras do rotulo. */
.segmentado {
  display: inline-flex; flex-wrap: wrap; border: 1px solid var(--borda);
  border-radius: 8px; overflow: hidden; align-self: flex-start;
}
.segmentado label { display: block; position: relative; margin: 0; font-size: .92rem; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado span { display: block; padding: 8px 14px; cursor: pointer; color: var(--texto-medio); }
.segmentado label + label span { border-left: 1px solid var(--borda); }
.segmentado input:checked + span { background: var(--dourado); color: #1a1710; font-weight: 600; }
.segmentado input:focus-visible + span { outline: 2px solid var(--dourado); outline-offset: -2px; }
fieldset.limpo { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
fieldset.limpo legend { padding: 0; margin-bottom: 6px; font-size: .88rem; color: var(--texto-medio); }

/* Confirmacao de acao perigosa. */
.confirmacao { max-width: 680px; }
.consequencias { margin: 0 0 16px; padding-left: 20px; }
.consequencias li { margin-bottom: 4px; }

/* Copiar comando sem script: um clique seleciona o texto inteiro, e o
   Ctrl+C faz o resto. So o mapa usa script (app/static/mapa.js). */
code.copiar { user-select: all; -webkit-user-select: all; cursor: text; }

/* Central de comandos. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--vao, 18px); }
.chips a {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border-radius: 999px; font-size: .84rem; white-space: nowrap;
  border: 1px solid var(--borda); background: var(--cartao); color: var(--texto-medio);
}
.chips a:hover { border-color: var(--dourado); color: var(--texto); text-decoration: none; }
.chips a[aria-current="true"] { background: var(--dourado); border-color: var(--dourado); color: #1a1710; font-weight: 600; }
details.cmd {
  border-top: 1px solid var(--cartao-borda);
}
details.cmd:first-of-type { border-top: 0; }
details.cmd > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  padding: 10px 0; cursor: pointer; list-style: none;
}
details.cmd > summary::-webkit-details-marker { display: none; }
details.cmd > summary::before { content: "\25B8"; color: var(--texto-fraco); width: 10px; }
details.cmd[open] > summary::before { content: "\25BE"; }
details.cmd > summary code { font-size: .95rem; color: var(--dourado); }
details.cmd .cmd-desc { color: var(--texto-fraco); font-size: .9rem; flex: 1 1 260px; }
details.cmd .cmd-corpo { padding: 0 0 14px 22px; }
details.cmd .cmd-corpo .lista.pares th { width: 120px; }
.nivel { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.nivel-god { background: var(--vermelho-fundo); color: var(--vermelho); }
.nivel-grupo_conta_gm, .nivel-conta_gm { background: var(--amarelo-fundo); color: var(--amarelo); }
.nivel-grupo, .nivel-broadcast { background: var(--azul-fundo); color: var(--azul); }
.nivel-jogador { background: var(--fundo-alto); color: var(--texto-medio); }
ul.seco { margin: 0; padding-left: 18px; }

/* Itens. O desenho e pixel art do Tibia: escala sem suavizar. O de 64x64
   cabe na mesma caixa do de 32x32. */
img.desenho { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; vertical-align: middle; }
img.desenho.mini { width: 24px; height: 24px; }
img.desenho.grande { width: 96px; height: 96px; flex: none; }
span.desenho { display: inline-block; width: 32px; height: 32px; vertical-align: middle; }
.lista.itens td.com-desenho { padding-top: 4px; padding-bottom: 4px; }
.lista.itens td.com-desenho .desenho { margin-right: 10px; }
.item-titulo { flex-wrap: nowrap; }
.item-titulo .migalhas { margin-bottom: 2px; }
/* Tabela de itens: com a tabela rolando de lado, a coluna do nome fica
   parada, senao some justo o que diz de que item e a linha. */
.lista.itens th:first-child, .lista.itens td.principal {
  position: sticky; left: 0; z-index: 1; background: var(--cartao);
}
.lista.itens thead th:first-child { background: var(--cartao-alto); z-index: 2; }
.lista.itens tbody tr:hover td.principal { background: var(--linha-hover); }
/* Paginacao no rodape do cartao, de borda a borda. */
.paginas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  margin: 0 calc(-1 * var(--cartao-px)) calc(-1 * var(--cartao-py));
  padding: 12px var(--cartao-px); font-size: .88rem;
}
.paginas .grupo-botoes > a, .paginas .grupo-botoes > span { height: 34px; font-size: .88rem; }
.paginas .grupo-botoes > span {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; padding: 0 11px; color: var(--texto-fraco); opacity: .45;
}
.paginas .grupo-botoes .icone { width: 15px; height: 15px; }
.flags { display: flex; flex-wrap: wrap; gap: 4px; }
ul.irmaos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px;
}

/* Mapa. As cores ficam em classe, e nao em atributo style no SVG: a CSP
   style-src 'self' recusa atributo style. Posicao e escala de marcador e
   texto vem no atributo transform, que a CSP nao alcanca, porque dependem do
   zoom (app/mapa.py sem script, app/static/mapa.js com). */
.mapa-busca { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.mapa-busca .campo-com-icone { flex: 1 1 260px; max-width: 440px; }
.mapa-busca input { padding-top: 8px; padding-bottom: 8px; font-size: .95rem; }
.botao.com-icone, .com-icone { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.mapa-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.grupo-botoes {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao);
}
.grupo-botoes > * + * { border-left: 1px solid var(--borda); }
.grupo-botoes > a, .grupo-botoes > details > summary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; height: 36px; padding: 0 11px; color: var(--texto); font-size: .9rem; white-space: nowrap;
}
.grupo-botoes > details > summary { min-width: 64px; }
.grupo-botoes > :first-child, .grupo-botoes > :first-child > summary { border-radius: 7px 0 0 7px; }
.grupo-botoes > :last-child, .grupo-botoes > :last-child > summary { border-radius: 0 7px 7px 0; }
.grupo-botoes a:hover, .grupo-botoes summary:hover { background: var(--fundo-alto); text-decoration: none; }
.grupo-botoes .menu-lista { left: 0; right: auto; min-width: 96px; }
.botao-borda {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao);
  color: var(--texto); font-size: .9rem; white-space: nowrap;
}
.botao-borda .icone { width: 13px; height: 13px; }
.botao-borda:hover { border-color: var(--dourado); text-decoration: none; }
.link-icone { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; padding: 0 4px; }
.andares { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.andares .fraco { font-size: .85rem; margin-right: 4px; }
.andares a {
  min-width: 38px; padding: 4px 9px; text-align: center; border-radius: 7px;
  border: 1px solid var(--borda); background: var(--cartao); font-size: .85rem; color: var(--texto-medio);
}
.andares a:hover { border-color: var(--dourado); text-decoration: none; }
.andares a .n {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 8px;
  background: var(--verde-fundo); color: var(--verde); font-size: .72rem; font-weight: 700;
}
.andares a[aria-current="true"] { background: var(--dourado); border-color: var(--dourado); color: #1a1710; font-weight: 700; }
.andares a[aria-current="true"] .n { background: rgba(0, 0, 0, .25); color: #1a1710; }

/* A caixa do mapa ocupa o que sobra da altura da janela. */
.mapa-moldura { position: relative; }
.mapa-vista {
  position: relative; height: clamp(360px, calc(100vh - 290px), 980px); overflow: hidden;
  background: #000; border: 1px solid rgba(200, 162, 74, .35); border-radius: var(--raio);
}
/* `> svg`: so o mapa. Os icones das pilulas por cima dele tambem sao svg. */
.mapa-vista > svg { display: block; width: 100%; height: 100%; }
.mapa-vista > svg.interativo { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.mapa-vista > svg.arrastando { cursor: grabbing; }
.mapa-vista > svg:focus-visible { outline: 2px solid var(--dourado); outline-offset: -2px; }
.mapa-vista .pixelado { image-rendering: pixelated; image-rendering: crisp-edges; }
/* Marcador: disco escuro com anel dourado e o boneco dentro, em pixels de
   tela (o grupo vem escalado). Escuro com anel claro aparece sobre qualquer
   cor do minimapa; o localizado ganha o magenta, que o minimapa quase nao usa. */
.mapa-vista .jogador { cursor: pointer; }
.mapa-vista .jogador circle { fill: #17140f; stroke: #e3b450; stroke-width: 2.5px; }
.mapa-vista .jogador .glifo { fill: none; stroke: #f3d98b; stroke-width: 2.4px; stroke-linecap: round; }
.mapa-vista .jogador.salvo circle { fill: rgba(23, 20, 15, .7); stroke-dasharray: 4 3; }
.mapa-vista .jogador.salvo .glifo { opacity: .7; }
.mapa-vista .jogador.destaque circle { fill: #3a0f38; stroke: #ff3df5; stroke-width: 3.5px; }
.mapa-vista .jogador.destaque .glifo { stroke: #fff; }
.mapa-vista .jogador:hover circle { stroke: #fff; }
.mapa-vista .rotulo, .mapa-vista .cidade text {
  paint-order: stroke; stroke: rgba(0, 0, 0, .9); stroke-linejoin: round; pointer-events: none;
}
.mapa-vista .rotulo { fill: #fff; font: 700 12px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; stroke-width: 3px; }
.mapa-vista .cidade text { fill: #f2e7cf; font: 700 13px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; stroke-width: 3.5px; letter-spacing: .03em; }
.mapa-vista svg.interativo:not(.com-rotulos) .jogador:not(.destaque) .rotulo { display: none; }
.mapa-vista svg.interativo:not(.com-cidades) .cidade { display: none; }
/* O que flutua sobre o mapa. */
.mapa-sobre { position: absolute; z-index: 2; }
.mapa-sobre.sup-dir { top: 12px; right: 12px; }
.mapa-sobre.inf-esq { bottom: 12px; left: 12px; max-width: calc(100% - 24px); }
.mapa-sobre .mono { font-size: .8rem; }
.mapa-cartao {
  position: absolute; z-index: 3; right: 12px; bottom: 12px; width: 310px; max-width: calc(100% - 24px);
  padding: 12px 14px; border-radius: var(--raio);
  background: rgba(21, 19, 15, .96); border: 1px solid rgba(200, 162, 74, .6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
.mapa-cartao header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--cartao-borda); color: var(--dourado); font-size: .92rem;
}
.mapa-cartao header strong { flex: 1; }
.mapa-cartao .fechar { display: inline-flex; padding: 3px; border-radius: 6px; color: var(--texto-fraco); }
.mapa-cartao .fechar:hover { background: var(--fundo-alto); color: var(--texto); }
.cartao-corpo { display: flex; align-items: flex-start; gap: 12px; }
.avatar {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 10px;
  background: var(--fundo-alto); border: 1px solid var(--borda); color: var(--dourado);
}
.avatar .icone { width: 28px; height: 28px; stroke-width: 1.6; }
.cartao-dados { min-width: 0; }
.cartao-dados .nome { color: var(--texto); font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.cartao-dados ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.cartao-dados li { display: flex; align-items: center; gap: 8px; color: var(--texto-medio); font-size: .88rem; }
.cartao-dados li .icone { width: 15px; height: 15px; color: var(--dourado); }
.mapa-cartao .nota { margin: 8px 0 0; font-size: .8rem; }
.mapa-cartao code.copiar { display: block; margin: 10px 0; padding: 6px 8px; font-size: .85rem; overflow-wrap: anywhere; }
.mapa-cartao .botoes { gap: 8px; }
.mapa-cartao .botao.pequeno { padding: 6px 12px; font-size: .85rem; }
.mapa-cartao .botao .icone { width: 15px; height: 15px; }
.mapa-cartao [aria-pressed="true"] { background: var(--dourado); color: #1a1710; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: .85rem; color: var(--texto-fraco); }
.legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.legenda .vivo { background: #17140f; border: 2px solid #e3b450; }
.legenda .salvo { border: 2px dashed #e3b450; }
.legenda .achado { background: #3a0f38; border: 2px solid #ff3df5; }

/* --- larguras ------------------------------------------------------------ */

/* Indicadores, colunas da visao geral e pares de cartoes mudam pela largura
   do conteudo (@container painel, junto de cada um), nao por aqui. */

@media (max-width: 900px) {
  main.admin { padding: 16px var(--respiro) 48px; }
  .admin-casca { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .admin-lateral { position: static; gap: 10px; }
  .admin-papel { gap: 10px; padding: 8px 12px; }
  .admin-papel > .icone { width: 20px; height: 20px; }
  .admin-papel div { flex-direction: row; align-items: baseline; gap: 8px; }
  .admin-menu {
    flex-direction: row; gap: 4px; overflow-x: auto; padding-bottom: 2px;
    border-bottom: 1px solid var(--cartao-borda);
  }
  .admin-menu a { white-space: nowrap; border-radius: 8px 8px 0 0; gap: 8px; }
  .admin-menu a .seta { display: none; }
  .admin-menu a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--dourado); }
}

@media (max-width: 700px) {
  form.form-grade { grid-template-columns: minmax(0, 1fr); }
  .cabecalho-pagina { align-items: flex-start; }
  .cabecalho-pagina h1 { font-size: 1.35rem; }
  .admin-casca { --cartao-px: 14px; --cartao-py: 14px; --vao: 14px; }
  .kpis { gap: 10px; }
  .kpi { padding: 12px; }
  .kpi .valor { font-size: 1.55rem; }
  .kpi-icone { width: 28px; height: 28px; }
  details.cmd .cmd-corpo { padding-left: 0; }
  .titulo-icone { width: 24px; height: 24px; }
  /* Mapa no celular: caixa mais baixa, para sobrar onde rolar a pagina (o
     dedo sobre o mapa move o mapa), e o cartao desce para baixo dela. */
  .mapa-vista { height: clamp(300px, 62vh, 640px); }
  .mapa-cartao { position: static; width: auto; max-width: none; margin-top: 12px; box-shadow: none; }
  .mapa-barra { gap: 8px; }
  .botao-borda { height: 36px; padding: 0 12px; }
  /* Os 16 andares numa faixa que rola de lado, e nao em tres linhas. */
  .andares { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .andares a { flex: none; }
}

@media (max-width: 520px) {
  .lista.pares th { width: 90px; padding-left: 0; }
}

/* Tabela empilhada no celular: cada linha vira um bloco, cada celula uma
   linha "rotulo ... valor", com o rotulo tirado de data-label. Para as tabelas
   do painel, onde rolar de lado escondia justo a coluna que importava. A
   celula .principal (o nome) vira o titulo do bloco, sem rotulo. */
@media (max-width: 700px) {
  .lista.empilha thead { display: none; }
  .lista.empilha, .lista.empilha tbody, .lista.empilha tr { display: block; width: 100%; }
  .lista.empilha tr { padding: 10px var(--cartao-px, 2px); border-bottom: 1px solid var(--borda); }
  .lista.empilha tr:last-child { border-bottom: 0; }
  /* O recuo de borda a borda passa da celula para a linha. */
  .cartao > .rolavel .lista.empilha td:first-child,
  .cartao > .rolavel .lista.empilha td:last-child { padding-left: 0; padding-right: 0; }
  /* Celula sem dado ("—") nao vira linha no cartao: um item de cenario teria
     oito linhas de traco. */
  .lista.empilha td.vazia { display: none; }
  /* Os filtros numa faixa que rola de lado, e nao em seis linhas. */
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .chips a { flex: none; }
  .lista.itens td.principal, .lista.itens tbody tr:hover td.principal { position: static; background: none; }
  .so-empilhado { display: block; }
  /* Rotulo flutuando a esquerda e valor alinhado a direita, em vez de flex:
     com flex, cada pedaco do conteudo (texto, selo, link) virava um item
     separado e se espalhava pela linha. overflow: hidden fecha o float. */
  .lista.empilha td {
    display: block; padding: 3px 0; border: 0; white-space: normal;
    text-align: right; min-width: 0; overflow: hidden;
  }
  /* A regra de nao quebrar linha das tabelas compactas e mais especifica que
     a de cima; so ela precisa ser desfeita aqui. */
  .lista.empilha.compacta:not(.pares) td { white-space: normal; }
  .lista.empilha td::before {
    content: attr(data-label); float: left; margin-right: 12px;
    color: var(--texto-fraco);
    font: 400 .8rem/1.9 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  .lista.empilha td.principal { text-align: left; font-weight: 600; font-size: 1rem; }
  .lista.empilha td.principal::before, .lista.empilha td:not([data-label])::before { display: none; }
  .lista.empilha td.num { text-align: right; }
  .lista.empilha td.longo { min-width: 0; }
  .lista.empilha tbody tr:hover td { background: none; }
}

/* --- larguras das paginas publicas ---------------------------------------- */

/* Tela grande: a pagina cresce junto, em vez de virar uma faixa estreita no
   meio de um monitor de 27". */
@media (min-width: 1600px) {
  :root { --largura: 1340px; }
  html { font-size: 17px; }
  body { font-size: 17px; }
}
@media (min-width: 2200px) {
  :root { --largura: 1520px; }
  body { font-size: 18px; }
}

/* Faixa de status em duas linhas: o estado em cima, as listas embaixo. */
@media (max-width: 1150px) {
  .faixa { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .faixa-celula { grid-column: span 2; border-top: 1px solid rgba(212, 169, 71, .16); }
  .faixa-celula:nth-child(-n+2) { grid-column: span 3; border-top: 0; }
  .faixa-celula:nth-child(3) { border-left: 0; }
}

/* Tablet e celular: menu atras do botao, cartoes um embaixo do outro. */
@media (max-width: 900px) {
  :root { --altura-topo: 58px; }
  .topo-dentro { flex-wrap: wrap; gap: 0 12px; }
  .menu-botao {
    display: inline-grid; place-items: center; margin-left: auto;
    width: 42px; height: 42px; border: 1px solid var(--borda); border-radius: 8px;
    color: var(--dourado-claro); cursor: pointer;
  }
  .menu-botao .icone { width: 22px; height: 22px; }
  /* Fora da tela, mas focavel: o teclado ainda abre o menu (espaco). */
  .menu-chave { display: block; position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; }
  .menu-chave:focus-visible + .menu-botao { outline: 2px solid var(--dourado); outline-offset: 2px; }
  .menu-chave:checked + .menu-botao { background: rgba(212, 169, 71, .12); }
  .menu {
    display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 8px;
    padding: 8px 0 14px; border-top: 1px solid var(--borda); margin-top: 8px;
  }
  .menu-chave:checked ~ .menu { display: flex; }
  .menu-paginas { flex-direction: column; gap: 2px; margin: 0; }
  .menu-paginas a { padding: 11px 12px; font-size: 1.05rem; }
  .menu-paginas a[aria-current="page"] { background: rgba(212, 169, 71, .08); }
  .menu-paginas a[aria-current="page"]::after { left: 0; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; }
  .menu-conta { flex-wrap: wrap; gap: 12px 18px; padding: 12px 12px 0; border-top: 1px solid var(--borda); }

  .destaques, .trilha { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .trilha { gap: 30px; }
  /* No cartao deitado, o emblema vai para a esquerda do texto. */
  .destaque { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; }
  .destaque-emblema { grid-row: span 3; margin: 0; }
  .grade-info { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  .rodape-dentro { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .rodape-info { align-items: center; }
}

/* Celular. */
@media (max-width: 640px) {
  main { padding-top: 28px; padding-bottom: 56px; }
  .marca { font-size: 1.12rem; }
  .heroi { min-height: 0; padding-top: 44px; padding-bottom: 150px; background-position: 74% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  .heroi-acoes { flex-direction: column; align-items: stretch; width: min(100%, 340px); margin: 0 auto; }
  .faixa { grid-template-columns: minmax(0, 1fr); margin-top: -80px; }
  .faixa-celula, .faixa-celula:nth-child(-n+2) { grid-column: auto; border-left: 0; border-top: 1px solid rgba(212, 169, 71, .16); padding: 16px 18px; }
  .faixa-celula:first-child { border-top: 0; }
  .faixa-numero { font-size: 2rem; }
  .destaque { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .destaque-emblema { grid-row: auto; margin-bottom: 14px; width: 56px; height: 56px; }
  .comecar { margin-top: 56px; }
  .ranking .some-no-celular { display: none; }
  .so-celular { display: block; color: var(--texto-fraco); font-size: .8rem; font-weight: 400; }
  .ranking .pos { width: 48px; }
  .lista.ranking th, .lista.ranking td { white-space: normal; }
  .estreita { padding: 22px 18px; border-radius: 12px; }
  .painel-jogador { padding: 18px 14px; border-radius: 12px; }
}

/* --- guia de quests (/quests) ---------------------------------------------- */

.cartoes-quest { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cartao-quest {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo-alto); color: var(--texto);
  transition: border-color .15s ease, transform .15s ease;
}
.cartao-quest:hover { border-color: var(--dourado); text-decoration: none; transform: translateY(-2px); }
.cartao-quest h3 { margin: 0; font: 700 1.08rem/1.3 var(--fonte-titulo); color: var(--dourado-claro); }
.cartao-quest-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; color: var(--texto-medio); font-size: .86rem; }
.cartao-quest-meta span { display: inline-flex; align-items: center; gap: 6px; }
.cartao-quest-meta .icone { color: var(--dourado); }
.cartao-quest-resumo { flex: 1; margin: 0; color: var(--texto-fraco); font-size: .92rem; }
.cartao-quest-leve { margin: 0; color: var(--texto-medio); font-size: .84rem; }
.cartao-quest-link { display: inline-flex; align-items: center; gap: 6px; color: var(--dourado); font-size: .88rem; font-weight: 600; }

/* Tabela larga no celular rola dentro do bloco, sem empurrar a pagina. */
.tabela-rolavel { overflow-x: auto; margin: 12px 0 0; border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo-alto); }
.tabela-rolavel .lista { margin: 0; min-width: 640px; }
.tabela-rolavel .lista td, .tabela-rolavel .lista th { white-space: normal; vertical-align: top; }
.tabela-rolavel .lista tbody tr:last-child td { border-bottom: 0; }
.lista td.nome { font-weight: 600; color: var(--texto); }
.lista tr.indisponivel td { color: var(--texto-fraco); }
.lista .nota { font-size: .82rem; }

.mais-detalhes { margin-top: 16px; }
.mais-detalhes summary { cursor: pointer; color: var(--dourado); font-weight: 600; }
.lista-simples { margin: 8px 0 0; padding-left: 20px; color: var(--texto-fraco); columns: 2; column-gap: 32px; }

.quest-fatos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quest-fatos dd { font-size: 1.35rem; }
.trecho-titulo { margin: 22px 0 8px; color: var(--dourado-claro); }
.trecho-titulo:first-of-type { margin-top: 0; }
.passos { list-style: none; margin: 0; padding: 0; counter-reset: passo; display: grid; gap: 6px; }
.passo {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--borda); border-radius: 8px; background: #120f0b;
  color: var(--texto-medio); font-size: .95rem;
}
.passo .icone { width: 18px; height: 18px; margin-top: 2px; color: var(--dourado); }
.passo.final { border-color: var(--linha-ouro); background: rgba(212, 169, 71, .08); color: var(--texto); font-weight: 600; }
.sobretitulo a { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.rodape-guia { margin-top: 8px; text-align: center; }
.rodape-guia a { display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 640px) {
  .quest-fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lista-simples { columns: 1; }
}