/* ==========================================================================
   TechTerra - EVENTO GLOBAL no mapa (visao do JOGADOR).
   Folha do `engine/core/evento_mapa.js`. Namespace UNICO: `.evm-*`.

   Desenho da CASCA: VARIACAO 2 do mock aprovado pelo dono
   (techterra-online-backend/docs/mock-evento-global-faixa-mapa.html, classes
   `.v2-*`) — cartaz lateral recolhivel, aba dourada pulsando quando fechado.

   Desenho de DENTRO: VARIACAO B ("O Sanfona") do mock
   docs/mock-evento-global-cartaz-jogador.html. A pilha de posteres virou
   INDICE + DETALHE: cabecalho sempre visivel por evento (nome + prazo + todos
   os chips) e UM corpo aberto por vez. O que motivou a troca foi a producao
   real — um evento de 1231 caracteres de descricao empurrava o segundo evento
   pra fora da tela, e o `<p>` sem `white-space` ainda colapsava os 10 blocos
   que o narrador escreveu num paragrafo unico.

   Classes que MORRERAM na troca (nao procure por elas, nao estao escondidas):
   `.evm-card`, `.evm-artewrap`, `.evm-selo`, `.evm-nome`, `.evm-sem-arte`,
   `.evm-mods`, `.evm-mod`, `.evm-mod-n`, `.evm-mod-v`, `.evm-nota` e
   `.evm-lista--multi`. O selo virou o `.evm-cab` (uma vez, no topo), o nome
   subiu pro `.evm-ev-nome` (fim do `right: 40px` a mao), os modificadores
   viraram `.evm-chip` e a nota virou `.evm-rodape` (uma vez, no rodape).

   POR QUE ARQUIVO PROPRIO, E NAO O style.css
   O style.css passa de 1,2 MB e e' editado por varias sessoes ao mesmo tempo;
   encostar nele por causa de uma superficie nova e' o caminho mais curto pra um
   conflito que derruba a folha inteira pra todo mundo. Precedente no repo:
   evento_global.css, mestre_dashboard.css, guia_faixa_poder.css e
   evolucao_anim.css nasceram pelo mesmo motivo.
   O <link> tem que vir DEPOIS do style.css no index.html.

   NAO CONFUNDIR COM `.evg-*` (evento_global.css): aquela e' a folha do CADASTRO
   do narrador, no Painel do Mestre. Esta e' a do JOGADOR, sobre o mapa. Duas
   telas, dois publicos, dois namespaces — misturar faria um ajuste do wizard
   mexer no cartaz do jogador sem ninguem perceber.

   NUNCA injetar este CSS por template string em JS: uma crase dentro de CSS em
   template literal ja' quebrou a folha inteira neste projeto, e o `node --check`
   nao pega.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. A RAIZ — ancora que NAO rouba clique

   `inset: 0` existe so' pra ancorar os dois filhos no canto certo em qualquer
   viewport. `pointer-events: none` e' obrigatorio: sem ele este retangulo de
   tela inteira comeria o clique de TODO pino de Local, e o mapa pareceria
   travado sem um unico erro no console. O ponteiro volta a valer so' no cartaz
   e na aba.

   z-index 9500 — ABAIXO de tudo com que o jogador interage sob demanda, ACIMA
   do mapa.

   O que decide o patamar e' que esta superficie e' PERMANENTE e NAO FOI PEDIDA:
   ela e' montada sozinha quando o mapa aparece e nunca e' desmontada enquanto
   houver evento no ar. Uma camada assim nao pode disputar espaco com o que o
   jogador abriu por vontade propria. Os vizinhos:

     .mestre-form-overlay  9600   overlay padrao de TODO modal do jogo (mochila,
                                  ficha, armazem, bestiario, pickers) — e o ✕
                                  desses modais fica no canto SUPERIOR DIREITO,
                                  exatamente onde o cartaz mora
     .mestrar-incoming    11400   toast ACIONAVEL de convite pra mesa
     arena de batalha     14000
     .inv-janela          14600

   Ficando em 9500 o cartaz e' coberto por qualquer modal aberto e pela batalha.
   Isso e' desejado, nao um efeito colateral: com modal aberto o jogador esta'
   olhando outra coisa, e o cartaz cobrindo o ✕ dele seria um bug de UX que nada
   na tela explicaria. Fechou o modal, o cartaz volta.

   NAO copiar o patamar da janela de invasao (14600): aquela e' sob demanda,
   fechavel E arrastavel — quem se sobrepoe a um modal ali fez isso por escolha e
   tem o gesto pra desfazer. Este cartaz nao tem nem uma coisa nem a outra.
   -------------------------------------------------------------------------- */
.evm-raiz {
    position: fixed;
    inset: 0;
    z-index: 9500;
    pointer-events: none;
}
.evm-raiz > * { pointer-events: auto; }
.evm-raiz [hidden] { display: none !important; }


/* --------------------------------------------------------------------------
   2. A ABA (estado recolhido)

   Grudada na borda direita, sem borda do lado de fora, pra ler como uma aba que
   sai da tela e nao como um botao solto. O ponto pulsa: recolhido, ele e' a
   unica pista de que ha' evento no ar.
   -------------------------------------------------------------------------- */
.evm-aba {
    position: absolute;
    right: 0;
    top: 92px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: linear-gradient(90deg, rgba(13, 10, 5, 0.72), rgba(13, 10, 5, 0.96));
    border: 1px solid rgba(201, 168, 76, 0.5);
    border-right: none;
    border-radius: 8px 0 0 8px;
    padding: 9px 12px 9px 11px;
    color: #f4e2ad;
    /* LONGHANDS, e nao o atalho `font:`. `font: 600 0.76rem/1 inherit` parece
       certo e e' INVALIDO — `inherit` nao vale como familia dentro do atalho, e
       o browser descarta a DECLARACAO INTEIRA. O rotulo da aba vinha saindo em
       Arial 13,33px peso 400 (o default do <button>), em vez da fonte do jogo. */
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: -4px 4px 16px rgba(0, 0, 0, 0.5);
}
.evm-aba:hover { background: rgba(201, 168, 76, 0.2); }
.evm-aba:focus-visible { outline: 2px solid #e8c56a; outline-offset: 2px; }

.evm-aba-pt {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e8c56a;
    box-shadow: 0 0 7px #e8c56a;
    animation: evm-pisca 2s ease-in-out infinite;
}
@keyframes evm-pisca {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
/* Respeita quem pediu menos movimento no sistema — a aba continua visivel, so'
   para de piscar. */
@media (prefers-reduced-motion: reduce) {
    .evm-aba-pt { animation: none; }
}


/* --------------------------------------------------------------------------
   3. O CARTAZ (estado aberto)

   Ancorado no ALTO da direita: a janela de invasao ancora no RODAPE da direita,
   entao nos tamanhos de tela comuns as duas nem se encostam. `max-height` em vh
   pra que a lista role por dentro em vez de o cartaz vazar pra fora da tela.
   -------------------------------------------------------------------------- */
.evm-cartaz {
    position: absolute;
    right: 16px;
    top: 68px;
    width: min(320px, calc(100vw - 32px));
    max-height: min(62vh, 520px);
    display: flex;
    flex-direction: column;
    background: rgba(13, 10, 5, 0.97);
    border: 1px solid rgba(201, 168, 76, 0.42);
    border-radius: 11px;
    overflow: hidden;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.72);
    color: #e9dcc0;
}

.evm-x {
    position: absolute;
    right: 7px;
    top: 7px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(201, 168, 76, 0.3);
    color: #cdbf9f;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    font-family: inherit;
    padding: 0;
}
.evm-x:hover { color: #f4e2ad; border-color: #c9a84c; }
.evm-x:focus-visible { outline: 2px solid #e8c56a; outline-offset: 2px; }


/* --------------------------------------------------------------------------
   4. O CABECALHO DO CARTAZ e A LISTA

   O `.evm-cab` e' o antigo `.evm-selo` promovido: "Evento global" era escrito
   em TODO card, e com dois eventos no ar a mesma etiqueta aparecia duas vezes
   dizendo a mesma coisa. Aqui ele existe uma vez e ganha a contagem.

   O scroll mora na LISTA e nao no cartaz, pra que o ✕ e o cabecalho (que sao
   irmaos dela) nao rolem junto e saiam da tela.
   -------------------------------------------------------------------------- */
.evm-cab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    /* Os 36px da direita reservam o ✕, que continua `position: absolute` no
       cartaz e agora flutua sobre esta faixa em vez de sobre a arte. */
    padding: 0 36px 0 12px;
    background: rgba(201, 168, 76, 0.07);
    border-bottom: 1px solid rgba(201, 168, 76, 0.22);
}
.evm-cab-t {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e8c56a;
}
.evm-cab-n {
    font-size: 0.62rem;
    font-weight: 700;
    color: #f4e2ad;
    border: 1px solid rgba(201, 168, 76, 0.4);
    border-radius: 9px;
    padding: 0 6px;
}

/* `flex: 1 1 auto` + `min-height: 0` sao OBRIGATORIOS agora que a lista tem
   irmaos. Ate' aqui ela nao declarava nada de flex e funcionava por ser o unico
   filho em fluxo do cartaz (o ✕ e' absoluto). Com irmaos e sem estas duas
   linhas, o `flex-shrink: 1` do padrao distribui o encolhimento e a faixa de
   cabecalho e' esmagada — e como a lista tem `overflow`, o minimo automatico
   dela resolve pra 0 e o cartaz inteiro colapsa. */
.evm-lista {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;   /* rolar ate' o fim nao vira zoom/scroll do mapa */
}
.evm-item + .evm-item {
    border-top: 1px solid rgba(201, 168, 76, 0.22);
}


/* --------------------------------------------------------------------------
   5. O CABECALHO DE CADA EVENTO — a camada de RELANCE

   Este bloco e' o que responde a pergunta de meio segundo, e por isso ele NUNCA
   fica atras de um clique: nome, prazo e TODOS os modificadores daquele evento.
   O cartaz nasceu da queixa "nao ta' mostrando em canto nenhum seu bonus" — o
   numero e' o produto desta superficie. O que custa o clique e' a NARRATIVA:
   arte, texto e datas.

   Consequencia estrutural: o nome saiu de cima da arte e veio pra ca'. Com isso
   morreram tres acoplamentos que travavam qualquer mudanca no cartaz — o
   `.evm-nome { right: 40px }` (que reservava o ✕ a mao), o `.evm-selo` repetido
   por card e o remendo `.evm-sem-arte { padding-top: 34px }`, que existia so'
   pra segurar a altura de um nome posicionado em absoluto.
   -------------------------------------------------------------------------- */
.evm-ev {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    /* min-height 64px: e' o alvo primario desta tela e o unico gesto que ela
       pede. Fica bem acima do piso de 44px do toque. */
    min-height: 64px;
    padding: 9px 34px 9px 12px;   /* os 34px da direita reservam o caret */
    position: relative;
}
/* O hover so' existe onde ha' ponteiro de verdade. Sem esta guarda ele "gruda"
   no toque e a ultima linha tocada fica acesa, como se estivesse selecionada. */
@media (hover: hover) {
    .evm-ev:hover { background: rgba(201, 168, 76, 0.08); }
}
.evm-ev:focus-visible { outline: 2px solid #e8c56a; outline-offset: -2px; }

.evm-ev-l1 {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
/* O cabecalho e' o UNICO lugar onde o nome aparece — por isso ele fica com a
   coluna inteira (~250px em 320px de cartaz) e nao com a tira estreita de uma
   aba. Nome que ainda assim nao couber elipsa; o `aria-label` do botao carrega
   o texto completo pro leitor de tela. */
.evm-ev-nome {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.84rem;
    font-weight: 700;
    color: #f4e2ad;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.evm-ev-cd {
    flex: none;
    font-size: 0.72rem;
    color: #e8c56a;
    font-variant-numeric: tabular-nums;   /* o contador nao "pula" de largura */
}
.evm-ev-cd-sub { font-size: 0.64rem; color: #9c917c; }
.evm-ev-sempre { font-size: 0.72rem; color: #9c917c; }

.evm-ev-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}
/* O chip. SEM CAP na lista: modificador nunca e' escondido. */
.evm-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(201, 168, 76, 0.13);
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 20px;
    padding: 2px 9px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #e9dcc0;
    white-space: nowrap;
}
/* Verde sobe, vermelho desce. E' o unico sinal de direcao que sobrevive a uma
   leitura de meio segundo — o '+'/'−' do texto e' a confirmacao, nao o aviso. */
.evm-chip-v {
    font-weight: 700;
    color: #7fd191;
    font-variant-numeric: tabular-nums;
}
.evm-chip-v.is-down { color: #d98a8a; }

/* O selo de ALCANCE, ao lado dos chips e so' quando o evento NAO e' mundial.
   Ele nao e' um bonus, entao nao imita um chip: sem pilula e sem verde, pra
   nao ser lido como "mais um efeito". A lista de nomes por extenso continua na
   linha 'Onde', dentro do corpo — aqui basta dizer que HA um recorte, porque
   sem isso o cabecalho prometeria um bonus sem dizer onde ele vale. */
.evm-alcance {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    color: #9c917c;
    font-style: italic;
    white-space: nowrap;
}

.evm-ev-caret {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid #9c917c;
    border-bottom: 2px solid #9c917c;
    transform: translateY(-50%) rotate(-45deg);
    transition: transform 0.16s ease;
}
.evm-item.is-open .evm-ev-caret {
    transform: translateY(-60%) rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
    .evm-ev-caret { transition: none; }
}


/* --------------------------------------------------------------------------
   6. O CORPO — a camada de LEITURA, um evento por vez

   `display: none` e nao `height: 0`: o corpo fechado nao pode custar layout, e
   e' justamente o `display: none` que o `medirDobras()` detecta (via
   `offsetParent` nulo) pra nao medir o que nao esta' na tela.
   -------------------------------------------------------------------------- */
.evm-corpo { display: none; padding: 0 0 12px; }
.evm-item.is-open .evm-corpo { display: block; }

.evm-arte-cx { position: relative; }
/* O degrade que mantinha o nome legivel sobre arte clara continua: ele agora
   fecha a arte contra o fundo do cartaz, em vez de servir de fundo pro nome. */
.evm-arte-cx::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(13, 10, 5, 1), rgba(13, 10, 5, 0) 62%);
}
/* Imagem 404 (cenario real: trocar a imagem gera id NOVO) some com moldura e
   degrade juntos. A classe e' posta pelo JS — nao por `:has()`, que o Chromium
   antigo do Electron nao entende. */
.evm-arte-cx.evm-arte-vazia { display: none; }
.evm-arte {
    display: block;
    width: 100%;
    height: 96px;
    object-fit: cover;
}

.evm-body { padding: 11px 13px 0; }

/* --- A DOBRA DA DESCRICAO ------------------------------------------------
   `white-space: pre-line` e' metade do conserto e nao e' cosmetico: sem ele o
   `<p>` colapsa os \n que o narrador escreveu, e um texto de dez blocos
   nomeados vira um muro unico. Com ele, os blocos voltam a ser blocos.

   O teto sai em `em` DA PROPRIA CAIXA — por isso a caixa carrega a fonte da
   descricao (0.79rem ~= 12,6px, linha de ~18,3px). Sao 5 linhas, ~92px. Se o
   `em` viesse do cartaz (15px), daria ~109px e o corte cairia DENTRO da 6a
   linha, mostrando meia letra em vez de fechar em cinco.

   NAO uso `-webkit-line-clamp`: o teto aqui e' um ORCAMENTO DE ALTURA do
   cartaz, e clamp com `pre-line` nao tem precedente neste repo.
   -------------------------------------------------------------------------- */
.evm-desc-cx {
    position: relative;
    overflow: hidden;
    margin: 0 0 4px;
    font-size: 0.79rem;
    line-height: 1.45;
    max-height: calc(5 * 1.45em);
}
.evm-desc {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: #9c917c;
    white-space: pre-line;
    overflow-wrap: anywhere;   /* URL colada pelo narrador nao estoura a caixa */
}
/* O fade e o cursor SO' existem sob `.tem-mais`, que quem poe e' a MEDICAO.
   Descricao curta nunca ganha gradiente nem promete um clique que nao faz nada. */
/* CORTADA, a caixa inteira e' clicavel (alvo grande pro dedo). ABERTA, ela
   volta a ser texto: sem o `:not()`, selecionar uma frase com o mouse recolhia
   a descricao. O par do handler esta' em evento_mapa.js (`aoClicarNaLista`). */
.evm-desc-cx.tem-mais:not(.is-aberta) { cursor: pointer; }
.evm-desc-cx.tem-mais::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20px;
    pointer-events: none;
    background: linear-gradient(to top, rgba(13, 10, 5, 1), rgba(13, 10, 5, 0));
}
.evm-desc-cx.is-aberta { max-height: none; }
.evm-desc-cx.is-aberta::after { display: none; }

/* O botao nasce escondido: quem o revela e' o irmao adjacente com `.tem-mais`.
   Seletor de irmao, e nao `:has()` — Chromium antigo do Electron. */
.evm-desc-mais {
    display: none;
    background: none;
    border: 0;
    padding: 2px 0;
    margin: 0 0 8px;
    /* Longhands pelo mesmo motivo da `.evm-aba`: `font: ... inherit` e' invalido
       e derrubaria a declaracao inteira, jogando o botao no font do <button>. */
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    color: #e8c56a;
    cursor: pointer;
}
.evm-desc-cx.tem-mais + .evm-desc-mais,
.evm-desc-cx.is-aberta + .evm-desc-mais { display: block; }
.evm-desc-mais:hover { color: #f4e2ad; text-decoration: underline; }
.evm-desc-mais:focus-visible { outline: 2px solid #e8c56a; outline-offset: 2px; }

.evm-lin {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.76rem;
    padding: 4px 0;
    border-top: 1px solid rgba(201, 168, 76, 0.14);
}
.evm-lin .k { color: #9c917c; flex: none; }
.evm-lin .v { color: #e9dcc0; font-weight: 600; text-align: right; min-width: 0; }
.evm-mais { opacity: 0.62; font-weight: 400; font-style: italic; }
/* Tabular pra que o contador nao "pule" de largura a cada segundo. */
.evm-cd { font-variant-numeric: tabular-nums; }

/* O rotulo dos efeitos existe pra hospedar o 'i'. UM 'i' por evento, e nao um
   por chip: no toque a `mobile.css` forca `.tt-info-btn` a 44x44, e um botao
   por chave custaria ~22px extras POR CHAVE num cartaz de 439px de teto. */
.evm-efeitos {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 9px 13px 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9c917c;
}


/* --------------------------------------------------------------------------
   6-bis. O RODAPE — a nota do RELATIVO, UMA vez

   Ela existe porque `porcento 0,5` nao e' "meio ponto": e' `chance x 1,005`.
   Sem esta linha, o jogador confere a conta, ve outro numero e abre chamado de
   bug no motor. O que mudou e' que ela era escrita DENTRO de cada card — com
   dois eventos relativos no ar, a mesma frase aparecia duas vezes.
   -------------------------------------------------------------------------- */
.evm-rodape {
    flex: 0 0 auto;
    padding: 7px 13px 9px;
    border-top: 1px solid rgba(201, 168, 76, 0.14);
    font-size: 0.7rem;
    line-height: 1.45;
    color: #9c917c;
}
.evm-rodape b { color: #cdbf9f; font-weight: 600; }


/* --------------------------------------------------------------------------
   7. Telas estreitas / camada de celular

   O cartaz encosta nas duas bordas e ganha teto menor: em retrato ele nao pode
   comer a tela inteira, senao o jogador perde o mapa e a unica saida vira o ✕.
   O corte e' por LARGURA CRUA (`max-width`), nao por `[data-viewport="mobile"]`
   do mobile.css: assim vale igual no celular e numa janela de desktop apertada,
   e o cartaz nao depende de o port mobile ter marcado o <html>.

   O cabecalho de evento NAO encolhe abaixo de 64px aqui: ele e' o alvo de toque
   primario, e ja' nasce conforme.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .evm-cartaz {
        right: 8px;
        top: 60px;
        width: calc(100vw - 16px);
        max-height: 52vh;
    }
    .evm-aba { top: 72px; }
    .evm-cab { height: 28px; }
    .evm-arte { height: 78px; }
}