/* ============================================================================
   Estilos especificos de pagina. A base (tokens, componentes) esta em
   medieval.css — aqui so entram composicoes que nao se repetem pelo site.
   ========================================================================= */

/* ---------------------------------------------------------------- HERO -- */

.heroi {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1rem + 7vw, 5.5rem);
  margin-bottom: var(--e-6);
  border-bottom: 3px solid var(--lot-ouro-escuro);
  background:
    radial-gradient(ellipse at 50% 120%, rgba(201, 162, 39, .22), transparent 60%),
    radial-gradient(ellipse at 12% 0%, rgba(139, 31, 31, .28), transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25));
}
/* Silhueta de muralha desenhada em CSS, no rodape do heroi */
.heroi::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 26px;
  background:
    repeating-linear-gradient(90deg,
      var(--lot-madeira) 0 22px, transparent 22px 44px) bottom / auto 14px repeat-x,
    linear-gradient(180deg, transparent, rgba(0, 0, 0, .5));
  opacity: .5;
  pointer-events: none;
}
.heroi__conteudo { position: relative; z-index: 1; max-width: 46rem; }
.heroi__titulo {
  font-size: var(--t-3xl);
  color: var(--lot-ouro-claro);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .65), 0 0 40px rgba(201, 162, 39, .3);
  margin-bottom: var(--e-3);
}
.heroi__texto { font-size: var(--t-lg); color: var(--lot-texto-claro); margin-bottom: var(--e-5); }
.heroi__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.heroi__nota {
  margin-top: var(--e-4);
  font-family: var(--fonte-ui);
  font-size: var(--t-xs);
  color: var(--lot-texto-suave);
}

/* ------------------------------------------------------------------ VSL -- */

.vsl__video {
  display: block;
  width: 100%;
  max-width: 58rem;
  margin-inline: auto;
  background: #000;
  border: 1px solid var(--lot-ouro-escuro);
  border-radius: var(--lot-raio);
  aspect-ratio: 16 / 9;
}

/* ------------------------------------------------------------ DESTAQUES -- */

.destaques { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.destaque {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-4);
  text-align: center;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(201, 162, 39, .35);
  border-radius: var(--lot-raio);
  transition: border-color var(--transicao), transform var(--transicao);
}
.destaque:hover { border-color: var(--lot-ouro); transform: translateY(-2px); }
.destaque__icone { font-size: 2rem; line-height: 1; }
.destaque__titulo { font-family: var(--fonte-titulo); font-size: var(--t-md); color: var(--lot-ouro-claro); margin: 0; }
.destaque__texto { font-size: var(--t-sm); color: var(--lot-texto-suave); margin: 0; }

/* ----------------------------------------------------------- NOTICIAS --- */

.noticia-item {
  display: grid;
  gap: var(--e-3);
  padding-block: var(--e-4);
  border-bottom: 1px solid rgba(90, 70, 48, .25);
}
.noticia-item:last-child { border-bottom: 0; padding-bottom: 0; }
.noticia-item:first-child { padding-top: 0; }

.noticia-item__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  font-family: var(--fonte-ui);
  font-size: var(--t-xs);
  color: var(--lot-tinta-suave);
}
.noticia-item__titulo { font-size: var(--t-lg); margin: 0; }
.noticia-item__titulo a { text-decoration: none; color: var(--lot-tinta); }
.noticia-item__titulo a:hover { color: var(--lot-link-hover); text-decoration: underline; }
.noticia-item__resumo { margin: 0; font-size: var(--t-sm); }

.artigo { font-size: var(--t-md); line-height: 1.75; }
.artigo h3, .artigo h4, .artigo h5 { margin-top: var(--e-5); color: var(--lot-sangue); }
.artigo h3:first-child { margin-top: 0; }
.artigo ul { padding-left: 1.3em; }
.artigo li { margin-bottom: .3em; }
.artigo img { border: 1px solid var(--lot-ouro-escuro); border-radius: var(--lot-raio); margin-block: var(--e-4); }

.artigo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  align-items: center;
  font-family: var(--fonte-ui);
  font-size: var(--t-xs);
  color: var(--lot-tinta-suave);
  padding-bottom: var(--e-3);
  margin-bottom: var(--e-4);
  border-bottom: 1px solid rgba(90, 70, 48, .25);
}
.artigo-meta__item { display: inline-flex; align-items: center; gap: .35em; }

.navegacao-posts {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-top: var(--e-5);
}
.navegacao-posts a {
  display: block;
  padding: var(--e-3);
  text-decoration: none;
  border: 1px solid var(--lot-borda-suave);
  border-radius: var(--lot-raio);
  transition: border-color var(--transicao), background var(--transicao);
}
.navegacao-posts a:hover { border-color: var(--lot-ouro); background: rgba(201, 162, 39, .12); }
.navegacao-posts span {
  display: block;
  font-family: var(--fonte-ui);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--lot-tinta-suave);
  margin-bottom: .2em;
}
.navegacao-posts strong { font-family: var(--fonte-titulo); font-weight: 700; color: var(--lot-tinta); }
.navegacao-posts .proximo { text-align: right; }

/* ------------------------------------------------------------ PERSONAGEM */

.perfil-topo {
  display: flex;
  gap: var(--e-4);
  align-items: center;
  flex-wrap: wrap;
}
.perfil-topo__corpo { flex: 1; min-width: min(100%, 14rem); }
.perfil-topo__nome { margin: 0; font-size: var(--t-xl); }
.perfil-topo__linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: center;
  margin-top: var(--e-2);
}

.skills { display: grid; gap: var(--e-3); }
.skill { display: grid; gap: .25em; }
.skill__topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-3);
  font-family: var(--fonte-ui);
  font-size: var(--t-sm);
}
.skill__nome { font-weight: 700; }
.skill__valor { font-variant-numeric: tabular-nums; color: var(--lot-sangue); font-weight: 700; }

/* ---------------------------------------------------------------- RANKS -- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: flex-end;
  margin-bottom: var(--e-4);
}
.filtros .campo { flex: 1 1 10rem; }
.filtros .botao { flex-shrink: 0; }

/* ---------------------------------------------------------------- BUSCA -- */

.busca-caixa { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.busca-caixa .campo__entrada { flex: 1 1 14rem; min-width: 0; }

.busca-grupo { margin-bottom: var(--e-5); }
.busca-grupo:last-child { margin-bottom: 0; }
.busca-resultado {
  display: block;
  padding: var(--e-3);
  border-bottom: 1px solid rgba(90, 70, 48, .22);
  text-decoration: none;
  color: var(--lot-tinta);
  transition: background var(--transicao);
}
.busca-resultado:hover { background: rgba(201, 162, 39, .14); color: var(--lot-tinta); }
.busca-resultado strong { display: block; font-family: var(--fonte-titulo); font-size: var(--t-md); }
.busca-resultado span { font-size: var(--t-sm); color: var(--lot-tinta-suave); }

/* --------------------------------------------------------------- TICKETS -- */

.mensagem-ticket {
  padding: var(--e-4);
  border: 1px solid var(--lot-borda-suave);
  border-radius: var(--lot-raio);
  background: rgba(255, 253, 245, .5);
}
.mensagem-ticket + .mensagem-ticket { margin-top: var(--e-3); }
.mensagem-ticket--equipe {
  border-color: var(--lot-ouro);
  background: rgba(201, 162, 39, .14);
  border-left-width: 4px;
}
.mensagem-ticket__topo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--e-2);
  font-family: var(--fonte-ui);
  font-size: var(--t-xs);
  color: var(--lot-tinta-suave);
}
.mensagem-ticket__autor { font-weight: 700; color: var(--lot-tinta); }
.mensagem-ticket__corpo { white-space: pre-wrap; font-size: var(--t-sm); margin: 0; }

/* ---------------------------------------------------------------- CONTA -- */

.personagem-linha {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--lot-borda-suave);
  border-radius: var(--lot-raio);
  background: rgba(255, 253, 245, .45);
  flex-wrap: wrap;
}
.personagem-linha__corpo { flex: 1; min-width: min(100%, 11rem); }
.personagem-linha__nome { font-family: var(--fonte-titulo); font-size: var(--t-md); font-weight: 700; }
.personagem-linha__meta { font-size: var(--t-xs); color: var(--lot-tinta-suave); font-family: var(--fonte-ui); }
.personagem-linha.is-excluido { opacity: .6; border-style: dashed; }

/* --------------------------------------------------------------- DOWNLOAD */

.download-item {
  display: flex;
  gap: var(--e-4);
  align-items: flex-start;
  padding: var(--e-4);
  border: 1px solid var(--lot-borda-suave);
  border-radius: var(--lot-raio);
  background: rgba(255, 253, 245, .45);
  flex-wrap: wrap;
}
.download-item.is-destaque {
  border-color: var(--lot-ouro);
  border-width: 2px;
  background: rgba(201, 162, 39, .14);
  box-shadow: var(--sombra-1);
}
.download-item__icone { font-size: 2.4rem; line-height: 1; }
.download-item__corpo { flex: 1; min-width: min(100%, 13rem); }
.download-item__titulo { font-family: var(--fonte-titulo); font-size: var(--t-lg); margin: 0 0 .2em; }
.download-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  font-family: var(--fonte-ui);
  font-size: var(--t-xs);
  color: var(--lot-tinta-suave);
  margin-top: var(--e-2);
}

/* ---------------------------------------------------------------- ADMIN -- */

.admin-grade {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 56rem) {
  .admin-grade { grid-template-columns: 14rem minmax(0, 1fr); align-items: start; }
}

.admin-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2em; }
.admin-menu a {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .5em .7em;
  font-family: var(--fonte-ui);
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--lot-texto-claro);
  border-radius: var(--lot-raio);
  border-left: 3px solid transparent;
  transition: background var(--transicao), border-color var(--transicao);
}
.admin-menu a:hover { background: rgba(201, 162, 39, .16); color: var(--lot-ouro-claro); }
.admin-menu a.is-ativo {
  background: rgba(201, 162, 39, .22);
  border-left-color: var(--lot-ouro);
  color: var(--lot-ouro-claro);
  font-weight: 700;
}
.admin-menu__contador {
  margin-left: auto;
  font-size: var(--t-xs);
  background: var(--lot-sangue);
  color: #fff;
  padding: 0 .45em;
  border-radius: 999px;
}

.admin-cartoes { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }

/* Editor de noticia */
.editor-grade { display: grid; gap: var(--e-4); }
@media (min-width: 56rem) {
  .editor-grade { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; }
}
.editor-dica {
  font-family: var(--fonte-mono);
  font-size: var(--t-xs);
  background: rgba(43, 29, 16, .1);
  border: 1px dashed var(--lot-borda-suave);
  border-radius: var(--lot-raio);
  padding: var(--e-3);
  color: var(--lot-tinta-suave);
  line-height: 1.7;
}

/* --------------------------------------------------------------- CIDADES */

.mapa-cidade {
  font-family: var(--fonte-mono);
  font-size: var(--t-xs);
  color: var(--lot-tinta-suave);
}

/* ----------------------------------------------------------- SERVIDOR BOX */

.servidor-box { display: grid; gap: var(--e-3); }
.servidor-box__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}
.servidor-box__numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid rgba(201, 162, 39, .25);
}
.servidor-box__dados {
  font-family: var(--fonte-mono);
  font-size: var(--t-xs);
  color: var(--lot-texto-suave);
  word-break: break-all;
}