:root {
  --papel: #fbf6ea;
  --papel-2: #f3ecdb;
  --tinta: #2b2622;
  --tinta-2: #6b6256;
  --linha: rgba(43, 38, 34, 0.14);
  --sombra: 0 1px 0 rgba(43, 38, 34, 0.06), 0 10px 30px -12px rgba(43, 38, 34, 0.35);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font: 15px/1.45 var(--sans);
  color: var(--tinta);
  background: linear-gradient(#bfdfe6 0%, #d9eaea 38%, #e9e6d6 60%);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
#mundo { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- marca ---------- */
.marca {
  position: fixed; top: 20px; left: 22px;
  padding: 12px 18px 11px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 4px 14px 4px 4px;
  box-shadow: var(--sombra);
}
.marca h1 {
  margin: 0; font: 600 27px/1 var(--serif);
  font-variation-settings: 'SOFT' 100, 'WONK' 1; letter-spacing: -0.01em;
}
.marca .dia { margin: 6px 0 0; font-size: 12.5px; color: var(--tinta-2); letter-spacing: 0.02em; }
.marca .dia #dia { color: var(--tinta); font-weight: 600; }
.marca .sep { opacity: 0.5; margin: 0 2px; }
.marca .links { margin: 4px 0 0; font-size: 12px; }
.marca .links a { color: var(--tinta-2); text-underline-offset: 2px; }
.marca .links a:hover { color: var(--tinta); }
.marca { z-index: 5; }

/* ---------- busca de morador ---------- */
.busca, .seguindo { width: 0; min-width: 100%; }   /* não alargam a marca */
.busca { position: relative; margin-top: 9px; }
.busca input {
  width: 100%; padding: 7px 10px; border: 1px solid var(--linha); border-radius: 8px;
  background: #fff; color: var(--tinta); font: 14px/1.2 var(--sans);
}
.busca input:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }
.busca-lista {
  position: absolute; top: calc(100% + 6px); left: 0; width: 290px; max-width: calc(100vw - 50px); max-height: min(50vh, 340px);
  overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 5px; list-style: none;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; box-shadow: var(--sombra);
}
.busca-lista[hidden] { display: none; }
.busca-lista [role=option] { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; cursor: pointer; font-size: 14px; overflow-wrap: anywhere; }
.busca-lista [role=option]:hover, .busca-lista [aria-selected=true] { background: var(--papel-2); }
.busca-lista b { font-weight: 600; }
.busca-lista small { display: block; font-size: 12px; color: var(--tinta-2); }
.busca-nota { padding: 7px 9px; font-size: 12.5px; color: var(--tinta-2); }
.seguindo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin: 8px 0 0; font-size: 12.5px; overflow-wrap: break-word; }
.seguindo span { min-width: 0; }
.seguindo-botoes { display: flex; gap: 5px; }
.seguindo[hidden] { display: none; }
.seguindo b { font-weight: 600; }
.seguindo button { flex: none; padding: 3px 9px; border: 1px solid var(--linha); border-radius: 999px; background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; }
.seguindo button:hover { background: var(--papel-2); }

.acoes { position: fixed; top: 22px; right: 22px; display: flex; gap: 8px; }
body.com-painel .acoes, body.com-painel .aviso { right: 368px; }
.atualizar {
  padding: 9px 14px; border-radius: 999px; cursor: pointer; min-width: 104px;
  background: var(--papel); border: 1px solid var(--linha); box-shadow: var(--sombra);
  font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.atualizar:hover:not(:disabled) { background: #fff; }
.atualizar:disabled { cursor: default; color: var(--tinta-2); }
.aviso {
  position: fixed; top: 70px; right: 22px; max-width: 280px; padding: 9px 13px; border-radius: 10px;
  background: var(--tinta); color: var(--papel); font-size: 13px; box-shadow: var(--sombra);
}
.aviso[hidden] { display: none; }
.como {
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  background: var(--papel); border: 1px solid var(--linha); box-shadow: var(--sombra);
  font-weight: 600; font-size: 13.5px;
}
.como:hover { background: #fff; }
.cresceu {
  position: fixed; top: 22px; left: 50%; transform: translateX(-50%);
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: var(--tinta); color: var(--papel); border: 0; box-shadow: var(--sombra);
  font-weight: 600; font-size: 13.5px;
}
.cresceu[hidden] { display: none; }
@media (max-width: 760px), (max-aspect-ratio: 9/10) { .cresceu { top: 206px; z-index: 6; } }   /* abaixo da marca, mesmo com a linha "Seguindo" */

/* ---------- quem está no site agora ---------- */
.ao-vivo {
  position: fixed; right: 22px; bottom: 20px; display: flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: 999px;
  background: var(--papel); border: 1px solid var(--linha); box-shadow: var(--sombra);
  font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums;
}
.ao-vivo[hidden] { display: none; }
.ao-vivo i { width: 8px; height: 8px; border-radius: 50%; background: #3f9b5a; animation: ao-vivo 2.4s ease-in-out infinite; }
@keyframes ao-vivo { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .ao-vivo i { animation: none; } }
/* em tela estreita o seletor ocupa o canto: sobe pra cima dele e dá lugar ao painel */
@media (max-width: 1060px) {
  .ao-vivo { bottom: 90px; }
  body.com-painel .ao-vivo { display: none; }
}

/* ---------- seletor ---------- */
.seletor {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; gap: 0; padding: 5px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 16px;
  box-shadow: var(--sombra); max-width: calc(100vw - 24px);
}
.aba {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 12px; border: 0; border-radius: 11px; background: transparent; cursor: pointer;
  text-align: left; white-space: nowrap; transition: background 0.15s;
}
.aba + .aba::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--linha);
}
.aba:hover { background: var(--papel-2); }
.aba[aria-pressed='true'] { background: var(--tinta); color: var(--papel); }
.aba[aria-pressed='true']::before, .aba[aria-pressed='true'] + .aba::before { opacity: 0; }
.aba[aria-pressed='true'] .brasao path { stroke: var(--papel); }
.aba-texto { display: flex; flex-direction: column; line-height: 1.2; }
.aba-nome { font: 600 15px/1.15 var(--serif); }
.aba-num { font-size: 12px; color: var(--tinta-2); }
.aba[aria-pressed='true'] .aba-num { color: rgba(251, 246, 234, 0.7); }
.aba-num b { font-weight: 600; color: inherit; font-variant-numeric: tabular-nums; }
.aba-pos {
  font: italic 500 12px/1 var(--serif); padding: 4px 6px; border-radius: 6px;
  border: 1px solid currentColor; opacity: 0.55; margin-left: 2px;
}
.aba-vale { padding-right: 16px; }
.icone { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.brasao { flex: none; display: block; }

/* ---------- painel ---------- */
.painel {
  position: fixed; top: 20px; right: 22px; height: min(calc(100vh - 124px), 760px); height: min(calc(100dvh - 124px), 760px); width: 330px;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 14px; box-shadow: var(--sombra);
  padding: 22px 22px 0;
  animation: entra 0.35s cubic-bezier(.2, .8, .2, 1);
}
.painel[hidden] { display: none; }
#painel-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.p-abas { flex: none; display: flex; gap: 4px; margin-top: 12px; border-bottom: 1px solid var(--linha); }
.p-aba {
  flex: 1; padding: 8px 6px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--tinta-2);
}
.p-aba:hover { color: var(--tinta); }
.p-aba[aria-selected=true] { color: var(--tinta); border-bottom-color: var(--tinta); }
.p-aba span { font-weight: 500; font-variant-numeric: tabular-nums; }
/* só a lista rola: o nome da vila e o botão de participar ficam sempre à vista */
.p-lista { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -14px; padding: 2px 14px 16px 0; }
.p-lista[hidden] { display: none; }
.p-lista:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }

@keyframes entra { from { opacity: 0; transform: translateX(14px); } }
.fechar {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--linha); background: transparent; cursor: pointer; font-size: 18px; line-height: 1;
}
.fechar:hover { background: var(--papel-2); }
.p-topo { flex: none; display: flex; gap: 12px; align-items: flex-start; padding-right: 30px; }
.p-topo h2 { margin: 0; font: 650 25px/1.05 var(--serif); font-variation-settings: 'SOFT' 100; }
.lema { margin: 4px 0 0; font: italic 400 14px/1.3 var(--serif); color: var(--tinta-2); }
.p-num { flex: none; display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; }
.grande { font: 600 38px/0.9 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rot { font-size: 13px; line-height: 1.3; }
.rot em { font-style: normal; color: var(--tinta-2); font-size: 12px; }
.painel section { margin-top: 14px; }
.painel h3 {
  margin: 0 0 9px; font: 600 11px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-2);
}
.tiers { list-style: none; margin: 0; padding: 0; }
.tiers li { display: grid; grid-template-columns: 24px 1fr auto 52px; align-items: center; gap: 8px; padding: 5px 0; }
.t-qtd { font: 600 17px/1 var(--serif); font-variant-numeric: tabular-nums; }
.t-vale { font-size: 12px; color: var(--tinta-2); text-align: right; }
.selos, .gente { display: flex; flex-wrap: wrap; gap: 6px; }
.selo { padding: 4px 10px; border-radius: 999px; background: var(--papel-2); font-size: 13px; }
.obras { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.obra-topo { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 5px; }
.obra-votos { color: var(--tinta-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.barra { height: 7px; border-radius: 99px; background: var(--papel-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--linha); }
.barra i { display: block; height: 100%; background: var(--tinta); border-radius: inherit; }
.nota { margin: 10px 0 0; font-size: 12.5px; color: var(--tinta-2); }
.pessoa {
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linha); background: transparent;
  font-size: 13px; cursor: pointer;
}
.pessoa:hover { background: var(--papel-2); }
.pessoa.ativa { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.mudar {
  flex: none; display: flex; flex-direction: column; align-items: center; margin-top: 14px; padding: 11px;
  border-radius: 12px; background: var(--cor); color: #fff; text-decoration: none;
  font: 600 16px/1.2 var(--serif); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}
.mudar small { font: 500 12px/1.4 var(--sans); opacity: 0.85; }
.mudar:hover { filter: brightness(1.05); }
.mudar-choque { background: #161823; box-shadow: -3px -2px 0 #1fc9c3, 3px 2px 0 #fe2c55; }
.mudar-tubo { background: #e62117; }
.mudar-grama { background: linear-gradient(45deg, #fa7e1e, #d62976 45%, #962fbf 80%, #4f5bd5); }

/* ---------- rótulos no mapa ---------- */
#rotulos { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.rotulo { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; will-change: transform; }
.r-vila {
  z-index: 1;   /* o nome da vila fica na frente dos pontos do mapa */
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; cursor: pointer;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; box-shadow: var(--sombra);
  text-align: left;
}
.r-vila::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: var(--papel); border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); transform: rotate(45deg);
}
.r-vila:hover { background: #fff; }
.r-vila span { display: flex; flex-direction: column; line-height: 1.15; }
.r-vila b { font: 600 15px/1.1 var(--serif); }
.r-vila small { font-size: 11.5px; color: var(--tinta-2); }
.r-lugar {
  font: italic 500 15px/1 var(--serif); color: #4b4436; letter-spacing: 0.06em;
  text-shadow: 0 0 3px #f6f0de, 0 0 6px #f6f0de, 0 0 10px rgba(246, 240, 222, 0.8);
}
.r-rio { color: #2f6b7d; font-size: 13px; }
.r-ponte {
  display: flex; align-items: center; gap: 3px; padding: 2px 7px 2px 5px; border-radius: 99px;
  background: rgba(251, 246, 234, 0.94); border: 1px solid var(--linha); box-shadow: 0 1px 3px rgba(43, 38, 34, 0.22);
  font: 11px/1.25 var(--sans); color: var(--tinta);
}
.r-ponte i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(43, 38, 34, 0.5); }
.r-ponte b { margin-left: 2px; font-weight: 700; font-variant-numeric: tabular-nums; }
.r-ponte-nome { display: none; margin-left: 3px; }
@media (min-width: 900px) { .r-ponte-nome { display: inline; } }
.etiqueta {
  position: absolute; left: 0; top: 0; opacity: 0; padding: 2px 7px; border-radius: 6px;
  background: rgba(43, 38, 34, 0.82); color: var(--papel); font-size: 11.5px; font-weight: 600; white-space: nowrap;
}

/* ---------- dica ---------- */
.dica {
  position: fixed; left: 0; top: 0; pointer-events: none; max-width: 240px;
  padding: 8px 11px; background: var(--papel); border: 1px solid var(--linha); border-radius: 9px; box-shadow: var(--sombra);
}
.dica strong { display: block; font: 600 14px/1.2 var(--serif); }
.dica span { font-size: 12.5px; color: var(--tinta-2); }

.carregando {
  position: fixed; inset: 0; display: grid; place-items: center;
  font: italic 500 18px var(--serif); color: var(--tinta-2);
}

/* ---------- como funciona ---------- */
.como-dialogo {
  width: min(460px, calc(100vw - 32px)); padding: 26px 26px 22px; border: 1px solid var(--linha); border-radius: 16px;
  background: var(--papel); color: var(--tinta); box-shadow: var(--sombra);
}
.como-dialogo::backdrop { background: rgba(43, 38, 34, 0.35); }
.como-dialogo h2 { margin: 0 0 14px; font: 650 24px/1.1 var(--serif); font-variation-settings: 'SOFT' 100; }
.como-dialogo h3 { margin: 20px 0 10px; font: 600 11px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-2); }
.regras { margin: 0; padding-left: 20px; display: grid; gap: 9px; }
.regras li::marker { font: italic 600 15px var(--serif); }
.escala { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.escala li {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px;
  border: 1px solid var(--linha); border-radius: 10px; text-align: center;
}
.escala .icone { width: 26px; height: 26px; }
.escala span { font-size: 12px; color: var(--tinta-2); line-height: 1.25; }
.escala b { display: block; font: 600 14px var(--serif); color: var(--tinta); }

.etiqueta.seguida { z-index: 2; background: var(--papel); color: var(--tinta); font-weight: 700; box-shadow: 0 0 0 2px var(--tinta); }

/* ---------- celular ---------- */
/* tela em pé conta como celular mesmo se o navegador informar largura grande ("site para computador") */
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .marca { top: 12px; left: 12px; padding: 9px 13px 8px; }
  .marca h1 { font-size: 21px; }
  .acoes { top: 14px; right: 12px; gap: 6px; flex-direction: column; align-items: flex-end; }   /* um embaixo do outro: lado a lado batem na marca */
  body.com-painel .acoes, body.com-painel .aviso { right: 12px; }
  .como, .atualizar { padding: 8px 11px; font-size: 12.5px; }
  .atualizar { min-width: 0; }
  .aviso { top: 96px; right: 12px; width: min(280px, calc(100vw - 196px)); }   /* na coluna ao lado da marca, embaixo dos botões */
  .ao-vivo { right: 12px; bottom: 72px; padding: 6px 11px; font-size: 12px; }
  .seletor { bottom: 10px; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .aba { padding: 8px 10px; gap: 8px; }
  .aba-pos { display: none; }
  .aba-vale .aba-nome { display: none; }
  .aba-vale { padding-right: 10px; }
  .painel {
    top: auto; left: 10px; right: 10px; bottom: 84px; width: auto; height: min(50vh, 460px); height: min(50dvh, 460px); padding: 14px 16px 0;
    animation-name: sobe;
  }
  .lema { display: none; }
  .p-topo h2 { font-size: 21px; }
  .p-num { align-items: baseline; gap: 6px; margin-top: 8px; }   /* numa linha só, para sobrar lugar para a lista */
  .grande { font-size: 20px; }
  .rot br { display: none; }
  .rot em { margin-left: 3px; }
  .mudar { margin-top: 10px; padding: 8px; font-size: 15px; }
  .p-abas { margin-top: 6px; }
  .busca input { font-size: 16px; }   /* menor que 16px, o iPhone dá zoom ao tocar */
  @keyframes sobe { from { opacity: 0; transform: translateY(14px); } }
}

/* tela baixa (celular deitado): não cabe lista presa, o painel inteiro rola */
@media (max-height: 520px) {
  .painel { overflow-y: auto; overscroll-behavior: contain; }
  #painel-corpo { flex: none; }
  .p-lista { flex: none; overflow: visible; }
}