/* =========================================================
   HB.net :: portal de servidor de jogo, jeito 2008
   - as cores do HB Hub (vinho, vermelho, dourado) na estrutura dos portais de servidor (Arena Brasil e cia.)
   - sem imagens e sem fontes externas: tudo em gradiente e fonte do sistema
   ========================================================= */

* { box-sizing: border-box }
[hidden] { display: none !important }

html {
  background: #120303;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 7px),
    radial-gradient(ellipse at top, #3a0808, #120303 70%);
  background-attachment: fixed;
  scrollbar-color: #a00 #111;
}
body {
  margin: 0;
  padding: 0 0 24px;
  font: 12px/1.55 Verdana, Geneva, sans-serif;
  color: #ddd;
}
a { color: #ffcc33 }
a:hover { color: #fff }
h1, h2, h3 { font-family: "Trebuchet MS", Verdana, sans-serif }
code { padding: 0 3px; font: 12px Consolas, "Courier New", monospace; color: #ffe08a; background: #000; border: 1px solid #333 }

#pagina {
  max-width: 980px;
  margin: 0 auto;
  background: #0d0707;
  border: 1px solid #3a1010;
  border-top: 0;
  box-shadow: 0 0 40px #000;
}

/* ---------- barra de cima ---------- */
.barra {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 12px;
  padding: 4px 10px;
  font-size: 11px;
  color: #ffcc33;
  background: linear-gradient(#2a2a2a, #0a0a0a);
  border-bottom: 1px solid #000;
}
.barra nav { display: flex; flex-wrap: wrap }
.barra nav a {
  padding: 3px 12px;
  color: #ddd;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 10px;
  border-left: 1px solid #333;
}
.barra nav a:hover, .barra nav a.aqui { color: #000; background: #ffcc33 }

/* ---------- banner ---------- */
.banner {
  position: relative;
  min-height: 150px;
  padding: 24px 24px 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 40%, rgba(255, 140, 0, .25), transparent 45%),
    repeating-linear-gradient(-30deg, rgba(0, 0, 0, .25) 0 3px, transparent 3px 11px),
    linear-gradient(#7a0000, #3a0000 60%, #120000);
  border-bottom: 3px solid #000;
}
.banner::after {
  /* o brilho que passa devagar pelo banner */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 220, 120, .12) 45%, transparent 60%);
  animation: brilho 9s linear infinite;
  pointer-events: none;
}
@keyframes brilho { from { transform: translateX(-100%) } to { transform: translateX(100%) } }
.marca { display: inline-flex; align-items: center; gap: 14px; text-decoration: none }
.marca:hover { color: inherit }
.logo { display: inline-flex }
.logo b, .logo i {
  display: inline-block;
  width: 52px;
  height: 52px;
  font: normal 900 38px/46px "Arial Black", sans-serif;
  text-align: center;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .6);
}
.logo b { background: #000; color: #fff; transform: rotate(-6deg) translateY(-3px) }
.logo i { background: #fff; color: #000; margin-left: -10px; transform: rotate(5deg) translateY(4px) }
.nome {
  font: 900 64px/1 "Arial Black", Impact, sans-serif;
  letter-spacing: -2px;
  color: #ffcc33;
  text-shadow: 3px 3px 0 #000, 0 0 18px rgba(255, 120, 0, .6);
}
.nome em { font-style: normal; color: #fff }
.slogan {
  margin: 8px 0 0;
  font: italic bold 14px Georgia, serif;
  color: #ffe6a0;
  text-shadow: 1px 1px 0 #000;
}
.servidor {
  position: absolute;
  right: 18px;
  bottom: 14px;
  margin: 0;
  padding: 4px 10px;
  font-size: 11px;
  color: #fff;
  background: rgba(0, 0, 0, .6);
  border: 1px solid #ffcc33;
}
.servidor b { color: #ffcc33 }

/* ---------- abas dos jogos (placas de metal) ---------- */
.abas-jogos { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 3px solid #000 }
.abas-jogos a {
  display: block;
  padding: 10px 6px 8px;
  text-align: center;
  text-decoration: none;
  font: bold 10px Verdana, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #999;
  background: linear-gradient(#3b3b3b, #161616 55%, #0b0b0b);
  border-right: 1px solid #000;
  box-shadow: inset 0 1px 0 #555;
}
.abas-jogos a:last-child { border-right: 0 }
.abas-jogos a span {
  display: block;
  font: 900 22px/1.1 Georgia, "Times New Roman", serif;
  letter-spacing: 0;
  text-transform: none;
  color: #cfcfcf;
  text-shadow: 2px 2px 0 #000;
}
.abas-jogos .aba-w3 span { color: #ffcc33 }
.abas-jogos .aba-d2 span { color: #ff4a2a }
.abas-jogos a:hover, .abas-jogos a.aqui { color: #fff; background: linear-gradient(#5a3a0a, #2a1500 55%, #120800) }
.abas-jogos a.aqui { box-shadow: inset 0 -3px 0 #ffcc33 }

/* ---------- colunas ---------- */
.colunas { display: flex; align-items: flex-start }
.miolo { order: 2; flex: 1; min-width: 0; padding: 12px 14px }
.lateral { order: 1; width: 210px; flex: none; padding: 12px 0 12px 10px }

.caixa { margin-bottom: 12px; background: #151010; border: 1px solid #3a1a1a }
.caixa h2 {
  margin: 0;
  padding: 4px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffcc33;
  background: linear-gradient(#4a0a0a, #200303);
  border-bottom: 1px solid #000;
}
.caixa ul { margin: 0; padding: 4px 0; list-style: none }
.caixa li a { display: block; padding: 3px 8px 3px 20px; color: #ddd; text-decoration: none; position: relative }
.caixa li a::before { content: "\2192"; position: absolute; left: 7px; color: #c00 }
.caixa li a:hover, .caixa li a.aqui { color: #fff; background: #2a0a0a }
.caixa li a.aqui::before { color: #ffcc33 }
.caixa p { margin: 6px 8px }
.caixa .quantos b { color: #3f3 }
.caixa .nomes { font-size: 11px; word-break: break-word }

/* HB-ID: a caixa amarela do login */
.hb-id { background: linear-gradient(#ffe066, #ffbf00); border-color: #000; color: #000 }
.hb-id h2 { color: #000; background: linear-gradient(#ffd21a, #e0a000); border-bottom: 2px solid #000; letter-spacing: 2px }
.hb-id a { color: #600 }
.hb-id a:hover { color: #000 }
.hb-id form { margin: 6px 8px }
.hb-id label { display: block; margin-bottom: 4px; font: bold 10px Verdana, sans-serif; text-transform: uppercase }
.hb-id input { display: block; width: 100%; margin-top: 1px; padding: 3px 4px; font: 12px Verdana, sans-serif; border: 2px inset #b88a00 }
.hb-id .botao { margin-top: 2px }
.hb-id ul li a { color: #400 }
.hb-id ul li a:hover { color: #000; background: rgba(255, 255, 255, .4) }
.hb-id ul li a::before { color: #600 }

/* ---------- miolo ---------- */
.titulo-pagina {
  margin: 0 0 10px;
  padding-bottom: 4px;
  font: 900 20px "Arial Black", Verdana, sans-serif;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 2px 2px 0 #a00;
  border-bottom: 2px solid #3a1010;
}
.migalhas { margin-bottom: 8px; font-size: 10px; color: #888 }
.painel { margin-bottom: 14px; background: #120b0b; border: 1px solid #3a1a1a }
.painel > h2 {
  margin: 0;
  padding: 5px 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  color: #ffcc33;
  background: linear-gradient(#3a0707, #1a0202);
  border-bottom: 1px solid #000;
}
.painel > h2 small { font: normal 10px Verdana, sans-serif; letter-spacing: 0; text-transform: none; color: #aaa }
.dentro { padding: 8px 10px }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.duas .painel { margin-bottom: 14px }

/* status dos servidores e top downloads */
.lista-dados { width: 100%; border-collapse: collapse; font-size: 11px }
.lista-dados td { padding: 3px 8px; border-bottom: 1px dotted #3a2a2a }
.lista-dados td:last-child { text-align: right; white-space: nowrap }
.lista-dados tr:hover td { background: #1f1010 }
.on { font-weight: bold; color: #3f3 }
.off { font-weight: bold; color: #f44 }
.etiqueta { display: inline-block; min-width: 24px; padding: 0 3px; margin-right: 4px; font: bold 9px Verdana, sans-serif; text-align: center; color: #000; background: #ffcc33 }
.etiqueta.d2 { background: #ff5a3a }
.etiqueta.geral { background: #aaa }

/* notícias */
.noticia { margin: 0 0 12px; background: #120b0b; border: 1px solid #3a1a1a }
.noticia h3 { margin: 0; padding: 5px 10px; font-size: 13px; color: #ffcc33; background: #1f0808; border-bottom: 1px solid #000 }
.noticia .texto { padding: 8px 10px }
.noticia .texto p { margin: 0 0 8px }
.noticia .assinatura { padding: 3px 10px; font-size: 10px; color: #999; background: #0a0505; border-top: 1px dotted #3a2a2a; text-align: right }

/* texto corrido dos guias */
.texto h2 { margin: 16px 0 6px; font-size: 14px; color: #ffcc33; border-bottom: 1px dotted #5a2a2a }
.texto h2:first-child { margin-top: 0 }
.texto ol, .texto ul { padding-left: 22px }
.texto li { margin-bottom: 4px }

/* botões e formulários */
.botao {
  display: inline-block;
  padding: 4px 14px;
  font: bold 11px Verdana, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(#e03030, #a00000 55%, #600000);
  border: 2px outset #c33;
}
.botao:hover { color: #ffcc33 }
.botao:active { border-style: inset }
.form { max-width: 420px }
.form label { display: block; margin-bottom: 8px; font-weight: bold; color: #ffcc33 }
.form input, .form textarea, .form select {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 4px 6px;
  font: 12px Verdana, sans-serif;
  color: #fff;
  background: #000;
  border: 2px inset #555;
}
.dica { margin: -4px 0 10px; font-size: 10px; color: #999 }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.desafio-cor { display: inline-block; width: 36px; height: 18px; vertical-align: -4px; border: 2px solid #000; outline: 1px solid #888 }
.desafio-dica { display: block; margin: -4px 0 8px; font-size: 10px; color: #888 }
.aviso-ok, .aviso-erro { margin: 0 0 12px; padding: 6px 10px; font-weight: bold; border: 2px solid #000 }
.aviso-ok { color: #000; background: #3f3 }
.aviso-erro { color: #fff; background: #c00 }
.endereco { padding: 6px 10px; font-size: 13px; background: #000; border: 1px dashed #ffcc33 }
.dados-conta { margin: 0 0 8px; padding-left: 18px; line-height: 1.8 }

/* ladder */
.filtros { margin-bottom: 10px; padding: 6px 8px; font-size: 11px; line-height: 1.9; background: #0a0505; border: 1px solid #3a1a1a }
.filtros span { display: inline-block; min-width: 56px; font-weight: bold; color: #888 }
.filtros .ativo { padding: 0 4px; color: #000; background: #ffcc33 }
.ranking { width: 100%; border-collapse: collapse }
.ranking th { padding: 4px 8px; font-size: 10px; text-align: left; color: #ffcc33; background: #1f0808; border-bottom: 1px solid #000 }
.ranking td { padding: 5px 8px; border-bottom: 1px solid #2a1a1a; vertical-align: middle }
.ranking tr:nth-child(even) td { background: #140c0c }
.ranking .num { width: 36px; text-align: center; font: italic 900 20px Impact, "Arial Black", sans-serif; color: #f90 }
.ranking tr.primeiro .num { font-size: 28px; color: #fc0 }
.ranking tr.primeiro td { background: linear-gradient(90deg, #3a1a00, #140c0c 70%) }
.ranking .titulo a, .ranking .titulo b { font: bold 13px "Trebuchet MS", Verdana, sans-serif; text-decoration: none }
.ranking .titulo small { display: block; color: #888; font-size: 10px }
.ranking .dado { width: 1%; white-space: nowrap; text-align: right }
.ranking .dado small { display: block; color: #888; font-size: 10px }
.ranking tr.morto .titulo, .ranking tr.morto .num { color: #666 }
.ficha { width: 100%; border-collapse: collapse; font-size: 11px }
.ficha th { padding: 3px 6px; text-align: left; color: #ffcc33; background: #1f0808 }
.ficha td { padding: 3px 6px; border-bottom: 1px solid #2a1a1a }

/* downloads */
.downloads { margin: 0; padding: 0; list-style: none }
.downloads li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px dotted #3a2a2a }
.downloads li:last-child { border-bottom: 0 }
.downloads b { color: #fff }
.downloads small { display: block; color: #888 }
.downloads p { margin: 3px 0 0 }
.downloads .versao { color: #ffcc33 }

/* rodapé */
.rodape { padding: 10px 14px; font-size: 10px; text-align: center; color: #777; background: #070303; border-top: 3px solid #000 }
.rodape p { margin: 2px 0 }

/* ---------- celular ---------- */
@media (max-width: 760px) {
  .colunas { flex-direction: column; align-items: stretch }
  .miolo { order: 1 }
  .lateral { order: 2 }
  .lateral { width: auto; padding: 0 14px 12px }
  .duas { grid-template-columns: 1fr }
  .abas-jogos { grid-template-columns: repeat(2, 1fr) }
  .abas-jogos a:nth-child(2) { border-right: 0 }
  .abas-jogos a:nth-child(-n+2) { border-bottom: 1px solid #000 }
  .banner { padding: 16px 14px 44px }
  .nome { font-size: 44px }
  .logo b, .logo i { width: 40px; height: 40px; font-size: 28px; line-height: 34px }
  .servidor { left: 14px; right: auto }
  .downloads li { flex-direction: column; align-items: flex-start }
}
@media (prefers-reduced-motion: reduce) { .banner::after { animation: none } }

/* =========================================================
   painel do webmaster
   ========================================================= */
body.adm { padding: 0; background: #0d0707 }
.adm-barra { position: sticky; top: 0; z-index: 5; padding: 6px 12px }
.adm-marca { display: flex; align-items: center; gap: 10px; font: bold 13px "Trebuchet MS", sans-serif; color: #fff; text-decoration: none }
.adm-marca .logo b, .adm-marca .logo i { width: 24px; height: 24px; font-size: 16px; line-height: 20px; border-width: 2px; box-shadow: none }
.adm-marca .logo i { margin-left: -5px }
.adm-barra nav { align-items: center }
.adm-barra nav form { margin: 0 }
.adm-barra nav button { padding: 3px 12px; font: bold 10px Verdana, sans-serif; text-transform: uppercase; color: #ddd; background: none; border: 0; border-left: 1px solid #333; cursor: pointer }
.adm-barra nav button:hover { color: #000; background: #ffcc33 }
.pendentes { display: inline-block; min-width: 16px; padding: 0 4px; font-size: 10px; color: #000; background: #ffcc33; border-radius: 8px; text-align: center }
.aqui .pendentes { background: #000; color: #ffcc33 }
.adm-miolo { max-width: 1200px; margin: 0 auto; padding: 14px }
.adm-login { display: flex; justify-content: center; padding: 60px 14px }
.adm-login .caixa { width: 300px }
.adm-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px }
.adm-numeros div { padding: 8px; text-align: center; font-size: 10px; text-transform: uppercase; color: #aaa; background: #151010; border: 1px solid #3a1a1a }
.adm-numeros b { display: block; font: 900 26px "Arial Black", sans-serif; color: #3f3 }
.adm-tabela { width: 100%; border-collapse: collapse; font-size: 11px }
.adm-tabela th { padding: 5px 8px; text-align: left; font-size: 10px; text-transform: uppercase; color: #888; background: #0a0505 }
.adm-tabela td { padding: 6px 8px; border-top: 1px solid #2a1a1a; vertical-align: middle }
.adm-tabela tr:hover td { background: #1a0e0e }
.adm-tabela tr.passado td { color: #777 }
.adm-tabela small { display: block; color: #777; font-size: 10px }
.rola { overflow-x: auto }
.acao-conta { display: flex; gap: 4px; align-items: center; justify-content: flex-end }
.acao-conta select, .acao-conta input, .busca input { padding: 2px 4px; font: 11px Verdana, sans-serif; color: #eee; background: #000; border: 2px inset #444 }
.acao-conta input[name="horas"] { width: 60px }
.acao-conta input[name="motivo"] { width: 130px }
.acao-conta .botao { padding: 2px 8px }
.link { padding: 0; font: 11px Verdana, sans-serif; color: #ffcc33; text-decoration: underline; background: none; border: 0; cursor: pointer }
.link:hover { color: #fff }
.link.perigo { color: #f66 }
.junto { display: inline; margin-left: 8px }
.form.largo { max-width: none }
.campos-lado { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px }
.linha-download { border-bottom: 1px dotted #3a2a2a }
.linha-download:last-child { border-bottom: 0 }
.envio-status { margin-left: 8px; font-size: 11px; color: #ffcc33 }
@media (max-width: 760px) {
  .acao-conta { flex-wrap: wrap; justify-content: flex-start }
  .campos-lado { grid-template-columns: 1fr }
}