:root {
  --fundo: #12100e;
  --pedra: #24201c;
  --pedra-2: #2d2823;
  --borda: #4a4238;
  --borda-escura: #0c0b09;
  --texto: #e6dcc6;
  --fraco: #a0967f;
  --ouro: #d9b45a;
  --ouro-escuro: #8a6d2c;
  --verde: #5fc27a;
  --vermelho: #e0574a;
}
* { box-sizing: border-box; }
html { background: var(--fundo); }
body { margin: 0; color: var(--texto); font: 15px/1.55 Georgia, 'Times New Roman', serif;
       background: radial-gradient(ellipse at top, #2a231b 0%, var(--fundo) 60%) no-repeat; min-height: 100vh; }
a { color: var(--ouro); }
a:hover { color: #f0cf7a; }
h1, h2, h3 { font-weight: normal; letter-spacing: .3px; }
h1 { color: var(--ouro); margin: 0 0 16px; font-size: 28px; }
.largura { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.fraco { color: var(--fraco); }
.nowrap { white-space: nowrap; }

/* topo */
.topo { background: linear-gradient(#2b251e, #1a1612); border-bottom: 2px solid var(--borda-escura);
        box-shadow: 0 1px 0 var(--borda); }
.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
              padding-top: 10px; padding-bottom: 10px; }
.logo { font-size: 26px; color: var(--ouro); text-decoration: none; letter-spacing: 2px; text-transform: uppercase;
        text-shadow: 0 2px 0 #000; }
.logo span { font-size: 22px; }
.menu { display: flex; flex-wrap: wrap; gap: 2px; }
.menu a { color: var(--texto); text-decoration: none; padding: 6px 10px; border: 1px solid transparent; font-size: 14px; }
.menu a:hover { border-color: var(--borda); }
.menu a.ativo { border-color: var(--ouro-escuro); background: rgba(217, 180, 90, .1); color: var(--ouro); }

/* grade principal */
.grade { display: grid; grid-template-columns: 1fr 280px; gap: 24px; padding-top: 24px; padding-bottom: 24px; }
main { min-width: 0; }
@media (max-width: 860px) { .grade { grid-template-columns: 1fr; } }

/* caixas da lateral */
.caixa { background: var(--pedra); border: 1px solid var(--borda); padding: 12px 14px; margin-bottom: 14px;
         box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 0 var(--borda-escura); }
.caixa h3 { margin: -12px -14px 10px; padding: 7px 14px; font-size: 14px; color: var(--ouro);
            background: linear-gradient(#3a332a, #2a251f); border-bottom: 1px solid var(--borda-escura);
            text-transform: uppercase; letter-spacing: 1px; }
.caixa p { margin: 6px 0; }
.links { font-size: 13px; }
.online { display: flex; align-items: center; gap: 8px; }
.bolinha { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--verde);
           box-shadow: 0 0 6px var(--verde); margin-right: 4px; vertical-align: middle; }
.mini-evento { padding: 6px 0; border-bottom: 1px dashed var(--borda); }
.mini-evento b { display: block; font-weight: normal; }
.mini-evento small { color: var(--fraco); }
.top { margin: 0; padding-left: 20px; }
.top li { padding: 2px 0; }
.top li span { float: right; color: var(--fraco); font-size: 13px; }

/* formulários e botões */
.form { display: flex; flex-direction: column; gap: 10px; }
.form.largo { max-width: 420px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--fraco); }
input, textarea, select { font: 15px/1.3 Georgia, serif; color: var(--texto); background: var(--borda-escura);
                          border: 1px solid var(--borda); padding: 8px 10px; width: 100%; }
input:focus, textarea:focus, select:focus { outline: 1px solid var(--ouro); }
.linha { display: flex; gap: 10px; }
.linha label { flex: 1; }
.botao { display: inline-block; font: 15px Georgia, serif; color: var(--texto); text-decoration: none; cursor: pointer;
         padding: 8px 16px; background: linear-gradient(#3e372e, #29241e); border: 1px solid var(--borda); }
.botao:hover { filter: brightness(1.2); color: var(--texto); }
.botao.jogar { background: linear-gradient(#8a6d2c, #5e4a1d); border-color: var(--ouro); color: #fff4d6;
               font-weight: bold; width: 100%; text-align: center; }
.botao.grande { font-size: 18px; padding: 12px; margin-top: 12px; }
.botao.pequeno { padding: 3px 10px; font-size: 13px; }
.botao.perigo { color: #ffb0a6; border-color: #6a2a22; }
.busca { display: flex; gap: 8px; max-width: 420px; margin-bottom: 20px; }
.busca input { flex: 1; }

/* avisos */
.aviso { padding: 10px 14px; margin-bottom: 14px; border: 1px solid; }
.aviso.ok { border-color: #2f6a3e; background: #13261a; color: #9be3ad; }
.aviso.erro { border-color: #7a2a22; background: #2c1512; color: #ffb0a6; }

/* destaque da home */
.destaque { background: linear-gradient(rgba(18,16,14,.4), rgba(18,16,14,.9)),
                        repeating-linear-gradient(45deg, #2a241d 0 12px, #26211b 12px 24px);
            border: 1px solid var(--borda); padding: 28px; margin-bottom: 24px; text-align: center; }
.destaque h1 { font-size: 34px; }
.destaque p { max-width: 520px; margin: 0 auto 18px; color: var(--fraco); }
.destaque form, .destaque > .botao { display: inline-block; width: auto; }
.destaque .botao.jogar { width: auto; padding: 12px 32px; font-size: 18px; }
.numeros { display: flex; justify-content: center; gap: 36px; margin-top: 24px; flex-wrap: wrap; }
.numeros b { display: block; font-size: 26px; color: var(--ouro); font-weight: normal; }
.numeros span { font-size: 13px; color: var(--fraco); }

/* notícias e eventos */
.secao { color: var(--ouro); font-size: 19px; border-bottom: 1px solid var(--borda); padding-bottom: 6px; margin: 26px 0 14px; }
.noticia { background: var(--pedra); border: 1px solid var(--borda); padding: 14px 18px; margin-bottom: 12px; }
.noticia h3 { margin: 0; font-size: 19px; }
.noticia h3 a { text-decoration: none; }
.noticia time, .evento time { color: var(--fraco); font-size: 13px; }
.noticia p { margin: 8px 0 0; }
.noticia.completa h1 { margin-bottom: 4px; }
.evento { background: var(--pedra); border: 1px solid var(--borda); border-left: 4px solid var(--borda);
          padding: 12px 16px; margin-bottom: 10px; }
.evento.ativo { border-left-color: var(--verde); }
.evento.encerrado { opacity: .6; }
.evento-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.evento h3 { margin: 0; font-size: 18px; }
.evento p { margin: 6px 0; }
.selo { display: inline-block; font-size: 12px; padding: 2px 8px; border: 1px solid var(--borda);
        color: var(--fraco); vertical-align: middle; font-family: Verdana, sans-serif; }
.selo.xp { border-color: #2f6a3e; color: #9be3ad; }
.selo.loot { border-color: var(--ouro-escuro); color: var(--ouro); }
.selo.online { border-color: #2f6a3e; color: #9be3ad; }
.paginas, .abas { display: flex; gap: 4px; margin: 16px 0; flex-wrap: wrap; }
.paginas a, .abas a { padding: 5px 12px; border: 1px solid var(--borda); text-decoration: none; color: var(--texto); }
.paginas a.ativo, .abas a.ativo { border-color: var(--ouro); color: var(--ouro); background: rgba(217,180,90,.1); }

/* tabelas */
.tabela { width: 100%; border-collapse: collapse; background: var(--pedra); border: 1px solid var(--borda); }
.tabela th { text-align: left; font-weight: normal; color: var(--ouro); background: var(--pedra-2);
             padding: 8px 10px; border-bottom: 1px solid var(--borda-escura); }
.tabela td { padding: 7px 10px; border-top: 1px solid rgba(74, 66, 56, .5); }
.tabela tr:hover td { background: rgba(255,255,255,.02); }
.tabela .podio.p1 td:first-child { color: #ffd700; font-weight: bold; }
.tabela .podio.p2 td:first-child { color: #c9ccd1; font-weight: bold; }
.tabela .podio.p3 td:first-child { color: #cd8b4f; font-weight: bold; }
.tabela form { margin: 0; }

/* ficha de personagem */
.ficha { background: var(--pedra); border: 1px solid var(--borda); padding: 16px 20px; }
.ficha h2 { margin: 0 0 12px; color: var(--ouro); font-size: 24px; }
.ficha dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; margin: 0; }
.ficha dt { color: var(--fraco); }
.ficha dd { margin: 0; }
.ficha-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .ficha-grade { grid-template-columns: 1fr; } }
.lista-mortes { padding-left: 18px; }
.lista-mortes time { color: var(--fraco); font-size: 13px; margin-right: 6px; }

.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 760px) { .duas-colunas { grid-template-columns: 1fr; } }

.rodape { color: var(--fraco); font-size: 13px; text-align: center; padding-top: 16px; padding-bottom: 24px;
          border-top: 1px solid var(--borda); }

/* herói (recorte da folha de sprites do jogo) */
.heroi { display: inline-block; background-repeat: no-repeat; image-rendering: pixelated; vertical-align: bottom; }
.visuais { display: flex; flex-wrap: wrap; gap: 8px; border: 1px solid var(--borda); padding: 10px; margin: 0; }
.visuais legend { color: var(--fraco); font-size: 14px; padding: 0 6px; }
.visuais small { width: 100%; }
.visual { position: relative; cursor: pointer; padding: 4px; border: 1px solid var(--borda);
          background: var(--borda-escura); display: block; }
.visual input { position: absolute; opacity: 0; pointer-events: none; }
.visual:hover { border-color: var(--ouro-escuro); }
.visual:has(input:checked) { border-color: var(--ouro); background: rgba(217, 180, 90, .15);
                             box-shadow: 0 0 0 1px var(--ouro); }
.visual:has(input:focus-visible) { outline: 2px solid var(--ouro); }
.form.cadastro { max-width: 460px; }
.ficha.com-heroi { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: start; }
.ficha.com-heroi .retrato { grid-row: span 6; background: radial-gradient(circle at 50% 80%, #3a5a2e, #1e2a18 70%);
                            border: 1px solid var(--borda); padding: 8px 10px 4px; }
.ficha.com-heroi > :not(.retrato) { grid-column: 2; }
@media (max-width: 560px) { .ficha.com-heroi { grid-template-columns: 1fr; }
  .ficha.com-heroi > :not(.retrato) { grid-column: 1; } .ficha.com-heroi .retrato { justify-self: start; } }

/* escolha de classe */
.classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px;
           border: 1px solid var(--borda); padding: 10px; margin: 0; }
.classes legend { color: var(--fraco); font-size: 14px; padding: 0 6px; }
.classes > small { grid-column: 1 / -1; }
.classe-op { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; cursor: pointer;
             border: 1px solid var(--borda); background: var(--borda-escura); color: var(--texto) !important; }
.classe-op input { position: absolute; opacity: 0; pointer-events: none; }
.classe-op b { font-weight: normal; font-size: 17px; color: var(--ouro); }
.classe-op small { color: var(--fraco); font-size: 13px; line-height: 1.4; }
.classe-num { font-size: 12px; color: var(--texto); font-family: Verdana, sans-serif; }
.classe-op:hover { border-color: var(--ouro-escuro); }
.classe-op:has(input:checked) { border-color: var(--ouro); background: rgba(217, 180, 90, .14); box-shadow: 0 0 0 1px var(--ouro); }
.classe-op:has(input:focus-visible) { outline: 2px solid var(--ouro); }
.classe-icone { font-size: 22px; }
.form.cadastro { max-width: 640px; }
.form.cadastro > label { max-width: 420px; }
.aviso-classe { border: 1px solid var(--ouro); background: rgba(217, 180, 90, .08); padding: 14px 18px; margin-bottom: 20px; }
.aviso-classe h2 { margin: 0 0 6px; color: var(--ouro); }

/* biblioteca */
.abas.pequenas a { font-size: 13px; padding: 3px 10px; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cartao { background: var(--pedra); border: 1px solid var(--borda); padding: 12px 16px; }
.cartao h3 { margin: 0 0 6px; color: var(--ouro); }
.cartao p { margin: 6px 0; }
dl.mini { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 8px 0; font-size: 14px; }
dl.mini dt { color: var(--fraco); }
dl.mini dd { margin: 0; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 12px; }
.filtros label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--fraco); }
.filtros select, .filtros input { width: auto; min-width: 120px; }
.raridades { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.raridades span { border: 1px solid var(--rar); color: var(--texto); padding: 3px 8px; font-size: 12px;
                  font-family: Verdana, sans-serif; background: color-mix(in srgb, var(--rar) 12%, transparent); }
.raridades b { color: var(--rar); }
.tabela td.icone { font-size: 20px; width: 32px; text-align: center; }
b.chefe { color: #ffb347; }

h4.sub { margin: 10px 0 4px; color: var(--ouro); font-weight: normal; }
.magias-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.magias-lista span { font-size: 16px; }
.magias-lista b { font-weight: normal; color: var(--texto); }
.magias-lista small { color: var(--fraco); font-family: Verdana, sans-serif; font-size: 11px; margin-left: 4px; }
.magias-lista em { display: block; color: var(--fraco); font-size: 13px; padding-left: 24px; }

/* guildas */
.tag-guilda { color: #7ab8ff; font-size: .85em; }
h1 .tag-guilda { font-size: 20px; }
.caixa-form { background: var(--pedra); border: 1px solid var(--borda); padding: 14px 18px; margin: 20px 0; }
.caixa-form h2 { margin: 0 0 10px; color: var(--ouro); font-size: 20px; }
.caixa-form h3 { margin: 14px 0 6px; font-size: 16px; }
.caixa-form .form { max-width: 460px; }
.linha-form { flex-direction: row !important; }
.linha-form input { flex: 1; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.duas-colunas .caixa-form { margin: 20px 0 0; }
.guilda-topo { display: flex; gap: 18px; align-items: flex-start; }
.guilda-topo h1 { margin: 0 0 4px; }
.brasao { flex-shrink: 0; width: 76px; height: 86px; display: grid; place-items: center; font: bold 20px Georgia, serif;
          color: #e8f1ff; background: linear-gradient(#2f4f7a, #18263c); border: 2px solid #7ab8ff;
          clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); padding-bottom: 12px; letter-spacing: 1px; }
.descricao-guilda { margin: 10px 0 0; white-space: normal; }
.cargo.lider { color: var(--ouro); }
.cargo.vice { color: #7ab8ff; }
.acoes-membro { white-space: nowrap; }
.acoes-membro form, .lista-convites form { display: inline; }
.botao-mini { font: 12px Georgia, serif; color: var(--texto); cursor: pointer; padding: 2px 8px; margin: 1px;
              background: linear-gradient(#3e372e, #29241e); border: 1px solid var(--borda); }
.botao-mini:hover { filter: brightness(1.25); }
.botao-mini.perigo { color: #ffb0a6; border-color: #6a2a22; }
.lista-convites { list-style: none; padding: 0; margin: 0; }
.lista-convites li { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.lista-convites li form { margin-left: auto; }
.zona-perigo { border-color: #4a2620; }
.convite-guilda { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borda-escura); }
.convite-guilda form { display: inline; }
.convite-guilda .acoes { margin-left: auto; display: flex; gap: 6px; }
@media (max-width: 760px) { .duas-colunas { grid-template-columns: 1fr; } .guilda-topo { flex-direction: column; } }

/* VIP e diamantes */
.selo.vip { background: linear-gradient(#e8c25a, #a8801e); color: #2a1e05; border-color: #f0d688; font-weight: bold; }
.saldo-vip { display: flex; gap: 40px; margin-bottom: 10px; }
.saldo-vip > div { display: flex; flex-direction: column; }
.saldo-vip b { font-size: 22px; }
.saldo-vip .diamantes { color: #8fd8ff; }
.saldo-vip .vip-ok { color: var(--ouro); }
.lista-vip { padding-left: 0; list-style: none; }
.lista-vip li { padding: 6px 0; border-bottom: 1px solid var(--borda-escura); }
.planos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.plano { background: var(--pedra); border: 1px solid var(--borda); padding: 14px; text-align: center; }
.plano h3 { margin: 0; color: var(--ouro); }
.plano .preco { font-size: 22px; margin: 6px 0; }
.plano .fraco { font-size: 13px; }
.plano .botao:disabled { opacity: .45; cursor: default; filter: none; }
td.neg { color: #ff9a8a; } td.pos { color: #9be3ad; }
.tabela.compacta td { padding: 4px 8px; font-size: 13px; }

/* atributos no perfil */
h3.sub { margin: 14px 0 6px; color: var(--ouro); font-size: 16px; }
.atributos { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.atrib { background: var(--borda-escura); border: 1px solid var(--borda); padding: 3px 9px; font-size: 14px; }
.atrib b { color: var(--ouro); margin-left: 3px; }
.selo.chefe { border-color: #8a3a2a; color: #ffb347; }

/* pagamentos */
.aviso.info { border-color: #2f5a7a; background: #13202c; color: #a8d4ff; }
.vantagens td:nth-child(n+2) { text-align: center; white-space: nowrap; }
.cores-chat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.cores-chat button { font: 14px Georgia, serif; color: var(--c); background: var(--borda-escura); border: 1px solid var(--borda);
  padding: 4px 10px; cursor: pointer; }
.cores-chat button.escolhida { border-color: var(--c); box-shadow: 0 0 6px var(--c); }
.botao:disabled { opacity: .45; cursor: default; filter: none; }
.pagamento-teste .opcoes-teste { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.pagamento-teste form { display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.pagamento-teste .botao.jogar { width: auto; }
.qr-falso { width: 120px; height: 120px; background: repeating-conic-gradient(#e6dcc6 0 25%, #12100e 0 50%) 0 0 / 15px 15px;
  border: 6px solid #e6dcc6; opacity: .85; }
.resultado-pagamento h2 { margin-top: 0; }
.resultado-pagamento.st-aprovado { border-color: #2f6a3e; }
.resultado-pagamento.st-recusado { border-color: #7a2a22; }
td.st-aprovado { color: #9be3ad; } td.st-recusado, td.st-cancelado { color: #ffb0a6; } td.st-pendente { color: var(--ouro); }

/* loja */
.vitrine { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 14px 0; }
.produto { background: var(--pedra); border: 1px solid var(--borda); padding: 12px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 6px; }
.produto.em-uso { border-color: #2f6a3e; box-shadow: inset 0 0 0 1px #2f6a3e; }
.produto.exclusivo { border-color: var(--ouro-escuro); }
.produto h3 { margin: 0; font-size: 16px; color: var(--ouro); }
.produto .preco { margin: 0; font-size: 18px; }
.produto .previa { height: 140px; display: flex; align-items: flex-end; justify-content: center; width: 100%;
  background: radial-gradient(circle at 50% 85%, #34502a, #1a2416 70%); }
.previa-montaria { position: relative; display: inline-block; width: 110px; height: 130px; }
.montaria-sprite { position: absolute; left: 50%; bottom: 0; width: 48px; height: 48px; transform: translateX(-50%) scale(calc(var(--esc) * 2.1));
  transform-origin: 50% 100%; background-position: -48px -144px; background-size: 144px 192px; image-rendering: pixelated; }
.previa-montaria .heroi { position: absolute; left: 50%; bottom: 40px; transform: translateX(-45%); }
.previa-titulo { padding-bottom: 50px; font-size: 15px; color: #e9dcc0; }
.previa-titulo b { color: #fff; }
.tirar-cosmetico { margin: 10px 0; }
.titulo-perfil { margin: -8px 0 10px; color: #e9dcc0; font-style: italic; }
.heroi { image-rendering: pixelated; }
/* molduras do retrato */
.retrato.moldura-bronze { box-shadow: 0 0 0 4px #8a5a2e, 0 0 0 6px #3a2412, 0 0 10px 6px rgba(160, 100, 50, .35); }
.retrato.moldura-prata  { box-shadow: 0 0 0 4px #c8ccd4, 0 0 0 6px #4a4e56, 0 0 12px 6px rgba(200, 210, 230, .35); }
.retrato.moldura-ouro   { box-shadow: 0 0 0 4px #e8c25a, 0 0 0 6px #6a5016, 0 0 16px 8px rgba(232, 194, 90, .45); }
.retrato.moldura-temporada { box-shadow: 0 0 0 3px #fff0a0, 0 0 0 6px #3a2a8a, 0 0 0 8px #ffc83a, 0 0 24px 10px rgba(140, 110, 255, .5); }
.selo.premio { background: #3a2a6a; color: #ffe9a8; border-color: #8a72d0; }
.retrato.moldura-dragao { box-shadow: 0 0 0 3px #ff9f2e, 0 0 0 6px #8a1e12, 0 0 0 8px #ff9f2e, 0 0 22px 10px rgba(255, 90, 40, .5); }
.produto .retrato { display: inline-block; padding: 6px; margin-bottom: 8px; background: radial-gradient(circle at 50% 80%, #3a5a2e, #1e2a18 70%); }

.retrato-monstro { width: 48px; text-align: center; }
.retrato-monstro span { display: inline-block; image-rendering: pixelated; vertical-align: middle; }
.ic-item { display: inline-block; width: 32px; height: 32px; image-rendering: pixelated; vertical-align: middle; }

/* ---------- 2.9: captcha, moderação ---------- */
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.captcha input { max-width: 90px; }
.grade.larga { grid-template-columns: 1fr; max-width: 1400px; }
.mod-resumo { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.mod-resumo .num { background: var(--pedra); border: 1px solid var(--borda); padding: 6px 12px; min-width: 120px; }
.mod-resumo .num b { display: block; font-size: 22px; color: var(--ouro); }
.mod-resumo .num small { color: var(--fraco); }
.mod-resumo .num.alerta { border-color: #8a3a2a; } .mod-resumo .num.alerta b { color: #ff8a6a; }
.mod-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin: 10px 0; }
.mod-filtros label { display: flex; flex-direction: column; font-size: 13px; color: var(--fraco); gap: 2px; }
.mod-filtros input, .mod-filtros select { padding: 4px 6px; }
.mod-cabeca { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: var(--pedra); border: 1px solid var(--borda); padding: 10px 14px; }
.mod-cabeca h2 { margin: 0; }
.mod-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 12px 0; }
.mod-acoes form { background: var(--pedra); border: 1px solid var(--borda); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.mod-acoes form h4 { margin: 0; color: var(--ouro); font-weight: normal; }
.mod-acoes input, .mod-acoes select, .mod-acoes textarea { padding: 4px 6px; }
.mod-inv { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.mod-inv section { background: var(--pedra); border: 1px solid var(--borda); padding: 6px 10px; }
.mod-inv h4 { margin: 2px 0 6px; color: var(--ouro); font-weight: normal; }
.mod-inv ul { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.mod-inv li { padding: 2px 0; border-bottom: 1px solid #2d2823; display: flex; gap: 6px; justify-content: space-between; }
.mod-inv li small { color: var(--fraco); }
.selo.ban, .selo.suspeita { border-color: #8a3a2a; color: #ff9c86; }
.selo.mudo { border-color: #6a5a2a; color: #e6c66a; }
.selo.gm { border-color: #8a2a2a; color: #ff6a5a; }
.rolagem { overflow-x: auto; }
.tabela.compacta td, .tabela.compacta th { font-size: 13px; }
tr.suspeita td { background: rgba(160, 60, 40, .12); }
.evento-log { font-family: ui-monospace, monospace; font-size: 12px; color: var(--fraco); }
/* ---------- 3.1: guia do iniciante ---------- */
.guia { margin-bottom: 18px; }
.guia h3 { color: var(--ouro); font-weight: normal; margin: 14px 0 6px; }
.guia-lista li { margin-bottom: 6px; }
.guia kbd { display: inline-block; min-width: 18px; padding: 0 5px; border: 1px solid var(--borda); border-bottom-width: 2px; background: var(--pedra-2);
  font: 12px/18px ui-monospace, monospace; text-align: center; border-radius: 3px; }
.guia details { background: var(--pedra); border: 1px solid var(--borda); padding: 6px 12px; margin-bottom: 6px; }
.guia summary { cursor: pointer; color: var(--ouro); }
.guia details p { margin: 6px 0 2px; }
.guia-indice { position: sticky; top: 0; background: var(--fundo); padding: 6px 0; z-index: 2; }
html { scroll-behavior: smooth; }

/* 0.4.0: gráficos do Admin */
.grafico { display: block; width: 100%; height: auto; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); margin: 6px 0 4px; }
.grafico .g-linha { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.grafico .g-eixo { fill: #9a8f7c; font-size: 10px; font-family: Verdana, sans-serif; }
.grafico.online .g-barra { fill: #6fbf73; }
.grafico.contas .g-barra { fill: #d9a53a; }
.grafico .g-barra:hover { fill: #fff; }
.abas.pequenas a { font-size: 12px; padding: 3px 10px; }

/* 0.5.0: wiki de itens, destaques da semana e página do personagem */
.onde-cai { font-size: 12px; color: var(--texto-fraco); max-width: 340px; }
.dest-semana { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 8px 0 18px; }
.dest-card { padding: 10px 12px; border: 1px solid var(--borda); background: rgba(0,0,0,.25); }
.dest-card .d-tit { font-size: 12px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .5px; }
.dest-card .d-nome { display: block; margin: 4px 0 2px; font-size: 17px; color: var(--ouro); }
.dest-card .d-valor { font-size: 13px; }
.equip-ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin: 6px 0 14px; }
.equip-ficha .eq { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--borda); background: rgba(0,0,0,.2); }
.equip-ficha .eq.vazio { opacity: .5; }
.equip-ficha .eq small { display: block; color: var(--texto-fraco); }
.equip-ficha .alma { color: #d59bff; } .equip-ficha .gema { color: #7fd8ff; }
.lista-conquistas { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.lista-conquistas li { padding: 3px 8px; border: 1px solid var(--borda); background: rgba(0,0,0,.2); font-size: 13px; }
.dest-card .d-ico { float: right; font-size: 22px; }
.busca-cmd { padding: 6px 10px; width: min(360px, 100%); background: rgba(0,0,0,.3); border: 1px solid var(--borda); color: var(--texto); }
.cmd-gm code { color: var(--ouro); white-space: nowrap; }
.nota-raro { color: #d6a0ff; } .nota-noite { color: #9fb0ff; } /* 0.5.8 */
/* 0.5.9: termos, status, manutenção e backups */
.texto-legal { max-width: 780px; line-height: 1.6; }
.texto-legal h2 { font-size: 1.1em; margin-top: 1.4em; color: var(--ouro, #d8b45a); }
.caixa-aceite { display: flex; gap: 8px; align-items: flex-start; font-size: .95em; margin: 8px 0; }
.caixa-aceite input { width: auto; margin-top: 4px; }
.faixa-manutencao { background: #4a3410; border-bottom: 1px solid #d8a840; color: #ffe2a0; text-align: center; padding: 8px 12px; font-size: .95em; }
.faixa-manutencao.ativa { background: #5a1a14; border-color: #ff7060; color: #fff; }
.faixa-manutencao a { color: inherit; text-decoration: underline; }
.status-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 12px 0; }
.status-caixa { border: 1px solid #3a342d; background: rgba(0,0,0,.25); padding: 12px; }
.status-caixa b { display: block; font-size: 1.3em; } .status-caixa small { color: #a89f90; }
.status-caixa.ok { border-color: #3e8a4a; } .status-caixa.fora { border-color: #a03a30; } .status-caixa.manut { border-color: #d8a840; }
.bolinha.desligado { background: #c0392b; }
.linha-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.linha-form label { display: flex; flex-direction: column; gap: 4px; }
.caixa-manut { border: 1px solid #d8a840; padding: 10px 14px; background: rgba(216,168,64,.08); }
details.restaurar { display: inline-block; margin-left: 6px; } details.restaurar[open] { display: block; margin-top: 6px; max-width: 520px; white-space: normal; }
.linha-form select, .linha-form input { width: auto; min-width: 90px; } .linha-form input[name=mensagem] { min-width: 280px; }

/* 0.6.8.0: suporte */
.selo-novo { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #c0392b; color: #fff; font-size: 11px; font-weight: bold; text-align: center; line-height: 18px; }
.chamado-status { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; border: 1px solid; white-space: nowrap; }
.chamado-status.aberto { color: #ffd76a; border-color: #8a6d2a; }
.chamado-status.respondido { color: #8fe08f; border-color: #3f7a3f; }
.chamado-status.fechado { color: #9a9488; border-color: #4a4239; }
.conversa { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.msg-chamado { padding: 10px 14px; border-radius: 8px; border: 1px solid #3a332b; background: rgba(255, 255, 255, .03); max-width: 85%; }
.msg-chamado.equipe { align-self: flex-end; border-color: #6a5a2a; background: rgba(201, 162, 74, .08); }
.msg-chamado header { font-size: 12px; color: #9a9488; margin-bottom: 4px; }
.msg-chamado.equipe header b { color: #ffd76a; }
.msg-chamado p { margin: 0; white-space: pre-wrap; word-break: break-word; }
tr.nao-lido td { font-weight: bold; }

/* 0.6.9.0: nível da guilda */
.guilda-nivel { display: flex; gap: 14px; align-items: center; margin: 12px 0; padding: 10px 14px; border: 1px solid #4a4239; border-radius: 8px; background: rgba(255, 255, 255, .02); }
.gn-selo { display: flex; flex-direction: column; align-items: center; min-width: 64px; font-size: 22px; line-height: 1.1; }
.gn-selo b { font-size: 26px; color: #ffd76a; }
.gn-selo small { font-size: 11px; color: #9a9488; }
.gn-info { flex: 1; } .gn-info p { margin: 2px 0; }
.gn-barra { height: 8px; background: #2a241c; border-radius: 4px; overflow: hidden; margin: 4px 0; }
.gn-barra > div { height: 100%; background: linear-gradient(90deg, #c9a24a, #ffd76a); }

/* 0.6.9.0: linha do tempo do personagem */
.linha-tempo { list-style: none; margin: 8px 0 16px; padding: 0 0 0 6px; border-left: 2px solid #4a4239; }
.linha-tempo li { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 6px 0 6px 12px; }
.linha-tempo .lt-icone { position: absolute; left: -17px; top: 6px; width: 28px; height: 28px; display: grid; place-items: center;
  background: #1b1713; border: 1px solid #6a5a2a; border-radius: 50%; font-size: 14px; }
.linha-tempo li > div { margin-left: 16px; display: flex; flex-direction: column; }
.linha-tempo time { font-size: 12px; color: #9a9488; }

/* 0.6.9.0: mapa do mundo */
.mm-abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.mm-abas button { display: flex; flex-direction: column; align-items: flex-start; padding: 6px 12px; background: #221d18; border: 1px solid #4a4239;
  color: var(--texto, #e8dcc0); border-radius: 6px; cursor: pointer; font: inherit; }
.mm-abas button small { font-size: 11px; color: #9a9488; }
.mm-abas button.ativo { border-color: #c9a24a; background: #2e261c; color: #ffd76a; }
.mm-info { margin: 6px 0 10px; }
.mm-tela { position: relative; width: 100%; overflow-x: auto; border: 1px solid #4a4239; border-radius: 6px; background: #0d0c0b; line-height: 0; }
.mm-tela canvas { display: block; margin: 0 auto; image-rendering: pixelated; cursor: crosshair; }
.mm-dica { position: absolute; z-index: 5; min-width: 160px; max-width: 220px; padding: 8px 10px; background: rgba(20, 16, 12, .95); border: 1px solid #c9a24a;
  border-radius: 6px; font-size: 13px; line-height: 1.45; pointer-events: none; color: #e8dcc0; }
.mm-ilhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 12px 0; }
.mm-card { border: 1px solid #4a4239; border-radius: 6px; padding: 8px 12px; background: rgba(255, 255, 255, .02); }
.mm-card:hover { border-color: #c9a24a; }
.mm-card h4 { margin: 0 0 4px; color: #ffd76a; }
.mm-card ul { margin: 0; padding-left: 18px; font-size: 13px; }
.mm-card small { color: #9a9488; }