/**
 * MuManiacos Classic sobre o tema Revolution — "Pergaminho e Ferro".
 *
 * O Revolution é escuro; esta folha o vira claro (pergaminho), na paleta e no
 * estilo angular aprovados no protótipo. Carrega por último e tem a última
 * palavra sobre a cor.
 *
 * Nada do tema é editado. Apagar esta folha devolve o Revolution ao original.
 *
 * Três coisas aprendidas no fórum real, aplicadas aqui:
 *   1. o Revolution pinta com IMAGEM de fundo (bg.png, thead.png), não cor.
 *      Trocar só `background-color` não adianta: as regras usam `background`
 *      completo com `none` para apagar a textura.
 *   2. onde o tema tem alta especificidade ou `!important`, esta folha
 *      responde à altura.
 *   3. NÃO usar @import aqui. No MyBB ele invalida a folha toda e nada
 *      abaixo dele funciona. As fontes vêm pelo template headerinclude.
 */

/* ==================================================================
   Fontes (subset latin, direto do Google). @font-face é seguro aqui;
   @import não é (invalida a folha no MyBB).
   ================================================================== */
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 700 900;
    font-display: optional;
    src: url(https://fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt79mT7.woff2) format('woff2');
}
@font-face {
    font-family: 'Spectral';
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url(https://fonts.gstatic.com/s/spectral/v15/rnCr-xNNww_2s0amA9M5kng.woff2) format('woff2');
}
@font-face {
    font-family: 'Spectral';
    font-style: normal;
    font-weight: 600;
    font-display: optional;
    src: url(https://fonts.gstatic.com/s/spectral/v15/rnCs-xNNww_2s0amA9vmtm3BafY.woff2) format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: optional;
    src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
}

/* ==================================================================
   Sem sombra no texto: o Revolution põe text-shadow em quase tudo, o
   que borra a leitura. O protótipo é limpo. Removemos em toda a página
   e só devolvemos onde é decorativo de propósito.
   ================================================================== */
body, body * { text-shadow: none !important; }

/* ==================================================================
   Ícones do Font Awesome (kit JS): reservar o espaço de todos eles
   ==================================================================
   O kit troca cada <i> por um <svg> só depois que a página carrega. Sem
   largura reservada, tudo que tem ícone se reorganiza quando eles surgem,
   dando o efeito de piscada nos espaçamentos. Reservando a mesma largura
   que o ícone final vai ocupar, nada na página se mexe no reload.
*/
i.fa, i.fas, i.far, i.fab, i.fal, i[class*="fa-"] {
    display: inline-block;
    text-align: center;
    font-style: normal;
    min-width: 1em;
}
.fa-fw, i.fa-fw, svg.fa-fw, .svg-inline--fa.fa-fw { width: 1.25em !important; }
.svg-inline--fa { min-width: 1em; }

/* ==================================================================
   Paleta
   ================================================================== */
:root {
    --fundo:      #E8DBBE;
    --papel:      #F7EFDA;
    --papel-alt:  #FBF6E8;
    --escuro:     #3A2C16;
    --escuro-alt: #4A3A1E;

    --ouro:       #A6842F;
    --ouro-claro: #7C5F1C;
    --ouro-metal: #C9A24B;
    --linha:      #C9B58A;
    --linha-forte:#A6842F;
    --vinho:      #8B2011;

    --tinta:      #3B2C16;
    --tinta-fraca:#7C6A4A;
}

/* ==================================================================
   Fundo da página e texto
   ================================================================== */
body {
    background:
        radial-gradient(1300px 520px at 50% -200px, rgba(196, 150, 70, .26), transparent 64%),
        var(--fundo) !important;
    color: var(--tinta) !important;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
}

/*
 * Container achatado: o Revolution enquadra tudo numa caixa com fundo e
 * sombra (bg.png + box-shadow), que fica flutuando sobre o pergaminho e
 * cria um bloco vazio embaixo do rodapé. O protótipo não tem caixa: o
 * conteúdo assenta direto no fundo. Zeramos fundo, sombra e borda.
 */
#container, #content, #mainwidth, .wrapper, body > #container {
    background: transparent none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--tinta);
}

a, a:link, a:visited { color: var(--ouro); }
a:hover, a:active { color: var(--vinho); }

/* ==================================================================
   Blocos: corpo claro (pergaminho)
   ================================================================== */
.tborder,
.tcat,
.trow1, .trow2,
.trow_shaded,
.trow_selected, tr.trow_selected td,
.tfoot,
.post, .post_content, .post_controls,
.latestthreads,
fieldset, fieldset.trow1, fieldset.trow2 {
    background: var(--papel) none !important;
    border-color: var(--linha) !important;
    color: var(--tinta) !important;
}

/* Texto e links dentro dos blocos claros. */
.trow1, .trow2, .tcat, .tfoot, .post_content,
.trow1 a, .trow2 a, .tcat a, .tfoot a {
    color: var(--tinta);
}
/*
 * smalltext e ícones legíveis nas áreas claras. O Revolution pinta
 * .smalltext e .tcat de branco (esperando fundo escuro). Aqui o fundo é
 * claro, então forçamos tinta escura; e devolvemos o claro só onde o
 * fundo é de couro (thead, menu, faixa separadora).
 */
.smalltext, .smalltext a,
.tcat, .tcat a, .tcat .smalltext, .tcat .smalltext a, .tcat strong,
.trow1 .smalltext, .trow2 .smalltext, .tfoot .smalltext,
.trow1 .smalltext a, .trow2 .smalltext a, .tfoot .smalltext a {
    color: var(--tinta-fraca) !important;
}
.tcat, .tcat a:hover, .tcat .smalltext a:hover { color: var(--vinho) !important; }
/* ícones em áreas claras: tinta, não branco */
.tcat .fa, .trow1 .fa, .trow2 .fa, .trow_shaded .fa, .tfoot .fa,
.navigation .fa, .post_content .fa, td.trow1 .fa, td.trow2 .fa,
.pagination .fa { color: var(--tinta-fraca) !important; }
/* áreas escuras mantêm texto e ícones claros */
.thead .smalltext, .thead .smalltext a, .thead .fa,
.trow_sep .smalltext, .trow_sep .smalltext a, .trow_sep .fa,
.menu .fa, .menu .smalltext,
.button .fa, input.button .fa, .mu-join-btn .fa,
.mu-userlinks .fa, .mu-userlinks a.register .fa { color: inherit !important; }
.thead .smalltext, .thead .smalltext a { color: #E9DBBB !important; }

/*
 * Cabeçalhos de bloco: faixa escura de couro com fio dourado no topo.
 * Estes ficam escuros de propósito, para o ritmo pergaminho/couro do
 * protótipo. O `none` mata o thead.png.
 */
/*
 * O MyBB monta os blocos com <table class="tborder" cellspacing="1">, e
 * esse espaçamento deixa uma moldura clara entre a borda e o cabeçalho,
 * então o .thead não encosta nos cantos. Zerando o espaçamento (e a
 * borda própria do thead), a faixa marrom vai de canto a canto.
 */
.tborder { border-spacing: 0 !important; border-collapse: separate !important; }

.thead {
    background: linear-gradient(180deg, var(--escuro-alt), var(--escuro)) !important;
    border: 0 !important;
    border-top: 3px solid var(--ouro-metal) !important;
    color: #F6D98A !important;
    text-shadow: none !important;
    font-family: "Cinzel", serif !important;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.thead a, .thead a:link, .thead a:visited { color: #F6D98A !important; }
.thead a:hover { color: #FFF !important; }
.thead strong { font-weight: 700; }

.trow_sep {
    background: linear-gradient(180deg, var(--escuro-alt), var(--escuro)) !important;
    color: #F6D98A !important;
    font-family: "Cinzel", serif;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ==================================================================
   Barra de topo e cabeçalho
   ================================================================== */
.topbar, #logo, .userbg {
    background: transparent none !important;
    box-shadow: none !important;
}

/*
 * Banner hero: o header reescrito põe a arte do MuManiacos no topo, em
 * largura total, como no protótipo. A moldura escura e o fio dourado
 * embaixo dão o acabamento de couro.
 */
.mu-hero {
    margin: 0 0 0 0;
    line-height: 0;
    border: 1px solid var(--linha-forte);
    border-bottom: 3px solid var(--ouro-metal);
    box-shadow: 0 10px 30px rgba(60, 40, 12, .25);
}
.mu-hero img {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * Menu de navegação: faixa de couro logo abaixo do banner. Os links à
 * esquerda, a barra de usuário (entrar / criar conta) à direita.
 */
.menu {
    display: flex !important;
    flex-wrap: nowrap;            /* desktop: tudo numa linha só */
    align-items: stretch;         /* cada botão estica e preenche a barra */
    gap: 0;
    background: linear-gradient(180deg, var(--escuro-alt), var(--escuro)) !important;
    border: 1px solid var(--linha-forte) !important;
    border-top: 0 !important;
    margin-bottom: 18px;
}
/*
 * Botões: <a> filhos diretos do menu, idêntico ao clara-angular. Como são
 * itens flex de um container com align-items:stretch, cada <a> ocupa toda
 * a altura da barra. Assim o hover e o active preenchem o botão inteiro, e
 * a linha ativa (border-bottom) vai de borda a borda.
 */
.menu > a {
    display: flex;
    align-items: center;
    gap: .5em;
    padding: 15px 22px !important;
    color: #E9DBBB !important;
    font-family: "Cinzel", serif !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .11em;
    text-transform: uppercase;
    white-space: nowrap;
    border-right: 1px solid rgba(201, 181, 138, .14);
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s, background .15s;
}
.menu > a:hover { color: #FBEFC8 !important; background: rgba(201, 181, 138, .08) !important; }
.menu > a.on,
.mu-index #nav-forums { color: #F6D98A !important; border-bottom-color: var(--ouro-metal) !important; }

/*
 * O Font Awesome aqui é um kit em JavaScript: ele troca cada <i> por um
 * <svg> depois que a página carrega. Antes disso o <i> não tem largura,
 * então o menu "pula" quando os ícones aparecem no reload. Reservando a
 * largura do ícone de antemão, o texto não se mexe e o flash some.
 */
.menu > a i[class*="fa-"],
.menu > a .fa,
.menu > a svg {
    display: inline-flex;
    justify-content: center;
    width: 16px;
    min-width: 16px;
}

/* Barra de usuário à direita do menu (login / criar conta / bem-vindo). */
.mu-userbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px;
    margin-left: auto;
    color: #C9B58A;
    font-size: 12px;
    line-height: 1;
}
.mu-userbar a { color: #E9DBBB !important; white-space: nowrap; }
.mu-userbar input.textbox { padding: 4px 8px !important; }

/* Links de usuário (entrar/criar conta e, logado, painel/mensagens/sair). */
.mu-userlinks { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mu-userlinks a {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-family: "Cinzel", serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #E9DBBB !important;
    padding: 7px 12px;
    white-space: nowrap;
}
.mu-userlinks a:hover { color: #FBEFC8 !important; }
.mu-userlinks a.register, .mu-userlinks a.mu-join-btn {
    background: linear-gradient(180deg, var(--ouro-metal), var(--ouro)) !important;
    border: 1px solid var(--ouro-claro);
    color: #2A1C08 !important;
}
.mu-userlinks a.register:hover { filter: brightness(1.08); color: #2A1C08 !important; }
/* estado logado: nome de usuário com destaque, sem inflar a barra */
.mu-member .mu-user-name { color: #F6D98A !important; }
.mu-member .pm_notice, .mu-member #pm_notification { color: #F6D98A !important; }

/*
 * Botão hambúrguer (só no celular). Puro CSS, sem JS: um checkbox
 * escondido guarda o estado e o <label> alterna. No desktop fica oculto.
 */
.mu-nav-check { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.mu-burger { display: none; }

/* Trilha de navegação. */
.navigation { color: var(--tinta-fraca) !important; }
.navigation a { color: var(--ouro) !important; }
.navigation .active { color: var(--tinta) !important; font-weight: 600; }

/* ==================================================================
   Lema hero (index) — a tese da página
   ================================================================== */
.mu-lema {
    text-align: center;
    padding: 40px 20px 8px;
}
.mu-eyebrow {
    font-family: "Cinzel", serif;
    text-transform: uppercase;
    letter-spacing: .32em;
    font-size: 12px;
    font-weight: 700;
    color: var(--ouro-claro);
    margin-bottom: 18px;
}
.mu-lema h1 {
    font-family: "Cinzel", serif;
    font-weight: 900;
    font-size: 46px;
    line-height: 1.12;
    color: var(--tinta);
    margin: 0 0 18px;
    text-shadow: 0 1px 0 rgba(255, 250, 235, .5);
}
.mu-lema h1 b { color: var(--vinho); font-weight: 900; }
.mu-lema p {
    font-family: "Spectral", Georgia, serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--tinta-fraca);
    max-width: 620px;
    margin: 0 auto;
}
.mu-divisor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 26px auto 6px;
    max-width: 440px;
}
.mu-divisor span {
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, var(--linha-forte));
}
.mu-divisor span:last-child { background: linear-gradient(90deg, var(--linha-forte), transparent); }
.mu-divisor em { color: var(--ouro-metal); font-style: normal; font-size: 13px; }

/* ==================================================================
   Colunas do índice: conteúdo + barra lateral
   ================================================================== */
.mu-cols > tbody > tr > .mu-main { width: 72%; padding-right: 22px; }
.mu-cols > tbody > tr > .mu-side { width: 28%; vertical-align: top; }

/* Barra lateral: Status do Servidor. */
.mu-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.mu-stat span { color: var(--tinta-fraca); font-size: 13px; }
.mu-stat b { color: var(--tinta); font-family: "Spectral", serif; font-weight: 600; }
.mu-stat b.mu-on { color: #2E7D3A; }

.mu-join { text-align: center; padding: 16px !important; }
.mu-join-txt { color: var(--tinta-fraca); font-size: 13px; margin-bottom: 12px; }
.mu-join-btn {
    display: inline-block;
    background: linear-gradient(180deg, var(--ouro-metal), var(--ouro)) !important;
    border: 1px solid var(--ouro-claro);
    color: #2A1C08 !important;
    font-family: "Cinzel", serif;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 9px 22px;
    text-transform: uppercase;
    font-size: 12px;
}
.mu-join-btn:hover { filter: brightness(1.08); color: #2A1C08 !important; }
.mu-join-ig { display: block; margin-top: 12px; color: var(--ouro) !important; font-size: 12px; }

/* ==================================================================
   Mensagens
   ================================================================== */
.post_author {
    background: linear-gradient(180deg, #F0E5CC, #E8DBBE) !important;
    border-color: var(--linha) !important;
    color: var(--tinta) !important;
}
.post_author a, .largetext { color: var(--tinta) !important; }
.post_author .smalltext { color: var(--tinta-fraca) !important; }

blockquote {
    background: var(--fundo) none !important;
    border: 1px solid var(--linha) !important;
    border-left: 3px solid var(--ouro-metal) !important;
    color: var(--tinta) !important;
}
.codeblock, .codeblock code {
    background: #2A2620 none !important;
    border-color: #1E1B16 !important;
    color: #DCE5CE !important;
}

/* ==================================================================
   Botões e campos
   ================================================================== */
input.button, .button, button, a.button, .button5, .register, .largebutton {
    background: linear-gradient(180deg, var(--ouro-metal), var(--ouro)) !important;
    border: 1px solid var(--ouro-claro) !important;
    color: #2A1C08 !important;
    text-shadow: none !important;
    border-radius: 0 !important;
    font-weight: 700;
}
input.button:hover, .button:hover, button:hover,
a.button:hover, .button5:hover, .register:hover { filter: brightness(1.08); }

input.textbox, textarea, select {
    background: var(--papel-alt) none !important;
    border: 1px solid var(--linha) !important;
    color: var(--tinta) !important;
    border-radius: 0 !important;
}
input.textbox:focus, textarea:focus, select:focus {
    border-color: var(--ouro-metal) !important;
}

/* ==================================================================
   Cantos retos: o protótipo é angular
   ==================================================================
   O Revolution arredonda quase tudo. Zerar o raio dá o caráter esculpido.
*/
.tborder, .thead, .tcat, .trow1, .trow2, .tfoot,
.post, .post_author, .menu, .navigation, .latestthreads,
input.textbox, textarea, select,
.pagination a, .pagination_current, .pagination span {
    border-radius: 0 !important;
}

/* ==================================================================
   Paginação
   ================================================================== */
.pagination a, .pagination_current, .pagination span {
    background: var(--papel) none !important;
    border: 1px solid var(--linha) !important;
    color: var(--tinta) !important;
}
.pagination a:hover { background: var(--papel-alt) none !important; border-color: var(--ouro-metal) !important; }
.pagination_current {
    background: linear-gradient(180deg, var(--escuro-alt), var(--escuro)) !important;
    border-color: var(--ouro-claro) !important;
    color: #F6D98A !important;
}

/* ==================================================================
   Ícone de status do fórum: a Joia do Caos no lugar do gamepad
   ==================================================================
   O Revolution marca cada fórum com <div class="forum_status forum_on|off">
   <i class="fa fa-gamepad"></i></div>. Escondo o gamepad e piso a joia
   (a mesma imagem do template 2008, já no servidor em /images/joia.gif).
   Fórum com novidade fica dourado e brilhando; sem novidade, dessaturado.
*/
.forum_status {
    background: url(/images/joia.gif) center center / auto 18px no-repeat !important;
    width: 20px !important;
    height: 24px !important;
    min-width: 20px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    image-rendering: pixelated;
}
.forum_status i,
.forum_status .fa,
.forum_status::before,
.forum_status::after { display: none !important; }

.forum_status.forum_on {
    filter: drop-shadow(0 0 4px rgba(255, 176, 60, .6));
}
.forum_status.forum_off,
.forum_status.forum_offlock {
    filter: grayscale(.65) brightness(.92);
    opacity: .78;
}

/* ==================================================================
   Linhas de fórum: joia + título Spectral + contador heráldico
   ================================================================== */
.mu-forum-icon .forum_status {
    width: 30px !important;
    height: 34px !important;
    background-size: auto 26px !important;
    margin: 0 auto;
}
.mu-forum-name strong a {
    font-family: "Spectral", Georgia, serif !important;
    font-size: 17px;
    font-weight: 600;
    color: var(--tinta) !important;
}
.mu-forum-name strong a:hover { color: var(--vinho) !important; }
.mu-forum-name .smalltext { color: var(--tinta-fraca) !important; font-size: 13px; margin-top: 4px; }

.mu-count-num {
    display: block;
    font-family: "Cinzel", serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--vinho);
    line-height: 1;
}
.mu-count-lbl {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--tinta-fraca);
    margin-top: 3px;
}
.mu-forum-last .smalltext { color: var(--tinta-fraca) !important; }
.mu-forum-last a, .mu-forum-last strong a { color: var(--ouro) !important; }

/* ==================================================================
   Abas do perfil (member.php)
   ==================================================================
   O template do perfil traz o CSS das abas embutido com cores escuras
   fixas do Revolution (#181818 / #fff). No tema claro isso vira um bloco
   preto com o conteúdo invisível — parece que "nada aparece". Aqui as
   abas e os painéis passam para o padrão pergaminho, legível.
*/
ul.tabs { border-bottom: 2px solid var(--linha-forte) !important; margin-bottom: 0 !important; }
ul.tabs li {
    background: var(--papel) !important;
    color: var(--tinta) !important;
    border: 1px solid var(--linha) !important;
    border-bottom: none !important;
    font-family: "Cinzel", serif !important;
    font-weight: 700;
    letter-spacing: .04em;
}
ul.tabs li.current {
    background: linear-gradient(180deg, var(--escuro-alt), var(--escuro)) !important;
    color: #F6D98A !important;
    border-color: var(--linha-forte) !important;
}
.tab-content2 {
    background: var(--papel) !important;
    border: 1px solid var(--linha) !important;
    color: var(--tinta) !important;
    padding: 16px !important;
}
.tab-content2 a { color: var(--ouro) !important; }
.tab-content2 a:hover { color: var(--vinho) !important; }
.tab-content2 .trow1, .tab-content2 .trow2, .tab-content2 .tcat { color: var(--tinta) !important; }

/* ==================================================================
   Avisos
   ================================================================== */
.error, .inline_error {
    background: #FDF0EC none !important;
    border: 1px solid #E8C3B6 !important;
    border-left: 3px solid var(--vinho) !important;
    color: #7A2E17 !important;
}
.success_message {
    background: #EEF7EE none !important;
    border-left: 3px solid #2E7D3A !important;
    color: #24632A !important;
}

/* ==================================================================
   Responsivo — celular e tablet
   ==================================================================
   O Revolution é de largura fixa. Aqui soltamos a largura, empilhamos o
   menu, as duas colunas do índice e enxugamos as linhas de fórum.
*/
img { max-width: 100%; height: auto; }
html, body { overflow-x: hidden !important; max-width: 100%; }

#mainwidth {
    width: auto !important;
    max-width: 1400px;
    margin: 0 auto !important;
    padding: 0 16px;
    box-sizing: border-box;
}
#container, #content, .wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
}
/* Nenhuma tabela do MyBB pode estourar a largura da tela. */
.tborder, .mu-cols, table.tborder { max-width: 100% !important; }

@media (max-width: 900px) {
    .mu-lema { padding: 26px 14px 4px; }
    .mu-lema h1 { font-size: 30px; }
    .mu-lema p { font-size: 15px; }
    .mu-eyebrow { letter-spacing: .22em; }

    /* Índice: as duas colunas viram uma só, empilhadas. */
    .mu-cols, .mu-cols > tbody, .mu-cols > tbody > tr { display: block; width: 100% !important; }
    .mu-cols > tbody > tr > .mu-main,
    .mu-cols > tbody > tr > .mu-side {
        display: block;
        width: 100% !important;
        padding: 0 !important;
    }
    .mu-cols > tbody > tr > .mu-side { margin-top: 18px; }
}

@media (max-width: 900px) {
    /* Nada de nowrap no celular/tablet: é o que estica a página além da
       tela (o bloco "Quem está online" com os seletores de idioma/tema).
       Neste ponto o menu também vira hambúrguer, para não estourar em
       linha única nas larguras médias. */
    td, th, .mu-forum-count, .mu-forum-last { white-space: normal !important; }
    select, input.textbox, input.button { max-width: 100% !important; }
    #boardstats table, .mu-cols table, .tborder { width: 100% !important; }

    /* Hambúrguer: mostra a barra "Menu" e esconde a navegação até tocar. */
    .mu-burger {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .55em;
        background: linear-gradient(180deg, var(--escuro-alt), var(--escuro));
        border: 1px solid var(--linha-forte);
        color: #F6D98A;
        font-family: "Cinzel", serif;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        font-size: 13px;
        padding: 15px;
        cursor: pointer;
        margin-bottom: 18px;
        user-select: none;
    }
    .menu { display: none !important; margin-bottom: 0 !important; }
    .mu-nav-check:checked ~ .menu {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 18px !important;
    }
    .mu-nav-check:checked ~ .mu-burger { margin-bottom: 0; }

    /* Itens alinhados à esquerda: os ícones (largura fixa fa-fw) formam
       uma coluna e todo o texto começa no mesmo ponto. */
    .menu > a {
        width: 100%;
        justify-content: flex-start;
        gap: .9em;
        border-right: none !important;
        border-bottom: 1px solid rgba(201, 181, 138, .14) !important;
        padding: 14px 24px !important;
    }
    .menu > a .fa,
    .menu > a svg,
    .menu > a .svg-inline--fa { width: 18px !important; text-align: center; flex: 0 0 18px; }
    .menu > a.on, .mu-index #nav-forums {
        border-bottom-color: rgba(201, 181, 138, .14) !important;
        box-shadow: inset 3px 0 0 var(--ouro-metal);
    }
    .mu-userbar, .mu-userlinks {
        width: 100%;
        justify-content: flex-start;
        padding: 12px 24px;
        border-top: 1px solid rgba(201, 181, 138, .14);
    }

    /* Linha de fórum: esconde a última postagem, encurta o resto. */
    .mu-forum-last { display: none !important; }
    .mu-forum-name strong a { font-size: 15px; }
    .mu-forum-icon .forum_status { width: 24px !important; height: 28px !important; background-size: auto 20px !important; }
    .mu-count-num { font-size: 18px; }

    .mu-lema h1 { font-size: 22px; letter-spacing: 0; }
}

@media (max-width: 430px) {
    .mu-lema h1 { font-size: 18px; line-height: 1.2; }
    .mu-lema .mu-eyebrow { font-size: 10px; letter-spacing: .16em; }
    .mu-forum-count { width: auto !important; }
}