* { box-sizing: border-box; }

/* o atributo hidden vence qualquer display definido nas regras abaixo */
[hidden] { display: none !important; }

:root {
  color-scheme: dark;

  /* chrome (painel, header, modal): tinta escura com acento âmbar */
  --fundo: #0b141d;
  --painel: #101c29;
  --painel-2: #162534;
  --painel-3: #1c2f42;
  --borda: #24384c;
  --borda-forte: #33506b;
  --texto: #e8eff5;
  --texto-suave: #93a7ba;
  --ouro: #f5b942;
  --ouro-claro: #ffd479;
  --ok: #57d98a;       /* texto de sucesso sobre fundo escuro */
  --ruim: #ff8a80;     /* texto de erro sobre fundo escuro */
  --info: #6ab2ef;     /* texto informativo sobre fundo escuro */

  /* mapa (fundo claro de papel): os mesmos tons de sempre */
  --azul: #1d6fb8;
  --azul-escuro: #14528a;
  --verde: #1a7f37;
  --vermelho: #c62828;
}

html, body {
  margin: 0;
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fundo);
}

body { display: flex; flex-direction: column; }

/* ---------- header ---------- */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #12212f, #0e1b28);
  border-bottom: 1px solid var(--borda);
}
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--texto);
  min-width: 0;
}
.marca-icone {
  font-size: 20px;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(245, 185, 66, .22), rgba(245, 185, 66, .06));
  border: 1px solid rgba(245, 185, 66, .35);
}
.marca-texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.marca-texto b { font-size: 15.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.marca-texto small { font-size: 11px; color: var(--texto-suave); white-space: nowrap; }
header h1 { margin: 0; font-size: 16px; font-weight: 700; }
.header-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.header-acoes .botao-sec { padding: 7px 12px; font-size: 12.5px; }

main {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* ---------- painel lateral ---------- */
#painel {
  width: 372px;
  flex-shrink: 0;
  background: var(--painel);
  border-right: 1px solid var(--borda);
  padding: 16px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--borda-forte) transparent;
}
#painel::-webkit-scrollbar { width: 8px; }
#painel::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 4px; }

/* cada tela do painel entra com um leve fade */
#tela-modos, #tela-config, #area-jogo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: tela-entra .18s ease-out;
}
@keyframes tela-entra {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* ---------- tela 1: escolha do modo ---------- */
.tagline {
  margin: 2px 2px 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--texto-suave);
}
.grupo-modos { display: flex; flex-direction: column; gap: 8px; }
.grupo-modos h2 {
  margin: 6px 2px 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--texto-suave);
}
.carta-modo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  text-align: left;
  color: var(--texto);
  background: var(--painel-2);
  border: 1px solid var(--borda);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.carta-modo:hover {
  background: var(--painel-3);
  border-color: var(--borda-forte);
  transform: translateX(2px);
}
.carta-modo:hover .carta-seta { color: var(--ouro); transform: translateX(2px); }
.carta-icone {
  font-size: 21px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(150deg, #24374b, #17293a);
  border: 1px solid var(--borda);
}
.carta-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.carta-texto b { font-size: 14px; font-weight: 650; }
.carta-texto small { font-size: 12px; line-height: 1.35; color: var(--texto-suave); }
.carta-seta {
  margin-left: auto;
  font-size: 20px;
  color: var(--texto-suave);
  transition: color .15s, transform .15s;
}

/* ---------- tela 2: configuração ---------- */
.botao-voltar {
  align-self: flex-start;
  padding: 3px 2px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  color: var(--ouro);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
}
.botao-voltar:hover { color: var(--ouro-claro); }

.modo-cabecalho { display: flex; gap: 12px; align-items: flex-start; }
.modo-cabecalho h2 { margin: 1px 0 4px; font-size: 17px; font-weight: 700; }
#descricao-modo { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--texto-suave); }

#config { display: flex; flex-direction: column; gap: 10px; }
.config-modo { display: flex; flex-direction: column; gap: 10px; }
#config label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--texto-suave);
}
#config input, #config select {
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--borda);
  border-radius: 10px;
  color: var(--texto);
  background: #0d1824;
  transition: border-color .12s;
}
#config input:hover, #config select:hover { border-color: var(--borda-forte); }
#config input:focus, #config select:focus {
  outline: none;
  border-color: var(--ouro);
  box-shadow: 0 0 0 3px rgba(245, 185, 66, .18);
}
#config input:disabled, #config select:disabled { opacity: .5; }
#config label.check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 550;
  color: var(--texto);
  font-size: 12.5px;
}
#config label.check input { width: 16px; height: 16px; padding: 0; accent-color: var(--ouro); }
.nota-config { margin: 0; font-size: 12.5px; color: var(--texto-suave); line-height: 1.5; }

#recorde-atual {
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(245, 185, 66, .08);
  border: 1px solid rgba(245, 185, 66, .3);
}
#recorde-atual b { color: var(--ouro-claro); }

#desafio-banner {
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(106, 178, 239, .1);
  border: 1px solid rgba(106, 178, 239, .35);
}
#desafio-banner b { color: var(--info); }

#linha-iniciar { display: flex; gap: 8px; }
#linha-iniciar .botao-pri { flex: 1; padding: 13px 16px; font-size: 15px; }

/* ---------- botões ---------- */
.botao-pri, .botao-sec {
  font-family: inherit;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 11px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .12s, transform .12s, background .12s, border-color .12s;
}
.botao-pri {
  background: linear-gradient(180deg, #ffce67, #f0a52c);
  color: #2a1c02;
  box-shadow: 0 2px 12px rgba(240, 165, 44, .25);
}
.botao-pri:hover { filter: brightness(1.06); transform: translateY(-1px); }
.botao-pri:active { transform: none; }
.botao-pri:disabled { filter: saturate(.4) brightness(.8); cursor: default; transform: none; }
.botao-sec {
  background: rgba(255, 255, 255, .04);
  color: var(--texto);
  border-color: var(--borda);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.botao-sec:hover { background: rgba(255, 255, 255, .08); border-color: var(--borda-forte); }
.botao-sec.perigo:hover { border-color: rgba(255, 138, 128, .5); color: var(--ruim); }
.botao-pri:focus-visible, .botao-sec:focus-visible, .carta-modo:focus-visible,
.botao-voltar:focus-visible {
  outline: 2px solid rgba(245, 185, 66, .8);
  outline-offset: 2px;
}

/* ---------- tela 3: partida ---------- */
#jogo-topo { display: flex; gap: 10px; align-items: flex-start; }
#btn-config-jogo {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  font-size: 19px;
  line-height: 1;
  padding-bottom: 3px;
  color: var(--texto-suave);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--borda);
  border-radius: 9px;
  cursor: pointer;
}
#btn-config-jogo:hover { color: var(--ouro); border-color: var(--borda-forte); }
#jogo-titulos { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#jogo-titulos b { font-size: 15px; font-weight: 700; }
#jogo-titulos small { font-size: 11.5px; line-height: 1.4; color: var(--texto-suave); }

.barra {
  height: 8px;
  border-radius: 6px;
  background: #1d2f42;
  overflow: hidden;
}
#barra-progresso {
  height: 100%;
  width: 0%;
  border-radius: 6px;
  background: linear-gradient(90deg, #2fbf71, #57d98a);
  box-shadow: 0 0 10px rgba(87, 217, 138, .4);
  transition: width .3s;
}

#placar-linhas { font-size: 13px; display: flex; flex-direction: column; gap: 3px; color: var(--texto-suave); }
#placar-linhas b { font-variant-numeric: tabular-nums; color: var(--texto); }

#linha-palpite { display: flex; gap: 7px; }
#input-palpite {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--texto);
  background: #0d1824;
  border: 1px solid var(--borda);
  border-radius: 11px;
  transition: border-color .12s;
}
#input-palpite:focus {
  outline: none;
  border-color: var(--ouro);
  box-shadow: 0 0 0 3px rgba(245, 185, 66, .18);
}
#input-palpite:disabled { opacity: .5; }
#input-palpite::placeholder { color: #5f7488; }

#feedback { font-size: 13px; line-height: 1.45; min-height: 17px; color: var(--texto-suave); }
#feedback.ok { color: var(--ok); font-weight: 600; }
#feedback.erro { color: var(--ruim); }

/* pergunta do modo "Onde fica?" (clique no mapa) */
#alvo-clique {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  background: rgba(106, 178, 239, .1);
  border: 1px solid rgba(106, 178, 239, .35);
}
#alvo-clique b { font-size: 17px; }
#alvo-clique small { color: var(--texto-suave); }

/* última dica pedida (fica visível até a próxima) */
#dica-atual {
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  background: rgba(245, 185, 66, .08);
  border: 1px solid rgba(245, 185, 66, .3);
}
#dica-atual b { color: var(--ouro-claro); }

#linha-acoes { display: flex; gap: 7px; }
#linha-acoes .botao-sec { flex: 1; font-size: 12.5px; padding: 9px 8px; }

#fim-jogo {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  background: rgba(87, 217, 138, .08);
  border: 1px solid rgba(87, 217, 138, .3);
}
#fim-jogo b { color: var(--ok); }
#fim-jogo.recorde {
  background: rgba(245, 185, 66, .1);
  border-color: rgba(245, 185, 66, .45);
}
#fim-jogo.recorde b { color: var(--ouro-claro); }
#fim-jogo .relatorio {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--borda-forte);
  font-size: 12.5px;
  color: var(--texto-suave);
}
#fim-jogo .relatorio b { color: var(--texto); }

#fim-acoes { display: flex; gap: 8px; }
#fim-acoes .botao-pri { flex: 1; }

#lista-jogo { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.item-jogada {
  padding: 7px 10px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--painel-2);
}
.item-jogada b { color: var(--texto); }
.item-jogada small { color: var(--texto-suave); }

.item-faixa {
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--painel-2);
}
.item-faixa.completa { background: rgba(87, 217, 138, .07); border-color: rgba(87, 217, 138, .35); }
.item-faixa.completa .titulo-faixa { color: var(--ok); }
.item-faixa .titulo-faixa {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--texto-suave);
  margin-bottom: 5px;
}
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  background: #223448;
  color: #7d93a8;
  letter-spacing: 2px;
}
.chip.achado { background: rgba(87, 217, 138, .14); color: #8ce6ae; font-weight: 600; letter-spacing: 0; }
.chip.faltante { background: rgba(255, 138, 128, .13); color: #ffa39b; font-weight: 600; letter-spacing: 0; }

/* contadores por porte (faixa de população) no modo Top N */
.portes {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--texto-suave);
}
.linha-porte { display: flex; justify-content: space-between; }
.linha-porte b { font-variant-numeric: tabular-nums; color: var(--texto); }
.linha-porte b.completo { color: var(--ok); }

/* na maratona do Brasil são 27 linhas (uma por UF): duas colunas */
.portes-mar { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }

/* maratona: linha de UF clicável (abre a pista da maior cidade que falta) */
.linha-uf { cursor: pointer; border-radius: 5px; }
.linha-uf:hover { background: rgba(255, 255, 255, .06); }
/* ★ das 10 maiores: a margem automática empurra o contador para junto do
   total, deixando a sigla sozinha à esquerda */
.top-uf { margin-left: auto; margin-right: 10px; color: #64798d; font-variant-numeric: tabular-nums; }
.top-uf.completo { color: var(--ok); font-weight: 600; }
.detalhe-uf {
  grid-column: 1 / -1; /* ocupa as duas colunas da grade de UFs */
  font-size: 12px;
  color: var(--texto-suave);
  background: rgba(245, 185, 66, .08);
  border: 1px solid rgba(245, 185, 66, .3);
  border-radius: 7px;
  padding: 4px 8px;
  margin: 2px 0 4px;
}
.detalhe-uf b { color: var(--ouro-claro); }

/* ---------- modo estudo ---------- */
/* ficha do município (dentro da caixa #alvo-clique) */
.ficha-estudo {
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texto-suave);
}
.ficha-estudo b { font-size: 12.5px; color: var(--texto); }
.viz-estudo { color: var(--info); text-decoration: none; }
.viz-estudo:hover { text-decoration: underline; }

/* ranking da lista lateral */
.rotulo-rank {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 650;
  color: var(--texto-suave);
}
.rotulo-rank select {
  flex: 1;
  padding: 6px 9px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--texto);
  background: #0d1824;
}
.rotulo-rank select:focus { outline: none; border-color: var(--ouro); }
.linha-rank { cursor: pointer; border-radius: 5px; padding: 1px 3px; }
.linha-rank:hover { background: rgba(255, 255, 255, .06); color: var(--texto); }
#est-mais { width: 100%; margin-top: 4px; font-size: 12.5px; padding: 7px 8px; }

/* ---------- mapa ---------- */
#mapa-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
  background: radial-gradient(120% 100% at 30% 20%, #d9e8f3, #bcd4e6);
  /* nada de selecionar texto ou abrir menu de contexto no meio de um arrasto */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* o dedo no mapa é do jogo (arrastar/pinçar), nunca da rolagem da página */
#mapa { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#mapa.arrastando { cursor: grabbing; }

#botoes-mapa {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
#botoes-mapa button {
  font-family: inherit;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 650;
  border: 1px solid rgba(20, 40, 60, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: #22303c;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(20, 40, 60, .14);
  transition: background .12s;
}
#botoes-mapa button:hover { background: #fff; }
#botoes-mapa button.ativo { background: #14528a; border-color: #14528a; color: #fff; }

#botoes-zoom {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#botoes-zoom button {
  width: 34px;
  height: 34px;
  font-size: 18px;
  line-height: 1;
  font-weight: 650;
  border: 1px solid rgba(20, 40, 60, .18);
  border-radius: 9px;
  background: rgba(255, 255, 255, .9);
  color: #22303c;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(20, 40, 60, .14);
}
#botoes-zoom button:hover { background: #fff; }

#legenda-pop, #legenda-dist {
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #3d566d;
  background: rgba(255, 255, 255, .78);
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
}
#legenda-pop .grad, #legenda-dist .grad {
  width: 90px;
  height: 8px;
  border-radius: 4px;
  /* mesmos tons de corPop() no js/app.js */
  background: linear-gradient(90deg, rgb(245,208,76), rgb(238,108,47) 50%, rgb(122,16,32));
}
#legenda-dist .grad {
  /* mesmos tons de corDist() no js/app.js */
  background: linear-gradient(90deg, rgb(86,119,194), rgb(245,208,76) 55%, rgb(206,32,41));
}

#dica-zoom {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 11.5px;
  color: #3d566d;
  background: rgba(255, 255, 255, .68);
  padding: 2px 8px;
  border-radius: 6px;
  pointer-events: none;
}

#tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(13, 24, 36, .94);
  color: #fff;
  font-size: 12.5px;
  padding: 5px 9px;
  border-radius: 7px;
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

/* --zoom (definido pelo JS) = fração do mapa visível; multiplicar tamanhos
   por ele mantém traços, pontos e letras com o mesmo tamanho na tela em
   qualquer nível de zoom. */
.estado { fill: #f3ede2; stroke: #b8ab93; stroke-width: .7; vector-effect: non-scaling-stroke; }

.cidade { fill: #c2b7a4; opacity: .5; pointer-events: none; r: calc(1.2px * var(--zoom, 1)); }
.cidade.fora { display: none; } /* município fora da região do jogo */
/* pontos descobertos: a cor de preenchimento vem inline do JS (população);
   o contorno fino dá contraste sobre qualquer fundo */
.cidade.coberta { fill: var(--verde); opacity: .95; pointer-events: auto; r: calc(1.6px * var(--zoom, 1)); }
.cidade.centro-palpite { fill: var(--azul-escuro); opacity: 1; pointer-events: auto; r: calc(2.4px * var(--zoom, 1)); }
.cidade.achada { fill: var(--verde); opacity: 1; pointer-events: auto; r: calc(2.4px * var(--zoom, 1)); }
.cidade.faltante { fill: var(--vermelho); opacity: 1; pointer-events: auto; r: calc(2.4px * var(--zoom, 1)); }
.cidade.coberta, .cidade.centro-palpite, .cidade.achada {
  stroke: rgba(0, 0, 0, .35);
  stroke-width: calc(.4px * var(--zoom, 1));
}

/* modo "pontos ocultos": some com o que ainda não foi descoberto */
#mapa.sem-pontos .cidade:not(.coberta):not(.centro-palpite):not(.achada):not(.faltante) {
  opacity: 0;
}

/* partida de "Onde fica?": nenhum ponto pode entregar onde ficam as cidades */
#mapa.modo-clique .cidade:not(.achada):not(.faltante) { opacity: 0; }

/* forma dos municípios (botão ⬡ Formas): o polígono do território acompanha
   o ponto — mesmas classes de marcação e mesma cor inline (vinda do JS);
   translúcido para faixas e círculos por baixo continuarem legíveis */
.municipio { display: none; pointer-events: none; fill-opacity: .4; stroke: rgba(0, 0, 0, .3); stroke-width: .5; vector-effect: non-scaling-stroke; }
/* município marcado responde ao mouse no território inteiro: o tooltip não
   exige acertar o pontinho da sede */
.municipio.coberta, .municipio.centro-palpite, .municipio.achada, .municipio.faltante { display: inline; pointer-events: auto; }
.municipio.fora { display: none; } /* município fora da região do jogo */
.municipio.coberta, .municipio.achada { fill: var(--verde); }
.municipio.centro-palpite { fill: var(--azul-escuro); }
.municipio.faltante { fill: var(--vermelho); }

/* sobre uma cidade marcada o cursor vira seta: mira mais fina que a mãozinha
   de arrastar para ler o tooltip (a mãozinha volta durante o arrasto) */
.cidade.coberta, .cidade.centro-palpite, .cidade.achada, .cidade.faltante,
.municipio.coberta, .municipio.centro-palpite, .municipio.achada, .municipio.faltante { cursor: default; }
#mapa.arrastando .cidade, #mapa.arrastando .municipio { cursor: grabbing; }

/* último acerto da maratona: rosa vivo com anel pulsante — nenhuma outra
   marcação do mapa usa esse tom, então a cidade recém-digitada salta aos
   olhos. O !important vence a cor inline de população vinda do JS. */
.cidade.recente {
  fill: #f0287e !important;
  stroke: #f0287e;
  r: calc(3.2px * var(--zoom, 1));
  animation: pulso-recente 1.5s ease-out infinite;
}
@keyframes pulso-recente {
  from { stroke-width: calc(1.2px * var(--zoom, 1)); stroke-opacity: .85; }
  to { stroke-width: calc(7px * var(--zoom, 1)); stroke-opacity: 0; }
}
.municipio.recente { fill: #f0287e !important; fill-opacity: .5; stroke: #c01060; }
.rotulo-cidade.recente { fill: #a30d54; }

/* marcações do modo "Onde fica?": o X do clique e a linha até o lugar certo */
.marca-clique { stroke: var(--azul-escuro); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.linha-clique { stroke: rgba(20, 82, 138, .55); stroke-width: 1; stroke-dasharray: 4 3; fill: none; vector-effect: non-scaling-stroke; }

.circulo-cobertura { fill: rgba(29, 111, 184, .16); stroke: var(--azul); stroke-width: 1.1; vector-effect: non-scaling-stroke; }

/* modos de divisas: elo entre municípios adjacentes citados (a corrente da
   viagem/ponte) e o caminho mínimo revelado no fim (pontilhado; vermelho
   quando o jogador desistiu) */
.linha-cadeia { stroke: var(--azul); stroke-width: 1.6; stroke-linecap: round; opacity: .85; vector-effect: non-scaling-stroke; }
.linha-minima { stroke: rgba(20, 82, 138, .75); stroke-width: 1.4; stroke-dasharray: 6 4; fill: none; vector-effect: non-scaling-stroke; }
.linha-minima.faltante { stroke: var(--vermelho); }

/* área da faixa/célula: o JS controla a opacidade (fração respondida), então
   a cor caminha do transparente até este tom final conforme os acertos */
.faixa-area { fill: rgba(26, 127, 55, .2); pointer-events: none; }
.contador-faixa.completa { fill: var(--verde); }
.linha-faixa { stroke: rgba(20, 82, 138, .45); stroke-width: .8; fill: none; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.contador-faixa {
  font-size: calc(12px * var(--zoom, 1));
  font-weight: 700;
  fill: var(--azul-escuro);
  paint-order: stroke;
  stroke: rgba(255,255,255,.85);
  stroke-width: calc(3px * var(--zoom, 1));
}
/* faixas/células estreitas demais para o rótulo no zoom atual (grade fina,
   mapa afastado): o JS liga esta classe e os rótulos somem até aproximar */
#mapa.sem-rotulos-faixa .contador-faixa { display: none; }
.rotulo-cidade {
  font-size: calc(8.5px * var(--zoom, 1));
  fill: #14421f;
  paint-order: stroke;
  stroke: rgba(255,255,255,.88);
  stroke-width: calc(2.5px * var(--zoom, 1));
  pointer-events: none;
  /* afastamento do ponto, também na escala do zoom */
  transform: translate(calc(4px * var(--zoom, 1)), calc(-3px * var(--zoom, 1)));
}
.rotulo-cidade.faltante { fill: var(--vermelho); }
.rotulo-cidade.centro-palpite { fill: var(--azul-escuro); }
.marca-centro { stroke: var(--azul-escuro); stroke-width: 1.6; vector-effect: non-scaling-stroke; }

/* ---------- fundo de satélite ---------- */
/* sobre a imagem escura, contornos e pontos passam a tons claros */
#mapa.satelite .estado { fill: rgba(0,0,0,0); stroke: rgba(255,255,255,.65); }
#mapa.satelite .cidade { fill: #f2ecdb; opacity: .55; }
#mapa.satelite .cidade.coberta { fill: #67e88c; }
#mapa.satelite .cidade.centro-palpite { fill: #ffcf4d; }
#mapa.satelite .cidade.achada { fill: #67e88c; }
#mapa.satelite .cidade.faltante { fill: #ff7a70; }
#mapa.satelite .cidade.coberta, #mapa.satelite .cidade.centro-palpite, #mapa.satelite .cidade.achada {
  stroke: rgba(255, 255, 255, .55);
}
#mapa.satelite .municipio { stroke: rgba(255, 255, 255, .5); }
#mapa.satelite .municipio.coberta, #mapa.satelite .municipio.achada { fill: #67e88c; }
#mapa.satelite .municipio.centro-palpite { fill: #ffcf4d; }
#mapa.satelite .municipio.faltante { fill: #ff7a70; }
#mapa.satelite .cidade.recente { fill: #ff64ab !important; stroke: #ff64ab; }
#mapa.satelite .municipio.recente { fill: #ff64ab !important; stroke: #ffb1d4; }
#mapa.satelite .rotulo-cidade.recente { fill: #ffc2dd; }
#mapa.satelite .circulo-cobertura { fill: rgba(124, 192, 255, .18); stroke: #7cc0ff; }
#mapa.satelite .linha-cadeia { stroke: #7cc0ff; }
#mapa.satelite .linha-minima { stroke: rgba(255, 255, 255, .8); }
#mapa.satelite .linha-minima.faltante { stroke: #ff7a70; }
#mapa.satelite .faixa-area { fill: rgba(103, 232, 140, .28); }
#mapa.satelite .contador-faixa.completa { fill: #67e88c; }
#mapa.satelite .linha-faixa { stroke: rgba(255,255,255,.6); }
#mapa.satelite .contador-faixa { fill: #fff; stroke: rgba(8,18,28,.7); }
#mapa.satelite .rotulo-cidade { fill: #fff; stroke: rgba(8,18,28,.75); }
#mapa.satelite .rotulo-cidade.faltante { fill: #ffb3ad; }
#mapa.satelite .rotulo-cidade.centro-palpite { fill: #ffe9a8; }
#mapa.satelite .marca-centro { stroke: #ffcf4d; }
#mapa.satelite .marca-clique { stroke: #ffcf4d; }
#mapa.satelite .linha-clique { stroke: rgba(255,255,255,.65); }

/* ---------- modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 16, .68);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  backdrop-filter: blur(2px);
}
.modal-caixa {
  width: min(680px, 92vw);
  max-height: 84vh;
  overflow-y: auto;
  background: var(--painel-2);
  border: 1px solid var(--borda-forte);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  scrollbar-width: thin;
  scrollbar-color: var(--borda-forte) transparent;
}
.modal-topo { display: flex; justify-content: space-between; align-items: center; }
.modal-acoes { display: flex; gap: 8px; }
.modal-acoes button { flex: 1; }
#nota-import { font-weight: 600; color: var(--ok); }
.modal-topo h2 { margin: 0; font-size: 17px; }
.modal-nota { margin: 0; font-size: 12.5px; color: var(--texto-suave); }
#lista-recordes { display: flex; flex-direction: column; gap: 8px; }
.item-recorde {
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--painel);
  padding: 9px 12px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.item-recorde .info b { font-size: 14.5px; color: var(--ouro-claro); }
.item-recorde small { color: var(--texto-suave); display: block; }
.item-recorde button { flex-shrink: 0; }

/* ---------- blocos das páginas de densidade e estatísticas ---------- */
.bloco {
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--painel-2);
  padding: 11px 12px;
  font-size: 13px;
  line-height: 1.5;
}
.bloco h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  main { flex-direction: column; }
  #painel {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--borda);
    max-height: 55vh;
  }
  #mapa-wrap { min-height: 45vh; }
  /* o header quebra em duas linhas: marca em cima, ações embaixo */
  header { flex-wrap: wrap; padding: 8px 12px; row-gap: 6px; }
  .marca-texto small { display: none; }
  .marca-icone { width: 32px; height: 32px; font-size: 17px; }
  .header-acoes { width: 100%; justify-content: flex-start; }
  .header-acoes .botao-sec { padding: 6px 10px; font-size: 12px; white-space: nowrap; }

  /* a dica de navegação do canto atropelaria a legenda na tela estreita —
     e pinça/arrasto dispensam manual */
  #dica-zoom { display: none; }

  /* iOS amplia a página inteira ao focar um campo com fonte menor que 16px */
  #config input, #config select, #input-palpite { font-size: 16px; }

  /* alvos de toque maiores para os controles sobre o mapa */
  #botoes-zoom button { width: 42px; height: 42px; font-size: 20px; }
  #botoes-mapa button { padding: 8px 12px; font-size: 13px; }
  #btn-config-jogo { width: 40px; height: 40px; font-size: 22px; }

  /* Partida em andamento (classe posta pelo js): o mapa sobe para o topo —
     como num app — e o painel embaixo fica só com o jogo (pergunta, campo
     de palpite, feedback, placar e listas). Altura em dvh: encolhe junto
     com o teclado na tela, onde o navegador redimensiona a página. */
  body.jogo-ativo header .header-acoes { display: none; }
  body.jogo-ativo #mapa-wrap {
    order: -1;
    flex: 0 0 auto;
    min-height: 0;
    height: 44vh;
    height: 44dvh;
  }
  body.jogo-ativo #painel {
    flex: 1;
    min-height: 0;
    max-height: none;
    border-bottom: none;
    border-top: 1px solid var(--borda);
  }
  /* dentro do jogo, o que se usa a cada palpite vem primeiro: pergunta,
     campo de texto, feedback e resultado — placar e listas logo abaixo
     continuam à vista mesmo com o teclado aberto rolando o campo pro topo */
  body.jogo-ativo #jogo-topo { order: -10; }
  body.jogo-ativo #fim-jogo { order: -6; }
  body.jogo-ativo #fim-acoes { order: -5; }
  body.jogo-ativo #alvo-clique { order: -4; }
  body.jogo-ativo #linha-palpite { order: -3; }
  body.jogo-ativo #feedback { order: -2; }
  body.jogo-ativo #dica-atual { order: -1; }
}

/* celular estreito: os atalhos do topo ficam só com o emoji, ao lado da marca */
@media (max-width: 520px) {
  .rotulo-topo { display: none; }
  .header-acoes { width: auto; }
  .header-acoes .botao-sec { font-size: 15px; padding: 6px 9px; }
}

/* =====================================================================
   Camada de site: marca, desafio do dia, aviso de privacidade, anúncios,
   apoio, tutorial e rodapé
   ===================================================================== */
:root { --fonte-display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* ---------- marca e tipografia de display ---------- */
.marca-icone img { width: 36px; height: 36px; display: block; border-radius: 10px; }
.marca-icone { background: none; border: none; width: auto; height: auto; }
.marca-texto b {
  font-family: var(--fonte-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.grupo-modos h2, .modo-cabecalho h2, .modal-topo h2, #jogo-titulos b, .carta-texto b,
.card-diario b, .tutorial-cartao h3 { font-family: var(--fonte-display); }
.carta-texto b { font-weight: 700; letter-spacing: -.005em; }
.botao-pri { font-family: var(--fonte-display); letter-spacing: .01em; }

/* ícone de cada modo colorido pelo grupo (estude, cubra, memória, divisas, caça) */
.grupo-modos:nth-of-type(1) .carta-icone { background: linear-gradient(150deg, rgba(106,178,239,.32), rgba(106,178,239,.08)); border-color: rgba(106,178,239,.4); }
.grupo-modos:nth-of-type(2) .carta-icone { background: linear-gradient(150deg, rgba(245,185,66,.32), rgba(245,185,66,.08)); border-color: rgba(245,185,66,.4); }
.grupo-modos:nth-of-type(3) .carta-icone { background: linear-gradient(150deg, rgba(87,217,138,.3), rgba(87,217,138,.07)); border-color: rgba(87,217,138,.4); }
.grupo-modos:nth-of-type(4) .carta-icone { background: linear-gradient(150deg, rgba(240,40,126,.3), rgba(240,40,126,.07)); border-color: rgba(240,40,126,.4); }
.grupo-modos:nth-of-type(5) .carta-icone { background: linear-gradient(150deg, rgba(174,129,255,.3), rgba(174,129,255,.07)); border-color: rgba(174,129,255,.4); }
.carta-modo:hover .carta-icone { transform: scale(1.06); }
.carta-icone { transition: transform .15s; }

/* ---------- desafio do dia ---------- */
.card-diario {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: 14px 16px 13px;
  font: inherit;
  text-align: left;
  color: var(--texto);
  cursor: pointer;
  border-radius: 16px;
  border: 1px solid rgba(245, 185, 66, .45);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(240, 40, 126, .22), transparent 55%),
    linear-gradient(160deg, #1f2f44, #142334);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
  transition: transform .15s, border-color .15s;
}
.card-diario::after {
  /* silhueta do Brasil ao fundo, à direita */
  content: "";
  position: absolute;
  right: -18px;
  top: -8px;
  width: 132px;
  height: 132px;
  background: url("../img/brasil-silhueta.svg") no-repeat center / contain;
  opacity: .1;
  pointer-events: none;
}
.card-diario:hover { transform: translateY(-1px); border-color: var(--ouro); }
.card-diario-topo { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--texto-suave); }
.card-diario-selo {
  font-family: var(--fonte-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ouro);
}
.card-diario b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.card-diario small { font-size: 12.5px; line-height: 1.45; color: var(--texto-suave); max-width: 86%; }
.card-diario-status {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ouro-claro);
}
.card-diario-status:empty { display: none; }
.card-diario.jogado { border-color: rgba(87, 217, 138, .45); }
.card-diario.jogado .card-diario-selo { color: var(--ok); }

/* resultado do desafio do dia em emojis */
.diario-emojis {
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1.5;
  word-break: break-all;
  margin: 6px 0 2px;
}
.diario-seq { font-size: 12.5px; color: var(--texto-suave); }
.diario-seq b { color: var(--ouro-claro); }
#diario-relogio { font-variant-numeric: tabular-nums; }

/* ---------- resultado ---------- */
.resultado-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.resultado-pct {
  font-family: var(--fonte-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
#fim-jogo .resultado-pct { color: var(--ok); }
#fim-jogo.recorde .resultado-pct { color: var(--ouro-claro); }
.resultado-titulo { font-family: var(--fonte-display); font-weight: 700; font-size: 14px; }
#fim-acoes .botao-sec { padding: 10px 12px; }

/* ---------- espaços de anúncio (só resultado e tela de modos) ---------- */
.anuncio { display: flex; flex-direction: column; gap: 2px; min-height: 90px; }
.anuncio[hidden] { display: none; }
.anuncio-rotulo { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #5f7488; }

/* ---------- rodapé da tela de modos ---------- */
.rodape {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 4px;
  padding: 10px 2px 2px;
  border-top: 1px solid var(--borda);
  font-size: 11.5px;
  color: #5f7488;
}
.rodape a { color: var(--texto-suave); text-decoration: none; }
.rodape a:hover { color: var(--ouro); }
.rodape span { margin-left: auto; }

/* ---------- aviso de privacidade ---------- */
#aviso-privacidade {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 14px 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto);
  background: rgba(22, 37, 52, .97);
  border: 1px solid var(--borda-forte);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  animation: tela-entra .25s ease-out;
}
#aviso-privacidade p { margin: 0; flex: 1; color: var(--texto-suave); }
#aviso-privacidade a { color: var(--info); }
.aviso-botoes { display: flex; gap: 8px; flex-shrink: 0; }
.aviso-botoes button { padding: 9px 13px; font-size: 13px; }
@media (max-width: 600px) {
  #aviso-privacidade { flex-direction: column; align-items: stretch; }
  .aviso-botoes button { flex: 1; }
}

/* ---------- apoio (Pix) ---------- */
.botao-sec.apoiar { border-color: rgba(245, 185, 66, .45); color: var(--ouro-claro); }
.botao-sec.apoiar:hover { background: rgba(245, 185, 66, .12); }
.modal-apoio { width: min(460px, 92vw); }
.bloco.pix { display: flex; flex-direction: column; gap: 8px; }
.pix-chave { display: flex; gap: 8px; align-items: center; }
.pix-chave code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 8px;
  background: #0d1824;
  border: 1px solid var(--borda);
  font-size: 13px;
}
.bloco.pix small { color: var(--texto-suave); }

/* ---------- tutorial ---------- */
#tutorial { position: fixed; inset: 0; z-index: 30; }
#tutorial[hidden] { display: none; }
.tutorial-holofote {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(5, 10, 16, .72), 0 0 0 3px rgba(245, 185, 66, .9), 0 0 24px rgba(245, 185, 66, .45);
  pointer-events: none;
  transition: left .25s, top .25s, width .25s, height .25s;
}
.tutorial-holofote[hidden] { display: none; }
.tutorial-cartao {
  position: fixed;
  width: min(380px, calc(100vw - 24px));
  padding: 16px 18px 14px;
  background: var(--painel-2);
  border: 1px solid var(--borda-forte);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  animation: tela-entra .2s ease-out;
}
.tutorial-cartao.centro { top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* sem alvo na tela o fundo escurece por inteiro */
.tutorial-holofote[hidden] + .tutorial-cartao { box-shadow: 0 0 0 9999px rgba(5, 10, 16, .72), 0 18px 50px rgba(0, 0, 0, .55); }
.tutorial-passo { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro); font-weight: 700; }
.tutorial-cartao h3 { margin: 4px 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.tutorial-cartao p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--texto-suave); }
.tutorial-cartao p b { color: var(--texto); }
.tutorial-cartao code { background: #0d1824; padding: 1px 6px; border-radius: 5px; font-size: 12.5px; color: var(--texto); }
.tutorial-botoes { display: flex; gap: 8px; align-items: center; }
.tutorial-espaco { flex: 1; }
.tutorial-botoes button { padding: 8px 12px; font-size: 13px; }
.tutorial-botoes button:disabled { opacity: .35; cursor: default; }
@media (max-width: 600px) {
  .tutorial-cartao, .tutorial-cartao.centro {
    top: auto !important;
    left: 12px !important;
    right: 12px;
    bottom: 12px;
    width: auto;
    transform: none;
  }
  .tutorial-cartao.topo { top: 12px !important; bottom: auto; }
}