/* ============================================================
   ESTILO COMUM A TODAS AS PÁGINAS
   ============================================================
   Cores, fontes e peças reutilizáveis ficam aqui. Mudou aqui,
   mudou no site inteiro — não precisa mexer em cada página.
   ============================================================ */

:root {
  --bg:        #0d1117;
  --painel:    #131a24;
  --painel-2:  #182130;
  --borda:     rgba(200,170,110,.16);
  --borda-sut: rgba(255,255,255,.07);
  --linha:     rgba(200,170,110,.10);

  --ink:       #e8e3d8;
  --muted:     #8b9199;
  --fraco:     #5c636c;

  --gold:      #c9a227;
  --gold-luz:  #e0bb46;
  --gold-fun:  rgba(201,162,39,.13);

  --verde:     #4ba36a;
  --vermelho:  #c2554b;
  --azul:      #5b8dd6;

  --raio:      10px;
  --serif:     Cinzel, Georgia, 'Times New Roman', serif;
  --sans:      Inter, -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* ---- Movimento ------------------------------------------
     As três curvas que o jogo inteiro usa. Sair do padrão do
     navegador ("ease", que desacelera devagar demais) é metade
     da diferença entre parecer travado e parecer fluido.

     --ease      : saída firme, pra quase tudo
     --ease-out  : desacelera longo, pra coisa que entra na tela
     --mola      : passa um tico do alvo e volta, pra confirmação
     ---------------------------------------------------------- */
  --ease:      cubic-bezier(.22,.85,.3,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --mola:      cubic-bezier(.34,1.4,.5,1);

  --rapido:    .14s;
  --normal:    .22s;
  --calmo:     .34s;
}

/* ============================================================
   MOVIMENTO
   ============================================================
   Regra da casa: nada muda de estado seco. Todo botão, todo
   cartão e todo painel tem um caminho de ida.
   ============================================================ */

@keyframes entra   { from { opacity: 0; transform: translateY(8px)  scale(.985); }
                     to   { opacity: 1; transform: none; } }
@keyframes sobe    { from { opacity: 0; transform: translateY(14px); }
                     to   { opacity: 1; transform: none; } }
@keyframes pulso   { 0% { transform: scale(1); } 45% { transform: scale(1.055); }
                     100% { transform: scale(1); } }
@keyframes ondinha { from { box-shadow: 0 0 0 0 rgba(201,162,39,.5); }
                     to   { box-shadow: 0 0 0 14px rgba(201,162,39,0); } }
@keyframes respira { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes andaime { 0% { background-position: 0 0; }
                     100% { background-position: 28px 0; } }

.entrando { animation: entra var(--calmo) var(--ease-out) both; }
.ondinha  { animation: ondinha .6s var(--ease-out); }
.pulsando { animation: pulso .32s var(--mola); }

/* Quem clica precisa sentir o clique antes da resposta chegar. */
button, .botao, a.botao, .slot, .opcao, .recurso {
  transition: transform var(--rapido) var(--ease),
              border-color var(--normal) var(--ease),
              background-color var(--normal) var(--ease),
              box-shadow var(--normal) var(--ease),
              opacity var(--normal) var(--ease);
}
button:active:not(:disabled),
.botao:active, .slot:active, .opcao:active { transform: scale(.972); }

/* Quem tem mouse ganha o realce; no celular isso não existe e
   não pode ficar "grudado" depois do toque. */
@media (hover: hover) {
  .slot:hover, .opcao:hover { transform: translateY(-2px); }
}

/* Acessibilidade: quem pede menos movimento no sistema recebe
   a tela inteira parada, sem perder nada de função. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* O navegador esconde o que tem [hidden], mas qualquer regra
   nossa com "display" anula isso. Este !important garante que
   escondido é escondido, sempre. */
[hidden] { display: none !important; }

html, body { min-height: 100%; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- Fundo de mapa ---------------------------------------- */

.fundo-mapa { position: relative; overflow-x: hidden; }

.fundo-mapa::before {
  content: ""; position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(var(--linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 100%);
  pointer-events: none;
}

.fundo-mapa::after {
  content: ""; position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 60% 45% at 50% 0%, rgba(201,162,39,.07), transparent 70%);
  pointer-events: none;
}

/* ---- Fundo pintado (entrada e capa) ------------------------
   Uma camada de arte ATRÁS da grade de mapa — a grade continua
   por cima, porque é ela que diz "isto aqui é um mapa".

   A escurecida por cima da foto não é enfeite: sem ela o
   formulário fica ilegível em metade das artes.

   Se o arquivo não existir, a camada não pinta e a tela volta a
   ser exatamente o que era. Nenhuma tela de entrada depende de
   arte pra funcionar.

   É um elemento de verdade, e não um `::before`/`::after`, por um
   motivo prático: `.fundo-mapa` já usa os dois pseudos do <body>,
   e um terceiro não existe. Brigar por eles apagaria a grade.

   `z-index:-1` funciona aqui porque o <body> pinta o fundo no
   canvas da página, não em si mesmo — então há espaço ATRÁS dele. */
.pintura {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(13,17,23,.70) 0%, rgba(13,17,23,.52) 38%, rgba(13,17,23,.92) 100%),
    var(--arte-de-fundo, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.pintura.entrada { --arte-de-fundo: url('/arte/login-fundo.webp'); }
.pintura.capa    { --arte-de-fundo: url('/arte/fundo-yelkan.webp'); }

/* Os selos dos mundos. O quarto (Gallerbrizzad) fica apagado de
   propósito: existe, e não se alcança. */
.selos {
  display: flex; justify-content: center; align-items: center;
  gap: 14px; margin-top: 14px; flex-wrap: wrap;
}
.selos img {
  width: 40px; height: 40px; object-fit: contain;
  opacity: .78; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
  transition: opacity .18s ease, transform .18s ease;
}
.selos img:last-child { opacity: .4; filter: grayscale(.6); }
.selos img:hover { opacity: 1; transform: translateY(-2px); }

.acima { position: relative; z-index: 1; }

/* ---- Layout ------------------------------------------------ */

.centro {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 20px;
}

.painel {
  width: 100%;
  background: linear-gradient(180deg, rgba(19,26,36,.94), rgba(13,17,23,.94));
  border: 1px solid var(--borda);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  padding: 44px 40px 36px;
}

.painel.estreito { max-width: 430px; }
.painel.largo    { max-width: 620px; }

/* ---- Marca ------------------------------------------------- */

.marca {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}

.brasao {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(201,162,39,.45);
  border-radius: 50%;
  background: var(--gold-fun);
}
.brasao svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.6; }

/* ---- Texto -------------------------------------------------- */

h1 {
  font-family: var(--serif);
  font-size: clamp(26px, 5vw, 38px);
  font-weight: 700; line-height: 1.15;
}
h1 .fraco { color: var(--muted); font-weight: 500; }

h2 { font-family: var(--serif); font-size: 20px; font-weight: 700; }

.lead { color: var(--muted); line-height: 1.7; }
.mini { font-size: 12.5px; color: var(--fraco); line-height: 1.6; }

.regua {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.28), transparent);
}

/* ---- Formulário --------------------------------------------- */

.campo { margin-bottom: 16px; }

.campo label {
  display: block; margin-bottom: 7px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}

.campo input {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit; font-size: 15px;
  color: var(--ink);
  background: rgba(0,0,0,.28);
  border: 1px solid var(--borda-sut);
  border-radius: 8px;
  transition: border-color .15s, background .15s;
}
.campo input:focus {
  outline: none;
  border-color: rgba(201,162,39,.55);
  background: rgba(0,0,0,.4);
}
.campo input::placeholder { color: #4a5058; }

.dica { margin-top: 6px; font-size: 12px; color: var(--fraco); }

/* ---- Botões -------------------------------------------------- */

/* ============================================================
   O BOTÃO PRINCIPAL
   ============================================================
   Ele era `background: var(--gold)` — a cor de destaque do mundo,
   chapada. Em Vostores isso dava um dourado aceitável. Em Teclog,
   onde o "dourado" é luz fria (#6fc3dd), dava um retângulo azul
   pastel no meio de uma tela quase preta: exatamente o que o
   Edyel apontou como "bugado visualmente" no print do Quartel.

   E ele tinha razão pelo motivo certo. Cor chapada e saturada em
   bloco grande é a assinatura visual de botão SEM estilo — o
   olho aprendeu isso em vinte anos de formulário na web. Nem o
   Travian nem o Supremacy usam: os dois fazem o botão parecer
   uma PEÇA — degradê de cima pra baixo, borda escura, brilho
   fino na aresta de cima. Placa, não swatch.

   A cor do mundo continua mandando; o que mudou foi o acabamento.
   `--acao` e `--acao-luz` são a versão fundida da cor de cada
   mundo, e cada mundo define a dele logo abaixo. Onde o mundo
   não definir, cai no dourado padrão e nada quebra.
   ============================================================ */
:root {
  --acao:      #b8901f;
  --acao-luz:  #dcb63f;
  --acao-tinta: #14100a;
}

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 22px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(180deg, var(--acao-luz), var(--acao));
  color: var(--acao-tinta);
  border: 1px solid rgba(0,0,0,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 2px 6px rgba(0,0,0,.4);
  text-shadow: 0 1px 0 rgba(255,255,255,.16);
  transition: filter .15s, transform .05s;
  /* `.botao` nasceu pra <button>, que não vem sublinhado. Quando
     ela passou a vestir <a> também — "Abrir minha cidade" no
     mapa, "Entrar" na Sala —, o sublinhado do link apareceu por
     baixo do dourado. Uma linha aqui conserta os dois lugares. */
  text-decoration: none;
}
.botao:hover:not(:disabled) { filter: brightness(1.1); }
.botao:active:not(:disabled) { transform: translateY(1px); }
.botao:disabled { opacity: .5; cursor: not-allowed; }

.botao.fantasma {
  background: transparent; color: var(--ink);
  border: 1px solid var(--borda-sut);
}
.botao.fantasma:hover:not(:disabled) { background: rgba(255,255,255,.05); }

.link {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 13px;
  color: var(--muted); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.link:hover { color: var(--gold); }

/* ---- Abas ---------------------------------------------------- */

.abas {
  display: flex; gap: 4px;
  padding: 4px;
  background: rgba(0,0,0,.28);
  border: 1px solid var(--borda-sut);
  border-radius: 9px;
  margin-bottom: 26px;
}

.aba {
  flex: 1; padding: 9px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--muted);
  background: none; border: 0; border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.aba:hover { color: var(--ink); }
.aba.ativa { background: var(--painel-2); color: var(--ink); }

/* ---- Avisos --------------------------------------------------- */

.aviso {
  padding: 11px 14px; margin-bottom: 18px;
  border-radius: 8px; font-size: 13.5px; line-height: 1.55;
  border: 1px solid;
}
.aviso.erro    { color: #e08a82; border-color: rgba(194,85,75,.35);  background: rgba(194,85,75,.09); }
.aviso.ok      { color: #7fc79a; border-color: rgba(75,163,106,.35); background: rgba(75,163,106,.09); }
.aviso.atencao { color: #d9b95c; border-color: rgba(201,162,39,.35); background: rgba(201,162,39,.09); }
.aviso.info    { color: #93b4e3; border-color: rgba(91,141,214,.35); background: rgba(91,141,214,.09); }
.aviso[hidden] { display: none; }

/* ---- Status --------------------------------------------------- */

.status {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--borda-sut);
  background: rgba(255,255,255,.03);
}
.status .bolinha { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }

.status.ok  { color: var(--verde);    border-color: rgba(75,163,106,.3);  background: rgba(75,163,106,.07); }
.status.ok .bolinha  { background: var(--verde); animation: pulsar 2s infinite; }
.status.err { color: var(--vermelho); border-color: rgba(194,85,75,.3);   background: rgba(194,85,75,.07); }
.status.err .bolinha { background: var(--vermelho); }

@keyframes pulsar {
  0%   { box-shadow: 0 0 0 0   rgba(75,163,106,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(75,163,106,0); }
  100% { box-shadow: 0 0 0 0   rgba(75,163,106,0); }
}

/* ---- Ficha (linha de dados) ------------------------------------ */

.ficha { border-top: 1px solid var(--borda-sut); }
.ficha div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--borda-sut);
  font-size: 14px;
}
.ficha dt { color: var(--muted); }
.ficha dd { color: var(--ink); font-weight: 500; text-align: right; word-break: break-all; }

/* ---- Rodapé ----------------------------------------------------- */

.rodape {
  margin-top: 30px; padding-top: 20px;
  border-top: 1px solid var(--borda-sut);
  font-size: 11.5px; color: #454b53; letter-spacing: .04em;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* ---- Espaçamentos rápidos ---------------------------------------- */

.mt-8  { margin-top: 8px; }  .mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-8  { margin-bottom: 8px; }  .mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }
.centralizado { text-align: center; }

@media (max-width: 520px) {
  .painel { padding: 32px 24px 28px; }
}

/* ============================================================
   OS MATERIAIS DOS TRÊS MUNDOS
   ============================================================
   O jogo inteiro troca de material conforme o planeta em que
   você joga. Um print de Vostores não pode parecer o mesmo jogo
   que um print de Hammertower.

   Como funciona: a página põe data-mundo="vostores" (ou teclog,
   ou hammertower) no <body>. Tudo abaixo é só variável — nenhum
   componente precisa saber em que mundo está.

     Vostores    — pedra clara e latão. Corte, simetria, ornamento.
     Teclog      — aço e vidro frio. Técnico, fino, luz azul.
     Hammertower — ferro cru e couro. Pesado, rebitado, oxidado.
   ============================================================ */

body[data-mundo] {
  --mat-luz:   rgba(255,255,255,.05);   /* brilho no alto da peça */
  --mat-fundo: rgba(0,0,0,.30);         /* sombra no pé da peça  */
}

/* ---- Vostores: a Corte ------------------------------------- */
body[data-mundo="vostores"] {
  --bg:        #100e0a;
  --painel:    #1d1a13;
  --painel-2:  #262117;
  --gold:      #c9a227;
  --gold-luz:  #ecd483;
  --gold-fun:  rgba(201,162,39,.14);
  /* O botão em Vostores: ouro fundido, escuro embaixo. */
  --acao:      #b8901f;
  --acao-luz:  #e0bb46;
  --acao-tinta: #1a1409;
  --borda:     rgba(214,180,104,.30);
  --borda-sut: rgba(214,180,104,.13);
  --ink:       #efe7d4;
  --muted:     #a2957a;
  --fraco:     #6d6350;
  --mat-luz:   rgba(255,236,190,.07);
  --chanfro:   9px;   /* corte de canto: discreto, elegante */
}

/* ---- Teclog: tecnomagia no gelo ---------------------------- */
body[data-mundo="teclog"] {
  --bg:        #080c12;
  --painel:    #101822;
  --painel-2:  #16202d;
  --gold:      #6fc3dd;         /* aqui o "dourado" é luz fria */
  --gold-luz:  #a7e2f2;
  --gold-fun:  rgba(111,195,221,.12);
  /* O botão em Teclog: aço-turquesa FUNDIDO, não o pastel do
     texto. O #6fc3dd é ótimo pra letra e péssimo pra bloco —
     era ele, chapado, que fazia o botão parecer sem estilo. */
  --acao:      #2b7f99;
  --acao-luz:  #4fa9c6;
  --acao-tinta: #04121a;
  --borda:     rgba(140,196,220,.26);
  --borda-sut: rgba(140,196,220,.11);
  --ink:       #e2edf3;
  --muted:     #8195a3;
  --fraco:     #566673;
  --mat-luz:   rgba(190,235,255,.07);
  --chanfro:   14px;  /* corte grande e reto: máquina */
}

/* ---- Hammertower: o Martelo -------------------------------- */
body[data-mundo="hammertower"] {
  --bg:        #0d0a09;
  --painel:    #1a1513;
  --painel-2:  #241c18;
  --gold:      #c4763a;         /* cobre queimado, não ouro */
  --gold-luz:  #e39a5c;
  /* O botão em Hammertower: cobre batido. */
  --acao:      #a95f2b;
  --acao-luz:  #d98a4e;
  --acao-tinta: #180d06;
  --gold-fun:  rgba(196,118,58,.14);
  --borda:     rgba(196,118,58,.30);
  --borda-sut: rgba(210,150,110,.11);
  --ink:       #ece0d5;
  --muted:     #9a8474;
  --fraco:     #6a5749;
  --vermelho:  #b04138;
  --mat-luz:   rgba(255,210,170,.06);
  --chanfro:   0px;   /* sem corte: bloco bruto */
}

/* ============================================================
   MOLDURA — o que tira a cara de "cartão de dashboard"
   ============================================================
   Uma peça de material, não um retângulo com borda de 1px:
   luz em cima, sombra embaixo, canto chanfrado e cantoneira
   de metal nas quinas.
   ============================================================ */

.moldura {
  position: relative;
  background:
    linear-gradient(180deg, var(--mat-luz) 0, transparent 70px),
    linear-gradient(180deg, var(--painel), var(--painel-2));
  border: 1px solid var(--borda-sut);
  box-shadow:
    inset 0 1px 0 var(--mat-luz),
    inset 0 -1px 0 var(--mat-fundo),
    0 10px 26px rgba(0,0,0,.42);
}

/* O chanfro: quina cortada em diagonal em vez de arredondada.
   É a diferença visual mais barata entre "template" e "jogo". */
body[data-mundo] .moldura {
  border-radius: 0;
  clip-path: polygon(
    var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro),
    100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%,
    var(--chanfro) 100%, 0 calc(100% - var(--chanfro)), 0 var(--chanfro));
}
/* Hammertower tem chanfro 0 — não vale gastar clip-path nele. */
body[data-mundo="hammertower"] .moldura { clip-path: none; }

/* Cantoneiras: dois riscos de metal na quina de cima e de baixo. */
.moldura.cantoneira::before,
.moldura.cantoneira::after {
  content: ""; position: absolute; width: 15px; height: 15px;
  border: 2px solid var(--borda); pointer-events: none; opacity: .8;
}
.moldura.cantoneira::before { top: 5px;    left: 5px;  border-right: 0; border-bottom: 0; }
.moldura.cantoneira::after  { bottom: 5px; right: 5px; border-left: 0;  border-top: 0; }

/* Rebite: só Hammertower. Quatro pontos de ferro nas quinas. */
body[data-mundo="hammertower"] .moldura.cantoneira {
  background-image:
    radial-gradient(circle at 9px 9px,             rgba(0,0,0,.55) 1.6px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 9px) 9px, rgba(0,0,0,.55) 1.6px, transparent 2.4px),
    radial-gradient(circle at 9px calc(100% - 9px), rgba(0,0,0,.55) 1.6px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), rgba(0,0,0,.55) 1.6px, transparent 2.4px),
    linear-gradient(180deg, var(--mat-luz) 0, transparent 70px),
    linear-gradient(180deg, var(--painel), var(--painel-2));
}

/* Vidro: só Teclog. Uma lâmina de luz atravessando a peça. */
body[data-mundo="teclog"] .moldura::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, transparent 38%,
              rgba(190,235,255,.055) 47%, transparent 56%);
}

/* ============================================================
   NÚMERO COM PESO
   ============================================================
   Número de jogo não é texto de relatório: tem serifa, tem
   sombra funda e ocupa espaço. É o que faz "63 Madeira/h"
   parecer produção e não célula de planilha.
   ============================================================ */

.cifra {
  font-family: var(--serif);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4);
}


/* ============================================================
   NAVEGAÇÃO ENTRE AS TELAS
   ============================================================
   A mesma barrinha em Cidade, Mapa e Perfil. Ela morava só
   dentro da cidade.html; o Perfil nasceu sem ela e os links
   saíram azuis de navegador. Peça compartilhada mora aqui.
   ============================================================ */

.navlinks { display: flex; gap: 3px; justify-content: flex-end; margin-top: 5px; }
.navlinks a {
  padding: 4px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); text-decoration: none;
}
.navlinks a:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.navlinks a.aqui { color: var(--gold); background: var(--gold-fun); }

/* ============================================================
   A MENSAGEM DO DIA
   ============================================================
   O painel de administração escreve, o servidor devolve em
   /api/eu — e até a Etapa 16 nenhuma tela lia. Era o canal de
   aviso do beta, mudo desde que nasceu.

   Mora aqui, no estilo compartilhado, porque aparece em mais
   de uma tela: a cidade e o mapa. Recado que só existe numa
   tela não é canal de aviso.
   ============================================================ */
.recado-do-dia {
  border: 1px solid rgba(120,170,255,.28);
  border-left: 3px solid rgba(120,170,255,.7);
  border-radius: 10px;
  background: rgba(80,130,220,.09);
  padding: 11px 14px; margin-bottom: 18px;
  font-size: 13px; line-height: 1.55;
  display: flex; gap: 10px; align-items: flex-start;
}
.recado-do-dia .rot {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: #9dc0ff; white-space: nowrap; padding-top: 2px; font-weight: 600;
}
/* Manutenção manda no recado comum: se o mundo vai cair às 22h,
   é isso que importa, e a cor muda pra dizer isso sem ler. */
.recado-do-dia.manutencao {
  border-color: rgba(255,170,70,.36);
  border-left-color: rgba(255,170,70,.8);
  background: rgba(200,120,30,.11);
}
.recado-do-dia.manutencao .rot { color: #ffc06a; }

@media (max-width: 620px) {
  .recado-do-dia { flex-direction: column; gap: 4px; }
}

/* ============================================================
   O ACEITE DOS TERMOS
   ============================================================
   Fica no cadastro, e é obrigatório. O tamanho do alvo importa:
   quadradinho pequeno demais em celular é a diferença entre
   criar conta e desistir.
   ============================================================ */
.aceite {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px;
  align-items: start;
  margin: 6px 0 14px;
  font-size: 13px; line-height: 1.55; color: var(--muted);
  cursor: pointer;
}
.aceite input[type="checkbox"] {
  width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--gold); cursor: pointer;
}
.aceite a { color: #e8d9a8; }
.aceite:hover { color: var(--ink); }

/* Os três links obrigatórios no rodapé. Não são burocracia: o
   gateway de pagamento procura por eles antes de aprovar a
   conta, e a LGPD exige a política acessível de qualquer página
   pública. */
.rodape-legal { display: inline-flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.rodape-legal a { color: var(--fraco); text-decoration: none; }
.rodape-legal a:hover { color: #e8d9a8; text-decoration: underline; }

/* ============================================================
   O CABEÇALHO GRUDADO NÃO PODE COMER O CONTEÚDO
   ============================================================
   O Edyel fotografou isto na tela da cidade: rolar a página até
   uma seção deixava o topo grudado por cima do título dela.

   A causa é conhecida e o remédio também — `scroll-margin-top`
   —, mas ele estava escrito à mão numa regra só, com o número
   96px chumbado, e valia só para aquele elemento. Todas as
   outras chamadas de `scrollIntoView` da página continuavam
   parando debaixo do cabeçalho.

   Aqui a correção é estrutural, em dois pedaços:

   1. A regra vale pra QUALQUER elemento com id — que é o que
      `scrollIntoView` e as âncoras `#assim` sempre alcançam.
      Não custa nada em quem nunca é rolado.

   2. A altura não é chumbada: `--altura-do-topo` é medida no
      cabeçalho de verdade pelo app.js e atualizada quando a
      janela muda de tamanho. No celular o topo quebra em duas
      linhas e fica mais alto — com número fixo, ficava errado
      exatamente onde a tela é menor e o erro dói mais.
   ============================================================ */
:root { --altura-do-topo: 0px; }

[id] { scroll-margin-top: calc(var(--altura-do-topo) + 14px); }

/* ============================================================
   O SELETOR DE IDIOMA
   ============================================================
   O pedido era claro: fácil de encontrar, sem menu complicado,
   bandeira + nome, e clicável nos dois.

   É um <details>, e isso resolve mais do que parece: fecha com
   Esc, abre com teclado e não precisa de uma linha de
   JavaScript pra abrir. Uma lista suspensa escrita à mão custa
   trinta linhas e perde as três coisas.
   ============================================================ */

.seletor-idioma {
  position: relative;
  display: inline-block;
  font-size: 13px;
}

.seletor-idioma > summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--borda-sut);
  border-radius: 8px;
  background: rgba(0,0,0,.25);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.seletor-idioma > summary::-webkit-details-marker { display: none; }
.seletor-idioma > summary:hover { border-color: rgba(201,162,39,.5); color: var(--ink); }
.seletor-idioma[open] > summary { border-color: var(--gold); color: var(--ink); }

.idioma-bandeira { font-size: 16px; line-height: 1; }
.idioma-seta { opacity: .6; font-size: 10px; }

.idioma-lista {
  position: absolute; z-index: 60;
  right: 0; margin-top: 6px;
  min-width: 216px;
  max-height: 60vh; overflow-y: auto;
  padding: 6px;
  background: var(--painel-2);
  border: 1px solid var(--borda-sut);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
}

/* A LINHA INTEIRA É O BOTÃO. Era esse o pedido — "selecionar
   clicando tanto na bandeira quanto no nome" — e ele sai de
   graça quando os dois moram dentro do mesmo <button>, em vez
   de serem dois alvos de clique separados. */
.idioma-opcao {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 11px;
  border: 0; border-radius: 7px;
  background: transparent; color: var(--ink);
  font: inherit; font-size: 13.5px; text-align: left;
  cursor: pointer;
}
.idioma-opcao:hover { background: rgba(255,255,255,.06); }
.idioma-opcao.atual { background: var(--gold-fun); color: var(--gold); }
.idioma-opcao.atual::after { content: "✓"; margin-left: auto; opacity: .8; }

/* Numa tela estreita a lista encosta na borda direita e some
   metade. Ancorar pelo lado esquerdo resolve sem media query
   dentro de cada página. */
@media (max-width: 480px) {
  .idioma-lista { right: auto; left: 0; min-width: 190px; }
}

/* ============================================================
   A CASCA — O PAINEL QUE SERVE TODAS AS TELAS
   ============================================================
   Um componente, dois corpos. No PC ele é uma JANELA centrada
   sobre o mundo, como o HERO DETAILS do Supremacy e a janela de
   construção do Travian. No celular ele é uma FOLHA que sobe de
   baixo, com puxador, porque é assim que aplicativo de celular
   se comporta e é onde o polegar alcança.

   Não é a mesma tela encolhida. A diferença entre as duas está
   toda aqui embaixo, num @media, e nenhuma tela do jogo precisa
   saber disso: ela pede `Painel.abrir(...)` e recebe o corpo
   certo pro aparelho de quem está jogando.

   REGRA DE FERRO: a página nunca rola enquanto um painel está
   aberto. Quem rola é o corpo do painel. Sem isso o jogador
   perde o lugar por trás e, ao fechar, aparece em outro ponto
   do mundo — que foi exatamente a reclamação da rolagem
   infinita, só que disfarçada.
   ============================================================ */

.casca-veu {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4,6,10,.72);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  animation: cascaVeu .16s var(--ease-out, ease);
}
.casca-veu[hidden] { display: none; }
@keyframes cascaVeu { from { opacity: 0; } to { opacity: 1; } }

.casca-folha {
  width: 100%; max-width: 900px;
  max-height: min(88vh, 920px);
  display: flex; flex-direction: column;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 14px;
  box-shadow: 0 30px 90px rgba(0,0,0,.72);
  overflow: hidden;
  animation: cascaEntra .18s var(--ease-out, ease);
}
@keyframes cascaEntra {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* O puxador só existe na folha do celular. No PC ele seria um
   traço decorativo sem função, e traço sem função é sujeira. */
.casca-puxador { display: none; }

.casca-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 15px 18px 14px; flex: none;
  border-bottom: 1px solid var(--borda);
  background: linear-gradient(180deg, var(--gold-fun, rgba(201,162,39,.08)), transparent);
}
.casca-topo h2 { margin: 0; font-size: 20px; line-height: 1.2; }
.casca-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.casca-nomes { min-width: 0; }

.casca-fechar {
  flex: none; width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 15px; line-height: 1; cursor: pointer;
  background: rgba(0,0,0,.28); color: var(--muted);
  border: 1px solid var(--borda-sut);
}
.casca-fechar:hover { color: var(--ink); border-color: var(--borda); }

.casca-corpo {
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px 20px;
}

body.casca-travada { overflow: hidden; }

/* ---- O CELULAR --------------------------------------------
   Folha de baixo pra cima, colada nas bordas, com puxador. E
   `100dvh` e não `100vh`: no celular a barra do navegador
   aparece e some, e `vh` congela o valor de quando a página
   carregou — o resultado é o rodapé do painel escondido atrás
   da barra justamente quando o jogador vai tocar no botão.

   `env(safe-area-inset-bottom)` é o queixo do iPhone e a barra
   de gestos do Android. Sem ele, o último botão do painel fica
   debaixo da faixa do sistema e não dá pra tocar. */
@media (max-width: 680px) {
  .casca-veu { padding: 0; align-items: flex-end; }

  .casca-folha {
    max-width: none; width: 100%;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    animation: cascaSobe .22s var(--ease-out, ease);
  }
  @keyframes cascaSobe {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }

  .casca-puxador {
    display: block; width: 38px; height: 4px; border-radius: 999px;
    background: var(--borda); margin: 9px auto 2px; flex: none;
  }

  .casca-topo { padding: 8px 15px 12px; }
  .casca-topo h2 { font-size: 17px; }
  .casca-corpo {
    padding: 14px 15px calc(22px + env(safe-area-inset-bottom, 0px));
  }

  /* Alvo de toque: 44px é o mínimo que a mão de um adulto acerta
     sem errar. O X de 34px do PC vira 40 aqui, e ganha área de
     toque maior que a área pintada. */
  .casca-fechar { width: 40px; height: 40px; font-size: 17px; }
}

/* ============================================================
   O TOQUE — o que muda quando não existe ponteiro
   ============================================================
   Não é sobre tamanho de tela: um tablet grande é toque e um
   monitor pequeno é mouse. `pointer: coarse` pergunta a coisa
   certa.
   ============================================================ */
@media (pointer: coarse) {
  /* Nada no jogo deve depender de passar o mouse por cima —
     no toque isso não existe. O rótulo do prédio, por exemplo,
     tem o nome também no `title` e no cabeçalho do painel. */
  .botao, button, .opcao, .predio, .navlinks a { min-height: 44px; }
  .navlinks a { display: inline-flex; align-items: center; }
}

/* ============================================================
   A NAVEGAÇÃO NO CELULAR — barra de baixo
   ============================================================
   Os três LUGARES do jogo (Sala, Cidade, Mapa) ficam ao alcance
   do polegar, e não no alto da tela onde a mão não chega. É o
   padrão de todo aplicativo de celular, e o motivo é anatômico,
   não estético.

   Ela usa a MESMA `.navlinks` que já existe no topo — a lista
   não é duplicada, ela só muda de lugar. Duplicar navegação é
   como se acaba com dois menus que discordam.
   ============================================================ */
@media (max-width: 680px) {
  /* `body > .casca-barra` e não `.topo .navlinks`: a casca MOVE
     a barra pro <body> justamente porque `fixed` dentro do
     cabeçalho com vidro fosco não chega no rodapé da tela. O
     seletor segue o lugar novo dela. */
  body > .navlinks.casca-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; justify-content: space-around; align-items: stretch;
    gap: 0; margin: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(8,11,16,.96);
    border-top: 1px solid var(--borda);
    backdrop-filter: blur(8px);
  }
  body > .navlinks.casca-barra a {
    flex: 1; justify-content: center; text-align: center;
    padding: 9px 4px; border-radius: 9px; font-size: 13px;
  }
  /* O corpo respira o tamanho da barra, senão o último cartão da
     página fica escondido atrás dela pra sempre. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  body.casca-travada { padding-bottom: 0; }
}