/*
 * Estilo do Terminal do Ditador.
 *
 * Saiu de dentro do index.html junto com o painel.js: a pagina passava de
 * mil linhas misturando estrutura, aparencia e logica, e nenhuma das tres
 * ficava legivel.
 */

/* CSS BRUTALISTA E ESCURO */
:root {
    --bg-color: #0d0d0d;
    --text-main: #d1d1d1;
    --border-color: #333;
    --neon-green: #39ff14;
    --amber-alert: #ffbf00;
    --blood-red: #ff073a;
    --font-stack: 'Courier New', Courier, monospace;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-stack);
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 1fr 120px;
    height: 100vh;
    overflow: hidden;
}

/* Paineis Gerais */
.panel { border: 1px solid var(--border-color); padding: 20px; overflow-y: auto; }
h2 { color: var(--amber-alert); font-size: 1.2rem; margin-bottom: 15px; text-transform: uppercase; border-bottom: 1px solid var(--border-color); padding-bottom: 5px; }

/* Painel Esquerdo: Termômetros do Poder */
.left-panel { grid-column: 1 / 2; grid-row: 1 / 2; border-right: none; border-bottom: none; }
.stat-box { margin-bottom: 15px; }
.stat-label { font-size: 0.9rem; color: #888; }
.stat-value { font-size: 1.1rem; font-weight: bold; }

/* Projeção e extrato: informação densa em corpo pequeno, para caber na
   coluna sem competir com os indicadores principais. */
.projecao { font-size: 0.75rem; color: #888; margin-top: 2px; }
.extrato { margin-top: 6px; }
.extrato summary { font-size: 0.7rem; color: #666; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; }
.extrato summary:hover { color: var(--amber-alert); }
.extrato-linha { display: flex; justify-content: space-between; gap: 8px; font-size: 0.75rem; margin-top: 4px; }
.extrato-linha .rotulo { color: #999; }
.extrato-linha .valor { font-weight: bold; flex-shrink: 0; }
.extrato-detalhe { font-size: 0.68rem; color: #666; margin-left: 2px; }
.extrato-saldo { display: flex; justify-content: space-between; font-size: 0.78rem;
    margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border-color); }
.extrato-recursos { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--border-color); }
.extrato-recursos .titulo { font-size: 0.68rem; color: #666; text-transform: uppercase; letter-spacing: 1px; }
.color-green { color: var(--neon-green); }
.color-red { color: var(--blood-red); }

/* Abas do painel central: a Federação concorre em pé de igualdade com a
   imprensa, que é onde as duas disputam a atenção do Ditador de verdade. */
.abas { display: flex; gap: 2px; margin-bottom: 18px; border-bottom: 1px solid var(--border-color); }
.aba {
    background: none; border: none; border-bottom: 2px solid transparent;
    color: #777; font-family: var(--font-stack); font-size: 0.9rem;
    text-transform: uppercase; letter-spacing: 1px; padding: 8px 16px; cursor: pointer;
}
.aba:hover { color: var(--text-main); }
.aba.ativa { color: var(--amber-alert); border-bottom-color: var(--amber-alert); }
.aba .contador {
    background-color: var(--blood-red); color: #fff; border-radius: 10px;
    font-size: 0.7rem; padding: 1px 7px; margin-left: 6px; font-weight: bold;
}
.aba .contador[hidden] { display: none; }

/* Federação */
.fed-cabecalho { display: flex; justify-content: space-between; align-items: center;
    border: 1px solid var(--border-color); padding: 10px 14px; margin-bottom: 18px; }
.fed-rotulo { color: #888; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; }
.fed-valor { color: var(--amber-alert); font-weight: bold; font-size: 1.1rem; margin-left: 8px; }
.fed-aviso { font-size: 0.8rem; color: #888; }
.fed-aviso.erro { color: var(--blood-red); }
.fed-aviso.ok { color: var(--neon-green); }

.fed-resolucao { border-left: 2px solid var(--border-color); padding: 10px 12px; margin-bottom: 12px; }
.fed-resolucao.contra-voce { border-left-color: var(--blood-red); }
.fed-resolucao .tema { line-height: 1.4; margin-bottom: 4px; }
.fed-resolucao .quem { font-size: 0.75rem; color: #777; }
.fed-votos { display: flex; gap: 8px; margin-top: 10px; }
.fed-votos button {
    background: none; border: 1px solid var(--border-color); color: #999;
    font-family: var(--font-stack); font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 1px; padding: 5px 12px; cursor: pointer;
}
.fed-votos button:hover { border-color: var(--amber-alert); color: var(--amber-alert); }
.fed-votos button.escolhido { background-color: var(--amber-alert); color: #000; font-weight: bold; border-color: var(--amber-alert); }

.fed-norma-vigente { border-left: 2px solid var(--neon-green); padding: 6px 12px;
    margin-bottom: 8px; font-size: 0.8rem; color: #aaa; }
/* O caixa do Fórum. Azul e não verde: é dinheiro que não é da nação, e a cor
   é a única pista visual de que aquele saldo não está no bolso do jogador. */
.fed-fundo { border-left: 2px solid #4a9eff; padding: 8px 12px; margin-bottom: 20px;
    font-size: 0.8rem; color: #aaa; line-height: 1.6; }
.fed-fundo-nota { color: #888; font-size: 0.75rem; margin-top: 4px; }
/* Guerra aberta com o Fórum. Vermelho porque é a única linha deste painel que
   descreve uma situação em curso, e não um saldo. */
.fed-escalada { color: #ff6b6b; border-left: 2px solid #ff6b6b; padding: 6px 10px;
    margin-bottom: 8px; font-size: 0.78rem; line-height: 1.5; }

.fed-coordenadas { display: flex; gap: 8px; }
.fed-coordenadas input { flex: 1; }

.fed-formulario { border: 1px solid var(--border-color); padding: 14px; margin-bottom: 20px; }
.fed-formulario label { display: block; color: #888; font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.fed-instrumentos { border-left: 2px solid var(--border-color); padding: 8px 12px;
    margin-bottom: 12px; font-size: 0.75rem; color: #888; line-height: 1.5; }
.fed-instrumentos[hidden] { display: none; }
.fed-formulario textarea {
    width: 100%; background-color: #000; color: var(--text-main);
    border: 1px solid var(--border-color); padding: 9px; margin-bottom: 12px;
    font-family: var(--font-stack); font-size: 0.9rem; outline: none; resize: vertical;
}
.fed-formulario textarea:focus { border-color: var(--amber-alert); }
.fed-formulario select, .fed-formulario input {
    width: 100%; background-color: #000; color: var(--text-main);
    border: 1px solid var(--border-color); padding: 9px; margin-bottom: 12px;
    font-family: var(--font-stack); font-size: 0.9rem; outline: none;
}
.fed-formulario select:focus, .fed-formulario input:focus { border-color: var(--amber-alert); }
.fed-formulario button {
    background-color: var(--blood-red); color: #fff; border: none; padding: 10px 20px;
    font-family: var(--font-stack); font-size: 0.85rem; font-weight: bold;
    text-transform: uppercase; cursor: pointer;
}
.fed-formulario button:disabled { background-color: #444; cursor: not-allowed; }

.fed-decidida { display: flex; justify-content: space-between; gap: 10px;
    font-size: 0.8rem; padding: 6px 0; border-bottom: 1px solid #1e1e1e; }
.fed-decidida .placar { color: #777; flex-shrink: 0; }

/* Painel Central: Jornal e Relatórios */
.center-panel { grid-column: 2 / 3; grid-row: 1 / 2; border-right: none; border-bottom: none; }
.news-block { margin-bottom: 25px; line-height: 1.5; }
.news-title { color: var(--text-main); font-weight: bold; margin-bottom: 10px; }
.intel-block { color: var(--amber-alert); font-style: italic; border-left: 2px solid var(--amber-alert); padding-left: 10px; margin-top: 10px; }

.map-placeholder { width: 100%; height: 200px; border: 1px dashed #555; display: flex; align-items: center; justify-content: center; color: #555; text-align: center; font-size: 0.9rem; }

/* Rodapé: Console do Ditador */
.footer-console { grid-column: 1 / 3; grid-row: 2 / 3; background-color: #1a1a1a; display: flex; align-items: center; padding: 20px; border-top: 2px solid var(--amber-alert); }
.prompt-prefix { color: var(--neon-green); font-weight: bold; margin-right: 15px; font-size: 1.2rem; }
textarea { flex-grow: 1; background-color: #000; color: var(--text-main); border: 1px solid var(--border-color); padding: 15px; font-family: var(--font-stack); font-size: 1rem; resize: none; height: 100%; outline: none; }
textarea:focus { border-color: var(--amber-alert); }
.btn-sanction { background-color: var(--blood-red); color: #fff; border: none; padding: 0 30px; margin-left: 20px; height: 100%; font-family: var(--font-stack); font-size: 1.1rem; font-weight: bold; cursor: pointer; text-transform: uppercase; transition: 0.2s; }
.btn-sanction:hover { background-color: #cc002e; }


/* --- TELA DE ACESSO (login / cadastro / fundação) ---
   Cobre o terminal inteiro em vez de ficar num canto: enquanto não
   há sessão, NADA no painel de trás tem dado válido, e deixar o
   terminal visível por baixo sugeriria que há algo para ver. */
.tela-acesso {
    position: fixed; inset: 0; z-index: 1000;
    background-color: var(--bg-color);
    display: flex; align-items: center; justify-content: center;
}
.tela-acesso[hidden] { display: none; }
.caixa-acesso { width: 100%; max-width: 460px; padding: 30px; border: 1px solid var(--border-color); }
.caixa-acesso h1 { color: var(--amber-alert); font-size: 1.4rem; text-transform: uppercase; margin-bottom: 6px; }
.caixa-acesso .subtitulo { color: #777; font-size: 0.85rem; margin-bottom: 25px; line-height: 1.5; }
/* Faixa de modo: é ela que responde "estou entrando ou me cadastrando?".
   Fundo sólido em vez de texto solto porque o olho precisa achar isso antes
   de ler qualquer campo. */
.faixa-modo {
    display: inline-block; margin-bottom: 14px; padding: 4px 12px;
    background-color: var(--border-color); color: var(--text-main);
    font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase;
}
.faixa-modo.cadastro { background-color: var(--amber-alert); color: #000; font-weight: bold; }
.caixa-acesso label { display: block; color: #888; font-size: 0.8rem; margin-bottom: 6px; text-transform: uppercase; }
.caixa-acesso input {
    width: 100%; background-color: #000; color: var(--text-main);
    border: 1px solid var(--border-color); padding: 12px;
    font-family: var(--font-stack); font-size: 1rem; margin-bottom: 18px; outline: none;
}
.caixa-acesso input:focus { border-color: var(--amber-alert); }
.caixa-acesso button {
    width: 100%; background-color: var(--blood-red); color: #fff; border: none;
    padding: 14px; font-family: var(--font-stack); font-size: 1rem; font-weight: bold;
    cursor: pointer; text-transform: uppercase; transition: 0.2s;
}
.caixa-acesso button:hover { background-color: #cc002e; }
.caixa-acesso button:disabled { background-color: #444; cursor: wait; }
.alternar-modo { background: none !important; border: none; color: #777 !important;
    font-size: 0.85rem !important; text-decoration: underline; cursor: pointer;
    margin-top: 18px; padding: 0 !important; text-transform: none !important; font-weight: normal !important; }
.alternar-modo:hover { color: var(--amber-alert) !important; background: none !important; }
.aviso-acesso { min-height: 20px; margin-top: 14px; font-size: 0.85rem; line-height: 1.4; }
.aviso-erro { color: var(--blood-red); }
.aviso-ok { color: var(--neon-green); }
.barra-sessao { font-size: 0.75rem; color: #666; margin-top: 20px; border-top: 1px solid var(--border-color); padding-top: 10px; }
.barra-sessao button { background: none; border: none; color: #777; font-family: var(--font-stack);
    font-size: 0.75rem; text-decoration: underline; cursor: pointer; padding: 0; }
.barra-sessao button:hover { color: var(--blood-red); }

/* --- Aba de Recursos ------------------------------------------------------
   Matéria-prima é assunto interno que vira assunto diplomático. A tela mostra
   o gargalo ANTES de o jogador gastar em pesquisa travada, e diz com quem
   resolver. */
.rec-linha, .rec-trilha { border-left: 2px solid var(--border-color);
    padding: 6px 12px; margin-bottom: 6px; font-size: 0.8rem; }
.rec-nome { color: #ccc; }
.rec-valor { color: #888; margin-left: 8px; }
.rec-nivel { color: #666; margin-left: 8px; font-size: 0.75rem; }
.rec-detalhe { color: #888; font-size: 0.75rem; margin-top: 3px; }

/* Zero é informação, não ausência: é o que diz ao jogador que aquela trilha
   inteira depende de outra nação. */
.rec-linha.rec-zero .rec-valor, td.rec-zero { color: #ff6b6b; }
.rec-linha.rec-tem { border-left-color: var(--neon-green); }
.rec-trilha.rec-travada { border-left-color: #ff6b6b; }
.rec-falta { color: #ff6b6b; margin-left: 8px; }
.rec-ok { color: var(--neon-green); margin-left: 8px; }
.rec-embargo { color: #ffb347; margin-left: 8px; font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 1px; }

.rec-nota { color: #777; font-size: 0.72rem; line-height: 1.5;
    margin: 10px 0 18px; }
.rec-nota.rec-aviso { color: #999; border-left: 2px solid #ff6b6b;
    padding-left: 10px; }

/* A tabela do mundo rola sozinha: com muitas nações ela passa da coluna, e o
   painel inteiro não pode rolar na horizontal por causa dela. */
.rec-tabela-rolavel { overflow-x: auto; }
.rec-tabela { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.rec-tabela th { color: #666; text-align: left; font-weight: normal;
    text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px 4px 0;
    border-bottom: 1px solid var(--border-color); }
.rec-tabela td { padding: 5px 8px 5px 0; color: #aaa; }
.rec-tabela tr.rec-voce td { color: var(--neon-green); }

.contador.alerta { background: #ff6b6b; }

/* --- Exércitos, abaixo do mapa --------------------------------------------
   O radar diz ONDE e não diz O QUÊ: uma divisão com 7 de 20 desenha o mesmo
   ícone de uma intacta. A lista fecha essa lacuna sem tirar o jogador do
   contexto do mapa. */
#painel-exercitos { margin-top: 18px; }
#painel-exercitos h2 { font-size: 1rem; }
.ex-vazio { color: #666; font-size: 0.78rem; }

/* A faixa da esquerda é severidade, não enfeite. */
.ex { border-left: 3px solid var(--neon-green); margin-bottom: 6px;
    background: #0a0a0a; }
.ex.desgastada { border-left-color: var(--amber-alert); }
.ex.critica { border-left-color: #ff6b6b; }

.ex summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 6px 10px; font-size: 0.76rem; list-style: none;
}
.ex summary::-webkit-details-marker { display: none; }
.ex summary:hover { background: #111; }
.ex summary:focus-visible { outline: 1px solid var(--amber-alert); outline-offset: -1px; }
.ex-nome { color: #ddd; white-space: nowrap; }
.ex-onde { color: #777; font-size: 0.72rem; white-space: nowrap; }

/* A barra é o que torna o número legível de relance: "7" sozinho não diz se é
   muito ou pouco. */
.ex-barra { flex: 1; height: 6px; background: #1c1c1c; border: 1px solid #262626;
    min-width: 30px; }
.ex-enche { display: block; height: 100%; background: var(--neon-green); }
.ex.desgastada .ex-enche { background: var(--amber-alert); }
.ex.critica .ex-enche { background: #ff6b6b; }
.ex-numero { color: #aaa; font-size: 0.72rem; font-variant-numeric: tabular-nums;
    white-space: nowrap; }
.ex.critica .ex-numero { color: #ff6b6b; }

.ex-corpo { padding: 2px 10px 10px; font-size: 0.72rem; color: #888;
    display: flex; flex-direction: column; gap: 7px; }
.ex-marcas { display: flex; flex-wrap: wrap; gap: 5px; }
.ex-marca { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.8px;
    padding: 2px 6px; border: 1px solid var(--border-color); color: #777; }
.ex-marca.boa { border-color: #1f5c14; color: var(--neon-green); }
.ex-marca.atencao { border-color: #5c4a0f; color: var(--amber-alert); }
.ex-marca.ruim { border-color: #5c1f1f; color: #ff6b6b; }

/* Seletor de idioma do painel.
   Fica no RODAPÉ da coluna, separado por um filete: é ajuste de preferência,
   não indicador de poder, e disputar espaço com o tesouro faria o jogador
   procurá-lo entre os números todo turno. Discreto, mas presente — quem
   fundou numa língua e quer outra não tem outro caminho. */
.rodape-idioma {
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #666;
}
.rodape-idioma select {
    background: #0a0a0a;
    color: #888;
    border: 1px solid var(--border-color);
    font-family: inherit;
    font-size: 0.75rem;
    padding: 2px 4px;
}

/* Sair, logo abaixo do idioma: ambos são ajustes da SESSÃO, e não
   indicadores do país. Discreto de propósito — é a saída, não uma ação de
   jogo, e não pode competir com o tesouro pela atenção. */
.rodape-sessao {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.7rem;
    color: #555;
}
.rodape-sessao button {
    background: none;
    border: 1px solid var(--border-color);
    color: #888;
    font-family: inherit;
    font-size: 0.7rem;
    padding: 2px 8px;
    cursor: pointer;
}
.rodape-sessao button:hover { color: #ff5555; border-color: #661111; }

/* Cabeçalho do mapa: título à esquerda, alternador de modo à direita.
   O botão fica ao lado do título e não sobre o canvas — ele troca o que o
   mapa SIGNIFICA, não o que está desenhado num ponto dele. */
.mapa-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.mapa-cabecalho h2 { margin-bottom: 0; }
#btn-modo-mapa {
    background: none;
    border: 1px solid var(--border-color);
    color: #888;
    font-family: inherit;
    font-size: 0.7rem;
    padding: 2px 8px;
    cursor: pointer;
    flex-shrink: 0;
}
#btn-modo-mapa:hover { color: var(--neon-green); border-color: var(--neon-green); }

/* --- Conversas -----------------------------------------------------------
   Duas colunas em tela larga, empilhadas no celular. A lista fica estreita de
   proposito: o que importa e a conversa, e o mundo tem poucas nacoes. */
.conv-layout { display: flex; gap: 20px; align-items: flex-start; }
.conv-coluna { flex: 0 0 220px; }
#conv-janela { flex: 1 1 auto; min-width: 0; }

/* A LISTA DE NACOES.
   Ela estava marcada como `.fed-aviso`, que nesta folha e legenda: 0.8rem e
   cinza — a classe das notas de rodape. O resultado era uma lista de nomes
   que parecia texto solto, sem nada dizendo que da para clicar. Aqui ela
   ganha corpo, a barra da esquerda que o resto do painel usa para "item", e
   um estado de hover que so existe onde se pode clicar. */
.conv-nacao {
    display: block; width: 100%; text-align: left;
    background: none; border: none;
    border-left: 2px solid var(--border-color);
    color: var(--text-main); font-family: var(--font-stack);
    font-size: 0.95rem; font-weight: bold;
    padding: 9px 12px; margin-bottom: 4px; cursor: pointer;
}
.conv-nacao:hover { border-left-color: var(--text-main); background: #151515; }
.conv-nacao.ativa { border-left-color: var(--amber-alert); color: var(--amber-alert); }

/* A sala fica no topo e separada: ela nao e uma nacao. */
.conv-nacao.canal { text-transform: uppercase; letter-spacing: 1px; }
.conv-separador { border: none; border-top: 1px solid var(--border-color); margin: 10px 0; }

/* A ficha do Cartorio e o nao-lido ao lado do nome, em peso normal: eles
   informam, e nao competem com o nome pela atencao. */
.conv-nacao .conv-ficha { font-weight: normal; color: #777; font-size: 0.8rem; }
.conv-nacao .contador {
    background-color: var(--blood-red); color: #fff; border-radius: 10px;
    font-size: 0.7rem; padding: 1px 7px; margin-left: 6px; font-weight: bold;
}

/* A conversa rola SOZINHA, sem levar a pagina junto: quem le o historico nao
   quer perder a lista de abas de vista. */
#conv-mensagens {
    min-height: 120px; max-height: 340px; overflow-y: auto;
    border: 1px solid var(--border-color); padding: 10px; margin: 10px 0;
}
#conv-texto {
    width: 100%; box-sizing: border-box;
    background: #111; color: var(--text-main);
    border: 1px solid var(--border-color); font-family: var(--font-stack);
    padding: 8px; margin-bottom: 8px;
}
#conv-texto:focus { outline: none; border-color: var(--amber-alert); }

/* O balao diz de quem e a fala pelo ALINHAMENTO, e nao so pela cor: num
   terminal monocromatico a cor sozinha desaparece. */
.conv-balao {
    margin: 8px 0; max-width: 78%; padding: 7px 10px;
    border-left: 2px solid var(--border-color); line-height: 1.4;
}
.conv-balao.sua {
    margin-left: auto; text-align: right;
    border-left: none; border-right: 2px solid var(--amber-alert);
}
.conv-balao .conv-quem {
    font-size: 0.75rem; color: #777; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 3px;
}

@media (max-width: 720px) {
    .conv-layout { flex-direction: column; }
    .conv-coluna { flex: 1 1 auto; width: 100%; }
}

/* --- O mapa como aba ------------------------------------------------------
   Saiu da coluna de 460px para o painel central inteiro: e o tabuleiro, e
   uma janelinha quadrada sobre um mundo de centenas de hexagonos obrigava a
   arrastar para ver qualquer coisa. Duas colunas — o canvas e a lateral com
   cartao, legenda e exercitos — que se empilham em tela estreita. */
.mapa-corpo { display: flex; gap: 16px; align-items: flex-start; }
#radar-map {
    flex: 1 1 auto; min-width: 0; width: 100%;
    background: #02050a; border: 1px solid var(--border-color);
    cursor: grab; box-shadow: inset 0 0 14px rgba(0,0,0,0.85);
    display: block;
}
.mapa-lateral { flex: 0 0 250px; font-size: 0.8rem; }
.mapa-legenda { margin-top: 10px; border-top: 1px dashed var(--border-color);
                padding-top: 6px; color: #888; line-height: 1.6; }
.mapa-legenda-fixa { margin: 6px 0; }
#painel-exercitos { margin-top: 14px; }

/* Os tres glifos de tropa, reproduzidos na legenda com CSS para a legenda
   mostrar o MESMO desenho do mapa — uma legenda com simbolos diferentes dos
   do mapa e uma legenda de outro mapa. */
.glifo { display: inline-block; width: 10px; height: 10px; vertical-align: middle; }
.glifo-propria { background: var(--amber-alert); clip-path: polygon(0 10%, 100% 10%, 100% 60%, 50% 100%, 0 60%); }
.glifo-alheia  { border: 2px solid var(--blood-red); transform: rotate(45deg); width: 7px; height: 7px; }
.glifo-paz     { border: 2px solid #4ea3ff; border-radius: 50%; width: 8px; height: 8px; }
/* Os navios: a silhueta diz o tipo, a cor diz o casco. O civil e uma banheira
   com caixa em cima; o de guerra tem a proa em ponta e o corpo baixo. */
.glifo-navio-civil  { background: var(--amber-alert); width: 12px; height: 9px;
                      clip-path: polygon(20% 0, 70% 0, 70% 45%, 100% 45%, 80% 100%, 15% 100%, 0 45%, 20% 45%); }
.glifo-navio-guerra { background: var(--amber-alert); width: 13px; height: 8px;
                      clip-path: polygon(25% 0, 60% 0, 60% 40%, 85% 40%, 100% 65%, 80% 100%, 15% 100%, 0 40%, 25% 40%); }
.glifo-casco-madeira { background: #8a5a2b; width: 10px; height: 6px; }
.glifo-casco-aco     { background: #a7b3be; width: 10px; height: 6px; }
.glifo-aeronave      { background: #e8edf2; width: 13px; height: 11px;
                       clip-path: polygon(100% 50%, 55% 35%, 25% 0, 15% 5%, 30% 40%, 0 45%, 0 55%, 30% 60%, 15% 95%, 25% 100%, 55% 65%); }

/* O cartao do hexagono clicado. */
.mapa-cartao { border-left: 2px solid var(--amber-alert); padding: 8px 12px;
               margin-bottom: 10px; background: #0f0f0f; }
.mapa-cartao .titulo { color: var(--amber-alert); font-weight: bold; text-transform: uppercase;
                       letter-spacing: 1px; font-size: 0.8rem; margin-bottom: 4px; }
.mapa-cartao .linha { color: var(--text-main); }
.mapa-cartao .linha span { color: #888; }
.mapa-cartao .acoes { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.mapa-cartao .acoes button {
    background: none; border: 1px solid var(--border-color); color: var(--text-main);
    font-family: var(--font-stack); font-size: 0.75rem; padding: 4px 9px; cursor: pointer;
}
.mapa-cartao .acoes button:hover { border-color: var(--amber-alert); color: var(--amber-alert); }

@media (max-width: 1100px) {
    .mapa-corpo { flex-direction: column; }
    .mapa-lateral { flex: 1 1 auto; width: 100%; }
}


/* --- A aba de reportes. Sóbria de propósito: quem chega aqui está irritado
   com alguma coisa, e uma tela enfeitada seria deboche. --- */
.rep-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.rep-tipo {
    background: transparent; border: 1px solid #2a3340; color: #8b98a6;
    padding: 8px 14px; cursor: pointer; font-family: inherit; font-size: 0.85rem;
}
.rep-tipo:hover { border-color: var(--amber-alert); color: #d8e0e8; }
.rep-tipo.ativo {
    border-color: var(--amber-alert); color: #0b0e12;
    background: var(--amber-alert); font-weight: bold;
}
#painel-reportar label {
    display: block; margin-bottom: 4px; color: #8b98a6; font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 0.06em;
}
#painel-reportar input[type="text"], #painel-reportar textarea {
    width: 100%; box-sizing: border-box; margin-bottom: 16px;
    background: #0b0e12; border: 1px solid #2a3340; color: #d8e0e8;
    font-family: inherit; font-size: 0.9rem; padding: 8px;
}
#painel-reportar textarea { resize: vertical; }
.rep-rodape { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.rep-item {
    border-left: 2px solid #2a3340; padding: 6px 0 6px 10px; margin-bottom: 10px;
}
.rep-item .rep-cabeca { color: #8b98a6; font-size: 0.75rem; }
.rep-item .rep-assunto { color: #d8e0e8; }
.rep-marca {
    display: inline-block; padding: 1px 6px; margin-right: 6px;
    border: 1px solid #2a3340; font-size: 0.7rem; text-transform: uppercase;
}
.rep-marca.bug { border-color: var(--blood-red); color: var(--blood-red); }
.rep-marca.sugestao { border-color: #4ea3ff; color: #4ea3ff; }
.rep-marca.feedback { border-color: #7dffb0; color: #7dffb0; }


/* A faixa da largada: o mundo esperando jogadores. Ambar, nao vermelha —
   nao e erro, e uma espera combinada. */
.faixa-partida {
    border: 1px solid var(--amber-alert);
    border-left-width: 4px;
    background: rgba(255, 191, 0, 0.07);
    color: #e8dcc0;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 0.88rem;
}