/* ═══════════════════════════════════════════════════════════════════════
   PODER — sala de apuração
   ───────────────────────────────────────────────────────────────────────
   Este arquivo é a única fonte de verdade visual do jogo. Antes ele morava
   dentro de um .php e convivia com 136 atributos `style=` escritos direto
   no elemento: cada um era uma decisão de design que ninguém conseguia
   mudar em um lugar só.

   A direção é a NOITE DE APURAÇÃO — o painel do TSE, a mesa de análise da
   televisão, o mapa que se pinta enquanto as urnas fecham. Painel escuro,
   dado aceso, tipografia condensada de transmissão.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── tipografia de transmissão ───────────────────────────────────────────
   Uma face condensada, dois pesos, subsetada para o português. É a única
   coisa neste projeto que custa requisição de fonte — 27 KB no total.
   Barlow Condensed, SIL Open Font License 1.1 (ver LICENSE ao lado). */
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/bc-600.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/bc-700.woff2') format('woff2');
}

/* ── tokens ──────────────────────────────────────────────────────────────
   A direção é a NOITE DE APURAÇÃO, e uma sala de apuração é escura. Por isso
   o ESCURO é a definição completa aqui: `:root` já é o estúdio, e o claro só
   redefine variável para quem joga de dia ou pediu tema claro. Nenhuma cor
   pode nascer dentro de um bloco de tema, senão ela não existe no outro.

   O âmbar é a lâmpada da mesa. Ele marca o que está EM DISPUTA e mais nada:
   a cadeira que pode ser sua, o botão que passa o turno, o rótulo da seção
   que você está lendo. Se tudo acender, nada acende. */
:root{
  --bg:#07101d; --surface:#0c1929; --surface-2:#122234; --surface-3:#1a3149;
  --surface-4:#24425f;
  --border:#1c3149; --border-forte:#2c4a68;
  --ink:#e8edf5; --ink-2:#9fb1c6; --ink-3:#6b809a;

  --pos:#3fb583; --neg:#e2695c; --warn:#f5a623;
  --accent:#f5a623; --accent-2:#ffcb6b;
  /* Tinta que fica POR CIMA do acento. No escuro o âmbar é claro e pede tinta
     escura; no claro ele escurece e pede branco. */
  --sobre-accent:#07101d;
  /* Azul de informação: link, ênfase fria, o que não está em disputa. */
  --frio:#6fb0d8;

  --urna:#f5a623; --urna-fraca:rgba(245,166,35,.11);

  /* Rampa do mapa: perdido → disputado → reduto. É diagonal em matiz E em
     luminosidade, para continuar legível em tela ruim e para quem não
     distingue vermelho de verde. */
  --mapa-0:#7d3227; --mapa-1:#a55437; --mapa-2:#c08b3c;
  --mapa-3:#93a04c; --mapa-4:#4f8b5c; --mapa-5:#6dbf94;
  --mapa-vazio:#12243a;

  --tipo-ui:'Barlow Condensed','Arial Narrow',ui-sans-serif,system-ui,sans-serif;
  --tipo-texto:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --tipo-mono:ui-monospace,'SF Mono',Menlo,Consolas,'DejaVu Sans Mono',monospace;

  /* Painel de apuração não tem canto redondo. */
  --r:4px; --r-sm:3px; --r-lg:5px;

  color-scheme:dark;
}
/* ── tema claro: o mesmo painel, impresso ── */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#f2f1ed; --surface:#fffffe; --surface-2:#eae8e2; --surface-3:#ddd9d0;
  --surface-4:#cdc8bc;
  --border:#dcd8ce; --border-forte:#b3aca0;
  --ink:#16150f; --ink-2:#4d4b44; --ink-3:#7d796f;

  --pos:#1f6b4a; --neg:#9d3427; --warn:#8a5f10;
  --accent:#9b6209; --accent-2:#7d4f07;
  --sobre-accent:#fffdf7;
  --frio:#2b5f8a;
  --urna:#9b6209; --urna-fraca:rgba(155,98,9,.12);

  --mapa-0:#8f3b2c; --mapa-1:#b3603a; --mapa-2:#c08b3c;
  --mapa-3:#8f9a48; --mapa-4:#4c8155; --mapa-5:#2f6f4f;
  --mapa-vazio:#c9c9c3;

  color-scheme:light;
}}
:root[data-theme="light"]{
  --bg:#f2f1ed; --surface:#fffffe; --surface-2:#eae8e2; --surface-3:#ddd9d0;
  --surface-4:#cdc8bc;
  --border:#dcd8ce; --border-forte:#b3aca0;
  --ink:#16150f; --ink-2:#4d4b44; --ink-3:#7d796f;

  --pos:#1f6b4a; --neg:#9d3427; --warn:#8a5f10;
  --accent:#9b6209; --accent-2:#7d4f07;
  --sobre-accent:#fffdf7;
  --frio:#2b5f8a;
  --urna:#9b6209; --urna-fraca:rgba(155,98,9,.12);

  --mapa-0:#8f3b2c; --mapa-1:#b3603a; --mapa-2:#c08b3c;
  --mapa-3:#8f9a48; --mapa-4:#4c8155; --mapa-5:#2f6f4f;
  --mapa-vazio:#c9c9c3;

  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font:15px/1.5 var(--tipo-texto);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ── utilitárias ─────────────────────────────────────────────────────────
   Cada uma destas nasceu de um `style=` repetido no HTML. */
.hide{display:none !important}
/* `hidden` precisa vencer o display:inline-flex do .btn, senão um botão
   escondido pelo atributo continua aparecendo. */
[hidden]{display:none !important}
.num{font-variant-numeric:tabular-nums}
.pos{color:var(--pos)} .neg{color:var(--neg)} .warn{color:var(--warn)}
.sub{color:var(--ink-3);font-size:.8rem}
.tr{text-align:right}
.ui{font-family:var(--tipo-ui);letter-spacing:.02em}
.rot{
  font-family:var(--tipo-mono);font-weight:500;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.mono{font-family:var(--tipo-mono);font-size:.86em}
.linhas{display:grid;gap:.5rem}
.linhas-lg{display:grid;gap:.9rem}
.entre{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.fila{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.m0{margin:0} .mb0{margin-bottom:0}
.mt-cabeca{margin:-.4rem 0 .8rem}
.aviso{
  padding:.55rem .7rem;border-left:3px solid var(--accent);background:var(--surface-2);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.8rem;color:var(--ink-3);line-height:1.5;
}
.aviso-urna{border-left-color:var(--urna);background:var(--urna-fraca);color:var(--ink-2)}

/* ── ícones ──────────────────────────────────────────────────────────── */
.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.14em;flex:none}
.ico-lg{width:1.35em;height:1.35em}

/* ── barra de status ─────────────────────────────────────────────────── */
#topo{
  position:sticky;top:0;z-index:40;background:var(--surface-2);
  border-bottom:1px solid var(--border-forte);
  display:flex;align-items:stretch;gap:0;padding:0;flex-wrap:wrap;
}
/* A marca é um bloco de tinta, não um texto entre outros: é o único lugar da
   interface onde o âmbar preenche uma área inteira, e serve de âncora. */
#topo .marca{
  font-family:var(--tipo-ui);font-weight:700;letter-spacing:.14em;font-size:1.05rem;
  text-transform:uppercase;background:var(--urna);color:var(--sobre-accent);
  display:flex;align-items:center;gap:.4rem;padding:.5rem .85rem;
}
#topo .marca .ico{color:currentColor}
#topo .item{
  display:flex;flex-direction:column;justify-content:center;line-height:1.15;
  padding:.3rem .8rem;border-right:1px solid var(--border);
}
#topo .item .k{
  font-family:var(--tipo-mono);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.15em;color:var(--ink-3);font-weight:500;
}
#topo .item .v{
  font-family:var(--tipo-ui);font-size:1.1rem;font-weight:700;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
#topo .item.click{cursor:pointer}
#topo .item.click .v{border-bottom:1px dotted var(--ink-3)}
#topo .espaco{flex:1;border-right:0}
#topo > .btn,#topo > .sec,#topo > .sub{align-self:center;margin:0 .5rem 0 0}
#topo > .sub{white-space:nowrap}

/* ── layout ──────────────────────────────────────────────────────────── */
.app{
  display:grid;grid-template-columns:158px 1fr 300px;gap:1.1rem;
  max-width:1380px;margin:0 auto;padding:1.1rem;align-items:start;
}
@media(max-width:1100px){.app{grid-template-columns:1fr}}
nav{display:flex;flex-direction:column;gap:.15rem;position:sticky;top:62px}
@media(max-width:1100px){nav{flex-direction:row;flex-wrap:wrap;position:static}}
nav button{
  background:transparent;border:0;text-align:left;padding:.42rem .65rem;border-radius:0;
  color:var(--ink-2);cursor:pointer;font-family:var(--tipo-ui);font-size:.98rem;
  font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  display:flex;align-items:center;gap:.42rem;white-space:nowrap;
}
nav button:hover{background:var(--surface-2);color:var(--ink)}
nav button.on{background:var(--surface-2);color:var(--ink);box-shadow:inset 3px 0 0 var(--urna)}
nav button .ico{color:var(--ink-3)}
nav button.on .ico{color:var(--urna)}

/* ── O SINAL DA ABA ────────────────────────────────────────────────────────
   Um ponto, não um alarme. Âmbar quando merece um olhar, vermelho quando
   cobra decisão neste trimestre. Ele empurra a si mesmo para a direita da
   fila para não brigar com o nome da aba. */
nav button .sinal{
  margin-left:auto;font-style:normal;font-family:var(--tipo-ui);
  font-size:.72rem;font-weight:800;line-height:1;min-width:1.15em;
  padding:.2em .35em;border-radius:999px;text-align:center;
  font-variant-numeric:tabular-nums;
}
nav button .sinal:empty{min-width:.5em;padding:.25em;border-radius:50%}
nav button .sinal.alto{background:var(--neg);color:var(--surface)}
nav button .sinal.medio{background:var(--warn);color:var(--surface)}
nav button.consulta{color:var(--ink-3)}
nav button.consulta .ico{opacity:.7}
nav button.abre-consulta{margin-top:.5rem;padding-top:.55rem;border-top:1px solid var(--border)}
@media(max-width:1100px){
  nav button .sinal{margin-left:.15rem}
  nav button.abre-consulta{margin-top:0;padding-top:.42rem;border-top:0;
    border-left:1px solid var(--border);margin-left:.35rem;padding-left:.8rem}
}

/* ── O DUELO DO SEGUNDO TURNO ──────────────────────────────────────────────
   Duas linhas, duas barras contra a mesma régua: a régua é o total dos dois,
   e por isso a metade dela é a maioria absoluta. Não há mapa aqui de
   propósito — o motor apura o segundo turno como dois totais, e desenhar
   geografia dela seria escrever número que ninguém contou. */
.apu.duelo .apu-duelo{display:flex;flex-direction:column;gap:.7rem;margin:1rem 0 .3rem}
.duelo-linha{display:grid;grid-template-columns:1fr;gap:.3rem}
.duelo-linha .d-nome{font-family:var(--tipo-ui);font-size:1.05rem;letter-spacing:.01em}
.duelo-linha .d-nome .sub{font-size:.85rem}
.duelo-linha .d-barra{
  position:relative;height:26px;background:var(--surface-3);border-radius:3px;overflow:hidden;
}
.duelo-linha .d-barra::after{
  /* a linha da maioria absoluta */
  content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--ink-3);opacity:.55;
}
.duelo-linha .d-barra i{
  display:block;height:100%;width:0;background:var(--surface-4);
  transition:width .18s linear;
}
.duelo-linha.sua .d-barra i{background:var(--urna)}
.duelo-linha.lider .d-barra i{box-shadow:inset 0 0 0 1px var(--ink-3)}
.duelo-linha .d-num{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.duelo-linha .d-num b{font-size:1.35rem;font-variant-numeric:tabular-nums}
.apu.duelo .apu-nota{margin-top:.5rem}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:.95rem 1.05rem;margin-bottom:.9rem;
}
/* O título do cartão é um rótulo de seção, do jeito que um painel de
   transmissão rotula um bloco: pequeno, monoespaçado, âmbar. O que tem peso
   dentro do cartão é o dado, não a etiqueta. */
.card h2{
  margin:0 0 .8rem;font-family:var(--tipo-mono);font-size:.74rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;color:var(--urna);
}
.card h3{
  margin:1.2rem 0 .5rem;font-family:var(--tipo-mono);font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  padding-bottom:.25rem;border-bottom:1px solid var(--border);
}
.card h3:first-child{margin-top:0}

/* ── chefe de gabinete ───────────────────────────────────────────────── */
/* Ele era quatro frases sem dono numa barra lateral. Agora tem cara: iniciais
   num círculo, nome, origem — e o tom da fala decide o destaque. */
#assessor{position:sticky;top:62px}
.quem{display:flex;gap:.6rem;align-items:center;margin-bottom:.7rem}
.quem h2,.quem h3{margin:0}
.quem .sub{margin:.1rem 0 0;font-size:.76rem;line-height:1.3}
.ini{
  flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:var(--r-sm);
  display:grid;place-items:center;
  background:var(--urna);color:var(--sobre-accent);
  font-family:var(--tipo-ui);font-weight:700;font-size:.86rem;letter-spacing:.04em;
}
.ini.sm{width:1.6rem;height:1.6rem;font-size:.68rem}

#assessor .fala{
  display:flex;gap:.5rem;align-items:flex-start;
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--border-forte);
  padding:.55rem .7rem;border-radius:0 var(--r-sm) var(--r-sm) 0;
  margin-bottom:.45rem;font-size:.86rem;color:var(--ink-2);
}
#assessor .fala .marca{
  font-family:var(--tipo-ui);font-weight:700;line-height:1.35;color:var(--ink-3);
}
#assessor .fala.t-alerta{border-left-color:var(--neg)}
#assessor .fala.t-alerta .marca{color:var(--neg)}
#assessor .fala.t-aviso{border-left-color:var(--warn)}
#assessor .fala.t-aviso .marca{color:var(--warn)}
#assessor .fala[data-ajuda]{cursor:pointer}
#assessor .fala[data-ajuda]:hover{background:var(--surface-3)}
.link{color:var(--frio);border-bottom:1px dotted currentColor;font-weight:600}

/* o alerta que sobe para o painel: não pode passar despercebido */
.alerta-chefe{border-color:var(--neg);box-shadow:inset 3px 0 0 var(--neg)}
.alerta-chefe .ini{background:var(--neg)}
.alerta-chefe .grito{font-size:.98rem;margin:.35rem 0 0;color:var(--ink)}
.alerta-chefe .grito[data-ajuda]{cursor:pointer}

/* a fala dele dentro de um cartão de decisão */
.conselho{
  display:flex;gap:.55rem;align-items:flex-start;margin-top:.9rem;
  background:var(--surface-2);border-radius:var(--r-sm);
  padding:.6rem .75rem;font-size:.88rem;color:var(--ink-2);
}
.conselho b{color:var(--ink)}

/* ── ajuda ───────────────────────────────────────────────────────────── */
.busca{
  width:100%;margin-top:.8rem;padding:.55rem .7rem;
  background:var(--surface-2);color:var(--ink);
  border:1px solid var(--border);border-radius:var(--r-sm);
  font-family:var(--tipo-texto);font-size:.92rem;
}
.busca:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.8rem}
.chip{
  background:var(--surface-2);color:var(--ink-2);
  border:1px solid var(--border);border-radius:999px;
  padding:.25rem .7rem;cursor:pointer;
  font-family:var(--tipo-ui);font-size:.86rem;font-weight:600;letter-spacing:.01em;
}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip.on{background:var(--accent);color:var(--sobre-accent);border-color:var(--accent)}
.topico p{font-size:.94rem;line-height:1.6;margin:.55rem 0}
.topico h3{margin-bottom:.2rem}
.topico .tag{font-family:var(--tipo-ui);font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
.topico .dica{
  background:var(--surface-2);border-left:2px solid var(--urna);
  padding:.55rem .7rem;border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.88rem;color:var(--ink-2);margin-top:.9rem;
}
.topico .dica b{color:var(--urna);font-family:var(--tipo-ui);letter-spacing:.05em;
  text-transform:uppercase;font-size:.76rem;margin-right:.3rem}

/* ── ações ───────────────────────────────────────────────────────────── */
.acoes{display:grid;gap:.5rem}
.acao{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  padding:.6rem .75rem;cursor:pointer;transition:border-color .12s,background .12s;
}
.acao:hover{border-color:var(--accent);background:var(--surface-3)}
.acao.off{opacity:.42;cursor:not-allowed}
.acao.off:hover{border-color:var(--border);background:var(--surface-2)}
/* O CANSAÇO DO REPERTÓRIO, na própria linha da ação.
   Não é penalidade escondida: os números da ficha já vêm descontados, e esta
   marca diz, antes do clique, que repetir rende menos. */
.acao .frescor{margin-top:.35rem}
.acao .frescor .chip{cursor:default;padding:.12rem .5rem;font-size:.74rem;
  letter-spacing:.04em;text-transform:uppercase}
.acao .frescor .chip.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);
  color:var(--warn);border-color:color-mix(in srgb,var(--warn) 32%,transparent)}
.acao .frescor .chip.neg{background:color-mix(in srgb,var(--neg) 16%,transparent);
  color:var(--neg);border-color:color-mix(in srgb,var(--neg) 32%,transparent)}
.acao .frescor .chip:hover{border-color:inherit;color:inherit}
/* ── A DECISÃO GRANDE OCUPA A TELA ─────────────────────────────────────
   Evento, momento institucional e votação eram cartões entre cartões: o
   jogador rolava até a agenda, que é o que ele já sabia clicar. Enquanto uma
   decisão está na mesa, as abas e o botão de avançar saem do caminho. */
body.decidindo #abas{opacity:.35;pointer-events:none}
body.decidindo #continuar{display:none}
.decisao-nota{text-align:center;margin-top:1.2rem;font-style:italic;color:var(--ink-3)}

/* ── O TRIMESTRE QUE FECHOU ────────────────────────────────────────────
   O turno passava e a tela só se redesenhava. Isto é o que mudou, e por quê. */
.card.balanco{border-left:3px solid var(--accent)}
.bal-topo{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.5rem 0 .8rem}
.bal-topo > div{background:var(--surface-2);border-radius:var(--r);padding:.5rem .7rem;text-align:center}
.bal-topo .n{font-family:var(--tipo-ui);font-size:1.8rem;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
.bal-topo .l{font-family:var(--tipo-ui);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-3);font-weight:600;margin-top:.15rem}

/* ── O RETRATO DA CIDADE ───────────────────────────────────────────────
   Por que os doze indicadores dela são o que são. */
.card.vocacao{border-left:3px solid var(--urna)}
.card.vocacao .cabeca{font-size:.95rem;line-height:1.6;margin:.4rem 0 0}
.card.vocacao .tensao{font-style:italic;color:var(--ink-3);margin-top:.55rem;
  padding-left:.7rem;border-left:2px solid var(--border)}

/* ── ANTES DO VOTO ──────────────────────────────────────────────────────
   Relatoria, urgência, obstrução, vista. O voto de uma pessoa decide 3,7% das
   votações; o que decide o resto está aqui. */
.tramite{margin-top:1rem}
.instrumento{background:var(--surface-2);border:1px solid var(--border);
  border-left:2px solid var(--urna);border-radius:0 var(--r) var(--r) 0;
  padding:.55rem .7rem;margin-top:.45rem;cursor:pointer}
.instrumento:hover{border-color:var(--accent);border-left-color:var(--accent);background:var(--surface-3)}
.instrumento .lin{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.instrumento .nome{font-weight:600;font-size:.9rem}
.instrumento .custo{font-family:var(--tipo-ui);font-size:.74rem;color:var(--ink-3);white-space:nowrap}
.instrumento .custo b{color:var(--ink-2);font-variant-numeric:tabular-nums}
.instrumento .custo b.warn{color:var(--warn)}
.instrumento .desc{font-size:.8rem;color:var(--ink-2);margin-top:.2rem;line-height:1.45}
.instrumento .desc.nota{color:var(--ink-3);font-style:italic;margin-top:.3rem}
.instrumento .escolhas{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.instrumento:has(.escolhas){cursor:default}
.sub.relatoria{margin-top:.6rem;padding:.4rem .6rem;background:var(--surface-2);
  border-radius:var(--r-sm);border-left:2px solid var(--ink-3)}
.sub.relatoria.voce{border-left-color:var(--accent);color:var(--ink)}

/* ── O CENÁRIO ─────────────────────────────────────────────────────────
   Objetivo e relógio no alto da tela, em toda aba. Uma partida com fim só tem
   tensão se o jogador vê o fim se aproximando. */
.card.cenario{border-left:3px solid var(--accent)}
.card.cenario.venceu{border-left-color:var(--pos)}
.card.cenario.perdeu{border-left-color:var(--neg)}
.cen-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.cen-relogio{text-align:center;background:var(--surface-2);border-radius:var(--r);
  padding:.4rem .8rem;min-width:5.2rem}
.cen-relogio b{display:block;font-family:var(--tipo-ui);font-size:1.7rem;line-height:1;
  font-variant-numeric:tabular-nums}
.cen-relogio span{font-family:var(--tipo-ui);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.09em;color:var(--ink-3)}
.cen-relogio.neg b{color:var(--neg)}
.cen-como{font-style:italic;color:var(--ink-3);margin-top:.5rem}

/* ── A SUCESSÃO ─────────────────────────────────────────────────────────
   Quem você lança, quanto ele herda, e o que ele já tem sem você. */
.card.sucessao{border-left:3px solid var(--urna)}
.sucessor{background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r);padding:.6rem .75rem;margin-top:.5rem;cursor:pointer}
.sucessor:hover{border-color:var(--accent);background:var(--surface-3)}
.sucessor.off{opacity:.5;cursor:not-allowed}
.sucessor .lin{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.sucessor .nome{font-weight:600;font-size:.94rem}
.sucessor .custo{font-family:var(--tipo-ui);font-size:.74rem;color:var(--ink-3);white-space:nowrap}
.sucessor .desc{font-size:.82rem;color:var(--ink-2);margin-top:.25rem}
.sucessor .prazo{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:.4rem}
.sucessor .prazo .chip{cursor:default;padding:.12rem .5rem;font-size:.74rem}
.sucessor .prazo .chip.pos{background:color-mix(in srgb,var(--pos) 16%,transparent);
  color:var(--pos);border-color:color-mix(in srgb,var(--pos) 32%,transparent)}
.sucessor .prazo .chip.neg{background:color-mix(in srgb,var(--neg) 16%,transparent);
  color:var(--neg);border-color:color-mix(in srgb,var(--neg) 32%,transparent)}
.sucessor .prazo .se{font-size:.76rem;color:var(--ink-3);font-style:italic}

/* ── COMPROMISSOS ──────────────────────────────────────────────────────
   O que já está na agenda quando o trimestre começa. Fica ACIMA da lista de
   ações e se parece com ela, porque disputa a mesma agenda — mas tem prazo,
   e o prazo é a informação que mais importa. */
.compromissos{display:grid;gap:.5rem;margin:.4rem 0 1rem}
.compromissos > .rot{margin:0 0 .1rem}
.compromisso{
  background:var(--surface-2);
  border:1px solid color-mix(in srgb,var(--warn) 34%,var(--border));
  border-left:3px solid var(--warn);
  border-radius:var(--r);padding:.6rem .75rem;cursor:pointer;
}
.compromisso:hover{background:var(--surface-3)}
.compromisso.urgente{border-color:color-mix(in srgb,var(--neg) 40%,var(--border));
  border-left-color:var(--neg)}
.compromisso.off{opacity:.5;cursor:not-allowed}
.compromisso .lin{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.compromisso .nome{font-weight:600;font-size:.92rem;display:flex;align-items:center;gap:.4rem}
.compromisso .nome .ico{color:var(--warn)}
.compromisso .custo{font-family:var(--tipo-ui);font-size:.74rem;color:var(--ink-3);
  letter-spacing:.04em;white-space:nowrap}
.compromisso .desc{font-size:.82rem;color:var(--ink-2);margin-top:.25rem;line-height:1.5}
.compromisso .prazo{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:.45rem}
.compromisso .prazo .chip{cursor:default;padding:.12rem .5rem;font-size:.72rem;
  letter-spacing:.05em;text-transform:uppercase}
.compromisso .prazo .chip.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);
  color:var(--warn);border-color:color-mix(in srgb,var(--warn) 32%,transparent)}
.compromisso .prazo .chip.neg{background:color-mix(in srgb,var(--neg) 16%,transparent);
  color:var(--neg);border-color:color-mix(in srgb,var(--neg) 32%,transparent)}
.compromisso .prazo .se{font-size:.76rem;color:var(--ink-3);font-style:italic}

/* Os dois prazos lado a lado: o que rende agora e o que sobra na urna. */
.placar.prazos{grid-template-columns:1fr 1fr;margin-top:.4rem}
.acao .frescor{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.acao .frescor .chip.pos{background:color-mix(in srgb,var(--pos) 14%,transparent);
  color:var(--pos);border-color:color-mix(in srgb,var(--pos) 30%,transparent)}
.acao .lin{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.acao .nome{font-weight:600;font-size:.92rem;display:flex;align-items:center;gap:.4rem}
.acao .nome .ico{color:var(--ink-3)}
.acao .custo{font-family:var(--tipo-ui);font-size:.82rem;letter-spacing:.04em;color:var(--ink-3);white-space:nowrap}
.acao .desc{font-size:.79rem;color:var(--ink-3);margin-top:.15rem;line-height:1.45}

/* ── barras e medidores ──────────────────────────────────────────────── */
.barra{height:6px;background:var(--surface-3);border-radius:3px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--accent);border-radius:3px}
.barra.grossa{height:10px;border-radius:5px}
.barra.grossa i{border-radius:5px}
.linha{
  display:grid;grid-template-columns:1fr 46px 76px;gap:.55rem;align-items:center;
  padding:.32rem 0;border-bottom:1px solid var(--border);font-size:.86rem;
}
.linha:last-child{border-bottom:0}

/* faixa de composição — bancada, blocos, espectro */
.faixa{display:flex;height:18px;border-radius:2px;overflow:hidden}
.faixa > div{transition:filter .12s}
.faixa > div:hover{filter:brightness(1.15)}

table{width:100%;border-collapse:collapse;font-size:.86rem}
th{
  text-align:left;font-family:var(--tipo-ui);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-3);font-weight:600;padding:.35rem .45rem;
  border-bottom:1px solid var(--border);
}
td{padding:.35rem .45rem;border-bottom:1px solid var(--border)}
tr:last-child td{border-bottom:0}
.tabela-rola{overflow-x:auto}

/* ── botões ──────────────────────────────────────────────────────────── */
.btn{
  background:var(--accent);color:var(--sobre-accent);border:1px solid var(--accent);
  border-radius:var(--r-sm);
  padding:.44rem .95rem;cursor:pointer;font-family:var(--tipo-ui);font-weight:700;
  font-size:1.02rem;letter-spacing:.07em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.4rem;
}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
.btn.g{background:transparent;color:var(--ink-2);border-color:var(--border-forte)}
.btn.g:hover{background:var(--surface-2);filter:none;color:var(--ink)}
.btn.sim{background:var(--pos);border-color:var(--pos);color:var(--bg)}
.btn.nao{background:var(--neg);border-color:var(--neg);color:var(--bg)}
.btn.sm{padding:.24rem .55rem;font-size:.84rem;letter-spacing:.05em}
/* O preço de um voto aparece nove vezes seguidas numa votação. Se cada um for
   âmbar, o âmbar deixa de querer dizer "isto está em disputa". */
.btn.preco{
  background:var(--surface-4);border-color:var(--border-forte);color:var(--ink);
  font-family:var(--tipo-mono);font-weight:600;text-transform:none;letter-spacing:.02em;
}
.btn.preco:hover{border-color:var(--urna);color:var(--urna);filter:none}
.btn.bloco{width:100%;justify-content:center}
.sec{
  background:transparent;color:var(--ink-2);border:1px solid var(--border-forte);
  border-radius:var(--r-sm);padding:.3rem .65rem;cursor:pointer;
  font-family:var(--tipo-mono);font-weight:500;font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;
}
.sec:hover{background:transparent;border-color:var(--urna);color:var(--urna)}
.sec:disabled{opacity:.4;cursor:not-allowed}

#continuar{width:100%;padding:.72rem;font-size:1.1rem;margin-top:.4rem;justify-content:center}

/* ── votação ─────────────────────────────────────────────────────────── */
.placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:.6rem;margin:.7rem 0}
.placar > div{background:var(--surface-2);border-radius:var(--r);padding:.55rem .7rem;text-align:center}
.placar .n{font-family:var(--tipo-ui);font-size:1.9rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.placar .l{
  font-family:var(--tipo-ui);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-3);font-weight:600;margin-top:.15rem;
}
.vereador{
  display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.4rem .55rem;border-radius:var(--r-sm);background:var(--surface-2);
  margin-bottom:.35rem;font-size:.85rem;
}

/* ── A RÉGUA DA LEI ───────────────────────────────────────────────────────
   Teto e piso constitucionais são a mesma coisa que o quociente na apuração:
   um número medido contra uma linha que a lei desenhou. Mesma gramática, de
   propósito — quem aprendeu a ler a barra da noite de apuração já sabe ler
   esta. Verde é cumprir; vermelho é o que derruba prestação de contas. */
.leis{display:grid;gap:1.5rem;margin:.2rem 0 1.4rem}
.lei-cab{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;margin-bottom:.15rem}
.lei-rot{font-family:var(--tipo-ui);font-weight:600;font-size:1rem;letter-spacing:.03em}
.lei-v{font-family:var(--tipo-ui);font-weight:700;font-size:1.35rem;line-height:1}
.lei.ok .lei-v{color:var(--pos)}
.lei.fora .lei-v{color:var(--neg)}
.lei-regua{
  position:relative;height:16px;margin-top:1.05rem;
  background:var(--surface-3);border:1px solid var(--border-forte);border-radius:var(--r-sm);
}
.lei-regua i{
  position:absolute;top:0;bottom:0;left:0;display:block;
  border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--ink-3);
}
.lei.ok .lei-regua i{background:var(--pos)}
.lei.atencao .lei-regua i{background:var(--warn)}
.lei.fora .lei-regua i{background:var(--neg)}
.lei.atencao .lei-v{color:var(--warn)}
.lei.atencao .lei-nota{color:var(--warn)}
/* A linha que morde antes do teto. Ela é mais fina e tracejada: existe, mas
   não é a lei — é o aviso que a lei dá antes de cobrar. */
.lei-aviso{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px dashed var(--warn)}
.lei-aviso b{
  position:absolute;right:.3rem;top:calc(100% + .18rem);white-space:nowrap;font-weight:600;
  font-family:var(--tipo-mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--warn);
}
.lei-marca{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink)}
.lei-marca b{
  position:absolute;left:.3rem;top:-1.2rem;white-space:nowrap;font-weight:600;
  font-family:var(--tipo-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
}
.lei-marca.esq b{left:auto;right:.3rem}
.lei-nota{margin:1.05rem 0 0;font-size:.85rem;color:var(--ink-2)}
.lei.fora .lei-nota{color:var(--neg)}
.lei-fonte{
  font-family:var(--tipo-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-left:.35rem;
}

/* a mesma marca, na régua fina das forças da legenda */
.medidor.com-ref{position:relative;overflow:visible;margin-top:1.05rem}
.medidor .ref{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink-2)}
.medidor .ref b{
  position:absolute;left:.3rem;top:-1.15rem;white-space:nowrap;font-weight:600;
  font-family:var(--tipo-mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.medidor .ref.esq b{left:auto;right:.3rem}

/* ── A BANCA: viés como posição, alcance como peso ────────────────────────
   O viés era um número solto. Ele é uma posição entre hostil e favorável, e o
   que decide a cobertura é viés VEZES alcance — então o alcance sai da frase
   e vira barra. */
.vies{display:grid;grid-template-columns:3.4rem minmax(0,1fr) 4.6rem;align-items:center;gap:.5rem;margin-top:.4rem}
.vies-rot{font-family:var(--tipo-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.vies-eixo{position:relative;height:.7rem;background:var(--surface-3);border-radius:2px}
.vies-eixo::before{content:'';position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--border-forte)}
.vies-eixo i{position:absolute;top:2px;bottom:2px;border-radius:1px;display:block}
.vies-eixo i.favor{background:var(--pos)}
.vies-eixo i.contra{background:var(--neg)}
.vies-eixo i.neutro{background:var(--ink-3)}
.alcance{display:flex;align-items:center;gap:.6rem;margin-top:.35rem}
.alcance-barra{flex:0 0 6.5rem;height:.5rem;background:var(--surface-4);border-radius:2px;overflow:hidden}
/* A CONTA DE CADA VEÍCULO
   Os dois multiplicadores que o motor aplica, ditos onde a decisão é tomada.
   Vêm de `Imprensa::fatorAlcance/fatorVies/fatorGravidade` — não são copiados
   aqui, justamente para não divergirem do número que a ação usa. */
.conta-imp{
  display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;align-items:center;
  margin-top:.5rem;padding-top:.45rem;border-top:1px solid var(--border);
  font-family:var(--tipo-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-3);
}
.conta-imp b{font-size:.88rem;letter-spacing:0;margin-right:.25rem;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.conta-imp b.pos{color:var(--pos)}
.conta-imp b.neg{color:var(--neg)}
.conta-imp .destaque{color:var(--urna)}
.conta-imp .destaque b{color:var(--urna)}
.ci-pub{
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.64rem;
  color:var(--neg);border:1px solid var(--neg);border-radius:2px;padding:.06rem .35rem;
}
.alcance-barra i{display:block;height:100%;background:var(--ink-2)}
.veiculo.inimigo .alcance-barra i{background:var(--neg)}

/* ── A ESCOLHA ────────────────────────────────────────────────────────────
   As opções de um evento eram botões cinzas de largura inteira, com estilo
   escrito no atributo: pareciam caixas inertes, não decisões. */
.escolha{
  display:block;width:100%;text-align:left;cursor:pointer;font:inherit;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--border);
  border-left:3px solid var(--border-forte);border-radius:var(--r-sm);
  padding:.6rem .75rem;margin-bottom:.45rem;
}
.escolha:hover{background:var(--surface-3);border-left-color:var(--urna)}
.escolha:disabled{opacity:.45;cursor:not-allowed}
.escolha .t{font-family:var(--tipo-ui);font-weight:700;font-size:1.02rem;letter-spacing:.03em;display:block}
.escolha .c{
  display:block;margin-top:.12rem;font-family:var(--tipo-mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}

/* ── O DEGRAU ─────────────────────────────────────────────────────────────
   A decisão mais importante do jogo mostrava seis cartões iguais, metade
   apagada por opacidade. O que você pode disputar acende; o que ainda não
   pode fica trancado — e diz por quê, que é a informação com a qual dá para
   trabalhar até o pleito seguinte. */
.degrau{
  background:var(--surface-2);border:1px solid var(--border);
  border-left:3px solid var(--urna);border-radius:var(--r-sm);
  padding:.6rem .8rem;margin-bottom:.55rem;cursor:pointer;
}
.degrau:hover{background:var(--surface-3)}
.degrau .t{font-family:var(--tipo-ui);font-weight:700;font-size:1.08rem;letter-spacing:.03em}
.degrau .d{font-size:.86rem;color:var(--ink-2);margin-top:.15rem;line-height:1.45}
.degrau.trancado{
  border-left-color:var(--border);border-style:dashed;background:transparent;cursor:not-allowed;
}
.degrau.trancado .t{color:var(--ink-3);font-weight:600}
.degrau.trancado .d{color:var(--ink-3)}
.degrau .trava{color:var(--warn)}
.degrau.trancado .trava{color:var(--ink-3);font-style:italic}

/* ── modal ───────────────────────────────────────────────────────────── */
#modal{
  position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;
  justify-content:center;padding:1.2rem;z-index:100;
}
#modal .box{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  max-width:560px;width:100%;max-height:86vh;overflow:auto;padding:1.2rem;
}
#modal h3{margin:0 0 .5rem;font-family:var(--tipo-ui);font-size:1.2rem;letter-spacing:.03em}

/* ── A PORTA ──────────────────────────────────────────────────────────────
   A tela de entrada era um formulário sobre fundo liso: não dizia o que é o
   jogo e não se parecia com nenhuma outra tela dele. O mapa do país — o mesmo
   desenho que a apuração presidencial usa e que ninguém via antes de disputar
   uma eleição — vira papel de parede, e a vinheta joga a luz no meio. */
.porta{
  position:relative;min-height:100vh;display:grid;place-items:center;
  padding:2.5rem 1.1rem;overflow:hidden;
}
.porta-fundo{
  position:absolute;inset:0;display:grid;place-items:center;
  padding:1.5rem;pointer-events:none;opacity:.55;
}
.porta-fundo svg{width:auto;height:100%;max-height:min(80vh,44rem);max-width:100%;display:block}
.porta-fundo path{fill:var(--surface-2);stroke:var(--bg);stroke-width:.9}
.porta::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 44%,
    color-mix(in srgb,var(--bg) 12%,transparent) 10%,
    color-mix(in srgb,var(--bg) 62%,transparent) 50%,
    var(--bg) 86%);
}
.porta-painel{position:relative;z-index:2;width:100%;max-width:26rem;text-align:center}
.porta-marca{
  font-family:var(--tipo-ui);font-weight:700;text-transform:uppercase;
  font-size:clamp(3.2rem,11vw,5rem);line-height:.92;letter-spacing:.1em;
  margin:0;color:var(--ink);
}
.porta-tag{
  font-family:var(--tipo-mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2);margin:.5rem 0 1.8rem;
}
.porta .card{max-width:23rem;margin:0 auto;text-align:left;background:var(--surface)}
.porta-faixa{
  display:flex;gap:.6rem 1.6rem;flex-wrap:wrap;justify-content:center;
  border-top:1px solid var(--border);margin:2rem 0 0;padding-top:.8rem;
  font-family:var(--tipo-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.porta-faixa b{color:var(--urna);font-weight:600}
@media(max-width:520px){.porta{min-height:auto;padding:1.6rem 1rem}}

/* ── A FICHA DE CANDIDATURA ───────────────────────────────────────────────
   Cinco passos à esquerda, e à direita uma coluna que não muda de lugar: é
   onde a escolha vira consequência visível antes de custar quatro anos. */
.ficha{
  display:grid;gap:0;max-width:1080px;margin:1.5rem auto;padding:0 1.1rem;
  grid-template-columns:minmax(0,1fr) 17.5rem;align-items:start;
}
@media(max-width:900px){.ficha{grid-template-columns:1fr}}
.ficha-esq{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg) 0 0 var(--r-lg);padding:1.1rem 1.25rem;min-width:0;
}
.ficha-dir{
  background:var(--surface-2);border:1px solid var(--border);border-left:0;
  border-radius:0 var(--r-lg) var(--r-lg) 0;padding:1.1rem 1rem;
  display:flex;flex-direction:column;gap:.9rem;position:sticky;top:1rem;
}
@media(max-width:900px){
  .ficha-esq{border-radius:var(--r-lg) var(--r-lg) 0 0}
  .ficha-dir{border-left:1px solid var(--border);border-top:0;
    border-radius:0 0 var(--r-lg) var(--r-lg);position:static}
}
.passos{display:flex;gap:.35rem;margin:0 0 1rem}
.passos i{flex:1;height:3px;background:var(--surface-3);border-radius:2px;display:block}
.passos i.on{background:var(--urna)}
#f-passo-rot{color:var(--urna);margin:0}
.ficha-pergunta{
  font-family:var(--tipo-ui);font-weight:700;font-size:1.55rem;line-height:1.1;
  letter-spacing:.03em;text-transform:uppercase;margin:.15rem 0 .2rem;color:var(--ink);
}
.ficha-ajuda{margin:0 0 1rem;font-size:.9rem;line-height:1.5}
.ficha-nav{margin-top:1.2rem;padding-top:.9rem;border-top:1px solid var(--border)}
.ficha-esq h3{
  margin:1.2rem 0 .5rem;font-family:var(--tipo-mono);font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  padding-bottom:.25rem;border-bottom:1px solid var(--border);
}
.ficha-aviso{margin-top:auto;font-size:.76rem;line-height:1.5}

/* O NÚMERO NA URNA
   O jogo sempre soube o número da legenda e nunca o mostrou como o objeto que
   ele é. Os três últimos dígitos ficam vazios porque ainda não existem: eles
   saem no registro da candidatura. */
.urna{border:1px solid var(--border-forte);border-radius:var(--r);background:var(--surface);overflow:hidden}
.urna-cab{
  background:var(--surface-3);padding:.3rem .55rem;color:var(--ink-3);
  font-family:var(--tipo-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
}
.urna-visor{padding:.7rem .6rem;text-align:center}
.urna-dig{display:flex;gap:.28rem;justify-content:center}
.urna-dig b{
  font-family:var(--tipo-ui);font-weight:700;font-size:2rem;line-height:1.1;
  width:1.6rem;background:var(--surface-3);border-radius:2px;color:var(--urna);
  font-variant-numeric:tabular-nums;
}
.urna-dig b.vazio{color:var(--ink-3);background:var(--surface-2)}
.urna-quem{font-family:var(--tipo-ui);font-weight:700;font-size:1rem;letter-spacing:.02em;margin:.5rem 0 0}
.urna-oq{font-family:var(--tipo-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:.1rem 0 0}

.resumo .linha{grid-template-columns:1fr auto;font-size:.85rem;gap:.6rem}
.resumo .k{font-family:var(--tipo-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.resumo .v{text-align:right}

/* ── criação de carreira ─────────────────────────────────────────────── */
.setup{max-width:760px;margin:2rem auto;padding:0 1.1rem}
.setup h1{
  font-family:var(--tipo-ui);font-weight:700;letter-spacing:.16em;
  font-size:1.9rem;margin:0 0 .2rem;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.opt{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  padding:.55rem .7rem;cursor:pointer;
}
.opt:hover{border-color:var(--border-forte)}
.opt.on{border-color:var(--urna);background:color-mix(in srgb,var(--urna) 12%,var(--surface-2))}
.opt .t{font-weight:600;font-size:.88rem}
.opt .d{font-size:.76rem;color:var(--ink-3);margin-top:.1rem;line-height:1.4}
label{display:block;font-family:var(--tipo-ui);font-size:.86rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:.2rem}
input[type=text],input[type=password]{
  width:100%;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:.5rem .65rem;
}
input[type=range]{width:100%;accent-color:var(--urna)}
.eixo{margin-bottom:.6rem}
.eixo .lbl{display:flex;justify-content:space-between;font-size:.74rem;color:var(--ink-3)}
.campo{margin-bottom:.7rem}
.campo-fim{margin-bottom:.9rem}

.chip{
  display:inline-block;font-family:var(--tipo-ui);font-size:.78rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;padding:.06rem .4rem;border-radius:4px;
  background:var(--surface-3);color:var(--ink-2);
}
.chip.urna{background:color-mix(in srgb,var(--urna) 20%,transparent);color:var(--urna)}
.spin{
  display:inline-block;width:12px;height:12px;border:2px solid var(--ink-3);
  border-top-color:transparent;border-radius:50%;animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}

/* ── diagnóstico do pleito ───────────────────────────────────────────── */
.diag{
  border:1px solid var(--border);border-radius:var(--r-lg);padding:.9rem 1rem;
  margin:.9rem 0;background:var(--surface-2);
}
.diag-veredito{
  font-family:var(--tipo-ui);font-size:1.25rem;font-weight:700;letter-spacing:.02em;
  margin:-.3rem 0 .7rem;
}
.diag-causa{display:grid;grid-template-columns:1fr;gap:.15rem;padding:.55rem 0;border-top:1px solid var(--border)}
.diag-causa:first-of-type{border-top:0}
.diag-causa b{font-size:.9rem}
.diag-causa span{font-size:.85rem;color:var(--ink-2);line-height:1.45}
.diag-causa.bom b{color:var(--pos)}
.diag-causa.ruim b{color:var(--neg)}
.diag-causa.neutro b{color:var(--ink-2)}
.diag-licao{
  margin:.8rem 0 0;padding:.6rem .7rem;border-left:3px solid var(--urna);
  background:var(--surface);font-size:.88rem;line-height:1.5;border-radius:0 var(--r-sm) var(--r-sm) 0;
}

/* ── mapa ────────────────────────────────────────────────────────────── */
.mapa-caixa{
  position:relative;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;
}
.mapa{display:block;width:100%;height:auto}
.mapa .area{
  stroke:var(--surface);stroke-width:.9;stroke-linejoin:round;
  cursor:pointer;transition:filter .12s;
}
.mapa .area:hover{filter:brightness(1.22)}
/* Selecionar não pode virar rabisco: uma zona é feita de dezenas de polígonos,
   e contornar todos com traço grosso apaga o mapa. O jeito que funciona é o
   contrário — apagar o resto e acender a escolhida. */
.mapa.tem-selecao .area{opacity:.32}
.mapa .area.sel{opacity:1;stroke:var(--urna);stroke-width:1.4}
/* A sua base tem de se achar no mapa sem depender da cor: num estado inteiro,
   onze regiões começam com quase a mesma reputação baixa, e sem esta marca a
   única região onde o jogador é alguém fica indistinguível das outras dez. */
.mapa .area.base{stroke:var(--urna);stroke-width:1.1}
.mapa.tem-selecao .area.base{opacity:.5}
.mapa .rotulo{
  font-family:var(--tipo-ui);font-size:9px;font-weight:600;letter-spacing:.06em;
  fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.45);stroke-width:2.4;
  pointer-events:none;text-anchor:middle;
}
.mapa-legenda{
  display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin-top:.55rem;
  font-family:var(--tipo-ui);font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.mapa-legenda i{
  display:inline-block;width:.8rem;height:.8rem;border-radius:2px;
  margin-right:.25rem;vertical-align:-1px;
}
.mapa-vazio{
  padding:2rem 1rem;text-align:center;color:var(--ink-3);font-size:.85rem;line-height:1.5;
}

/* ── escala de espaçamento ───────────────────────────────────────────────
   Estas classes nasceram uma a uma dos 115 `style=` estáticos que existiam
   no HTML. Não é um framework: é exatamente o que o jogo usa, e nada mais. */
.mt-0{margin-top:0}
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.7rem}
.mt-4{margin-top:.9rem}
.mt-5{margin-top:1.2rem}
.mb-1{margin-bottom:.35rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.7rem}
.mb-4{margin-bottom:.9rem}
.mb-5{margin-bottom:1.4rem}
.my-1{margin:.25rem 0}

/* subtítulo colado no h2 do cartão */
.cabeca{margin:-.4rem 0 .9rem}
.cabeca-sm{margin:-.35rem 0 .7rem}
.titulo-tela{margin-top:0;font-family:var(--tipo-ui);font-size:1.6rem;font-weight:700;letter-spacing:.03em}

.linha-2{grid-template-columns:1fr auto}
.linha-3{grid-template-columns:1fr auto 76px}
.clicavel{cursor:pointer}
.nowrap{white-space:nowrap}
.pre{white-space:pre-wrap;font-size:.78rem}
.fraco{opacity:.65}
.medidor{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.medidor i{display:block;height:100%}

/* ── sala de apuração ────────────────────────────────────────────────────
   A recompensa de quatro anos de jogo era uma tabela. Aqui ela é uma
   contagem: o mapa se pinta, o quociente enche, as cadeiras caem. */
.apu{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--border-forte);border-radius:var(--r-lg);
  padding:1.1rem 1.15rem;margin-bottom:1rem;
}
.apu-topo{
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  flex-wrap:wrap;margin-bottom:.9rem;
}
.apu-cargo{
  font-family:var(--tipo-ui);font-weight:700;font-size:1.15rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
}
.apu-urnas{
  font-family:var(--tipo-ui);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--urna);display:flex;align-items:center;gap:.4rem;
}
.apu-urnas .ico{color:var(--urna)}

.apu-grade{display:grid;gap:1rem}
@media(min-width:820px){.apu-grade{grid-template-columns:1fr 1fr}}
/* município cuja malha ainda não foi ingerida: os números tomam a tela
   inteira em vez de deixar metade dela vazia */
.apu-grade.sem-mapa{grid-template-columns:1fr !important}

.apu-numeros{display:grid;gap:.75rem;align-content:start}
.apu-linha .k{
  font-family:var(--tipo-ui);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:.1rem;
}
.apu-linha .v{
  font-family:var(--tipo-ui);font-weight:700;font-size:2.4rem;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
/* O único brilho da interface inteira fica aqui: é o número pelo qual o
   jogador esperou quatro anos. Se outra coisa acender, esta deixa de brilhar. */
#apu-votos{font-size:clamp(2.6rem,6vw,3.8rem);color:var(--urna);text-shadow:0 0 34px color-mix(in srgb,var(--urna) 42%,transparent)}
.apu-linha .v small{font-size:.9rem;font-weight:600;color:var(--ink-3);letter-spacing:.06em}

/* A RÉGUA DA NOITE
   O quociente era o fim do trilho, e por isso não existia como linha: não dá
   para "quase alcançar" a borda de uma barra. Agora a régua passa do corte, e
   o corte é uma linha marcada no meio dela. No proporcional há duas medidas
   sobre a mesma régua — a pessoa e a legenda — porque a cadeira é do partido
   primeiro e da pessoa depois. */
.apu-quociente{
  position:relative;height:22px;margin-top:1.15rem;
  background:var(--surface-3);border:1px solid var(--border-forte);border-radius:var(--r-sm);
}
.apu-quociente i{
  position:absolute;top:0;bottom:0;left:0;display:block;
  border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--urna);
  width:0;transition:width .9s cubic-bezier(.22,.9,.3,1);
}
/* a legenda vai por baixo, apagada: é o contexto do número da pessoa */
.apu-quociente i.leg{
  background:color-mix(in srgb,var(--urna) 26%,transparent);
  border-right:1px dashed var(--urna);
}
.apu-quociente.atingiu i{background:var(--pos)}
.apu-quociente.atingiu i.leg{background:color-mix(in srgb,var(--pos) 26%,transparent);border-right-color:var(--pos)}
.apu-marca{
  position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink);
}
.apu-marca b{
  position:absolute;left:.3rem;top:-1.2rem;white-space:nowrap;font-weight:600;
  font-family:var(--tipo-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
}
/* corte do lado direito da régua: o rótulo cai para dentro, senão ele sai da
   coluna e invade o painel do assessor */
.apu-marca.esq b{left:auto;right:.3rem}
.apu-legenda-q{
  display:flex;justify-content:space-between;font-family:var(--tipo-mono);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:.3rem;
}
.apu-falta{margin:.35rem 0 0;font-size:.88rem;color:var(--ink-2)}
.apu-falta b{color:var(--ink);font-variant-numeric:tabular-nums}
.apu-falta b.fal{color:var(--urna)}
.apu-falta b.ok{color:var(--pos)}

/* O TICKER
   Enquanto o mapa pinta, a transmissão diz qual praça fechou e quanto ela deu.
   É a mesma informação do mapa, para quem lê antes de olhar. */
.apu-ticker{
  display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;min-height:1.3rem;margin-top:.9rem;
  padding-top:.5rem;border-top:1px solid var(--border);
  font-family:var(--tipo-mono);font-size:.78rem;color:var(--ink-3);
}
.apu-ticker:empty{border-top:0;padding-top:0;margin-top:0}
.apu-tick b{color:var(--urna);font-weight:600}

/* o veredito, que só cai depois da contagem */
.apu-veredito{
  font-family:var(--tipo-ui);font-weight:700;letter-spacing:.05em;
  font-size:clamp(1.7rem,4vw,2.6rem);line-height:1;margin:1rem 0 .2rem;
  opacity:0;transform:translateY(6px);
}
.apu-veredito.entrou{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}

/* as cadeiras caindo uma a uma */
.apu-cadeiras{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.2rem}
.apu-cadeira{
  width:1.1rem;height:1.1rem;border-radius:3px;background:var(--surface-3);
  opacity:0;transform:scale(.6);
}
.apu-cadeira.caiu{opacity:1;transform:none;transition:opacity .18s ease,transform .18s ease}
.apu-cadeira.sua{background:var(--urna);box-shadow:0 0 0 2px var(--ink),0 0 14px color-mix(in srgb,var(--urna) 70%,transparent)}

/* o mapa da apuração pinta zona a zona */
.mapa .area.apagada{opacity:.12}
.mapa .area.acesa{opacity:1;transition:opacity .45s ease}

.apu-pular{align-self:center}

/* ── hemiciclo ───────────────────────────────────────────────────────────
   A Câmara era uma tabela de 21 a 55 linhas. Aqui cada cadeira é um assento
   e a aritmética de maioria se lê de longe. */
.hemi{display:block;width:100%;height:auto;max-width:640px;margin:0 auto}
.hemi .assento{cursor:pointer;transition:transform .12s}
.hemi .assento:hover{transform:scale(1.35)}
.hemi .assento.voce{stroke:var(--ink);stroke-width:1.6}
.hemi .maioria{stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:4 3;fill:none}
.hemi .rot-maioria{
  font-family:var(--tipo-ui);font-size:11px;font-weight:600;letter-spacing:.1em;
  fill:var(--ink-3);text-anchor:middle;
}
.hemi-legenda{
  display:flex;flex-wrap:wrap;gap:.3rem .9rem;justify-content:center;margin-top:.5rem;
  font-family:var(--tipo-ui);font-size:.84rem;letter-spacing:.06em;color:var(--ink-3);
}
.hemi-legenda i{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;margin-right:.28rem;vertical-align:-1px}

/* ── plenário: a pergunta da tela em corpo de manchete ─────────────────────
   Hemiciclo, espectro, bancadas e posição no governo disputavam o mesmo peso
   visual. A pergunta real de quem está na Câmara é uma só — quantos votos
   faltam para a maioria — e agora ela é a maior coisa da tela. */
.plenario{display:grid;gap:1rem;align-items:start}
@media(min-width:760px){.plenario{grid-template-columns:minmax(0,1fr) 14rem}}
.chave{
  border:1px solid var(--border);background:var(--surface-2);
  border-radius:var(--r);padding:.7rem .8rem;
}
.chave .k{
  margin:0;font-family:var(--tipo-mono);font-weight:600;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.chave .g{
  margin:.1rem 0 .2rem;font-family:var(--tipo-ui);font-weight:700;font-size:3rem;
  line-height:1;color:var(--urna);font-variant-numeric:tabular-nums;
}
.chave p:last-child{margin:0;font-size:.86rem;color:var(--ink-2);line-height:1.5}

/* ── marca de legenda ────────────────────────────────────────────────── */
.marca-legenda{width:2.4rem;height:2.4rem;flex:none;border-radius:6px}
.marca-legenda.sm{width:1.5rem;height:1.5rem;border-radius:4px}

/* Escolha do bolso no preview da ação: a linha inteira é o alvo do clique,
   porque um rádio de 12 px no celular é armadilha. */
.linha.opt{cursor:pointer;border-radius:6px;padding-inline:.5rem;margin-inline:-.5rem}
.linha.opt:hover{background:var(--surface-2)}
.linha.opt.sel{background:var(--surface-2);box-shadow:inset 2px 0 0 var(--accent)}
.linha.opt small{display:block;margin-top:.15rem;font-size:.78rem}

/* ── orientação de voto ──────────────────────────────────────────────────
   O chefe de gabinete recomenda, mostra a conta e diz o que ela custa. A
   convicção dele vira a espessura da barra à esquerda: forte, moderada, ou
   dividido — que é quando os dois lados se defendem e ele diz isso. */
.orienta{
  background:var(--surface-2);border-radius:var(--r-sm);
  padding:.75rem .85rem;margin-top:1rem;
  border-left:3px solid var(--border-forte);
}
.orienta.forte{border-left-color:var(--accent)}
.orienta.moderada{border-left-color:var(--accent-2)}
.orienta.dividido{border-left-color:var(--warn)}
.orienta .cab{display:flex;gap:.55rem;align-items:center;font-size:.92rem}
.orienta .cab b{color:var(--ink)}
.orienta .cab .sub{font-size:.76rem}
.orienta .voto{
  font-family:var(--tipo-ui);font-weight:700;letter-spacing:.04em;
  padding:.06rem .42rem;border-radius:3px;margin:0 .1rem;
}
.orienta .voto.v-sim{background:var(--pos);color:var(--bg)}
.orienta .voto.v-nao{background:var(--neg);color:var(--bg)}
.orienta .voto.v-ausente{background:var(--surface-3);color:var(--ink-2)}
.orienta .frase{margin:.6rem 0 .5rem;font-size:.94rem;color:var(--ink)}
.orienta .razao{
  display:flex;gap:.5rem;align-items:flex-start;
  font-size:.86rem;color:var(--ink-2);margin-bottom:.3rem;
}
.orienta .razao .sinal{
  flex:0 0 .9rem;text-align:center;font-family:var(--tipo-mono);
  font-weight:600;line-height:1.5;
}
.orienta .razao.sp .sinal{color:var(--pos)}
.orienta .razao.sn .sinal{color:var(--neg)}
.orienta .razao.so .sinal{color:var(--ink-3)}
.orienta .ressalva{
  margin:.65rem 0 0;padding-top:.55rem;border-top:1px solid var(--border);
  font-size:.85rem;color:var(--ink-2);font-style:italic;
}

/* o botão que ele recomenda — marcado, nunca escolhido por você */
.btn.recomendado{position:relative;box-shadow:0 0 0 2px var(--accent)}
.btn.recomendado::after{
  content:'recomendado';position:absolute;left:50%;transform:translateX(-50%);
  bottom:-1.15rem;white-space:nowrap;
  font-family:var(--tipo-ui);font-size:.68rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
}
.com-rec{margin-bottom:1.25rem}

/* ação fora da mesa do trimestre: disponível, mas não é o que ele separou */
.acao.fora{opacity:.62;border-style:dashed}
.acao.fora:hover{opacity:1}


/* ── legado ───────────────────────────────────────────────────────────────
   O veredito não é um resumo: é o parágrafo que a carreira merece, e por isso
   tem peso de texto corrido e não de rodapé. */
.veredito{
  border-left:3px solid var(--urna);background:var(--surface-2);
  border-radius:0 var(--r) var(--r) 0;padding:.75rem .9rem;margin:.9rem 0;
}
.veredito p{margin:0 0 .4rem;line-height:1.55}
.veredito p:last-child{margin-bottom:0}
.veredito p:first-child{font-weight:600}

/* ── a cidade sob você: oscilação com o zero no meio ─────────────────────
   O eixo é de MÉRITO, não de sinal. Quem melhorou vai para a direita em verde,
   quem piorou vai para a esquerda em vermelho — inclusive os indicadores em que
   subir é piorar. O número ao lado continua sendo o real, com o sinal real. */
.oscila{display:flex;flex-direction:column}
.osc{
  display:grid;grid-template-columns:minmax(7rem,13rem) minmax(0,1fr) 4.2rem;
  align-items:center;gap:.7rem;padding:.28rem 0;border-bottom:1px solid var(--border);
  font-size:.87rem;
}
.osc:last-child{border-bottom:0}
.osc .eixo{position:relative;height:.85rem;background:var(--surface-2);border-radius:2px}
.osc .eixo::before{content:'';position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--border-forte)}
.osc .eixo i{position:absolute;top:2px;bottom:2px;border-radius:1px;display:block}
.osc .eixo i.sobe{background:var(--pos)}
.osc .eixo i.desce{background:var(--neg)}
.osc .dt{text-align:right;font-family:var(--tipo-ui);font-weight:700;font-size:.95rem}
.osc .dt.sobe{color:var(--pos)} .osc .dt.desce{color:var(--neg)} .osc .dt.igual{color:var(--ink-3)}
.osc-guia{color:var(--ink);font-weight:600;display:inline-block}
@media(max-width:640px){.osc{grid-template-columns:8rem minmax(0,1fr) 3.4rem;gap:.5rem}}

/* ── convenção partidária ───────────────────────────────────────────────────
   A conta precisa estar aberta ANTES: preterido com aviso é drama, preterido
   sem aviso é bug. Por isso ela é uma tabela legível, e não um número só. */
.conta{background:var(--surface-2);border-radius:var(--r);padding:.7rem .85rem}
.conta .parcela{margin-top:.5rem}
.conta .barra{height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden;margin-top:.2rem}
.conta .barra > i{display:block;height:100%;background:var(--urna);border-radius:3px}

/* ── memória ────────────────────────────────────────────────────────────────
   Uma relação era um inteiro sem causa. O número agora é clicável, e o que
   abre é o que aconteceu entre as duas pessoas — não o palpite ideológico com
   que a casa começou. */
.lig{
  background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;
  border-bottom:1px dotted currentColor;font-variant-numeric:tabular-nums;
}
.lig:hover{opacity:.75}
.mandato{
  border-left:2px solid var(--border-forte);padding:.35rem 0 .35rem .7rem;margin:.6rem 0;
}

/* ── imprensa ───────────────────────────────────────────────────────────────
   A regra de desenho: ela não pode virar mais um placar. O que ocupa a tela é
   a manchete — o texto que saiu depois do que você fez. */
.manchete{border-left:2px solid var(--border-forte);padding:.4rem 0 .5rem .7rem;margin:.6rem 0}
.manchete .t{font-family:var(--tipo-ui);font-size:1.05rem;font-weight:600;line-height:1.25;margin-top:.15rem}
.veiculo{background:var(--surface-2);border-radius:var(--r);padding:.55rem .7rem;margin:.5rem 0}
.veiculo.inimigo{border-left:3px solid var(--neg)}

/* ── progressão: o atributo e a prática que o move ──────────────────────────
   A barra grossa é o NÍVEL — o que a pessoa é hoje. A fina embaixo é a
   PRÁTICA acumulada até o próximo ponto, e é a única coisa nesta tela que se
   mexe todo turno. Ela é discreta de propósito: progressão que pisca a cada
   clique vira barra de experiência, e a promessa aqui é outra — a carreira
   ensina devagar, e o jogador percebe olhando para trás. */
.atr{
  display:grid;grid-template-columns:1fr 46px 76px;gap:.55rem;align-items:center;
  padding:.32rem 0;border-bottom:1px solid var(--border);font-size:.86rem;
}
.atr:last-of-type{border-bottom:0}
.atr-barras{display:flex;flex-direction:column;gap:3px}
.atr-pratica{height:2px;background:var(--surface-3);border-radius:1px;overflow:hidden}
.atr-pratica i{display:block;height:100%;background:var(--frio)}
.atr-pratica.teto i{background:var(--surface-4)}

/* ── traço de personalidade: o que ele DÁ e o que ele COBRA ─────────────── */
.traco{
  border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:4px;padding:.55rem .7rem;margin:.5rem 0;background:var(--surface-2);
}
.traco-nome{font-family:var(--tipo-ui);letter-spacing:.02em;
  text-transform:uppercase;font-size:.9rem}
.traco-frase{font-size:.86rem;color:var(--ink-2);margin:.2rem 0 .45rem}
.traco-nums{display:flex;flex-wrap:wrap;gap:.3rem}
/* O que o traço DÁ e o que ele COBRA, separados por cor: a leitura tem que ser
   de relance, senão a ficha volta a ser enfeite. Verde é o que joga a seu
   favor, vermelho é o preço — inclusive quando o número sobe, como em
   "quanto dói cada queda". */
.traco-nums .chip{font-size:.72rem;cursor:default}
.traco-nums .chip.pos{background:color-mix(in srgb,var(--pos) 18%,transparent);color:var(--pos)}
.traco-nums .chip.neg{background:color-mix(in srgb,var(--neg) 18%,transparent);color:var(--neg)}

/* ── o que a matéria custou ─────────────────────────────────────────────────
   A aba prometia que o dono do veículo importa. Sem este número ela pedia fé:
   o jogador via a manchete sair maior no jornal do rival e tinha de acreditar
   que aquilo doía mais. Agora dói um número, e ele está embaixo do texto. */
.manchete-custo{
  font-family:var(--tipo-mono);font-size:.72rem;letter-spacing:.02em;
  margin-top:.25rem;color:var(--ink-3);
}
.manchete-custo.neg{color:var(--neg)}
.manchete-custo.pos{color:var(--pos)}

/* ── as armas do antagonista ────────────────────────────────────────────────
   Ele passou a ter mecânicas de verdade — voto, articulação, um jornal. Elas
   ficam anunciadas ANTES de serem usadas: adversário cujo poder só se descobre
   depois de apanhar não é adversário, é armadilha. */
.armas{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.3rem}
.armas .chip{font-size:.68rem;cursor:default}
.armas .chip.neg{background:color-mix(in srgb,var(--neg) 16%,transparent);color:var(--neg)}

/* ── a carta que fala da SUA partida ────────────────────────────────────────
   O baralho escrito fala da política em geral; a carta montada fala do número
   que está na aba ao lado, com o nome do bairro e a contagem de meses. O
   jogador merece saber a diferença antes de escolher. */
.marca-gerado{
  font-family:var(--tipo-mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;vertical-align:middle;
  padding:.1rem .4rem;border-radius:3px;
  background:color-mix(in srgb,var(--frio) 18%,transparent);color:var(--frio);
}

/* ── os derrotados do primeiro turno ────────────────────────────────────────
   Cada um é uma decisão: quanto vale o apoio dele, qual a chance de vir, e o
   que houve entre vocês. Quatro semanas e três nomes é uma escolha de verdade
   — a fase inteira depende de o jogador conseguir comparar os três de relance. */
.derrotado{
  border:1px solid var(--border);border-radius:4px;
  padding:.55rem .7rem;margin:.5rem 0;background:var(--surface-2);
}
.derrotado .linha{border-bottom:0;padding-bottom:.1rem}
.derrotado .sub{font-size:.8rem}
.derrotado .chip{margin-left:.3rem;font-size:.68rem}
.derrotado .chip.pos{background:color-mix(in srgb,var(--pos) 18%,transparent);color:var(--pos)}
.derrotado .chip.neg{background:color-mix(in srgb,var(--neg) 18%,transparent);color:var(--neg)}

/* ═══════════════════════════════════════════════════════════════════════
   A CIDADE NO MAPA
   ───────────────────────────────────────────────────────────────────────
   A tela principal de quem governa ou legisla sobre um lugar. O mapa ocupa
   o centro, as camadas ficam em cima dele como num painel de controle, e o
   bairro escolhido abre ao lado. A rampa de cor é a mesma do mapa eleitoral
   (pior → melhor), para o jogador ler as duas telas do mesmo jeito.
   ═══════════════════════════════════════════════════════════════════════ */
body.modo-cidade .app{max-width:1600px}
.cid{display:grid;gap:.85rem}
.cid-carregando{display:flex;align-items:center;gap:.6rem;color:var(--ink-3)}

/* ── cabeça: o placar da cidade ── */
.cid-cabeca{
  display:flex;flex-wrap:wrap;align-items:stretch;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
}
.cid-titulo{flex:1 1 16rem;padding:.7rem .95rem}
.cid-titulo .rot{margin:0}
.cid-titulo h2{
  margin:.2rem 0 0;font-family:var(--tipo-ui);font-size:1.5rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;
}
.cid-kpi{
  display:flex;flex-direction:column;justify-content:center;gap:.05rem;
  padding:.55rem 1.05rem;border-left:1px solid var(--border);min-width:8.5rem;
}
.cid-kpi .k{
  font-family:var(--tipo-mono);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.15em;color:var(--ink-3);
}
.cid-kpi .v{font-family:var(--tipo-ui);font-size:2rem;font-weight:700;line-height:1.02}
.cid-kpi .d{font-size:.74rem;color:var(--ink-3)}
.cid-kpi .d.pos{color:var(--pos)} .cid-kpi .d.neg{color:var(--neg)}
.cid-crise{background:color-mix(in srgb, var(--neg) 9%, var(--surface))}
.cid-crise .v{font-size:1.15rem;line-height:1.25;text-transform:uppercase;letter-spacing:.03em}

/* ── corpo: a mesa com o mapa e o painel do bairro ── */
.cid-corpo{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:.85rem;align-items:start}
@media(max-width:1280px){.cid-corpo{grid-template-columns:1fr}}
.cid-mesa{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:.7rem}
.cid-camadas{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.6rem}
.cid-camada{
  background:transparent;border:1px solid var(--border);color:var(--ink-2);cursor:pointer;
  font-family:var(--tipo-ui);font-weight:700;font-size:.86rem;letter-spacing:.05em;
  text-transform:uppercase;padding:.3rem .62rem;border-radius:var(--r-sm);
}
.cid-camada:hover{border-color:var(--border-forte);color:var(--ink)}
.cid-camada.on{background:var(--urna);border-color:var(--urna);color:var(--sobre-accent)}
.cid-camada:focus-visible,.cid-vistas button:focus-visible,.cid-linha:focus-visible{outline:2px solid var(--frio);outline-offset:1px}

.cid-palco{
  position:relative;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;min-height:240px;
  background:var(--surface-2);
  background:radial-gradient(ellipse at 50% 42%, var(--surface-2), var(--bg) 88%);
}
.cid-svg{display:block;width:100%;height:auto;max-height:70vh}
.cid-area{stroke:var(--bg);stroke-width:.55;stroke-opacity:.7;stroke-linejoin:round;cursor:pointer;transition:filter .12s,opacity .2s}
.cid-area:hover{filter:brightness(1.25)}
.cid-svg.tem-selecao .cid-area{opacity:.34}
.cid-svg .cid-area.sel{opacity:1;stroke:var(--urna);stroke-width:1.9;stroke-opacity:1}
.cid-rotulo{
  font-family:var(--tipo-ui);font-weight:600;letter-spacing:.05em;fill:#fff;paint-order:stroke;
  stroke:rgba(0,0,0,.55);stroke-width:2.6;pointer-events:none;text-anchor:middle;
}
.cid-marca{cursor:pointer}
.cid-marca circle{fill:var(--neg);stroke:var(--bg);stroke-width:1.6;animation:cid-aceso 1.8s ease-in-out infinite}
.cid-marca text{fill:#fff;font-family:var(--tipo-ui);font-weight:800;font-size:10px;text-anchor:middle;pointer-events:none}
@keyframes cid-aceso{0%,100%{opacity:1}50%{opacity:.62}}
.pulsa-pos{animation:cid-pulsa-pos 1.6s ease-out}
.pulsa-neg{animation:cid-pulsa-neg 1.6s ease-out}
@keyframes cid-pulsa-pos{0%{stroke:var(--pos);stroke-width:4}100%{stroke-width:.8}}
@keyframes cid-pulsa-neg{0%{stroke:var(--neg);stroke-width:4}100%{stroke-width:.8}}

.cid-vistas{
  position:absolute;top:.5rem;right:.5rem;display:flex;background:var(--surface);
  border:1px solid var(--border-forte);border-radius:var(--r-sm);overflow:hidden;
}
.cid-vistas button{
  background:transparent;border:0;color:var(--ink-2);cursor:pointer;padding:.3rem .62rem;
  font-family:var(--tipo-ui);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
}
.cid-vistas button.on{background:var(--surface-3);color:var(--ink)}
.cid-vistas button:disabled{opacity:.4;cursor:not-allowed}

/* o trimestre passando: o calendário corre por cima do mapa */
.cid-tempo{
  position:absolute;left:50%;top:3rem;transform:translateX(-50%);pointer-events:none;z-index:2;
  background:var(--surface);background:color-mix(in srgb, var(--bg) 84%, transparent);
  border:1px solid var(--urna);border-radius:var(--r);padding:.85rem 1.5rem;text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.cid-tempo-mes{
  display:block;font-family:var(--tipo-ui);font-weight:700;font-size:2.1rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--urna);white-space:nowrap;
}
.cid-tempo-barra{display:block;width:15rem;max-width:60vw;height:4px;background:var(--surface-3);margin:.5rem auto 0;border-radius:2px;overflow:hidden}
.cid-tempo-barra i{display:block;height:100%;width:0;background:var(--urna)}

.cid-legenda{display:grid;grid-template-columns:auto minmax(8rem,14rem) 1fr;align-items:center;gap:.2rem .8rem;margin-top:.6rem;font-size:.8rem}
.cid-legenda-nome{font-family:var(--tipo-ui);font-weight:700;font-size:.88rem;letter-spacing:.06em;text-transform:uppercase}
.cid-rampa{height:.6rem;border-radius:2px}
.cid-legenda-pontas{
  grid-column:2;display:flex;justify-content:space-between;font-family:var(--tipo-mono);
  font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);
}
.cid-legenda-desc{grid-column:3;grid-row:1 / span 2;color:var(--ink-3)}

/* sem malha do IBGE: o mosaico */
.cid-mosaico{display:flex;flex-wrap:wrap;gap:4px;padding:.6rem}
.cid-bloco{
  flex-grow:1;border:0;border-radius:var(--r-sm);color:#fff;cursor:pointer;text-align:left;
  font-family:var(--tipo-ui);font-weight:700;font-size:.84rem;letter-spacing:.04em;padding:.42rem .55rem;
  display:flex;align-items:flex-start;justify-content:space-between;gap:.4rem;
  text-shadow:0 1px 2px rgba(0,0,0,.55);transition:filter .12s,opacity .2s;
}
.cid-bloco:hover{filter:brightness(1.15)}
.cid-mosaico:has(.sel) .cid-bloco:not(.sel){opacity:.45}
.cid-bloco.sel{outline:2px solid var(--urna);outline-offset:1px}
.cid-bloco i{font-style:normal;background:var(--neg);border-radius:50%;width:1.1rem;height:1.1rem;display:grid;place-items:center;font-size:.75rem;flex:none}

/* ── o painel do bairro ── */
.cid-painel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:.85rem .95rem;position:sticky;top:70px;
}
@media(max-width:1280px){.cid-painel{position:static}}
.cid-painel .rot{margin:0}
.cid-p-topo{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.cid-p-nome{margin:.15rem 0 .2rem;font-family:var(--tipo-ui);font-weight:700;font-size:1.4rem;letter-spacing:.02em;text-transform:uppercase;line-height:1.1}
.cid-p-sat{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .55rem;margin:.65rem 0 .2rem}
.cid-p-sat b{font-family:var(--tipo-ui);font-size:2.3rem;line-height:1}
.cid-p-sat span{font-size:.8rem;color:var(--ink-2)}
.cid-p-h{margin:1.05rem 0 .45rem;font-family:var(--tipo-ui);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.cid-p-h .sub{text-transform:none;letter-spacing:0;font-weight:400}
.cid-fams{display:grid;gap:.34rem}
.cid-fam{display:grid;grid-template-columns:5.8rem 1fr 3.5rem;align-items:center;gap:.1rem .5rem;font-size:.8rem}
.cid-fam.alerta .cid-fam-nome{color:var(--neg);font-weight:700}
.cid-fam-barra{position:relative;height:.5rem;background:var(--surface-3);border-radius:2px}
.cid-fam-barra i{display:block;height:100%;border-radius:2px;transition:width .4s}
.cid-fam-barra s{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--ink);opacity:.65;text-decoration:none}
.cid-fam-v{text-align:right;font-family:var(--tipo-ui);font-weight:700}
.cid-fam-v small{font-weight:600;font-size:.72rem}
.cid-fam-dem{grid-column:2 / span 2;font-family:var(--tipo-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--neg)}
.cid-sug{
  display:grid;gap:.12rem;padding:.48rem .6rem;margin-bottom:.35rem;background:var(--surface-2);
  border:1px solid var(--border);border-left:3px solid var(--frio);border-radius:var(--r-sm);
}
.cid-sug-nome{font-family:var(--tipo-ui);font-weight:700;font-size:.95rem;letter-spacing:.02em}
.cid-p-nota{margin:.35rem 0 0;font-size:.72rem}
.cid-rep{border:0;padding:0}
.cid-lista{display:grid}
.cid-linha{
  display:grid;grid-template-columns:.7rem minmax(0,1fr) auto auto;align-items:center;gap:.5rem;
  background:transparent;border:0;border-bottom:1px solid var(--border);padding:.38rem .15rem;
  color:var(--ink);text-align:left;cursor:pointer;font-size:.86rem;
}
.cid-linha:hover{background:var(--surface-2)}
.cid-linha i{width:.7rem;height:.7rem;border-radius:2px}
.cid-linha-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cid-linha b{font-family:var(--tipo-ui)}
.cid-chip{font-size:.64rem}

/* ── a voz da rua ── */
.cid-voz{
  display:flex;align-items:center;gap:.7rem;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:.45rem .7rem;overflow:hidden;
}
.cid-voz-rot{
  flex:none;font-family:var(--tipo-ui);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sobre-accent);background:var(--urna);padding:.2rem .5rem;border-radius:var(--r-sm);
}
.cid-voz-faixa{
  overflow:hidden;flex:1;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.cid-voz-trilho{display:flex;gap:2.4rem;white-space:nowrap;width:max-content}
.cid-voz-trilho.corre{animation:cid-correr 70s linear infinite}
.cid-voz-faixa:hover .cid-voz-trilho{animation-play-state:paused}
.cid-voz-trilho:not(.corre){flex-wrap:wrap;white-space:normal;width:auto;gap:.4rem 1.2rem}
@keyframes cid-correr{to{transform:translateX(-50%)}}
.cid-voz-item{font-size:.85rem;color:var(--ink-2)}
.cid-voz-item.crise{color:var(--neg);font-weight:600}
.cid-voz-item[data-id]{cursor:pointer;border-bottom:1px dotted var(--ink-3)}
.cid-voz-item[data-id]:hover{color:var(--ink)}

/* ── as abas em grupos ── */
nav .aba-grupo{
  display:block;font-family:var(--tipo-mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);padding:.8rem .65rem .22rem;
}
nav .aba-grupo:first-child{padding-top:0}
nav .aba-grupo + button.abre-consulta{margin-top:0;padding-top:.42rem;border-top:0}
@media(max-width:1100px){nav .aba-grupo{display:none}}

/* ── celular ── */
@media(max-width:640px){
  .cid-kpi{min-width:0;flex:1 1 30%;border-left:0;border-top:1px solid var(--border);padding:.45rem .7rem}
  .cid-kpi .v{font-size:1.55rem}
  .cid-titulo h2{font-size:1.2rem}
  .cid-legenda{grid-template-columns:auto 1fr}
  .cid-legenda-desc{grid-column:1 / -1;grid-row:auto}
  .cid-tempo-mes{font-size:1.4rem}
  .cid-svg{max-height:none}
  .cid-camada{font-size:.78rem;padding:.26rem .48rem}
  .cid-vistas{top:auto;bottom:.4rem}
  .cid-crise{flex-basis:100%}
  .cid-crise .v{font-size:1rem;overflow-wrap:anywhere}
}
/* No celular, o Continuar fica ao alcance do polegar em vez de no fim de uma
   rolagem de três telas. Some quando há decisão na mesa, como já sumia. */
@media(max-width:1100px){
  #jogo #continuar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;width:auto;
    box-shadow:0 8px 28px rgba(0,0,0,.5)}
  #jogo .app{padding-bottom:5rem}
}

/* ── as obras no mapa e no painel (Fase C) ── */
.desafio-ranking h4{margin:1.2rem 0 .4rem}
.desafio-ranking ol{margin:0;padding-left:1.4rem;max-width:420px}
.desafio-ranking li{display:grid;grid-template-columns:1fr auto 1.2rem;gap:.6rem;padding:.15rem 0}
.desafio-nota{font-size:1.1rem;margin-top:.6rem}
.desafio-nota b.num{font-size:1.5rem;color:var(--accent)}
.bio-url{flex:1;min-width:0;padding:.4rem .5rem;background:var(--surface-2);color:var(--ink);border:1px solid var(--border);border-radius:6px}
.cid-marca-ocor{cursor:pointer}
.cid-marca-ocor rect{fill:var(--warn,#c98a00);stroke:var(--bg);stroke-width:1.4}
.cid-marca-ocor text{font-size:8px;text-anchor:middle;pointer-events:none}
.cid-bloco i.ocor{background:var(--warn,#c98a00)}
.cid-ocor-linha{margin-top:.4rem}
.cid-marca-obra{cursor:pointer}
.cid-marca-obra .fundo{fill:var(--surface);stroke:var(--bg);stroke-width:1.4}
.cid-marca-obra .anel{fill:none;stroke:var(--frio);stroke-width:3;stroke-linecap:round}
.cid-marca-obra.st-licitacao .anel{stroke:var(--ink-3);stroke-dasharray:2 2.6 !important}
.cid-marca-obra.st-parada .anel{stroke:var(--neg)}
.cid-marca-obra.st-pronta .anel{stroke:var(--pos)}
.cid-marca-obra.st-pronta .fundo{animation:cid-aceso 1.4s ease-in-out infinite}
.cid-marca-obra text{fill:var(--ink);font-family:var(--tipo-ui);font-weight:800;font-size:8px;text-anchor:middle;pointer-events:none}
.cid-sug .cid-fazer{justify-self:start;margin-top:.3rem}
.cid-obras-lista{display:grid;gap:.4rem;margin-top:.4rem}
.cid-obra{
  display:grid;gap:.18rem;padding:.5rem .6rem;margin-bottom:.35rem;background:var(--surface-2);
  border:1px solid var(--border);border-left:3px solid var(--frio);border-radius:var(--r-sm);
}
.cid-obra.st-parada{border-left-color:var(--neg)}
.cid-obra.st-pronta{border-left-color:var(--pos)}
.cid-obra.st-licitacao{border-left-color:var(--ink-3)}
.cid-obra-topo{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.cid-obra-nome{
  background:none;border:0;padding:0;color:var(--ink);cursor:pointer;text-align:left;
  font-family:var(--tipo-ui);font-weight:700;font-size:.95rem;letter-spacing:.02em;
}
.cid-obra-nome:hover{color:var(--urna)}
.cid-obra-st{font-family:var(--tipo-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.cid-obra.st-parada .cid-obra-st{color:var(--neg)} .cid-obra.st-pronta .cid-obra-st{color:var(--pos)}
.cid-obra-barra{display:block;height:.42rem;background:var(--surface-3);border-radius:2px;overflow:hidden;margin-top:.15rem}
.cid-obra-barra i{display:block;height:100%;background:var(--frio);transition:width .5s}
.cid-obra.st-parada .cid-obra-barra i{background:var(--neg)}
.cid-obra-acoes{display:flex;gap:.35rem;margin-top:.3rem}
.cid-catalogo{margin:.4rem 0 .2rem;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2)}
.cid-catalogo summary{cursor:pointer;padding:.45rem .6rem;font-family:var(--tipo-ui);font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.cid-cat-grupo{padding:.35rem .6rem .5rem;border-top:1px solid var(--border)}
.cid-cat-fam{display:block;font-family:var(--tipo-ui);font-weight:700;font-size:.85rem;margin-bottom:.2rem}
.cid-cat-item{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.82rem;padding:.22rem 0}

/* ── Fase D: o vereador fiscal ── */
.cid-pref { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .6rem; margin: .2rem 0 .3rem; font-size: 1.05rem; }
.cid-pref-ap { margin-left: auto; color: var(--sub, #9aa4b2); font-size: .85rem; }
.cid-pref-ap b { color: var(--txt, inherit); font-size: 1.1rem; }
.cid-achado { border-left: 3px solid #d9a52b; padding: .5rem .6rem; margin: .4rem 0; background: rgba(217,165,43,.07); border-radius: 0 6px 6px 0; }
.cid-achado.g2, .cid-achado.g3 { border-left-color: #d9534f; background: rgba(217,83,79,.08); }
.cid-achado .cid-obra-nome { display: block; text-align: left; margin: .15rem 0 .35rem; }

/* ── Fase D: LOA e comissões ── */
.loa-barra { display: flex; height: 14px; border-radius: 4px; overflow: hidden; margin: .4rem 0 .3rem; background: rgba(127,127,127,.15); }
.loa-barra i { display: block; height: 100%; }
.loa-legenda { display: flex; flex-wrap: wrap; gap: .25rem .7rem; font-size: .78rem; color: var(--sub, #9aa4b2); }
.loa-legenda span { display: inline-flex; align-items: center; gap: .3rem; }
.loa-legenda i { width: .65rem; height: .65rem; border-radius: 2px; display: inline-block; }
.loa-legenda b { color: var(--txt, inherit); }
.loa-opcao { border: 1px solid rgba(127,127,127,.25); border-radius: 6px; padding: .55rem .7rem; margin: .5rem 0; }
.loa-opcao .fila { flex-wrap: wrap; gap: .35rem; }

/* Fase E: as outras vias da obra — convênio e medida provisória */
.cid-via { border-top: 1px dashed var(--border); padding-top: .75rem; }
.cid-via .rot { margin-bottom: .25rem; }

/* Fase F: avisos que somem (resultado de medida, conquista) */
#toasts{position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;flex-direction:column;gap:.5rem;max-width:min(380px,calc(100vw - 32px))}
.toast{background:var(--surface-2);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--r-sm);padding:.6rem .8rem;box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:.9rem;cursor:pointer;animation:toast-entra .25s ease-out}
.toast b{display:block;font-family:var(--tipo-ui);letter-spacing:.04em;text-transform:uppercase;font-size:.78rem;margin-bottom:.15rem}
.toast.erro{border-left-color:var(--neg)}
.toast.conquista{border-left-color:var(--accent);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 18%,var(--surface-2)),var(--surface-2))}
.toast.sai{opacity:0;transform:translateY(8px);transition:all .35s}
@keyframes toast-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:640px){#toasts{left:16px;right:16px;bottom:84px}}
.aj-item{display:flex;gap:.75rem;align-items:center;justify-content:space-between;padding:.55rem 0;border-bottom:1px solid var(--border)}
.aj-item:last-child{border-bottom:0}
.aj-item .btn{flex:none}

/* Fase F: primeiros passos no painel do mapa */
.cid-roteiro{margin:0 0 .8rem;border:1px solid var(--accent);border-radius:var(--r-sm);background:var(--surface-2);padding:.15rem .7rem .4rem}
.cid-roteiro summary{cursor:pointer;padding:.45rem 0;font-family:var(--tipo-ui);letter-spacing:.05em;text-transform:uppercase;font-size:.82rem}
.cid-roteiro ol{margin:.2rem 0 .4rem 1.1rem;padding:0}
.cid-roteiro li{margin:.35rem 0;line-height:1.35}
.cid-roteiro li.feito{color:var(--ink-2);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink-2) 50%,transparent)}
.cid-roteiro li.prox>b{color:var(--accent)}
.cid-roteiro li .btn{margin-left:.4rem;vertical-align:middle}
/* Fase F: conquistas no Legado */
.conq-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.5rem}
.conq{border:1px solid var(--border);border-radius:var(--r-sm);padding:.5rem .6rem;opacity:.55}
.conq b{display:block}
.conq.ganha{opacity:1;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.cid-suplencia{margin:0 0 .8rem;padding:.55rem .7rem;border:1px dashed var(--accent);border-radius:var(--r-sm)}
.cid-suplencia .rot{margin:0 0 .15rem}
/* intenção de voto na coluna lateral */
.iv-linha{display:grid;grid-template-columns:minmax(0,1.6fr) 1fr auto 3.2em;gap:.45rem;align-items:center;padding:.22rem 0;font-size:.88rem}
.iv-linha.eu .iv-nome{font-weight:700;color:var(--accent)}
.iv-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iv-nome .sub{margin-left:.25rem;font-size:.75rem}
.iv-barra{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.iv-barra i{display:block;height:100%;background:var(--ink-2)}
.iv-linha.eu .iv-barra i{background:var(--accent)}

/* ══════════════════════════════════════════════════════════════════════════
   O MAPA ÚNICO — a tela do jogo é o mapa, e o resto flutua sobre ele.
   O mar e a terra são as duas únicas cores grandes; o âmbar da urna marca o
   que é seu (o estado, a cidade, o menu aberto, a visão escolhida).
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --mar:#040b15; --terra:#16293d; --terra-borda:#253f5a; --vidro:rgba(10,22,37,.9);
  --sombra-hud:0 10px 30px rgba(0,0,0,.42);
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --mar:#c9d6de; --terra:#ecE8dd; --terra-borda:#b9b2a3; --vidro:rgba(255,255,253,.93);
  --sombra-hud:0 10px 26px rgba(40,36,24,.18);
}}
:root[data-theme="light"]{
  --mar:#c9d6de; --terra:#ece8dd; --terra-borda:#b9b2a3; --vidro:rgba(255,255,253,.93);
  --sombra-hud:0 10px 26px rgba(40,36,24,.18);
}
:root[data-theme="dark"]{
  --mar:#040b15; --terra:#16293d; --terra-borda:#253f5a; --vidro:rgba(10,22,37,.9);
  --sombra-hud:0 10px 30px rgba(0,0,0,.42);
}

body.no-mundo{overflow:hidden}
#jogo{position:fixed;inset:0;overflow:hidden;background:var(--mar)}
#jogo .mundo{position:absolute;inset:0}
#jogo .mundo-mapa{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}
.mundo-svg{display:block;width:100%;height:100%;max-height:none;cursor:grab}
.mundo-svg.arrastando{cursor:grabbing}
.mundo-mar{fill:var(--mar)}

/* a terra: neutra no contexto, pintada só onde o jogo tem o que dizer */
.mundo-svg .m-area:not([fill]){fill:var(--terra)}
.mundo-svg .m-area{
  stroke:var(--terra-borda);stroke-width:.7;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;cursor:pointer;transition:opacity .25s,filter .12s;
}
.mundo-svg .m-uf{stroke-width:1.2}
.mundo-svg .m-area:hover{filter:brightness(1.16)}
.mundo-svg .m-area.coberta{fill:transparent;pointer-events:none}
.mundo-svg .m-area.casa{stroke:var(--urna);stroke-width:2.2}
.mundo-svg .m-area.casa.coberta{stroke-width:2.4}
.m-ufmapa,.m-munmapa{opacity:0;pointer-events:none;transition:opacity .35s}
.m-ufmapa.lod,.m-munmapa.lod{opacity:1;pointer-events:auto}
.mundo-svg .cid-area{stroke:var(--mar);stroke-width:.8;stroke-opacity:.85}
.mundo-svg.tem-selecao .cid-area{opacity:.42}
.mundo-svg .cid-area.sel{opacity:1;stroke:var(--urna);stroke-width:2.6;stroke-opacity:1}

/* rótulos e marcas vivem na tela, não no mapa: não crescem com o zoom */
.mundo-hud{pointer-events:none}
.mundo-hud g{pointer-events:auto}
.m-rot{
  font-family:var(--tipo-ui);font-weight:600;fill:var(--ink);text-anchor:middle;dominant-baseline:middle;
  paint-order:stroke;stroke:var(--mar);stroke-width:3.2px;stroke-linejoin:round;pointer-events:none;
}
.m-rot-uf{font-size:13px;letter-spacing:.05em;fill:var(--ink-2)}
.m-rot-mun{font-size:11.5px;fill:var(--ink-2)}
.m-rot-bairro{font-size:11px}
.m-pino circle{fill:var(--urna);stroke:var(--mar);stroke-width:1.5}
.m-pino .m-pino-onda{fill:none;stroke:var(--urna);stroke-width:1.5;animation:m-onda 2.2s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes m-onda{0%{transform:scale(.45);opacity:.9}100%{transform:scale(1.6);opacity:0}}

/* ── o vidro do HUD ── */
#jogo #topo,#jogo #abas,#jogo #painel,#jogo #hud-dir .card,#jogo .hud-sel,#jogo .mundo-camadas,
#jogo .mundo-trilha,#jogo .mundo-legenda,#jogo .mundo-zoom,#jogo .hud-dir-alternar,#jogo .mundo-dica{
  background:var(--vidro);border:1px solid var(--border-forte);box-shadow:var(--sombra-hud);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}

/* ── o topo: recursos à esquerda, o relógio e o botão do trimestre à direita ── */
#jogo #topo{
  position:absolute;top:10px;left:10px;right:10px;z-index:30;border-radius:12px;
  display:flex;align-items:stretch;flex-wrap:nowrap;min-height:54px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;
}
#jogo #topo::-webkit-scrollbar{display:none}
#jogo #topo .marca{border:0;cursor:pointer;border-radius:11px 0 0 11px;flex:none}
#jogo #topo .item{padding:.25rem .7rem;flex:none}
#jogo #topo .espaco{flex:1;border:0;min-width:.5rem}
#jogo #topo .relogio{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
  padding:0 .4rem 0 .8rem;line-height:1.1;flex:none;max-width:18rem}
#jogo #topo .relogio .v{font-family:var(--tipo-ui);font-size:1.3rem;font-weight:700;letter-spacing:.02em}
#jogo #topo .relogio .sub{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:17rem}
#jogo #continuar{align-self:center;margin:0 .5rem;flex:none;border-radius:999px;padding:.55rem 1.2rem;
  font-size:1.05rem;min-width:8.5rem;width:auto;justify-content:center;position:static;box-shadow:none}
#jogo .topo-util{display:flex;align-items:center;gap:.3rem;padding-right:.55rem;flex:none}

/* ── o trilho de ícones: os menus, com o nome curto embaixo ── */
#jogo #abas{
  position:absolute;left:10px;top:76px;bottom:76px;z-index:28;width:62px;border-radius:12px;
  display:flex;flex-direction:column;gap:2px;padding:6px 5px;overflow-y:auto;scrollbar-width:none;
}
#jogo #abas::-webkit-scrollbar{display:none}
#jogo #abas .aba-grupo{display:block;flex:none;height:1px;min-height:0;margin:5px 6px;padding:0;border:0;
  background:var(--border);font-size:0;line-height:0;overflow:hidden}
#jogo #abas .aba-grupo:first-child{display:none}
#jogo #abas button{
  position:relative;flex:none;flex-direction:column;justify-content:center;gap:3px;padding:.5rem 0 .4rem;
  border-radius:9px;text-transform:none;letter-spacing:.01em;font-size:.66rem;font-weight:600;color:var(--ink-2);
  box-shadow:none;border-top:0;margin:0;
}
#jogo #abas button span{display:block;max-width:54px;overflow:hidden;text-overflow:ellipsis;line-height:1.05}
#jogo #abas button .ico{width:22px;height:22px}
#jogo #abas button:hover{background:var(--surface-3);color:var(--ink)}
#jogo #abas button.on{background:var(--urna-fraca);color:var(--ink);box-shadow:inset 0 0 0 1px var(--urna)}
#jogo #abas button .sinal{position:absolute;top:3px;right:4px;margin:0}
#jogo #abas button.abre-consulta{margin:0;padding-top:.5rem;border:0}

/* ── a gaveta: o menu aberto, à esquerda, com o mapa vivo do lado ── */
#jogo #painel{
  position:absolute;left:80px;top:76px;bottom:76px;z-index:27;width:min(580px,calc(100vw - 100px));
  border-radius:12px;overflow-y:auto;padding:0 1rem 1rem;background:var(--bg);
  opacity:0;transform:translateX(-14px);pointer-events:none;transition:opacity .16s,transform .16s;
}
body.gaveta-aberta #jogo #painel{opacity:1;transform:none;pointer-events:auto}
#jogo #painel .card{box-shadow:none}
.gaveta-cab{
  position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:.55rem;background:var(--bg);
  margin:0 -1rem .9rem;padding:.75rem 1rem .65rem;border-bottom:1px solid var(--border);
}
.gaveta-cab .ico{width:22px;height:22px;color:var(--urna)}
.gaveta-cab h2{flex:1;margin:0;font-family:var(--tipo-ui);font-size:1.3rem;font-weight:700;letter-spacing:.02em}
.gaveta-fechar,.hud-fechar{
  border:0;background:var(--surface-3);color:var(--ink);width:32px;height:32px;border-radius:50%;
  font-size:1.25rem;line-height:1;cursor:pointer;flex:none;
}
.gaveta-fechar:hover,.hud-fechar:hover{background:var(--surface-4)}

/* ── o palco: a decisão que para o jogo sobe para o meio ── */
body.palco #jogo #painel{
  left:50%;top:calc(50% + 34px);bottom:auto;width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 110px);
  transform:translate(-50%,-50%);opacity:1;pointer-events:auto;z-index:45;padding:1.1rem;
}
body.palco #jogo .mundo::after{
  content:'';position:absolute;inset:0;z-index:4;background:rgba(2,7,14,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
body.palco #jogo #abas,body.palco #jogo #hud-baixo,body.palco #jogo .mundo-zoom{opacity:.3;pointer-events:none}
body.palco #jogo #hud-dir,body.palco #jogo .hud-sel{display:none}

/* ── à direita: o gabinete (cartões do turno, assessor, pesquisa, notícias) ── */
#jogo .hud-dir-alternar{
  position:absolute;right:10px;top:74px;z-index:29;display:flex;align-items:center;gap:.4rem;
  border-radius:999px;padding:.35rem .8rem;color:var(--ink-2);cursor:pointer;font-family:var(--tipo-ui);
  font-weight:600;font-size:.9rem;
}
#jogo .hud-dir-alternar:hover{color:var(--ink)}
#jogo #hud-dir{
  position:absolute;right:10px;top:116px;bottom:76px;width:340px;z-index:26;
  display:flex;flex-direction:column;gap:.55rem;overflow-y:auto;scrollbar-width:thin;pointer-events:none;
}
#jogo #hud-dir > *,#jogo #hud-turno > *{pointer-events:auto}
#jogo #hud-turno{display:flex;flex-direction:column;gap:.55rem}
#jogo #hud-dir .card{margin:0;border-radius:12px;padding:.8rem .9rem}
#jogo #hud-dir #assessor{position:static}
#jogo #hud-dir .balanco{position:relative}
#jogo #hud-dir .balanco .hud-fechar{position:absolute;top:.5rem;right:.5rem;width:26px;height:26px;font-size:1.05rem}
#jogo .hud-log summary{cursor:pointer;list-style:none}
#jogo .hud-log summary::-webkit-details-marker{display:none}
#jogo .hud-log summary h2{margin:0}
#jogo .hud-log[open] summary h2{margin-bottom:.6rem}
#jogo .hud-log #a-log{max-height:40vh;overflow-y:auto}
body.dir-fechado #jogo #hud-dir,body.com-selecao #jogo #hud-dir{display:none}
body.com-selecao #jogo .hud-dir-alternar{display:none}

/* ── o que foi clicado no mapa ── */
#jogo .hud-sel{
  position:absolute;right:10px;top:74px;bottom:76px;width:370px;z-index:29;border-radius:12px;
  overflow-y:auto;padding:.9rem;background:var(--bg);
}
#jogo .hud-sel .cid-painel{border:0;padding:0;background:none;max-height:none;position:static}

/* ── embaixo: onde você está e como o mapa está pintado ── */
#jogo #hud-baixo{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:25;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;max-width:calc(100vw - 200px);
}
#jogo nav.mundo-trilha{flex-direction:row;position:static;top:auto}
#jogo .mundo-trilha{display:flex;align-items:center;gap:.4rem;border-radius:999px;padding:.25rem .8rem;
  font-family:var(--tipo-ui);font-size:.95rem;font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden}
#jogo .mundo-trilha button{border:0;background:none;color:var(--ink-2);cursor:pointer;padding:0;font:inherit;
  text-transform:none;letter-spacing:0;display:inline;white-space:nowrap}
#jogo .mundo-trilha button:hover{color:var(--ink);text-decoration:underline}
#jogo .mundo-trilha i{font-style:normal;color:var(--ink-3)}
#jogo .mundo-trilha [aria-current]{color:var(--ink)}
#jogo .mundo-camadas{display:flex;align-items:center;gap:2px;padding:4px;border-radius:12px;max-width:100%;
  overflow-x:auto;scrollbar-width:none}
#jogo .mundo-camadas::-webkit-scrollbar{display:none}
#jogo .mundo-camadas button{border:0;background:transparent;color:var(--ink-2);cursor:pointer;flex:none;
  font-family:var(--tipo-ui);font-weight:600;font-size:.92rem;padding:.36rem .72rem;border-radius:8px;white-space:nowrap}
#jogo .mundo-camadas button:hover{color:var(--ink);background:var(--surface-3)}
#jogo .mundo-camadas button.on{background:var(--urna);color:var(--sobre-accent)}
#jogo .mundo-camadas button:disabled{opacity:.4;cursor:default}
#jogo .mundo-vistas{display:flex;gap:2px;margin-left:.35rem;padding-left:.4rem;border-left:1px solid var(--border);flex:none}
#jogo .mundo-vistas button.on{background:var(--surface-4);color:var(--ink)}
#jogo .mundo-legenda{display:flex;align-items:center;gap:.55rem;border-radius:999px;padding:.2rem .75rem;
  font-family:var(--tipo-ui);font-size:.82rem;color:var(--ink-3)}
#jogo .mundo-legenda-nome{color:var(--ink-2);font-weight:600}
#jogo .mundo-rampa{display:block;width:150px;height:8px;border-radius:4px}
#jogo .mundo-legenda-pontas{display:flex;gap:.5rem}

#jogo .mundo-zoom{position:absolute;right:10px;bottom:12px;z-index:25;display:flex;flex-direction:column;
  border-radius:12px;overflow:hidden}
#jogo .mundo-zoom button{border:0;background:transparent;color:var(--ink);width:40px;height:38px;font-size:1.25rem;
  cursor:pointer;font-family:var(--tipo-ui);font-weight:700}
#jogo .mundo-zoom button + button{border-top:1px solid var(--border)}
#jogo .mundo-zoom button:hover{background:var(--surface-3)}

#jogo .mundo-dica{position:absolute;z-index:24;pointer-events:none;border-radius:8px;padding:.4rem .65rem;
  display:flex;flex-direction:column;gap:.05rem;max-width:250px;font-size:.8rem;color:var(--ink-2)}
#jogo .mundo-dica b{font-family:var(--tipo-ui);font-size:1.02rem;color:var(--ink)}
#jogo .cid-tempo{position:absolute;top:84px;left:50%;transform:translateX(-50%);z-index:24}

/* a gaveta da cidade, sem mapa */
.cid-gaveta .cid-cabeca-gaveta{display:flex;flex-wrap:wrap;gap:.6rem;margin:.4rem 0 .8rem}
.cid-gaveta .cid-painel-gaveta{border:0;padding:0;background:none;max-height:none;position:static}
.cid-gaveta .cid-voz{margin-bottom:.9rem}

/* ── celular: o trilho vira a barra de baixo, gaveta e painéis viram folhas ── */
@media (max-width:760px){
  #jogo #topo{top:6px;left:6px;right:6px;min-height:48px;border-radius:10px}
  #jogo #topo .marca span{display:none}
  #jogo #topo .item{padding:.2rem .55rem}
  #jogo #topo .item .v{font-size:1rem}
  #jogo #topo .relogio .sub{display:none}
  #jogo .topo-util{display:none}
  #jogo #continuar{position:fixed;left:auto;right:12px;bottom:84px;z-index:35;margin:0;min-width:0;padding:.75rem 1.1rem;
    box-shadow:var(--sombra-hud)}
  #jogo #abas{left:6px;right:6px;top:auto;bottom:6px;width:auto;height:62px;flex-direction:row;
    overflow-x:auto;overflow-y:hidden;padding:5px}
  #jogo #abas button{width:58px;padding:.35rem 0}
  #jogo #abas .aba-grupo{width:1px;height:auto;margin:6px 3px}
  #jogo #painel,body.gaveta-aberta #jogo #painel{left:6px;right:6px;top:60px;bottom:74px;width:auto}
  body.palco #jogo #painel{left:50%;top:calc(50% + 28px);width:calc(100vw - 12px);max-height:calc(100vh - 76px)}
  #jogo #hud-baixo{bottom:74px;max-width:calc(100vw - 110px);left:6px;transform:none;align-items:flex-start}
  #jogo .mundo-trilha,#jogo .mundo-legenda{display:none}
  #jogo .mundo-zoom{display:none}
  #jogo .hud-dir-alternar{top:60px;right:6px}
  #jogo #hud-dir{left:6px;right:6px;top:100px;bottom:74px;width:auto;z-index:31}
  #jogo .hud-sel{left:6px;right:6px;top:auto;bottom:74px;width:auto;max-height:60vh}
  #jogo .cid-tempo{top:64px}
}
.mundo-svg .sobre-tab > .m-area:not([fill]){fill:transparent}
.mundo-svg .sobre-tab > .m-area{stroke-opacity:.55;pointer-events:none}
@media (max-width:760px){
  body.gaveta-aberta #jogo .hud-dir-alternar, body.palco #jogo .hud-dir-alternar, body.com-selecao #jogo .hud-dir-alternar{display:none}
}
/* celular: o vidro do topo prendia o Continuar (backdrop-filter vira bloco de contenção do position:fixed) */
@media (max-width:760px){
  #jogo #topo{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg-2, var(--vidro))}
  #jogo #continuar{bottom:140px}
}

/* ══ O DESPACHO DO CHEFE DE GABINETE ══════════════════════════════════════
   Um popup por trimestre, por cima do mapa: a voz dele à esquerda, a banca e
   os fatos à direita. Os recortes de jornal são papel de verdade — claros
   mesmo no tema escuro — porque é isso que eles são dentro do gabinete. */
#jogo .despacho{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(3,8,15,.62);
}
#jogo .despacho.hide{display:none}
.desp-folha{
  position:relative;width:min(900px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;
  background:var(--surface);color:var(--ink);border:1px solid var(--border-forte);border-top:4px solid var(--accent);
  border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.55);overflow:hidden;
  animation:despEntra .34s cubic-bezier(.2,.8,.25,1);
}
.desp-folha.com-alerta{border-top-color:var(--neg)}
@keyframes despEntra{from{opacity:0;transform:translateY(22px) scale(.985)}}
@media (prefers-reduced-motion:reduce){.desp-folha{animation:none}}

.desp-cab{display:flex;gap:1rem;align-items:center;padding:1.1rem 1.3rem 1rem;
  background:var(--surface-2);border-bottom:1px solid var(--border)}
.desp-ini{width:66px;height:66px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent);color:var(--sobre-accent);font-family:var(--tipo-ui);font-size:1.75rem;font-weight:700;
  box-shadow:0 0 0 4px var(--surface-2),0 0 0 5px var(--accent)}
.com-alerta .desp-ini{background:var(--neg);box-shadow:0 0 0 4px var(--surface-2),0 0 0 5px var(--neg)}
.desp-quem{min-width:0}
.desp-quando{margin:0;font-family:var(--tipo-ui);font-size:1rem;color:var(--accent);letter-spacing:.02em}
.com-alerta .desp-quando{color:var(--neg)}
.desp-cab h2{margin:.05rem 0 0;font-family:var(--tipo-ui);font-size:1.8rem;line-height:1.05;font-weight:700}
.desp-origem{margin:.2rem 0 0;color:var(--ink-2);font-size:.9rem}
.desp-x{margin-left:auto;align-self:flex-start;flex:none;width:40px;height:40px;border-radius:9px;
  background:none;border:0;color:var(--ink-2);font-size:1.7rem;line-height:1;cursor:pointer}
.desp-x:hover{background:var(--surface-3);color:var(--ink)}

.desp-corpo{overflow:auto;padding:1.25rem 1.3rem 1.1rem;display:grid;grid-template-columns:1.12fr 1fr;gap:1.6rem;
  overscroll-behavior:contain}
.desp-col{display:flex;flex-direction:column;gap:1.4rem;min-width:0}
.desp-sec h3{margin:0 0 .6rem;font-family:var(--tipo-ui);font-size:1.08rem;font-weight:600;color:var(--ink-2);letter-spacing:.02em}

/* a voz dele: frases grandes, com a cor do tom na margem */
.desp-dito{margin:0 0 .8rem;padding:.05rem 0 .05rem .95rem;border-left:3px solid var(--border-forte);
  font-size:1.1rem;line-height:1.5;max-width:42em}
.desp-dito.t-alerta{border-left-color:var(--neg);font-size:1.2rem;font-weight:600}
.desp-dito.t-aviso{border-left-color:var(--warn)}
.desp-entenda{background:none;border:0;padding:0;margin-left:.15rem;color:var(--accent);font:inherit;font-size:.86em;
  font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* o saldo do trimestre */
.desp-bal{display:flex;gap:2rem;margin:0 0 .5rem}
.desp-bal > div{display:flex;flex-direction:column}
.desp-bal .n{font-family:var(--tipo-ui);font-size:2.7rem;font-weight:700;line-height:1}
.desp-bal .l{font-size:.85rem;color:var(--ink-3);margin-top:.15rem}
.desp-linha{display:flex;justify-content:space-between;gap:1rem;padding:.32rem 0;border-bottom:1px dashed var(--border);font-size:.93rem}
.desp-linha:last-child{border-bottom:0}

/* os recortes */
.desp-recorte{background:#efe8d8;color:#1d1b16;padding:.75rem .95rem .8rem;margin:0 0 .7rem;border-radius:2px;
  box-shadow:0 1px 0 rgba(0,0,0,.18),0 6px 14px rgba(0,0,0,.22);transform:rotate(-.45deg)}
.desp-recorte:nth-of-type(even){transform:rotate(.4deg);background:#f3eee2}
.desp-recorte p{margin:0}
.desp-recorte .veic{display:flex;justify-content:space-between;gap:.8rem;font-family:var(--tipo-ui);font-size:.86rem;color:#6b6252;
  border-bottom:1px solid #cfc5ae;padding-bottom:.3rem;margin-bottom:.4rem}
.desp-recorte .tit{font-family:Georgia,'Times New Roman',Times,serif;font-size:1.14rem;line-height:1.28;font-weight:700}
.desp-recorte .efeito{margin-top:.4rem;font-size:.8rem;color:#6b6252}
.desp-recorte .efeito.pos{color:#1f6b4a}
.desp-recorte .efeito.neg{color:#9d3427}
.desp-mais{background:none;border:0;padding:.2rem 0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}

.desp-fatos{list-style:none;margin:0;padding:0}
.desp-fatos li{padding:.4rem 0;border-bottom:1px solid var(--border);font-size:.93rem;line-height:1.4}
.desp-fatos li:last-child{border-bottom:0}
.desp-fatos .num{color:var(--ink-3);margin-right:.35rem;font-size:.84rem}

.desp-pe{display:flex;align-items:center;gap:1rem;padding:.9rem 1.3rem;border-top:1px solid var(--border);background:var(--surface-2)}
.desp-espera{color:var(--warn);font-weight:600}
.desp-ok{margin-left:auto;padding:.6rem 1.6rem;font-size:1.05rem;border-radius:999px}

/* o chefe no canto do mapa: abre o despacho a qualquer hora */
#jogo .bt-chefe{
  position:absolute;left:84px;top:76px;z-index:29;display:flex;align-items:center;gap:.55rem;
  padding:.28rem .9rem .28rem .28rem;border-radius:999px;cursor:pointer;color:var(--ink);
  background:var(--vidro);border:1px solid var(--border-forte);box-shadow:var(--sombra-hud);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--tipo-ui);font-size:1rem;
}
#jogo .bt-chefe[hidden]{display:none}
#jogo .bt-chefe:hover{border-color:var(--accent)}
#jogo .bt-chefe .bc-ini{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--accent);color:var(--sobre-accent);font-weight:700;font-size:1.05rem}
#jogo .bt-chefe.com-alerta .bc-ini{background:var(--neg)}
#jogo .bt-chefe .bc-alerta{position:absolute;left:26px;top:-2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  background:var(--neg);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;
  box-shadow:0 0 0 2px var(--surface)}
#jogo .bt-chefe .bc-alerta[hidden]{display:none}
body.palco #jogo .bt-chefe,body.gaveta-aberta #jogo .bt-chefe,body.com-despacho #jogo .bt-chefe{display:none}

@media (max-width:760px){
  #jogo .despacho{align-items:flex-end;padding:0}
  .desp-folha{max-height:94vh;border-radius:16px 16px 0 0;border-left:0;border-right:0;border-bottom:0}
  .desp-cab{padding:.9rem 1rem .85rem;gap:.8rem}
  .desp-ini{width:52px;height:52px;font-size:1.4rem}
  .desp-cab h2{font-size:1.45rem}
  .desp-corpo{grid-template-columns:1fr;gap:1.3rem;padding:1rem}
  .desp-dito{font-size:1.04rem}
  .desp-dito.t-alerta{font-size:1.12rem}
  .desp-pe{flex-wrap:wrap;padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom))}
  .desp-ok{width:100%;margin-left:0}
  #jogo .bt-chefe{left:6px;top:60px;padding-right:.75rem;font-size:.92rem}
  #jogo .bt-chefe .bc-ini{width:32px;height:32px}
}

/* ══ A PESQUISA ENCOMENDADA ═══════════════════════════════════════════════
   O formulário é uma escolha em dois passos (cargo, trabalho) e um recibo; o
   relatório põe o veredito no canto, grande, e a conta que o sustenta embaixo. */
.pq-secao{margin:1.4rem 0 .5rem;font-family:var(--tipo-ui);font-size:1.05rem;color:var(--ink-2)}
.pq-rot{margin:.9rem 0 .4rem;font-family:var(--tipo-ui);font-size:.95rem;color:var(--ink-2);letter-spacing:.02em}
.pq-cargos{display:flex;flex-wrap:wrap;gap:.4rem}
.pq-cargo{display:flex;flex-direction:column;align-items:flex-start;gap:.05rem;padding:.45rem .7rem;border-radius:9px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border);color:var(--ink);font:inherit;text-align:left}
.pq-cargo b{font-family:var(--tipo-ui);font-size:1rem}
.pq-cargo span{font-size:.78rem;color:var(--ink-3)}
.pq-cargo.trava b{color:var(--ink-2)}
.pq-cargo.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--urna-fraca)}
.pq-tipos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.pq-tipo{display:flex;flex-direction:column;gap:.3rem;padding:.7rem .8rem;border-radius:10px;cursor:pointer;text-align:left;
  background:var(--surface-2);border:1px solid var(--border);color:var(--ink);font:inherit}
.pq-tipo b{font-family:var(--tipo-ui);font-size:1.05rem}
.pq-tipo .d{font-size:.84rem;color:var(--ink-2);line-height:1.4}
.pq-tipo .n{margin-top:auto;font-size:.8rem;color:var(--ink-3)}
.pq-tipo.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--urna-fraca)}
.pq-tipo.on .n{color:var(--accent)}
.pq-aviso{margin:.6rem 0 0;padding:.5rem .7rem;border-left:3px solid var(--warn);background:var(--surface-2);font-size:.9rem;border-radius:0 6px 6px 0}
.pq-aviso.neg{border-left-color:var(--neg)}
.pq-link{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pq-pe{display:flex;align-items:center;gap:1rem;margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--border)}
.pq-ok{margin-left:auto;border-radius:999px;padding:.55rem 1.3rem}

.pq-rel{border-left:4px solid var(--warn)}
.pq-rel.pq-pos{border-left-color:var(--pos)}
.pq-rel.pq-neg{border-left-color:var(--neg)}
.pq-cab{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between}
.pq-cab h2{margin:.1rem 0 .2rem}
.pq-cab .pq-rot{margin:0}
.pq-veredito{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none}
.pq-selo{display:inline-block;padding:.15rem .6rem;border-radius:999px;font-family:var(--tipo-ui);font-size:.95rem;font-weight:600;
  background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.pq-pos .pq-selo{background:color-mix(in srgb,var(--pos) 18%,transparent);color:var(--pos)}
.pq-neg .pq-selo{background:color-mix(in srgb,var(--neg) 18%,transparent);color:var(--neg)}
.pq-chance{font-family:var(--tipo-ui);font-size:3rem;font-weight:700;line-height:1;margin-top:.2rem}
.pq-medidor{position:relative;height:8px;margin:.9rem 0 1rem;border-radius:4px;
  background:linear-gradient(90deg,var(--neg) 0 15%,var(--warn) 15% 40%,color-mix(in srgb,var(--pos) 70%,var(--warn)) 40% 65%,var(--pos) 65% 100%);opacity:.9}
.pq-medidor i{position:absolute;top:-5px;width:4px;height:18px;margin-left:-2px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 2px var(--surface)}
.pq-leitura{margin-bottom:.9rem}
.pq-linha{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 3.6rem;gap:.7rem;align-items:center;padding:.3rem 0}
.pq-linha .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pq-linha .barra{height:8px}
.pq-linha .barra i{background:var(--ink-3)}
.pq-linha.eu .barra i{background:var(--accent)}
.pq-linha b.num{text-align:right}
.pq-placar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:.4rem 0 .6rem}
.pq-placar > div{display:flex;flex-direction:column;padding:.6rem .7rem;background:var(--surface-2);border-radius:8px}
.pq-placar .n{font-family:var(--tipo-ui);font-size:1.7rem;font-weight:700;line-height:1.05}
.pq-placar > div:first-child .n{color:var(--accent)}
.pq-placar .l{font-size:.8rem;color:var(--ink-3);margin-top:.2rem;line-height:1.3}
.pq-regioes{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.pq-regioes ul{list-style:none;margin:0;padding:0}
.pq-regioes li{display:flex;justify-content:space-between;gap:.6rem;padding:.3rem 0;border-bottom:1px dashed var(--border);font-size:.92rem}
.pq-regioes > div:first-child b{color:var(--pos)}
.pq-regioes > div:nth-child(2) b{color:var(--neg)}
.pq-nota{margin-top:.9rem;font-size:.8rem}

.pq-colunas{display:flex;gap:.4rem;align-items:flex-end;height:150px;margin-top:.6rem}
.pq-colunas .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:.2rem;min-width:0}
.pq-colunas .col i{display:block;width:70%;max-width:38px;background:var(--accent);border-radius:4px 4px 0 0}
.pq-colunas .col .num{font-size:.78rem}
.pq-colunas .col .sub{font-size:.7rem;white-space:nowrap}
tr.pq-arq{cursor:pointer}
tr.pq-arq.on td{background:var(--urna-fraca)}
tr.pq-arq:hover td{background:var(--surface-2)}

.pq-mini{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.5rem;font-size:.88rem}
.pq-mini .pq-selo{font-size:.82rem}

@media (max-width:760px){
  .pq-tipos{grid-template-columns:1fr}
  .pq-placar{grid-template-columns:1fr}
  .pq-regioes{grid-template-columns:1fr}
  .pq-cab{flex-direction:column}
  .pq-veredito{align-items:flex-start;text-align:left}
  .pq-pe{flex-wrap:wrap}
  .pq-ok{width:100%;margin-left:0}
}

/* recursos contra a inelegibilidade (aba Risco) */
.inel{padding:10px 0 12px;border-bottom:1px solid var(--linha, rgba(127,127,127,.2))}
.inel:last-of-type{border-bottom:0}
.inel-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.inel-acoes .btn{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.25}
.inel-acoes .btn .sub{font-size:.8em;opacity:.8}

/* ══ CELULAR EM PÉ: NADA DO HUD FICA FORA DA TELA ═══════════════════════════
   A barra de menus quebrava em três linhas dentro de uma caixa de uma linha
   só: dez dos quinze menus ficavam abaixo da borda da tela, sem como chegar
   neles. E o topo escondia capital, caixa, risco, agenda e a data numa
   rolagem lateral invisível. Agora a barra é uma fila que rola de lado, com
   a borda esmaecida dizendo que há mais; o topo quebra em duas linhas e tudo
   o que fica abaixo dele desce junto (--topo-h, medido no núcleo). */
@media (max-width:760px){
  #jogo #abas{flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  #jogo #abas.mais-dir,#jogo .mundo-camadas.mais-dir{-webkit-mask-image:linear-gradient(to right,#000 80%,transparent);mask-image:linear-gradient(to right,#000 80%,transparent)}
  #jogo #abas.mais-esq,#jogo .mundo-camadas.mais-esq{-webkit-mask-image:linear-gradient(to left,#000 80%,transparent);mask-image:linear-gradient(to left,#000 80%,transparent)}
  #jogo #abas.mais-esq.mais-dir,#jogo .mundo-camadas.mais-esq.mais-dir{-webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent)}
  #jogo #topo{flex-wrap:wrap;overflow:visible}
  #jogo #topo .espaco,#jogo #topo .marca{display:none}
  #jogo #topo .item{flex:1 1 auto;padding:.15rem .4rem;min-width:0}
  #jogo #topo .item .k{font-size:.56rem;letter-spacing:.1em}
  #jogo #topo .item .v{font-size:.92rem}
  #jogo #topo .relogio{flex:1 1 auto;align-items:flex-start;padding:.15rem .4rem;justify-content:flex-end}
  #jogo #topo .relogio .v{font-size:.92rem}
  #jogo #bt-chefe{top:calc(var(--topo-h,48px) + 12px)}
  #jogo #painel table{display:block;overflow-x:auto;max-width:100%}
  #jogo #painel,body.gaveta-aberta #jogo #painel{top:calc(var(--topo-h,48px) + 12px)}
  #jogo .hud-dir-alternar{top:calc(var(--topo-h,48px) + 12px)}
  #jogo #hud-dir{top:calc(var(--topo-h,48px) + 52px)}
  #jogo .cid-tempo{top:calc(var(--topo-h,48px) + 16px)}
}
/* a barra do navegador do celular come o 86vh: a janela cabe na tela visível */
#modal .box{max-height:86dvh}