/* Organismo — HUD do mapa (DESIGN.md, Layout · HUD). Escopo fechado: só Evoluir, pausa/velocidade e Camadas. O mapa, as
   cores dele, os marcadores, a faixa de notícias e o rodapé ficam como estão. Sai o verde-claro de interface; entram a
   tinta (seleção com borda e sublinhado, como as abas do Mundo) e o tecido só onde a coisa é da IA (o PE). */

/* ——— Evoluir ———
   Continua o controle mais fácil de achar: o canto, a borda de 2px, o nome em 600 e o saldo em display, no laranja
   quente da IA. O nó na borda superior diz se há evolução pronta para compra: aceso (preenchido, com halo) ou apagado
   (só o contorno). A borda acompanha: em repouso, risco forte com o topo em tecido (como a borda dos menus); com
   evolução pronta, toda em tecido quente com fundo a 6%, como o recomendado do contrato. */
:root #show-upgrades{position:relative;border:2px solid var(--rule-strong);border-top-color:#ff7a2e8c;border-radius:5px;background:#0b1d23;box-shadow:none;color:var(--ink);font-weight:600}
:root #show-upgrades[data-ready=true]{border-color:var(--tissue-hot);background:linear-gradient(#ff7a2e0f,#ff7a2e0f),#0b1d23}
:root #show-upgrades:hover{border-color:var(--tissue-hot)}
:root #show-upgrades:focus-visible{outline:2px solid var(--tissue-core);outline-offset:2px}
:root #show-upgrades #compact-credits{color:var(--tissue-hot);font-weight:600;font-variant-numeric:tabular-nums}
:root #show-upgrades #compact-credits small{color:var(--ink-soft);font-size:12px}
:root #show-upgrades .evolve-node{position:absolute;top:-6px;left:10px;width:9px;height:9px;border:1px solid var(--rule-strong);border-radius:50%;background:var(--slide);pointer-events:none}
:root #show-upgrades[data-ready=true] .evolve-node{border-color:var(--tissue);background:radial-gradient(circle at 40% 40%,var(--tissue-core),var(--tissue) 55%,var(--tissue-deep));box-shadow:0 0 5px #ff7a2e80}
/* O pulso de "+PE" (map-pins.css) era verde: agora em tecido. */
:root #show-upgrades.pe-pulse{animation-name:hud-pe-pulse}
@keyframes hud-pe-pulse{30%{transform:scale(1.05);box-shadow:0 0 0 3px #ff7a2e80}}

/* ——— Pausa e velocidade ———
   "DIA 020" em cima e, embaixo, o estado escrito: PAUSADO (tinta) ou AVANÇA 2× (tinta suave, com o traço do tempo
   correndo). A velocidade ativa é a de borda em tinta, sublinhada e em 600 (aria-pressed vem do app.mjs). */
body.map-first .cycle{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"lbl day ctrl" "state state ctrl";column-gap:6px;row-gap:1px;align-items:center;height:auto;padding:0 1px 0 8px}
body.map-first .cycle>span:first-child{grid-area:lbl;align-self:end;color:var(--ink-faint);font:11px/1 var(--body);letter-spacing:.05em}
body.map-first .cycle #day{grid-area:day;align-self:end;justify-self:start;color:var(--ink);font:600 21px/1 var(--display);font-variant-numeric:tabular-nums}
body.map-first .cycle .cycle-state{grid-area:state;align-self:start;display:block;position:relative;margin:0;padding-bottom:4px;color:var(--ink-soft);font:600 12px/1.2 var(--body);letter-spacing:0;text-align:left;white-space:nowrap}
/* O ponto verde que respirava antes do estado (polish.css) sai: o traço abaixo é o indicador do tempo correndo. */
:root .cycle-state::before{content:none}
body.map-first .cycle .cycle-state::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:3px;background:linear-gradient(var(--ink-soft),var(--ink-soft)) no-repeat,var(--rule);background-size:30% 100%,auto;animation:hud-time 2.4s linear infinite}
body.map-first .cycle:has([data-speed="2"][aria-pressed=true]) .cycle-state::after{animation-duration:1.2s}
body.map-first .cycle:has([data-speed="3"][aria-pressed=true]) .cycle-state::after{animation-duration:.8s}
body.map-first .cycle:has([data-speed="0"][aria-pressed=true]) .cycle-state{color:var(--ink)}
body.map-first .cycle:has([data-speed="0"][aria-pressed=true]) .cycle-state::after{display:none}
@keyframes hud-time{from{background-position:-50% 0,0 0}to{background-position:150% 0,0 0}}
body.map-first .cycle .time-controls{grid-area:ctrl;gap:2px}
:root .time-controls{border-radius:0}
:root .cycle .time-controls button{min-width:44px;min-height:44px;margin:0;padding:0 6px;border:1px solid transparent;border-radius:5px;background:none;box-shadow:none;color:var(--ink-soft);font:600 14px/1 var(--body)}
:root .cycle .time-controls button:hover{color:var(--ink)}
:root .cycle .time-controls button[aria-pressed=true]{border-color:var(--ink);background:#e8efe814;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
:root .cycle .time-controls button:focus-visible{outline:2px solid var(--tissue-core);outline-offset:-2px}

/* ——— Camadas ———
   Lâmina do contrato; cada camada com o nome e, embaixo, o que a cor do mapa mostra nela (map-shell.mjs, LAYER_MEANING).
   A selecionada: borda de 2px em tinta e "✓" antes do nome. Os controles levam :root (e não body.map-first) para valer
   também na leitura estática do impeccable detect, que não roda o map-shell.mjs; o app sempre monta o modo mapa. */
body.map-first #map-options[open]{width:min(700px,calc(100vw - 24px));max-width:none;border:1px solid var(--rule);border-top-color:#ff7a2e8c;border-radius:6px;background:linear-gradient(180deg,var(--slide-2),var(--slide));box-shadow:none;color:var(--ink)}
body.map-first #map-options .dialog-top .close{border:1px solid var(--rule);border-radius:5px;background:transparent;color:var(--ink)}
:root .layer-controls{padding:0;border:0;border-radius:0;background:none;backdrop-filter:none}
:root .layer-controls button[data-layer]{display:block;min-height:44px;padding:8px 10px;border:1px solid var(--rule-strong);border-radius:5px;background:transparent;box-shadow:none;color:var(--ink-soft);font:600 14px/1.2 var(--body);text-align:left}
:root .layer-controls button[data-layer] small{display:block;margin-top:4px;color:var(--ink-soft);font:400 12px/1.3 var(--body)}
:root .layer-controls button[data-layer]:hover{color:var(--ink);border-color:var(--ink-soft)}
:root .layer-controls button[data-layer][aria-pressed=true]{padding:7px 9px;border:2px solid var(--ink);background:#e8efe80f;color:var(--ink)}
:root .layer-controls button[data-layer][aria-pressed=true]::before{content:'✓ '}
:root .layer-controls button[data-layer]:focus-visible{outline:2px solid var(--tissue-core);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
 body.map-first .cycle .cycle-state::after{animation:none;background-size:100% 100%,auto}
 :root #show-upgrades.pe-pulse{animation:none}
}
/* A faixa de notícias termina antes da caixa do tempo (até 220px, a 12px da borda), com 8px de folga: em 740 ela
   passava 14px por baixo, e mais com o 3× à mostra. */
body.map-first .world-updates{right:calc(220px + 12px + 8px)}