/* ==========================================================================
   MuThrone -- tema "Forja"
   Preto de forja, ouro fundido, e a FENDA como elemento estrutural.
   Sem dependencia de arte externa: tudo aqui e CSS e SVG inline, para o
   site nao ficar refem de asset que ainda nao foi exportado do jogo.
   ========================================================================== */

:root{
  /* --- pretos: nunca #000. O preto do MuThrone e quente, de metal frio --- */
  --breu:        #07060a;
  --carvao:      #0d0b12;
  --ferro:       #14111b;
  --ferro-alto:  #1c1826;
  --fumaca:      #2a2436;

  /* --- ouro: gradiente, nunca chapado. Ouro chapado vira amarelo de aviso --- */
  --ouro-claro:  #f6e3a8;
  --ouro:        #d9b551;
  --ouro-fundo:  #a67c22;
  --ouro-brasa:  #7a4f12;

  /* --- brasa: a cor da fenda, so em acento --- */
  --brasa:       #ff7a2f;
  --brasa-forte: #ff4d1a;

  --texto:       #e8e3f0;
  --texto-fraco: #9b93ae;
  --linha:       rgba(217,181,81,.22);

  --gold-metal: linear-gradient(180deg,
                 var(--ouro-claro) 0%, var(--ouro) 38%,
                 var(--ouro-fundo) 62%, var(--ouro-claro) 100%);

  --serif: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --sans:  'PT Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --raio: 2px;              /* nada de canto redondo: isto e pedra e metal */
  --max:  1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--breu);
  color:var(--texto);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  /* brasa distante subindo do rodape + granulado de forja */
  background-image:
    radial-gradient(1200px 480px at 50% 108%, rgba(255,122,47,.10), transparent 70%),
    radial-gradient(760px 380px at 12% -10%, rgba(217,181,81,.07), transparent 70%);
  background-attachment:fixed;
}

img{ max-width:100%; height:auto; }
a{ color:var(--ouro); text-decoration:none; transition:color .18s ease; }
a:hover{ color:var(--ouro-claro); }

.mt-wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 20px; }

/* --------------------------------------------------------------- tipografia */
h1,h2,h3,.mt-display{
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:.06em;
  margin:0 0 .5em;
  text-transform:uppercase;
}
h1{ font-size:clamp(2rem, 5.2vw, 3.6rem); line-height:1.05; }
h2{ font-size:clamp(1.3rem, 2.6vw, 1.85rem); }
h3{ font-size:1.05rem; letter-spacing:.10em; }

.mt-ouro{
  background:var(--gold-metal);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  /* o fallback importa: sem ele, navegador antigo mostra titulo INVISIVEL */
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .mt-ouro{ color:var(--ouro); -webkit-text-fill-color:var(--ouro); }
}

.mt-sobre{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.30em;
  font-size:.72rem;
  color:var(--ouro-fundo);
  margin-bottom:.9rem;
}

/* -------------------------------------------------------------- a FENDA
   O elemento de marca. Uma costura de metal partido com brasa dentro.
   Usada como separador entre secoes e como sublinhado do titulo.        */
.mt-fenda{
  position:relative; height:2px; border:0; margin:0;
  background:linear-gradient(90deg,
    transparent 0%, var(--ouro-brasa) 12%, var(--ouro) 34%,
    var(--brasa) 50%, var(--ouro) 66%, var(--ouro-brasa) 88%, transparent 100%);
}
.mt-fenda::after{
  content:''; position:absolute; inset:-7px 0 auto 0; height:16px;
  background:radial-gradient(60% 100% at 50% 50%, rgba(255,90,20,.42), transparent 72%);
  pointer-events:none;
}
.mt-fenda--curta{ width:104px; margin:1.1rem 0 1.6rem; }

/* ------------------------------------------------------------------ topo */
.mt-topo{
  position:sticky; top:0; z-index:40;
  background:rgba(7,6,10,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
}
.mt-topo-in{ display:flex; align-items:center; gap:24px; height:70px; }

.mt-marca{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
/* a marca do topo deixou de ser <svg> inline e virou <img> do ativo real:
   as regras dela vivem na secao "A MARCA" no fim deste arquivo. */
.mt-marca-nome{
  font-family:var(--serif); font-size:1.22rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; line-height:1;
}

.mt-nav{ display:flex; gap:20px; margin-left:auto; align-items:center; flex-wrap:wrap;
         justify-content:flex-end; }
/* medido no print de 10/09: com 5 links + botao + seletor de idioma, o gap de
   26px estourava os 1180px do container e o seletor saia CORTADO na borda
   direita. O defeito so aparece no print; lendo o CSS ele nao existe.

   12/09: o item "Busca" quis entrar e o seletor de idioma caiu para uma SEGUNDA
   LINHA dentro de um cabecalho de altura fixa de 70px. MEDIDO em 1440px: a
   barra oferece 910px e os itens somavam 964px, ou seja faltavam 54px. O gap
   NAO foi mexido (20px -> 15px daria so 50px e ainda apertaria a barra
   inteira); o que saiu foi o link "Inicio", de 47px + 20px de intervalo = 67px,
   que era o unico item REDUNDANTE do menu -- o brasao ao lado ja leva para a
   home e ja carrega o rotulo "ir para a pagina inicial" para leitor de tela.
   Trocar redundancia por diferencial cabe sem encolher nada. */
.mt-nav a{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-fraco); position:relative; padding:6px 0;
}
.mt-nav a:hover, .mt-nav a[aria-current="page"]{ color:var(--ouro-claro); }
/* o botao dentro do menu tem de vencer a cor de link do menu, senao sai
   OURO SOBRE OURO e some. Achado no primeiro print, nao na leitura do CSS. */
.mt-nav a.mt-btn--ouro{ color:#1a1206; letter-spacing:.14em; }
.mt-nav a.mt-btn--ouro:hover{ color:#1a1206; }
.mt-nav a[aria-current="page"]::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold-metal);
}

.mt-menu-btn{
  display:none; margin-left:auto; background:none; border:1px solid var(--linha);
  color:var(--ouro); padding:8px 12px; font-size:1rem; cursor:pointer; border-radius:var(--raio);
}

/* --------------------------------------------------------------- botoes */
.mt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--serif); font-size:.82rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:14px 30px; border-radius:var(--raio); border:1px solid transparent;
  cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.mt-btn--ouro{
  background:var(--gold-metal); color:#1a1206;
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset, 0 10px 30px -12px rgba(217,181,81,.6);
}
.mt-btn--ouro:hover{ transform:translateY(-1px); filter:brightness(1.06); color:#1a1206; }
.mt-btn--linha{ background:transparent; border-color:var(--linha); color:var(--ouro); }
.mt-btn--linha:hover{ border-color:var(--ouro); background:rgba(217,181,81,.07); }

/* ---------------------------------------------------------------- heroi */
.mt-heroi{ position:relative; overflow:hidden; padding:96px 0 84px; }
.mt-heroi::before{
  /* a fenda vertical de forja, atras do conteudo */
  content:''; position:absolute; top:-10%; bottom:-10%; left:50%;
  width:min(760px, 92vw); transform:translateX(-50%);
  /* o conic-gradient que estava aqui desenhava uma ARESTA VERTICAL visivel a
     esquerda do heroi (parecia um retangulo colado na tela). Trocado por
     gradientes simetricos: a fenda de forja tem de ser uma COLUNA de luz
     centrada, sem borda. Defeito visto no print, nao na leitura do CSS. */
  background:
    radial-gradient(closest-side, rgba(255,122,47,.15), transparent 72%),
    linear-gradient(90deg, transparent 0%, rgba(217,181,81,.05) 38%,
                    rgba(217,181,81,.11) 50%, rgba(217,181,81,.05) 62%, transparent 100%);
  filter:blur(26px); pointer-events:none;
}
.mt-heroi-in{ position:relative; text-align:center; }
.mt-heroi h1{ margin-bottom:.35em; }
.mt-heroi p.mt-lede{
  max-width:640px; margin:0 auto 2rem; color:var(--texto-fraco); font-size:1.06rem;
}
.mt-heroi-acoes{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* .mt-brasao-grande saiu junto com o <symbol> generico: o heroi agora usa
   .mt-logo-heroi, com o LOCKUP inteiro (trono + letreiro). */

/* ------------------------------------------------------- barra de status */
.mt-status{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  /* o fundo e o CARVAO, nao a linha dourada: com 5 itens em 2 colunas sobra
     uma celula, e com fundo dourado a sobra parecia um bloco quebrado no
     celular. Visto no print de 390px. */
  gap:1px; background:var(--carvao);
  box-shadow:0 0 0 1px var(--linha) inset;
  border:1px solid var(--linha); border-radius:var(--raio);
  margin-top:52px; overflow:hidden;
}
.mt-status-item{
  background:var(--carvao); padding:20px 16px; text-align:center;
  box-shadow:0 0 0 1px var(--linha);
}
.mt-status-valor{
  font-family:var(--serif); font-size:1.9rem; font-weight:700; line-height:1;
  display:block; margin-bottom:6px;
}
.mt-status-rot{
  font-size:.66rem; letter-spacing:.20em; text-transform:uppercase; color:var(--texto-fraco);
}
.mt-status-item--vivo .mt-status-valor{ color:#7ee2a8; }
/* espaco em branco HONESTO: numero que nao medimos nao vira numero inventado */
.mt-status-valor--vazio{ color:var(--fumaca); }

/* ----------------------------------------------------------- placas/cards */
.mt-secao{ padding:78px 0; }
.mt-secao-cab{ margin-bottom:34px; }
.mt-secao-cab--centro{ text-align:center; }
.mt-secao-cab--centro .mt-fenda--curta{ margin-left:auto; margin-right:auto; }

.mt-placa{
  position:relative;
  background:linear-gradient(180deg, var(--ferro) 0%, var(--carvao) 100%);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:26px;
}
.mt-placa::before{
  /* bisel: 1px de luz no topo, como chapa gravada */
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(246,227,168,.42), transparent);
}
.mt-placa--destaque{ border-color:rgba(217,181,81,.42); }

.mt-grade{ display:grid; gap:20px; }
.mt-grade--3{ grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
.mt-grade--2{ grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); }

/* ------------------------------------------------------------ taxas x50 */
.mt-taxa-num{
  font-family:var(--serif); font-size:2.6rem; font-weight:700; line-height:1;
}
.mt-taxa-lista{ list-style:none; margin:16px 0 0; padding:0; }
.mt-taxa-lista li{
  display:flex; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px dashed rgba(217,181,81,.14);
  font-size:.92rem;
}
.mt-taxa-lista li:last-child{ border-bottom:0; }
.mt-taxa-lista b{ color:var(--ouro-claro); font-weight:700; }

.mt-selo{
  display:inline-block; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brasa); border:1px solid rgba(255,122,47,.4);
  padding:4px 10px; border-radius:var(--raio); margin-bottom:14px;
}

/* -------------------------------------------------------------- rankings */
.mt-abas{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
.mt-aba{
  background:transparent; border:1px solid var(--linha); color:var(--texto-fraco);
  font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:9px 16px; border-radius:var(--raio); cursor:pointer; transition:.16s ease;
}
.mt-aba:hover{ color:var(--ouro-claro); border-color:rgba(217,181,81,.4); }
.mt-aba[aria-selected="true"]{ background:rgba(217,181,81,.12); color:var(--ouro-claro); border-color:var(--ouro-fundo); }

/* ------------------------------------------------------- painel de conta */
/* `.mt-conta-nav` reaproveita o MESMO `.mt-abas`/`.mt-aba` de cima, so que
   como link de ANCORA pra secao (nao ha `aria-selected`: nada aqui troca de
   painel, e so pulo de rolagem numa pagina so). `.mt-conta-secao` da o
   respiro entre os cartoes empilhados (antes eram um `<div>` so) e o
   `scroll-margin-top` evita que o header STICKY (70px) cubra o titulo da
   secao quando o link de cima e clicado. */
.mt-conta-secao{ scroll-margin-top:104px; }
.mt-conta-secao + .mt-conta-secao{ margin-top:20px; }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

.mt-tabela-rolagem{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.mt-tabela{ width:100%; border-collapse:collapse; min-width:520px; }
.mt-tabela th{
  text-align:left; font-family:var(--sans); font-size:.66rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--texto-fraco);
  padding:10px 14px; border-bottom:1px solid var(--linha); white-space:nowrap;
}
.mt-tabela td{
  padding:13px 14px; border-bottom:1px solid rgba(217,181,81,.09); font-size:.94rem;
}
.mt-tabela tbody tr:hover{ background:rgba(217,181,81,.045); }
.mt-pos{
  font-family:var(--serif); font-weight:700; color:var(--texto-fraco); width:52px;
}
.mt-pos--1{ color:var(--ouro-claro); } .mt-pos--2{ color:#cfd2dd; } .mt-pos--3{ color:#c98a52; }

/* ---------------------------------------------------------- multiplataforma */
.mt-plat{ display:flex; align-items:flex-start; gap:16px; }
.mt-plat svg{ flex:0 0 auto; width:30px; height:30px; color:var(--ouro); }
.mt-plat h3{ margin-bottom:.35em; }
.mt-plat p{ margin:0; color:var(--texto-fraco); font-size:.93rem; }

/* --------------------------------------------------------------- rodape */
.mt-rodape{ border-top:1px solid var(--linha); padding:52px 0 34px; margin-top:40px; }
.mt-rodape-in{ display:flex; flex-wrap:wrap; gap:34px; justify-content:space-between; }
.mt-rodape-links{ display:flex; gap:22px; flex-wrap:wrap; }
.mt-rodape a{ color:var(--texto-fraco); font-size:.86rem; }
.mt-rodape a:hover{ color:var(--ouro); }
.mt-legal{
  width:100%; margin-top:30px; padding-top:22px; border-top:1px solid rgba(217,181,81,.10);
  color:var(--texto-fraco); font-size:.76rem; line-height:1.7;
}

/* ------------------------------------------------------------ utilitarios */
.mt-aviso{
  border:1px dashed rgba(255,122,47,.42); background:rgba(255,122,47,.05);
  color:var(--texto-fraco); padding:14px 18px; border-radius:var(--raio); font-size:.88rem;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.mt-pular{
  position:absolute; left:-9999px; top:0; background:var(--ouro); color:#1a1206;
  padding:10px 16px; z-index:100;
}
.mt-pular:focus{ left:8px; top:8px; }
:focus-visible{ outline:2px solid var(--ouro); outline-offset:3px; }

/* ------------------------------------------------------------- responsivo */
@media (max-width: 860px){
  .mt-nav{
    display:none; position:absolute; top:70px; left:0; right:0;
    flex-direction:column; gap:0; background:var(--carvao);
    border-bottom:1px solid var(--linha); padding:8px 20px 16px;
  }
  .mt-nav.aberto{ display:flex; }
  .mt-nav a{ padding:13px 0; border-bottom:1px solid rgba(217,181,81,.10); }
  .mt-menu-btn{ display:block; }
  .mt-heroi{ padding:60px 0 54px; }
  .mt-secao{ padding:52px 0; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* Este tema e escuro por decisao de marca (forja), nao por preferencia do
   sistema: nao existe variante clara, e por isso o fundo e sempre explicito. */

/* ==========================================================================
   MuThrone -- pecas acrescentadas em 10/09/2026, quando o site foi ligado
   na API de verdade: seletor de idioma, carimbo de dado velho, notas,
   tags de noticia, artigo e botao desabilitado.
   ========================================================================== */

/* --- seletor de idioma: tres letras, sem bandeirinha.
       Bandeira representa PAIS, e idioma nao e pais (PT nao e so Portugal). --- */
.mt-idiomas{display:inline-flex;gap:2px;border:1px solid var(--linha);padding:2px;flex:0 0 auto}
/* ‼ A especificidade importa aqui: `.mt-nav a` (0,1,1) tem `padding:6px 0` e
   VENCE um `.mt-idioma` (0,1,0). No primeiro print os tres idiomas sairam
   colados e ilegiveis, um por cima do outro. Por isso o seletor abaixo e
   `.mt-nav .mt-idioma`, e nao so `.mt-idioma`. Achado no PRINT: lendo o CSS
   as duas regras parecem nao se falar. */
.mt-nav .mt-idioma,
.mt-idioma{display:inline-block;padding:5px 10px;font-size:.74rem;letter-spacing:.1em;
           color:var(--texto-fraco);text-decoration:none;font-weight:700;line-height:1.2}
.mt-nav .mt-idioma:hover,
.mt-idioma:hover{color:var(--ouro-claro);background:rgba(217,181,81,.08)}
.mt-nav .mt-idioma--ativo,
.mt-idioma--ativo{background:var(--gold-metal);color:var(--breu)}

/* --- carimbo: "estes numeros sao da ultima leitura que deu certo".
       Amarelo de aviso, nunca vermelho: nao e erro, e honestidade. --- */
.mt-carimbo{margin:12px 0 0;padding:9px 12px;border-left:2px solid var(--brasa);
            background:rgba(255,122,47,.07);color:var(--texto-fraco);font-size:.85rem}
/* --- aviso de idioma: "este texto foi publicado em portugues".
       Mesma caixa do carimbo (e o mesmo tipo de frase: honestidade, nao erro),
       so que ACIMA do texto que ela descreve, nao abaixo -- avisar depois de a
       pessoa ter lido nao avisa nada. O link herda o ouro do resto do site. --- */
.mt-carimbo--idioma{margin:0 0 14px}
.mt-carimbo--idioma a{color:var(--ouro);text-decoration:underline}

/* --- nota de rodape de secao --- */
.mt-nota{margin:14px 0 0;color:var(--texto-fraco);font-size:.8rem;line-height:1.55}

/* --- noticia --- */
.mt-tags{margin:.7rem 0 0;display:flex;flex-wrap:wrap;gap:6px}
.mt-tag{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
        border:1px solid var(--linha);padding:2px 7px;color:var(--texto-fraco)}
.mt-artigo{line-height:1.75}
.mt-artigo h2,.mt-artigo h3{font-family:var(--serif);color:var(--ouro-claro);margin:1.4rem 0 .6rem}
.mt-artigo p{margin:0 0 1rem}
.mt-artigo ul,.mt-artigo ol{margin:0 0 1rem 1.2rem}
.mt-artigo a{color:var(--ouro)}
.mt-artigo blockquote{margin:1rem 0;padding:.6rem 1rem;border-left:2px solid var(--ouro-brasa);
                      color:var(--texto-fraco)}
.mt-artigo code{background:var(--ferro);padding:1px 5px;font-size:.9em}

/* --- botao desabilitado: o download que a API disse que NAO existe ainda.
       Cinza e sem cursor de link, para ninguem clicar achando que abre. --- */
.mt-btn--off{opacity:.45;cursor:not-allowed;pointer-events:none;border-color:var(--fumaca);
             color:var(--texto-fraco)}

/* --- cartao de plataforma em coluna (pagina de download) --- */
.mt-plat--vertical{display:block}
.mt-plat--vertical svg{width:28px;height:28px;margin-bottom:8px}

@media (max-width:720px){
  .mt-idiomas{margin:12px 0 0;align-self:flex-start}
}

/* ==========================================================================
   MuThrone -- A MARCA (12/09/2026)

   Ate hoje o site nao carregava NENHUM arquivo de imagem da marca: o brasao do
   topo, do heroi e do rodape era um <symbol> SVG desenhado a mao -- um escudo
   generico que nao existe em lugar nenhum do produto. O jogador via a marca de
   verdade (trono coroado + letreiro) na abertura do jogo e no launcher, e
   chegava ao site achando outra coisa.

   O ativo real e templates/muthrone/img/, derivado por deploy/gerar-kit-marca.py
   do mesmo PNG que o cliente iOS usa. Estas regras so o COLOCAM na tela.
   ========================================================================== */

/* --- marca no topo e no rodape ------------------------------------------ */
/* 38px de ALTURA, largura automatica: o brasao e mais largo do que alto
   (540x401), e travar os dois lados em 34px como a regra antiga fazia com o
   <svg> esmagaria o trono. */
.mt-marca img{
  display:block; height:38px; width:auto;
  /* ALINHAMENTO OTICO: o letreiro "MUTHRONE" e caixa alta sem descida, entao o
     centro geometrico do brasao cai ABAIXO do centro visual do texto. Os 2px
     sobem o brasao ate as duas pecas lerem como uma linha so. Conferido no
     print do topo em 1440, nao na leitura do CSS. */
  transform:translateY(-2px);
  /* o brasao ja e a peca quente da barra; um brilho de leve integra ele ao
     fundo escuro em vez de parecer adesivo colado */
  filter:drop-shadow(0 0 10px rgba(217,181,81,.18));
  transition:height .22s ease;
}
.mt-marca:hover img{ filter:drop-shadow(0 0 14px rgba(255,122,47,.35)); }

/* --- topo COMPACTO quando a pagina rola ---------------------------------- */
/* A barra e sticky: ela acompanha o jogador a pagina inteira. Em 70px de altura
   fixa ela come 9% da tela de um celular durante toda a rolagem. Compacta, cai
   para 56px e o brasao para 28px -- a marca continua presente e devolve a
   altura para o conteudo.
   Nao ha JS de animacao aqui: o script do rodape so troca UMA classe quando a
   rolagem passa de 60px. A transicao e do CSS, e ela morre sozinha em
   prefers-reduced-motion pela regra global mais acima. */
.mt-topo{ transition:background .22s ease, box-shadow .22s ease; }
.mt-topo-in{ transition:height .22s ease; }
.mt-topo--compacto{
  background:rgba(7,6,10,.94);
  box-shadow:0 6px 24px rgba(0,0,0,.45);
}
.mt-topo--compacto .mt-topo-in{ height:56px; }
.mt-topo--compacto .mt-marca img{ height:28px; }
.mt-topo--compacto .mt-marca-nome{ font-size:1.06rem; }
.mt-marca-nome{ transition:font-size .22s ease; }
/* o menu do celular abre ancorado em `top:70px`; com a barra compacta ele
   descolaria 14px da barra e ficaria uma faixa preta no meio */
@media (max-width:860px){
  .mt-topo--compacto .mt-nav{ top:56px; }
}

/* --- lockup do heroi ----------------------------------------------------- */
.mt-logo-heroi{
  display:block; margin:0 auto 22px;
  width:min(380px, 72vw); height:auto;
  /* o mesmo calor da fenda de forja que ja existe atras do heroi, agora
     encostando na arte: sem isso o logo fica "recortado e colado" sobre o fundo */
  filter:drop-shadow(0 10px 34px rgba(255,122,47,.20))
         drop-shadow(0 0 12px rgba(217,181,81,.14));
}

/* --- marca d'agua do heroi ----------------------------------------------- */
/* O brasao GIGANTE atras do bloco, quase apagado. Regras que ele obedece:
   - opacidade 0.05 e um `mask` que desvanece nas bordas, entao ele nunca
     encosta no texto com contraste suficiente para atrapalhar leitura;
   - aria-hidden por natureza (e background, nao entra na arvore de
     acessibilidade e nao e lido por ninguem);
   - `pointer-events:none` para nao roubar clique dos botoes;
   - fica ATRAS (`z-index:0`) do `.mt-heroi-in`, que ja e `position:relative`.
   Medido no proprio print: com 0.09 o trono competia com o lede e o texto
   perdia o AA; com 0.05 ele so da profundidade. */
.mt-heroi::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  top:50%; left:50%; transform:translate(-50%,-46%);
  width:min(760px, 128vw); aspect-ratio:540/401;
  /* ‼ MEDIDO em 12/09/2026 no site NO AR, com cache desligado: esta marca
     d'agua baixava `brasao-512.webp`, 91.406 B transferidos -- 43% de TODO o
     peso da home -- para ser desenhada com opacity .03 e ainda por baixo de um
     mask que apaga as bordas. Nao existe olho que veja a diferenca entre 512 e
     192 px de fonte a 3% de opacidade; existe conexao de celular que sente
     71 KB. Trocado pelo 192 (20.180 B): -78% no arquivo, zero diferenca na
     tela. O .png continua como reserva para quem nao aceita webp. */
  background-image:url(../img/brasao-192.png);
  background-image:image-set(url(../img/brasao-192.webp) type("image/webp"),
                             url(../img/brasao-192.png)  type("image/png"));
  background-size:contain; background-repeat:no-repeat; background-position:center;
  opacity:.05;
  -webkit-mask-image:radial-gradient(closest-side, #000 45%, transparent 88%);
          mask-image:radial-gradient(closest-side, #000 45%, transparent 88%);
}
/* no celular a marca d'agua sai: em 400px ela ocupa a tela inteira atras de um
   texto que ja e o unico conteudo visivel, e a economia de 89 KB vale mais do
   que o efeito. */
@media (max-width:600px){
  .mt-heroi::after{ display:none; }
}

/* --- estado vazio com a marca -------------------------------------------- */
/* Toda tela de "nao consegui ler isso agora" do site passa por mtAviso().
   A moldura tracejada continua a mesma; o que muda e o brasao acima da frase. */
.mt-aviso--marca{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:12px; padding:30px 22px;
}
.mt-aviso--marca img{
  width:56px; height:auto; opacity:.5;
  filter:drop-shadow(0 0 10px rgba(217,181,81,.16));
}
.mt-aviso--marca p{ margin:0; }

/* ==========================================================================
   MuThrone -- HEROI PARTIDO (12/09/2026)

   O heroi antigo era uma coluna centralizada: marca, mote, dois botoes e uma
   faixa de numeros. Bonito e vazio. A medicao de 12 concorrentes disse por que
   ele nao trabalhava: 12 de 12 tem ARTE no heroi e nos tinhamos zero, e a nossa
   home era a mais CURTA da amostra (3.621 px contra mediana ~6.900).

   Este bloco desenha a versao nova. Tres decisoes valem registro:

   1. A ARTE E A PROPRIA MARCA, e nao custa nem um arquivo novo. O painel da
      direita e a FENDA (SVG inline, ~1,2 KB) com a marca que ja era o LCP da
      home pousada em cima. Continuamos com ZERO imagem de cenario, que e a
      vantagem de peso que nos deixa em 13,2 KB contra sites que carregam 85
      fundos.
   2. O UNICO MOVIMENTO DA PAGINA E O RESPIRO DA BRASA. Nada de biblioteca de
      particula (que e como os concorrentes fazem): tres <i> e dois keyframes.
      `prefers-reduced-motion` ja e respeitado pela regra global do tema, e
      estas animacoes morrem junto.
   3. OURO NAO E DIFERENCIAL. Ouro/ambar/laranja e o acento de 9 dos 12, e a
      Cinzel e a fonte de titulo de outros 3. O que nos separa tem de ser
      composicao e conteudo, e nao mais brilho.
   ========================================================================== */

/* --- a grade -------------------------------------------------------------- */
.mt-heroi-in{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
  text-align:left;                 /* era center: o texto agora e uma coluna */
  /* 74vh deixava o painel 280px mais alto que a coluna de texto, e a sobra
     aparecia como um vazio morto debaixo dos botoes. Visto no print, nao na
     leitura do CSS. */
  min-height:min(66vh,600px);
}
.mt-heroi__texto{ position:relative; z-index:1; }
.mt-heroi h1{ margin-bottom:.42em; }
/* o lede deixa de ser centralizado e ganha medida de leitura */
.mt-heroi p.mt-lede{ max-width:46ch; margin:0 0 2rem; }
.mt-heroi-acoes{ justify-content:flex-start; }

/* linha discreta embaixo dos botoes: o ranking sai do BOTAO e vira link, e o
   selo de plataforma ganha lugar fixo em vez de viver solto no meio da pagina */
.mt-heroi__rodape{
  margin:1.4rem 0 0; font-size:.84rem; color:var(--texto-fraco);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
}
.mt-heroi__sep{ color:var(--ouro-brasa); }
.mt-heroi__plat{ letter-spacing:.04em; }

/* --- botao alto, com a linha de apoio ------------------------------------- */
/* O <small> dentro do botao e o que faz o botao DECLARAR o peso e a plataforma
   do download. Um unico site dos 12 faz isso ("DOWNLOAD 1.20 GB") e e o unico
   em que da para decidir antes de clicar. */
.mt-btn--alto{ flex-direction:column; gap:3px; padding:13px 28px; line-height:1.2; }
.mt-btn--alto small{
  font-family:var(--sans); font-size:.63rem; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; opacity:.78;
}
.mt-btn--ouro.mt-btn--alto small{ color:#3a2a08; opacity:.85; }

/* --- o painel da forja ---------------------------------------------------- */
.mt-forja{
  position:relative; z-index:1;
  /* altura PROPRIA e centralizada, em vez de `stretch`: esticada ate a altura
     da linha da grade ela virava um retangulo alto demais para o texto ao lado */
  align-self:center; height:clamp(340px,40vw,500px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:34px 26px 22px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--ouro) 26%, transparent);
  border-radius:var(--raio);
  /* fundo de forja: o calor no meio, o metal frio nas bordas */
  background:
    radial-gradient(120% 78% at 52% 48%, rgba(255,122,47,.17), transparent 64%),
    linear-gradient(180deg,#120c12 0%, var(--breu) 100%);
  /* color-mix e recente; o filete dourado do resto do tema e o fallback */
  border-color:var(--linha);
}
@supports (border-color: color-mix(in srgb, red 20%, transparent)){
  .mt-forja{ border-color:color-mix(in srgb, var(--ouro) 26%, transparent); }
}
/* o bisel de 1px no topo, o mesmo de toda placa do tema */
.mt-forja::before{
  content:''; position:absolute; inset:0 0 auto 0; height:1px; z-index:3;
  background:linear-gradient(90deg, transparent, rgba(246,227,168,.45), transparent);
}

.mt-forja__fenda{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.mt-forja__nucleo{ filter:drop-shadow(0 0 20px rgba(255,122,47,.5)); }

/* RESPIRO DA BRASA. Duas camadas com a mesma animacao e atraso diferente: e o
   descompasso entre halo e nucleo que faz parecer fogo, e nao um `opacity`
   piscando. 5,5 s e devagar de proposito -- animacao rapida em pagina de
   leitura cansa e puxa a atencao para longe do CTA. */
@keyframes mt-respira{
  0%,100%{ opacity:.70; transform:scaleX(1);    }
  50%    { opacity:1;   transform:scaleX(1.07); }
}
.mt-forja__halo,
.mt-forja__nucleo{ transform-origin:50% 50%; animation:mt-respira 5.5s ease-in-out infinite; }
.mt-forja__nucleo{ animation-delay:.9s; }

/* FAISCAS. Tres pontos subindo pela fenda, cada um com trajeto e tempo
   proprios. Custo: 3 elementos vazios e 1 keyframe. Os concorrentes fazem isso
   com biblioteca de particula (particles.js e afins), que e um .js de 20 a
   80 KB e trabalho de CPU no celular do jogador. */
.mt-faisca{
  position:absolute; z-index:1; left:50%; bottom:8%;
  width:3px; height:3px; border-radius:50%;
  background:var(--ouro-claro);
  box-shadow:0 0 8px 2px rgba(255,122,47,.75);
  opacity:0; pointer-events:none;
}
@keyframes mt-sobe{
  0%  { opacity:0;   transform:translate(0,0)              scale(.6); }
  12% { opacity:.95; }
  70% { opacity:.55; }
  100%{ opacity:0;   transform:translate(var(--dx,6px),-260px) scale(.2); }
}
.mt-faisca--1{ --dx:-14px; animation:mt-sobe 6.5s linear infinite;       margin-left:-9px; }
.mt-faisca--2{ --dx: 16px; animation:mt-sobe 8.2s linear 1.9s infinite;  margin-left: 6px; }
.mt-faisca--3{ --dx: -6px; animation:mt-sobe 7.1s linear 3.8s infinite;  margin-left:13px; }

/* a marca DENTRO do painel: e ela que nasce da fenda */
.mt-forja picture{ position:relative; z-index:2; display:block; }
.mt-logo-heroi{
  display:block; margin:0 auto;
  width:min(256px, 62vw); height:auto;
  filter:drop-shadow(0 12px 38px rgba(255,122,47,.26))
         drop-shadow(0 0 14px rgba(217,181,81,.16));
}

/* PLACA DE ESTADO. Responde a objecao que nenhum dos 12 responde: "esse
   servidor ainda esta de pe?". O ponto verde so acende com `online === true`,
   que sai de uma sonda TCP na porta do GameServer. */
.mt-forja__placa{
  position:relative; z-index:2; margin:0;
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px; border:1px solid var(--linha); border-radius:var(--raio);
  background:rgba(7,6,10,.62); backdrop-filter:blur(3px);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-fraco);
}
.mt-forja__placa b{ color:var(--texto); font-weight:700; }
.mt-forja__pino{
  width:7px; height:7px; border-radius:50%; background:var(--fumaca); flex:0 0 auto;
}
.mt-forja__placa--viva .mt-forja__pino{
  background:#7ee2a8; box-shadow:0 0 0 0 rgba(126,226,168,.55);
  animation:mt-pulsa 2.6s ease-out infinite;
}
.mt-forja__placa--viva b{ color:#7ee2a8; }
/* leitura velha: o pino fica AMBAR e parado, e a placa ganha o mesmo tracejado
   da barra de status. Nenhuma parte da tela pode parecer viva com dado morto. */
.mt-forja__placa--velha{ border-style:dashed; border-color:rgba(255,122,47,.45); }
.mt-forja__placa--velha .mt-forja__pino{ background:var(--brasa); animation:none; box-shadow:none; }
.mt-forja__placa--velha b{ color:var(--texto-fraco); }
@keyframes mt-pulsa{
  0%  { box-shadow:0 0 0 0   rgba(126,226,168,.5); }
  70% { box-shadow:0 0 0 7px rgba(126,226,168,0);  }
  100%{ box-shadow:0 0 0 0   rgba(126,226,168,0);  }
}

/* --- pe do heroi: barra de status, selo de frescor e ponte do celular ----- */
.mt-heroi-pe{ position:relative; z-index:1; }
.mt-heroi-pe .mt-status{ margin-top:40px; }

/* SELO DE FRESCOR: a etiqueta que o llms.txt promete por escrito desde 10/09 e
   que a tela nunca mostrou -- em 12/09 a API ficou 7h28min morta e a home
   seguiu exibindo numero velho com cara de vivo. Quando ele aparece, a barra
   inteira desbota: a marca fica NOS NUMEROS, nao so numa frase. */
.mt-status--velho .mt-status-item{ opacity:.62; }
.mt-status--velho{ border-style:dashed; border-color:rgba(255,122,47,.45); }
.mt-frescor{
  display:flex; align-items:center; gap:9px;
  margin:12px 0 0; padding:9px 13px;
  border-left:2px solid var(--brasa); background:rgba(255,122,47,.07);
  color:var(--texto-fraco); font-size:.85rem;
}
.mt-frescor__pino{
  width:7px; height:7px; border-radius:50%; background:var(--brasa); flex:0 0 auto;
}

/* PONTE PARA O CELULAR. Diferencial real e barato: 0 de 12 concorrentes tem
   cliente movel proprio; nos temos iOS e Android. O QR e SVG inline. */
.mt-ponte{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  margin-top:22px; padding:20px 22px;
  border:1px solid var(--linha); border-radius:var(--raio);
  background:linear-gradient(180deg, var(--ferro) 0%, var(--carvao) 100%);
}
.mt-ponte__qr{ flex:0 0 auto; line-height:0; }
.mt-qr{
  display:block; width:108px; height:108px; border-radius:var(--raio);
  box-shadow:0 0 0 1px rgba(217,181,81,.35), 0 8px 26px -14px rgba(217,181,81,.7);
}
.mt-ponte__texto{ flex:1 1 260px; }
.mt-ponte__texto h2{ font-size:1.05rem; margin:0 0 .35rem; }
.mt-ponte__texto p{ margin:0; color:var(--texto-fraco); font-size:.9rem; max-width:56ch; }
/* no desktop o QR JA e o caminho; o botao so existe para quem esta no celular */
.mt-ponte__botao{ display:none; margin-top:14px; }

/* --- a marca d'agua do heroi ---------------------------------------------- */
/* Ela foi desenhada quando o heroi era uma coluna so e ficava exatamente atras
   do texto. Com a grade partida, a marca de verdade mora no painel da direita,
   entao a d'agua desce de .05 para .03 e passa a ser so textura de fundo. */
.mt-heroi::after{ opacity:.03; }

/* --- celular -------------------------------------------------------------- */
@media (max-width:880px){
  .mt-heroi-in{
    grid-template-columns:1fr; min-height:auto; text-align:center;
    gap:26px;
  }
  .mt-heroi p.mt-lede{ max-width:52ch; margin-left:auto; margin-right:auto; }
  .mt-heroi-acoes{ justify-content:center; }
  .mt-heroi__rodape{ justify-content:center; }
  /* a fenda vem PRIMEIRO e vira uma faixa: bloco alto de decoracao no topo do
     celular empurra o CTA para fora da tela, e o CTA e o que a pagina existe
     para entregar */
  .mt-forja{
    order:-1; height:auto; min-height:240px; padding:22px 18px 16px; gap:14px;
  }
  .mt-btn--alto{ flex:1 1 220px; }
}

@media (max-width:600px){
  .mt-forja{ height:auto; min-height:210px; }
  /* QR em celular e enfeite: quem ja esta no telefone precisa de um TOQUE,
     nao de uma camera apontada para a propria tela. */
  .mt-ponte__qr{ display:none; }
  .mt-ponte__botao{ display:inline-flex; }
  .mt-ponte{ padding:18px; }
  .mt-heroi__rodape{ flex-direction:column; gap:6px; }
  .mt-heroi__sep{ display:none; }
}

/* ==========================================================================
   12/09/2026 -- MESA POSTA: menu de 8 itens, cronometro de evento e selo de
   vida. Cada bloco abaixo tem a medicao que o justifica no comentario.
   ========================================================================== */

/* ------------------------------------------------------------------- menu
   ‼ O menu foi de 4 para 8 itens (mediana da amostra: 9). Duas consequencias
   que so aparecem no PRINT, nunca na leitura do CSS:
   1. a barra nao cabe mais em 1024 px, entao o botao de menu passa a aparecer
      a partir dai (era 860 px);
   2. entre 1025 e 1180 px ela ainda pode quebrar em duas linhas. Cabecalho com
      ALTURA FIXA corta a segunda linha em silencio; com `min-height` ele
      cresce. Preferimos crescer a cortar. */
.mt-topo-in{ gap:18px; height:auto; min-height:70px; }
.mt-nav{ gap:15px; }
.mt-topo--compacto .mt-topo-in{ height:auto; min-height:56px; }

@media (max-width:1024px){
  .mt-nav{
    display:none; position:absolute; top:70px; left:0; right:0;
    flex-direction:column; gap:0; background:var(--carvao);
    border-bottom:1px solid var(--linha); padding:8px 20px 16px;
  }
  .mt-nav.aberto{ display:flex; }
  .mt-nav a{ padding:13px 0; border-bottom:1px solid rgba(217,181,81,.10); }
  .mt-menu-btn{ display:block; }
  .mt-topo--compacto .mt-nav{ top:56px; }
}

/* ------------------------------------------------- faixa "proximo evento"
   Uma linha, um link, zero requisicao. O rotulo fica em caixa alta pequena e o
   NOME do evento em ouro, porque e o nome que o jogador procura ao bater o
   olho, nao a palavra "proximo". */
.mt-proximo{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px;
  margin:18px 0 0; padding:12px 16px;
  background:linear-gradient(90deg, rgba(255,122,47,.09), transparent 70%);
  border:1px solid var(--linha); border-left:2px solid var(--brasa);
  border-radius:var(--raio);
}
.mt-proximo:hover{ background:linear-gradient(90deg, rgba(255,122,47,.16), transparent 70%); }
.mt-proximo__rot{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--texto-fraco);
}
.mt-proximo__nome{ font-family:var(--serif); font-size:1rem; letter-spacing:.04em; }
.mt-proximo__quando{
  margin-left:auto; font-variant-numeric:tabular-nums;
  font-size:.9rem; color:var(--texto);
}

/* ------------------------------------------------- a faixa do CERCO (12/09/2026)
   Mesma estrutura da faixa de cima, com uma coluna a mais (`__det`, o dia e a
   janela da batalha) e a borda em OURO em vez de brasa: o cerco e o unico evento
   com dono, e ele nao disputa atencao com o "proximo evento", ele a divide.
   ‼ O `__det` precisa de `flex-basis` propria, senao em 400px ele e o cronometro
   brigam pela mesma linha e o cronometro sai da tela -- que e o defeito que o
   print de 400px ja pegou uma vez nesta pagina. */
.mt-proximo--cerco{
  border-left-color:var(--ouro);
  background:linear-gradient(90deg, rgba(217,181,81,.10), transparent 70%);
}
.mt-proximo--cerco:hover{ background:linear-gradient(90deg, rgba(217,181,81,.18), transparent 70%); }
.mt-proximo__det{ font-size:.82rem; color:var(--texto-fraco); }
.mt-proximo--cerco.mt-ev--agora{ border-color:var(--brasa); }
.mt-proximo--cerco.mt-ev--agora .mt-proximo__quando{
  color:var(--brasa); font-weight:700; text-transform:uppercase;
  font-size:.78rem; letter-spacing:.1em;
}

/* ------------------------------------------------- a semana do cerco em FASES
   Lista ordenada porque a ordem E a informacao: inscricao, insignia, preparo,
   batalha. Cada item e um cartao com o nome, a janela, a data da proxima e a nota.
   A fase corrente ganha a brasa; a batalha, o ouro. */
.mt-fases{ list-style:none; margin:0; padding:0; counter-reset:mtfase; }
.mt-fase{
  position:relative; counter-increment:mtfase;
  padding:14px 18px 14px 52px; margin:0 0 10px;
  border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--ferro);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px;
}
.mt-fase::before{
  content:counter(mtfase);
  position:absolute; left:16px; top:13px;
  width:22px; height:22px; border-radius:50%;
  border:1px solid var(--linha); color:var(--texto-fraco);
  font-size:.72rem; line-height:20px; text-align:center;
}
.mt-fase__nome{ font-family:var(--serif); font-size:1rem; letter-spacing:.03em; }
.mt-fase__quando{ font-variant-numeric:tabular-nums; font-size:.88rem; color:var(--texto); }
.mt-fase__data{
  margin-left:auto; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto-fraco); white-space:nowrap;
}
/* ‼ QUEM QUEBRA A LINHA E O `::after`, E ISSO CUSTOU DUAS TENTATIVAS MEDIDAS.
   A nota tem de ficar SEMPRE numa linha propria. Nao basta `flex:1 1 100%` (o
   item encolhe e cabe ao lado), e nao basta `flex:1 0 100%` tampouco -- foi o que
   o print de 1440px mostrou na segunda rodada, com `flex-shrink:0` e
   `flex-basis:100%` confirmados por `getComputedStyle` e a nota AINDA na mesma
   linha em 3 dos 4 cartoes.
   A causa e o `max-width:70ch`: a quebra de linha do flexbox usa o tamanho
   hipotetico do item JA LIMITADO por min/max-width, entao o navegador via 490px
   (70ch), nao 100%, e 490px cabia no espaco que sobrava. O `max-width` que existe
   para o CONFORTO DE LEITURA estava decidindo o LAYOUT.
   O conserto separa as duas coisas: um `::after` vazio, sem max-width, com base
   100% e sem encolher, ocupa a linha inteira e empurra a nota para a proxima. A
   `order` e o que o poe ANTES da nota, ja que pseudo-elemento nasce por ultimo.
   Licao geral: em flex, `max-width` num item nao e so estetica -- ele participa
   da decisao de quebra, e por isso nenhuma leitura do CSS pega este defeito. */
.mt-fase__nome, .mt-fase__quando, .mt-fase__data{ order:1; }
.mt-fase::after{ content:''; flex:0 0 100%; height:0; order:2; }
.mt-fase__nota{
  order:3; flex:1 0 100%; margin-top:6px; font-size:.84rem; color:var(--texto-fraco);
  max-width:70ch;
}
.mt-fase--alvo{ border-color:rgba(217,181,81,.42); }
.mt-fase--alvo .mt-fase__nome{ color:var(--ouro-claro); }
.mt-fase--agora{ border-color:var(--brasa); background:rgba(255,122,47,.07); }
.mt-fase--agora .mt-fase__data{ color:var(--brasa); }
@media (max-width:600px){
  .mt-fase{ padding:12px 14px 12px 44px; }
  .mt-fase::before{ left:12px; }
  /* em 400px "A PROXIMA 20/09" na mesma linha do nome empurra a janela de horario
     para fora; em coluna cada um fica com a largura inteira. */
  .mt-fase__data{ margin-left:0; flex:1 1 100%; }
  .mt-fase__quando{ flex:1 1 100%; }
}

/* --------------------------------------------------------- relogios lado a lado
   A licao do AsteriaMU (1 de 12): mostrar a hora do servidor E a de quem esta
   lendo resolve o fuso sem obrigar ninguem a fazer conta de cabeca. */
.mt-relogios{ display:flex; gap:14px; flex-wrap:wrap; margin:0 0 22px; }
.mt-relogio{
  flex:1 1 180px; padding:14px 18px; border:1px solid var(--linha);
  border-radius:var(--raio); background:var(--ferro);
}
.mt-relogio b{
  display:block; font-family:var(--serif); font-size:1.5rem; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.mt-relogio span{
  display:block; margin-top:4px; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--texto-fraco);
}

/* ------------------------------------------------------- tabela de eventos */
.mt-tabela--ev td{ vertical-align:top; }
.mt-ev__nota{
  display:block; margin-top:4px; font-size:.84rem; color:var(--texto-fraco);
  max-width:46ch;
}
/* tabular-nums para a coluna de horarios nao dancar de linha em linha */
.mt-ev__horas{ font-variant-numeric:tabular-nums; font-size:.88rem; color:var(--texto-fraco); white-space:nowrap; }
.mt-ev__conta{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.mt-tabela--ev tr.mt-ev--agora .mt-ev__conta{
  color:var(--brasa); font-weight:700; text-transform:uppercase;
  font-size:.8rem; letter-spacing:.1em;
}
.mt-tabela--ev tr.mt-ev--agora{ background:rgba(255,122,47,.07); }

/* ---------------------------------------------------------- selo de vida
   30 placas de metal gravado, uma por dia. As caidas ficam com a brasa
   apagada. `title` + `.sr-only` em cada uma: quem usa leitor de tela recebe a
   data e o estado por extenso, e nao um muro de 30 caixinhas mudas. */
.mt-vida{
  margin:18px 0 0; padding:16px 18px;
  border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--ferro);
}
.mt-vida__cab{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.mt-vida__cab b{ font-family:var(--serif); letter-spacing:.1em; text-transform:uppercase; font-size:.9rem; }
.mt-vida__pino{
  width:8px; height:8px; border-radius:50%; background:var(--brasa);
  box-shadow:0 0 8px rgba(255,122,47,.8); flex:0 0 auto;
}
.mt-vida__desde{ font-size:.76rem; color:var(--texto-fraco); margin-left:auto; }
.mt-vida__frase{ margin:.5rem 0 0; font-size:.92rem; color:var(--texto); }
.mt-vida__quedas{ color:var(--texto-fraco); }

.mt-vida__grade{
  display:flex; flex-wrap:wrap; gap:4px; list-style:none; padding:0;
  margin:12px 0 0;
}
.mt-vida__dia{
  width:14px; height:22px; border-radius:1px; flex:0 0 auto;
  border:1px solid rgba(0,0,0,.35);
}
.mt-vida__dia--ok     { background:linear-gradient(180deg,#5f8f3a,#33591e); }
.mt-vida__dia--parcial{ background:linear-gradient(180deg,#c9922a,#7a5510); }
.mt-vida__dia--fora   { background:linear-gradient(180deg,#8f3a2a,#4a170d); }
.mt-vida--completo{ margin-top:28px; }

/* -------------------------------------------------------------- contato
   O endereco de suporte precisa ser a coisa mais legivel da pagina de
   suporte: quem chega ali ja tentou de tudo. */
.mt-contato{ margin:14px 0 0; }
.mt-contato a{
  display:inline-block; font-family:var(--serif); font-size:1.15rem;
  letter-spacing:.04em; color:var(--ouro-claro);
  border-bottom:1px solid var(--linha); padding-bottom:2px;
}
.mt-contato a:hover{ border-bottom-color:var(--ouro); }

@media (max-width:600px){
  .mt-proximo__quando{ margin-left:0; width:100%; }
  .mt-vida__desde{ margin-left:0; width:100%; }
  .mt-vida__dia{ width:12px; height:20px; }
  .mt-ev__horas{ white-space:normal; }
}

/* ‼ ACHADO NO PRINT DE 400px, 12/09/2026 (nao na leitura do CSS).
   A tabela de eventos tem 3 colunas e a terceira e o CRONOMETRO, que e a razao
   de existir da pagina. Em 400px ela caia FORA da tela: o `.mt-tabela-rolagem`
   fazia a sua parte e deixava rolar na horizontal, mas contagem regressiva que
   so aparece depois de arrastar a tabela e contagem que ninguem ve, e no
   Brasil o celular e a maior fatia do trafego.
   Abaixo de 700px a tabela vira CARTAO: nome e cronometro na mesma linha (o
   cronometro colado a direita), a nota embaixo e os horarios no fim, com
   rotulo proprio, porque o <thead> some. Nada e escondido: o que sai da tabela
   entra no cartao. */
@media (max-width:700px){
  .mt-tabela-rolagem:has(.mt-tabela--ev){ overflow-x:visible; }
  /* 🔴 `min-width` DA TABELA BASE, e o print de 400px de 12/09/2026 pegou o efeito.
     `.mt-tabela` tem `min-width:520px` para as tabelas que ROLAM na horizontal. O
     cartao de celular trocava `display` e `width`, mas nunca o `min-width`: a
     tabela continuava com 520px de piso dentro de um container de 345px. Enquanto
     a rolagem estava em `auto` o estrago ficava PRESO na tabela; quando a mesma
     regra passou a `overflow-x:visible` (para o cartao nao ter barra), os 520px
     escaparam e passaram a rolar a PAGINA INTEIRA -- `scrollWidth 540` contra
     `clientWidth 400`, medido por CDP nos tres idiomas.
     ‼ A licao e a forma do defeito: o conserto anterior (virar cartao) estava
     certo e INCOMPLETO, e um conserto incompleto de layout nao volta ao estado
     anterior, ele troca de sintoma. O `overflow:visible` nao criou o excesso, ele
     so parou de esconde-lo. Zerar o piso e o que fecha os dois. */
  .mt-tabela--ev{ min-width:0; }
  .mt-tabela--ev,
  .mt-tabela--ev tbody,
  .mt-tabela--ev tr,
  .mt-tabela--ev td{ display:block; width:100%; min-width:0; }
  .mt-tabela--ev thead{ display:none; }
  .mt-tabela--ev tr{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px;
    border:1px solid var(--linha); border-radius:var(--raio);
    background:var(--ferro); padding:12px 14px; margin:0 0 10px;
  }
  .mt-tabela--ev td{ border:0; padding:0; }
  .mt-tabela--ev td:nth-child(1){ order:1; flex:1 1 55%; }
  .mt-tabela--ev td:nth-child(3){ order:2; flex:0 0 auto; margin-left:auto; text-align:right; }
  .mt-tabela--ev td:nth-child(2){ order:3; flex:1 1 100%; margin-top:10px; }
  /* O <thead> sumiu, entao a coluna de horarios ganha o proprio rotulo.
     ‼ 12/09/2026: ele era `content:'Todo dia as'` CRAVADO, e isso era um defeito
     de DUAS caras que nenhum dos dois portoes de traducao pega, porque texto
     dentro de CSS nao passa por `mtT()` nem por `lang()`:
       1. saia em PORTUGUES em /en/ e /es/, so no celular, so abaixo de 700px --
          o print de 1440px nunca o mostra e a leitura do PHP nunca o alcanca;
       2. dizia "todo dia" em cima da linha do CERCO, que e SEMANAL.
     Agora o texto nasce no PHP (`data-rot`, traduzido e por LINHA) e o CSS so o
     desenha. A regra da casa vale aqui tambem: texto em atributo escapa do
     conferidor, e texto em CSS escapa de tudo. */
  .mt-tabela--ev td:nth-child(2)::before{
    content:attr(data-rot); display:block; margin-bottom:3px;
    font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--texto-fraco);
  }
  .mt-ev__conta{ font-size:.9rem; color:var(--ouro-claro); }
  .mt-tabela--ev tr.mt-ev--agora{ border-color:var(--brasa); }
}

/* ==========================================================================
   MuThrone -- BUSCA DE PERSONAGEM E PERFIL PUBLICO (12/09/2026)

   Medido na auditoria de 12 servidores concorrentes: busca de personagem,
   0 de 12 tem; perfil publico do jogador, 9 de 12 tem e nos nao tinhamos.

   ORCAMENTO: nenhum arquivo novo, nenhum JavaScript, nenhuma fonte nova. Isto
   e CSS acrescentado ao unico .css que a pagina ja baixa, e o `?v=` do mtime
   cuida da invalidacao. A home continua em ~10 requisicoes, que e a vantagem
   competitiva que nao se troca por enfeite.
   ========================================================================== */

/* --- o campo ------------------------------------------------------------- */
.mt-busca{ margin:0 0 22px; }
.mt-busca__rotulo{
  display:block; margin:0 0 8px;
  font-family:var(--sans); font-size:.66rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--texto-fraco);
}
/* O campo e o botao numa linha so; `wrap` para que em tela estreita o botao
   caia embaixo INTEIRO, em vez de espremer o campo ate ele nao caber um nome. */
.mt-busca__linha{ display:flex; flex-wrap:wrap; gap:10px; }
.mt-busca__campo{
  flex:1 1 240px; min-width:0;
  background:var(--carvao); color:var(--texto);
  border:1px solid var(--linha); border-radius:var(--raio);
  padding:13px 15px;
  font-family:var(--sans); font-size:1rem;
  /* 16px de fonte no campo evita o ZOOM automatico do Safari no iPhone, que
     desalinha a pagina inteira assim que o teclado abre. */
  transition:border-color .18s ease, box-shadow .18s ease;
}
.mt-busca__campo::placeholder{ color:var(--texto-fraco); opacity:.75; }
.mt-busca__campo:focus{
  outline:none; border-color:var(--ouro-fundo);
  box-shadow:0 0 0 2px rgba(217,181,81,.16);
}
/* O X nativo do type="search" no WebKit sai quase invisivel no fundo escuro. */
.mt-busca__campo::-webkit-search-cancel-button{ filter:invert(.7) sepia(.4); }
.mt-busca__acao{ flex:0 0 auto; }
.mt-busca__conta{
  margin:0 0 12px; color:var(--texto-fraco); font-size:.82rem;
}
.mt-busca__resultado{ margin-top:4px; }
.mt-busca__vazia{ color:var(--texto-fraco); font-size:.93rem; }

/* O nome linkavel, no ranking e na busca. Sublinhado discreto: sem ele ninguem
   descobre que o nome leva a algum lugar, e a descoberta e metade do valor. */
.mt-nome-link{
  color:var(--texto); text-decoration:none;
  border-bottom:1px solid rgba(217,181,81,.28);
}
.mt-nome-link:hover{ color:var(--ouro-claro); border-bottom-color:var(--ouro); }

/* --- o estado vazio ------------------------------------------------------ */
/* Irmao de .mt-aviso--marca, e nao o mesmo: aquele e uma FRASE de "nao consegui
   ler"; este e uma PAGINA que explica por que nao achou e oferece saida. */
.mt-vazio{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px; padding:36px 22px;
  background:linear-gradient(180deg, var(--ferro) 0%, var(--carvao) 100%);
  border:1px solid var(--linha); border-radius:var(--raio);
}
.mt-vazio img{
  width:62px; height:auto; opacity:.5;
  filter:drop-shadow(0 0 12px rgba(217,181,81,.18));
}
.mt-vazio__titulo{
  margin:2px 0 0; font-family:var(--serif); font-size:1.3rem; line-height:1.25;
  /* nome de personagem nao quebra em silaba, e nome longo em 400px estourava */
  overflow-wrap:anywhere;
}
.mt-vazio__linha{
  margin:0; color:var(--texto-fraco); font-size:.93rem; line-height:1.65;
  max-width:56ch;
}
.mt-vazio__motivos{
  margin:6px 0 0; padding:0; list-style:none;
  text-align:left; max-width:58ch;
}
.mt-vazio__motivos li{
  position:relative; padding:0 0 0 20px; margin:0 0 10px;
  color:var(--texto-fraco); font-size:.9rem; line-height:1.6;
}
.mt-vazio__motivos li::before{
  content:''; position:absolute; left:2px; top:.62em;
  width:6px; height:6px; background:var(--ouro-fundo); transform:rotate(45deg);
}
.mt-vazio__acoes{ margin:10px 0 0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

/* --- o perfil ------------------------------------------------------------ */
.mt-perfil__cab{ margin:0 0 22px; }
.mt-perfil__nome{
  margin:0; font-family:var(--serif); font-size:2.4rem; line-height:1.1;
  letter-spacing:.02em; overflow-wrap:anywhere;
}
.mt-perfil__classe{
  margin:8px 0 0; color:var(--texto-fraco);
  font-size:.95rem; letter-spacing:.04em;
}
.mt-perfil__sep{ color:var(--ouro-fundo); padding:0 2px; }

/* `auto-fit` com minimo de 130px: com 2 quadros eles ficam largos, com 5 eles
   se acomodam, e em 400px viram duas colunas sem media query nenhuma. */
.mt-perfil__numeros{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  gap:12px; margin:0 0 18px;
}
.mt-perfil__quadro{
  display:flex; flex-direction:column; gap:6px;
  background:linear-gradient(180deg, var(--ferro) 0%, var(--carvao) 100%);
  border:1px solid var(--linha); border-radius:var(--raio);
  padding:16px 18px;
}
.mt-perfil__rotulo{
  font-family:var(--sans); font-size:.62rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--texto-fraco);
}
.mt-perfil__valor{
  font-family:var(--serif); font-size:1.7rem; font-weight:700; line-height:1;
}
.mt-perfil__posicoes{
  margin:0 0 4px; font-size:.9rem; color:var(--texto-fraco);
}
.mt-perfil__busca{
  margin-top:30px; padding-top:24px; border-top:1px solid var(--linha);
}

@media (max-width:600px){
  .mt-perfil__nome{ font-size:1.9rem; }
  .mt-perfil__valor{ font-size:1.45rem; }
  .mt-vazio{ padding:28px 16px; }
  .mt-vazio__acoes .mt-btn{ width:100%; text-align:center; }
  /* Botao de busca ocupando a linha inteira: com o campo em 100% acima, o
     botao meio-a-meio ficava orfao na direita. */
  .mt-busca__acao{ flex:1 1 100%; text-align:center; }
}

/* =============================================================================
   FORMULARIO DE CONTA  (/register/)                             15/09/2026
   =============================================================================
   Reaproveita os tokens da busca (.mt-busca__campo) de proposito: dois estilos
   de campo no mesmo site e o comeco de dois temas. O que muda aqui e so a
   ESTRUTURA -- rotulo em cima, ajuda embaixo, erro amarrado por aria.

   As medidas que valem: 16px de fonte no campo (abaixo disso o Safari do iPhone
   da ZOOM automatico e desalinha a pagina assim que o teclado abre), e area de
   toque de 44px de altura, que e o minimo das duas lojas.
   ========================================================================== */
.mt-form{ margin-top:22px; }
.mt-form__bloco{
  border:1px solid var(--linha); border-radius:var(--raio);
  padding:18px 18px 6px; margin:0 0 18px;
  background:rgba(0,0,0,.14);
}
/* O bloco da credencial do JOGO e o unico destacado: e o campo que o jogador
   vai digitar em outro programa, semanas depois, e o destaque existe para ele
   parar e ler em vez de preencher no automatico. */
.mt-form__bloco--jogo{
  border-color:rgba(217,181,81,.38);
  background:linear-gradient(180deg, rgba(217,181,81,.06) 0%, rgba(0,0,0,.16) 100%);
}
.mt-form__bloco > legend{
  padding:0 8px; font-family:var(--sans); font-size:.66rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ouro);
}
.mt-form__nota{ margin:0 0 14px; color:var(--texto-fraco); font-size:.88rem; }
.mt-form__erro{ margin:6px 0 0; color:#e8927c; font-size:.86rem; }
.mt-form__acoes{ margin-top:6px; }
.mt-form__acoes .mt-btn{ min-width:220px; text-align:center; }

.mt-campo{ margin:0 0 16px; }
.mt-campo__rotulo{
  display:block; margin:0 0 7px;
  font-family:var(--sans); font-size:.66rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--texto-fraco);
}
.mt-campo__caixa{
  display:block; width:100%; min-width:0; box-sizing:border-box;
  background:var(--carvao); color:var(--texto);
  border:1px solid var(--linha); border-radius:var(--raio);
  padding:13px 15px; min-height:44px;
  font-family:var(--sans); font-size:1rem;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.mt-campo__caixa:focus{
  outline:none; border-color:var(--ouro-fundo);
  box-shadow:0 0 0 2px rgba(217,181,81,.16);
}
.mt-campo__ajuda{ margin:7px 0 0; color:var(--texto-fraco); font-size:.84rem; }
.mt-campo--erro .mt-campo__caixa{ border-color:#c2563c; }
.mt-campo--erro .mt-campo__caixa:focus{ box-shadow:0 0 0 2px rgba(194,86,60,.2); }

.mt-caixa{
  display:flex; gap:10px; align-items:flex-start;
  margin:0 0 14px; color:var(--texto-fraco); font-size:.92rem; line-height:1.5;
}
.mt-caixa input[type="checkbox"]{ margin-top:3px; width:18px; height:18px; flex:0 0 auto; }
.mt-caixa a{ color:var(--ouro); }
.mt-caixa--erro{ color:#e8927c; }

/* O campo do mel: humano nenhum ve, robo de formulario preenche. Fora da tela
   em vez de `display:none` porque robo simples ignora campo escondido. */
.mt-mel{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px;
  overflow:hidden;
}

/* A credencial entregue no fim do cadastro. `<code>` porque e para ser COPIADA
   com exatidao: fonte de largura fixa e o que separa I de l e 0 de O. */
.mt-cred{ margin:18px 0 0; }
.mt-cred dt{
  font-family:var(--sans); font-size:.66rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--texto-fraco);
  margin-top:14px;
}
.mt-cred dd{ margin:6px 0 0; }
.mt-cred__valor{
  display:inline-block; font-family:ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size:1.15rem; letter-spacing:.06em; color:var(--ouro-claro);
  background:var(--carvao); border:1px solid rgba(217,181,81,.32);
  border-radius:var(--raio); padding:8px 12px;
  user-select:all;
}

@media (max-width:600px){
  .mt-form__bloco{ padding:16px 14px 4px; }
  .mt-form__acoes .mt-btn{ width:100%; }
}

/* ---- entrar / conta (16/09/2026) --------------------------------------- */
.mt-oauth{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 4px; }
.mt-oauth__btn{ min-width:200px; text-align:center; }
.mt-oauth__btn small{ opacity:.7; font-size:.78em; margin-left:6px; }
.mt-oauth__nota{ margin-top:8px; }
.mt-ou{ display:flex; align-items:center; gap:12px; margin:16px 0 6px; color:var(--texto-fraco); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; }
.mt-ou::before,.mt-ou::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.12); }
.mt-ficha{ margin:16px 0 0; display:grid; grid-template-columns:minmax(120px,max-content) 1fr; gap:8px 18px; }
.mt-ficha dt{ color:var(--texto-fraco); font-size:.84rem; letter-spacing:.06em; text-transform:uppercase; }
.mt-ficha dd{ margin:0; }
.mt-ficha__valor{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:rgba(255,255,255,.05); padding:2px 8px; border-radius:4px; }
.mt-personagens{ width:100%; border-collapse:collapse; margin-top:12px; font-size:.95rem; }
.mt-personagens th,.mt-personagens td{ text-align:left; padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.08); }
.mt-personagens th{ color:var(--texto-fraco); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }
.mt-form--inline{ margin-top:0; }
.mt-sair{ display:inline; }
.mt-sair .mt-btn{ cursor:pointer; font:inherit; }
@media (max-width:520px){ .mt-ficha{ grid-template-columns:1fr; gap:2px 0; } .mt-ficha dd{ margin-bottom:10px; } .mt-oauth__btn{ width:100%; } }