@charset "UTF-8";
/* =====================================================================
   Torcidade · tema final "Placar de estádio"
   Editorial esportivo: placar eletrônico preto com dígitos LED, cartão
   amarelo como acento, verde-gramado como ação principal, títulos
   condensados em caixa-alta. Vencedor do júri (placar.css) com as
   correções e os enxertos dos outros temas (figurinha, arquibancada,
   bandeirão) aplicados.

   Escalas do kit
   · espaçamento: 4 / 6 / 8 / 12 / 16 / 20 / 24
   · raios: 4 px (controles, inputs, blocos internos) · 8 px (cartões,
     painéis, listas flutuantes) · 12 px (folha de baixo no celular)
   · sombras: --sombra (suave, só no que flutua sobre o mapa)
              --sombra-dura (3px 3px, cartão principal e logo)
              --relevo (0 2px / 0 3px, "tinta" embaixo de pílulas e botões)
   · fontes: Anton (títulos, números, botões) + Manrope (texto e rótulos pequenos)
   As fontes vêm pelo <link> do index.html (sem @import aqui).
   ===================================================================== */

:root {
  --campo: #eef2ec;            /* fundo da página (gramado claro) */
  --cartao: #ffffff;
  --cartao-2: #f2f5f0;         /* superfície secundária */
  --cartao-3: #e4f3ec;         /* verde-claro (enxerto arquibancada): destaques e hover */
  --borda: #d9e0d6;            /* fio entre blocos internos */
  --borda-input: #b7c2b9;      /* contorno de inputs em repouso (mais leve que o preto) */
  --borda-forte: #171d19;      /* traço de tinta do que flutua sobre o mapa */
  --texto: #10150f;
  --suave: #58645a;            /* usado inline pelo app.js: manter o nome */
  --preto: #141917;            /* preto de placar */
  --preto-2: #232a26;
  --verde: #0b6b3a;            /* verde-gramado (primário) */
  --verde-2: #084f2b;
  --verde-texto: #0a5a31;      /* verde para texto sobre o verde-claro */
  --amarelo: #ffd400;          /* cartão amarelo (acento) */
  --amarelo-2: #e2bb00;
  --led: #ffe033;              /* dígitos do placar */
  --led-rgb: 255, 224, 51;
  --sombra: 0 6px 18px rgba(10, 25, 15, .14);
  --sombra-dura: 3px 3px 0 var(--preto);
  --relevo: 0 2px 0 var(--preto);
  --raio-p: 4px;
  --raio: 8px;
  --raio-folha: 12px;
  --listras: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 6px, transparent 6px 14px);
  --bicolor: linear-gradient(90deg, var(--amarelo) 0 60%, var(--verde) 60%);  /* cartão amarelo + linha de campo */
  --fonte: Manrope, "Segoe UI", system-ui, sans-serif;
  --titulo: Anton, Impact, "Arial Narrow", sans-serif;   /* um peso só: nada de negrito falso */
  --rotulo: Manrope, "Segoe UI", system-ui, sans-serif;  /* rótulos pequenos em caixa alta */
  --foco: 0 0 0 3px rgba(11, 107, 58, .18);
  color-scheme: light;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { font-synthesis: none; }
body {
  background: var(--campo);
  color: var(--texto);
  font: 500 15px/1.45 var(--fonte);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: var(--verde); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--verde-2); }
h1, h2, h3 { margin: 0; font-family: var(--titulo); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
code { font-family: inherit; }
b, strong { font-weight: 700; }
::selection { background: var(--amarelo); color: var(--preto); }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

#mapa { position: fixed; inset: 0; background: #d7e3ea; }
.maplibregl-ctrl-bottom-right { right: 150px; }
.maplibregl-ctrl-attrib { font-family: var(--fonte); font-size: 10px; background: rgba(255,255,255,.75) !important; border-radius: 3px; }
.maplibregl-popup { display: none; }

/* barra de rolagem fina (painéis, extrato, sugestões) */
.painel, .extrato, .sugestoes { scrollbar-width: thin; scrollbar-color: var(--borda-input) transparent; }
.painel::-webkit-scrollbar, .extrato::-webkit-scrollbar, .sugestoes::-webkit-scrollbar { width: 8px; }
.painel::-webkit-scrollbar-thumb, .extrato::-webkit-scrollbar-thumb, .sugestoes::-webkit-scrollbar-thumb { background: var(--borda-input); border-radius: 4px; border: 2px solid var(--cartao); }

/* ---------- abertura ---------- */
.abertura {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; gap: 14px;
  background: repeating-linear-gradient(90deg, #e9efe4 0 56px, #dfe8d9 56px 112px); /* gramado cortado em faixas */
  font: 800 13px/1 var(--rotulo); text-transform: uppercase; letter-spacing: .18em; color: var(--preto);
  transition: opacity .5s;
}
.abertura p { margin: 0; }
.abertura-icone {
  width: 76px; height: 76px; border-radius: var(--raio); display: grid; place-items: center; font-size: 36px;
  background: var(--listras), var(--preto); border: 2px solid var(--preto); box-shadow: 4px 4px 0 var(--amarelo);
}
.abertura.some { opacity: 0; pointer-events: none; }

/* ---------- peças comuns: pílulas (chips do topo), botões, link ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  background: var(--cartao); border: 1.5px solid var(--borda-forte); border-radius: var(--raio-p);
  padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--texto); box-shadow: var(--relevo);
  cursor: pointer; white-space: nowrap; transition: background-color .15s, transform .12s, box-shadow .12s;
}
.pill b { font-weight: 700; }
.pill small { font: 800 11.5px/1 var(--rotulo); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.pill:hover { background: var(--cartao-3); }
button.pill:active { transform: translateY(2px); box-shadow: none; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
  border: 1.5px solid transparent; border-radius: var(--raio-p); padding: 10px 16px;
  font: 700 17px/1.2 var(--titulo); text-transform: uppercase; letter-spacing: .05em;
  cursor: pointer; text-align: center; text-decoration: none; transition: background-color .15s, transform .12s, box-shadow .12s;
}
.botao:active { transform: translateY(3px); box-shadow: none !important; }
.botao.vermelho { background: var(--verde); color: #fff; border-color: var(--verde-2); box-shadow: 0 3px 0 var(--verde-2); }
.botao.vermelho:hover { background: var(--verde-2); }
.botao.claro { background: var(--cartao); color: var(--texto); border-color: var(--borda-forte); box-shadow: 0 3px 0 var(--borda-forte); }
.botao.claro:hover { background: var(--cartao-3); }
/* amarelo = "Card pro story": brilho diagonal sutil de figurinha rara (enxerto figurinha) */
.botao.amarelo {
  background: linear-gradient(118deg, transparent 38%, rgba(255,255,255,.42) 48%, rgba(255,255,255,.1) 52%, transparent 62%), var(--amarelo);
  color: var(--texto); border-color: var(--amarelo-2); box-shadow: 0 3px 0 var(--amarelo-2);
}
.botao.amarelo:hover { background-color: var(--led); }
.botoes { display: grid; gap: 8px; margin: 12px 0 8px; }
.botoes.lado { grid-template-columns: 1fr 1fr; }
.link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 0; background: none; border: 0;
  color: var(--verde); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  cursor: pointer; font-weight: 600; font-size: 13px;
}
.link:hover { color: var(--verde-2); }

/* ---------- topo ---------- */
.topo { position: fixed; top: 12px; left: 12px; right: 12px; z-index: 10; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.topo > * { pointer-events: auto; }
.logo {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff;
  background: var(--listras), var(--preto); border: 1.5px solid var(--preto); border-radius: var(--raio-p);
  padding: 5px 16px 5px 6px; box-shadow: 3px 3px 0 var(--amarelo); transition: transform .12s, box-shadow .12s;
}
.logo:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--amarelo); }
.logo-casa { width: 38px; height: 38px; border-radius: 3px; background: var(--amarelo); display: grid; place-items: center; font-size: 21px; }
.logo small { display: block; font: 800 10.5px/1 var(--rotulo); letter-spacing: .2em; color: var(--led); margin-bottom: 2px; }
.logo b { display: block; font: 800 26px/.9 var(--titulo); text-transform: uppercase; letter-spacing: .02em; }
/* TOR + CIDADE: a cidade em amarelo-cartão mostra a junção torcida + cidade */
.logo b em { font-style: normal; color: var(--amarelo); }
.topo-dir { display: flex; gap: 8px; }
.ajuda { width: 40px; justify-content: center; padding: 0; font: 800 18px/1 var(--titulo); }
.ranking-btn { background: var(--amarelo); border-color: var(--preto); font-weight: 700; }
.ranking-btn:hover { background: var(--led); }

/* busca: mesma borda, raio e sombra suave das outras superfícies */
.busca-wrap { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 11; width: min(460px, calc(100vw - 460px)); }
.busca {
  display: flex; align-items: center; gap: 8px; min-height: 48px; background: var(--cartao); border: 1.5px solid var(--borda-forte);
  border-radius: var(--raio-p); padding: 3px 3px 3px 12px; box-shadow: var(--sombra); transition: box-shadow .15s;
}
.busca:focus-within { box-shadow: var(--sombra), 0 0 0 3px rgba(255, 212, 0, .55); }
.busca .lupa { font-size: 15px; opacity: .8; }
.busca input { flex: 1; border: 0; background: none; outline: none; font-weight: 600; min-width: 0; -webkit-appearance: none; appearance: none; }
.busca input::placeholder { color: #8d978d; font-weight: 500; }
.busca input::-webkit-search-cancel-button { -webkit-appearance: none; }
.busca-ir {
  width: 40px; height: 40px; flex: none; border-radius: 3px; border: 0; background: var(--verde); color: #fff; cursor: pointer;
  display: grid; place-items: center; font-weight: 700; font-size: 18px; line-height: 1; transition: background-color .15s;
}
.busca-ir:hover { background: var(--verde-2); }
.sugestoes {
  list-style: none; margin: 6px 0 0; padding: 4px; background: var(--cartao); border: 1.5px solid var(--borda-forte);
  border-radius: var(--raio); box-shadow: var(--sombra); max-height: 50vh; overflow: auto;
}
.sugestoes li { padding: 9px 10px; border-radius: var(--raio-p); cursor: pointer; display: flex; justify-content: flex-start; gap: 6px; align-items: center; font-weight: 600; border-left: 3px solid transparent; }
.sugestoes li:hover, .sugestoes li.ativo { background: var(--cartao-3); border-left-color: var(--verde); }
.sugestoes small { margin-left: auto; color: var(--suave); display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }

/* ---------- placar (contadores) ---------- */
.linha-comunidade {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 9; display: flex; gap: 0; align-items: stretch;
  background: var(--preto); color: #fff; border: 1.5px solid var(--preto); border-radius: var(--raio-p);
  box-shadow: 0 8px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08); overflow: hidden; max-width: calc(100vw - 24px);
}
.linha-comunidade .pill { background: none; border: 0; border-radius: 0; box-shadow: none; color: #fff; padding: 6px 16px; font-size: 13px; border-right: 1px solid rgba(255,255,255,.14); cursor: default; }
.linha-comunidade .pill:hover { background: none; }
.linha-comunidade .pill:last-child { border-right: 0; }
.linha-comunidade .pill b { color: var(--led); font: 800 24px/1 var(--titulo); font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: center; }
.linha-comunidade .pill small { color: #a9b5ab; }
.linha-comunidade .pill-clube { cursor: pointer; font-weight: 600; }
.linha-comunidade .pill-clube:hover { background: var(--preto-2); }
.comunidade { background: var(--listras), var(--verde) !important; padding: 6px 12px !important; }
.comunidade small { display: inline-flex; align-items: center; gap: 7px; color: #fff !important; letter-spacing: .16em; }
/* ponto "ao vivo" (enxerto arquibancada) */
.comunidade small::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--led);
  box-shadow: 0 0 0 0 rgba(var(--led-rgb), .6); animation: pulso-ponto 1.8s ease-out infinite;
}
@keyframes pulso-ponto {
  0% { box-shadow: 0 0 0 0 rgba(var(--led-rgb), .6); }
  70% { box-shadow: 0 0 0 5px rgba(var(--led-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--led-rgb), 0); }
}

/* ---------- ações (chips abaixo do logo) ---------- */
.acoes { position: fixed; top: 72px; left: 12px; z-index: 9; display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100vw - 24px); }
.acao { background: var(--cartao); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }   /* "🏠 @usuario" longo não estoura a tela */
.acao:hover { background: var(--cartao-3); }
.acao.destaque { background: var(--verde); border-color: var(--verde-2); color: #fff; box-shadow: 0 2px 0 var(--verde-2); }
.acao.destaque:hover { background: var(--verde-2); }

/* ---------- escudinho (as cores do clube vêm inline do JS; não mexer no background) ---------- */
.escudo {
  width: 18px; height: 18px; border-radius: 3px; display: inline-block; flex: none; vertical-align: -3px;
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.22);
}

/* ---------- cartão principal (ficha de jogo) ---------- */
.cartao {
  background: var(--cartao); border: 1.5px solid var(--borda-forte); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 18px;
}
.principal {
  position: fixed; left: 12px; bottom: 64px; z-index: 9; width: 300px; text-align: left;
  display: grid; gap: 10px; padding: 44px 18px 16px; box-shadow: var(--sombra-dura), var(--sombra); overflow: hidden;
}
/* faixa de transmissão com ponto "ao vivo" pulsando (o ponto é a 1ª camada do background) */
.principal::before {
  content: 'JOGO AO VIVO · PINTE O MAPA'; position: absolute; top: 0; left: 0; right: 0; height: 26px;
  background: radial-gradient(circle closest-side, var(--led) 0 65%, transparent 100%) 16px 50% / 8px 8px no-repeat, var(--listras), var(--preto);
  color: #fff; font: 800 11.5px/1 var(--rotulo); letter-spacing: .14em;
  display: flex; align-items: center; padding-left: 30px; animation: pulso-faixa 1.8s ease-in-out infinite;
}
@keyframes pulso-faixa { 50% { background-size: 6px 6px, auto, auto; } }
.principal::after {
  content: ''; position: absolute; left: 0; right: 0; top: 26px; height: 4px; background: var(--bicolor);
}
.principal .rotulo { font: 800 12px/1 var(--rotulo); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.casinhas { font-size: 30px; line-height: 1; letter-spacing: 2px; }  /* trio grande e solto acima do título (enxerto bandeirão) */
.principal h1 { font-size: 34px; line-height: .92; }
.principal p { margin: 0 0 2px; color: var(--suave); font-size: 13.5px; }
.principal .link { justify-self: start; }

/* ---------- controles do mapa ---------- */
.controles { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 9; display: grid; gap: 8px; justify-items: end; }
.ctrl {
  width: 40px; height: 40px; border-radius: var(--raio-p); border: 1.5px solid var(--borda-forte); background: var(--cartao);
  box-shadow: var(--relevo); cursor: pointer; font: 800 22px/1 var(--titulo); display: grid; place-items: center; transition: background-color .15s, transform .12s, box-shadow .12s;
}
.ctrl:active { transform: translateY(2px); box-shadow: none; }
.ctrl.brasil { width: 56px; height: 56px; font-size: 20px; gap: 0; align-content: center; }
.ctrl.brasil small { font: 800 9.5px/1 var(--rotulo); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.ctrl:hover { background: var(--cartao-3); }
.dica-mapa {
  position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 8;
  background: rgba(20, 25, 23, .88); color: #fff; border: 0; border-left: 4px solid var(--amarelo); border-radius: var(--raio-p); padding: 7px 14px;
  font: 600 12px/1.4 var(--fonte); text-align: center; pointer-events: none; transition: opacity .4s; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.dica-mapa small { font-size: 11px; color: #b7c2b9; }
.dica-mapa.some { opacity: 0; }
.creditos { position: fixed; left: 12px; bottom: 10px; z-index: 8; background: rgba(255,255,255,.7); border: 0; border-radius: 3px; padding: 3px 6px; font-size: 11px; font-weight: 600; color: var(--suave); text-decoration: underline; cursor: pointer; }
.creditos:hover { color: var(--verde); }
.tooltip {
  position: fixed; z-index: 12; pointer-events: none; background: var(--preto); color: #fff; border: 0; border-left: 4px solid var(--amarelo);
  border-radius: var(--raio-p); padding: 8px 12px; box-shadow: 0 8px 20px rgba(0,0,0,.3); font-size: 13px; max-width: 240px;
}
.tooltip b { display: block; font: 700 17px/1.05 var(--titulo); text-transform: uppercase; color: var(--led); margin-bottom: 3px; }
.tooltip span { color: #d3dbd4; display: flex; gap: 6px; align-items: center; font-weight: 500; }

/* ---------- painéis ---------- */
.veu { position: fixed; inset: 0; z-index: 19; background: rgba(10, 20, 12, .45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.painel {
  position: fixed; z-index: 20; top: 24px; left: 50%; transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 48px); overflow: auto; overscroll-behavior: contain;
  background: var(--cartao); border: 1.5px solid var(--borda-forte); border-radius: var(--raio); box-shadow: 0 24px 60px rgba(10, 20, 12, .35);
  padding: 28px 24px 24px; animation: aparecer .18s ease-out;
}
@keyframes aparecer { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }
/* faixa listrada no topo de todo painel: mesma família do cartão do mapa (enxerto bandeirão) */
.painel::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background: var(--listras), var(--preto); border-bottom: 3px solid var(--amarelo);
}
.painel header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.tag { font: 800 11px/1 var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--preto); border-left: 4px solid var(--amarelo); border-radius: 3px; padding: 6px 10px; }
.fechar {
  flex: none; width: 40px; height: 40px; border-radius: var(--raio-p); border: 1.5px solid var(--borda-forte); background: var(--cartao-2);
  color: var(--texto); cursor: pointer; font-size: 22px; line-height: 1; display: grid; place-items: center; padding: 0 0 2px;
  transition: background-color .15s, color .15s;
}
.fechar:hover { background: var(--preto); color: #fff; }
.painel h2 { font-size: 36px; line-height: .95; margin-bottom: 12px; }
/* barrinha bicolor curta sob o título (enxerto figurinha), no lugar do sublinhado preto inteiro */
.painel h2::after { content: ''; display: block; width: 48px; height: 4px; margin-top: 8px; background: var(--bicolor); }
.painel h2 small { font: 700 14px/1 var(--titulo); letter-spacing: .1em; vertical-align: middle; }
.painel h3 { font-size: 18px; margin: 18px 0 6px; padding-left: 10px; border-left: 4px solid var(--verde); }
.painel p { margin: 4px 0; }
.painel .sub { color: var(--suave); font-size: 13.5px; margin-bottom: 8px; }
.painel .nota { color: var(--suave); font-size: 12px; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--borda); }
.painel > .botao { margin-top: 12px; }
.painel.lado { left: auto; right: 12px; transform: none; top: 12px; max-height: calc(100vh - 24px); width: min(400px, calc(100vw - 24px)); animation: none; }
.conteudo { display: grid; gap: 10px; }
.conteudo h3 { margin-top: 8px; }

/* abas estilo site esportivo: sublinhado verde */
.abas { display: flex; gap: 2px; margin: 4px 0 14px; flex-wrap: wrap; border-bottom: 1.5px solid var(--borda); }
.aba { border: 0; border-bottom: 3px solid transparent; margin-bottom: -1.5px; background: none; border-radius: 0; padding: 10px 12px; min-height: 40px; font: 700 16px/1 var(--titulo); text-transform: uppercase; letter-spacing: .04em; color: var(--suave); cursor: pointer; transition: color .15s, border-color .15s; }
.aba:hover { color: var(--texto); }
.aba.ativa { color: var(--texto); border-bottom-color: var(--verde); }

/* regras: valor como dígito de placar */
.regra { display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: start; padding: 10px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--cartao); margin-bottom: 8px; }
.regra .valor { background: var(--preto); color: var(--led); border-radius: 3px; text-align: center; font: 800 22px/1 var(--titulo); padding: 10px 4px; font-variant-numeric: tabular-nums; }
.regra b { display: block; }
.regra span { color: var(--suave); font-size: 13px; }
.nivel { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--cartao); margin-bottom: 8px; }
.nivel .icone { font-size: 30px; text-align: center; }
.nivel b { display: block; }
.nivel span { color: var(--suave); font-size: 13px; }
.nivel.feito { border-color: var(--verde); background: var(--cartao-3); }

.passos { padding-left: 22px; display: grid; gap: 10px; margin: 12px 0 16px; }
.passos li::marker { font: 800 18px var(--titulo); color: var(--verde); }
.passos code { background: var(--cartao-2); border: 1px solid var(--borda); border-radius: 3px; padding: 1px 6px; font-weight: 700; }

/* formulários: contorno cinza em repouso, verde no foco (menos "formulário de TV") */
.busca-at { display: flex; align-items: center; gap: 8px; margin: 8px 0 16px; }
.busca-at span { font: 800 22px/1 var(--titulo); color: var(--suave); }
.busca-at input { flex: 1; min-width: 0; border: 1.5px solid var(--borda-input); border-radius: var(--raio-p); padding: 10px 12px; background: #fff; outline: none; font-weight: 600; min-height: 44px; transition: border-color .15s, box-shadow .15s; }
.busca-at input:focus { border-color: var(--verde); box-shadow: var(--foco); }
.busca-at .botao { width: auto; padding: 10px 18px; }
.campo { display: grid; gap: 5px; font: 800 12px/1.2 var(--rotulo); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); margin: 10px 0; }
.campo input, .campo select { border: 1.5px solid var(--borda-input); border-radius: var(--raio-p); padding: 10px 12px; background: #fff; outline: none; color: var(--texto); font: 600 15px/1.3 var(--fonte); letter-spacing: 0; text-transform: none; min-height: 44px; transition: border-color .15s, box-shadow .15s; }
.campo input:focus, .campo select:focus { border-color: var(--verde); box-shadow: var(--foco); }
.arroba { display: flex; align-items: center; border: 1.5px solid var(--borda-input); border-radius: var(--raio-p); background: #fff; padding-left: 12px; transition: border-color .15s, box-shadow .15s; }
.arroba:focus-within { border-color: var(--verde); box-shadow: var(--foco); }
.arroba span { font: 800 20px/1 var(--titulo); color: var(--suave); }
.arroba input { border: 0 !important; box-shadow: none !important; flex: 1; min-width: 0; }
.rotulo-mini { font: 800 12px/1.2 var(--rotulo); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); margin: 12px 0 4px; }
.pronto { background: var(--cartao-3); border: 1.5px dashed var(--verde); border-radius: var(--raio-p); padding: 12px 14px; font-weight: 600; overflow-wrap: anywhere; color: var(--verde-texto); }
/* código de vínculo: dígitos LED no placar preto ("vincular ABC123") */
.pronto.codigo { background: var(--preto); border: 1.5px solid var(--preto); color: var(--led); text-align: center; padding: 14px; }
.pronto.codigo code { font: 800 26px/1.1 var(--titulo); letter-spacing: .08em; font-variant-numeric: tabular-nums; }

/* ---------- entrada do jogo (painel "Sua casa começa no Instagram") ---------- */
.painel > a.botao { margin-top: 4px; }
.painel .nota-leve { color: var(--suave); font-size: 12.5px; margin: 8px 0 2px; }
/* passos 1/2/3: círculo preto com número LED e a sombrinha amarela da marca */
.etapas { list-style: none; margin: 14px 0 16px; padding: 0; display: grid; gap: 8px; }
.etapas li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; min-height: 40px; }
.etapas .num {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--preto); color: var(--led); font: 800 16px/1 var(--titulo); font-variant-numeric: tabular-nums; box-shadow: 2px 2px 0 var(--amarelo);
}
.etapas b { display: block; font-size: 14px; line-height: 1.3; }
.etapas .ex { display: block; color: var(--suave); font-size: 12.5px; margin-top: 2px; }
.etapas code { background: var(--cartao-2); border: 1px solid var(--borda); border-radius: 3px; padding: 1px 6px; font-weight: 700; color: var(--texto); }
/* caixa "Exemplo de comentário": o montador de antes, dentro de uma superfície secundária */
.exemplo { margin: 4px 0 12px; padding: 12px 14px 14px; background: var(--cartao-2); border: 1px solid var(--borda); border-radius: var(--raio); }
.exemplo .rotulo-mini { margin-top: 0; }
.exemplo .campo { margin: 8px 0; }
.exemplo .botao { margin-top: 10px; }
/* dobras (details) com seta: "Já tenho casa" e "Como crescer" */
.dobra { margin: 10px 0 0; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--cartao); }
.dobra summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px;
  font: 700 16px/1.1 var(--titulo); text-transform: uppercase; letter-spacing: .04em; border-radius: var(--raio-p); transition: background-color .15s;
}
.dobra summary::-webkit-details-marker { display: none; }
.dobra summary::before {
  content: ''; flex: none; width: 8px; height: 8px; margin: 0 2px 3px 2px;
  border-right: 2.5px solid var(--verde); border-bottom: 2.5px solid var(--verde); transform: rotate(-45deg); transition: transform .15s;
}
.dobra[open] summary::before { transform: rotate(45deg); margin-bottom: 6px; }
.dobra summary:hover { background: var(--cartao-3); }
.dobra[open] summary { border-bottom: 1px solid var(--borda); border-radius: var(--raio-p) var(--raio-p) 0 0; }
.dobra-corpo { padding: 10px 12px 14px; }
.dobra-corpo .busca-at { margin: 6px 0 12px; }
.dobra-corpo .botoes { margin: 10px 0 4px; }
.dobra-corpo > .botao { margin-top: 8px; }
.painel .v-logado { color: var(--verde-texto); font-weight: 600; font-size: 13.5px; background: var(--cartao-3); border-left: 4px solid var(--verde); border-radius: var(--raio-p); padding: 8px 10px; margin: 6px 0 4px; }
.painel .v-status { display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 12.5px; margin: 8px 0 0; }
.v-status.espera::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--led); border: 1px solid var(--amarelo-2); animation: pulso-ponto 1.8s ease-out infinite; }
.v-status.ok { color: var(--verde-texto); font-weight: 700; font-size: 14px; }
.v-status.erro { color: #c8552f; font-weight: 600; }   /* mesmo laranja-tijolo do contorno de hover no mapa */
/* sessão vinculada: linha discreta com "Sair" no painel Minha casa */
.painel .sessao { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--suave); font-size: 12.5px; margin: -4px 0 6px; }
.sessao b { color: var(--texto); }
.link-mini { background: none; border: 0; padding: 0 6px; min-height: 40px; margin: -10px 0; color: var(--verde); font: 600 12.5px/1 var(--fonte); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; }
.link-mini:hover { color: var(--verde-2); }

/* ---------- casa do torcedor: a figurinha do placar ---------- */
.casa-card {
  position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; margin-top: 6px; padding: 14px 14px 14px 12px;
  border: 1.5px solid var(--borda-forte); border-radius: var(--raio); background: var(--cartao); box-shadow: 3px 3px 0 var(--amarelo);
}
/* selo colecionável no canto (enxerto figurinha): preto com filete amarelo */
.casa-card::before {
  content: '★ TITULAR'; position: absolute; top: -10px; right: 12px; padding: 4px 8px 3px;
  background: var(--preto); color: var(--led); border-radius: 3px; box-shadow: 2px 2px 0 var(--amarelo);
  font: 800 10.5px/1 var(--rotulo); letter-spacing: .14em;
}
/* recorte tracejado em volta da casinha */
.casa-card .icone { width: 76px; height: 76px; display: grid; place-items: center; font-size: 46px; line-height: 1; background: var(--cartao-2); border: 1.5px dashed var(--preto); border-radius: var(--raio-p); }
.casa-card h3 { margin: 0 0 4px; padding: 0; border: 0; font-size: 26px; text-transform: none; letter-spacing: 0; }  /* @ em minúsculas, como no ranking */
.casa-card .linha { color: var(--suave); font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.casa-card .linha b { color: var(--texto); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--preto); color: #fff; border-radius: var(--raio-p); padding: 10px 8px 9px; text-align: center; }  /* sem listras: só o placar e o LED */
.stat b { display: block; font: 800 28px/1 var(--titulo); color: var(--led); font-variant-numeric: tabular-nums; }
.stat span { font: 800 11.5px/1 var(--rotulo); color: #b9c4bb; letter-spacing: .08em; display: block; margin-top: 5px; }
.barra { height: 8px; border-radius: 2px; background: var(--cartao-2); overflow: hidden; border: 1px solid var(--borda); }
.barra i { display: block; height: 100%; background: var(--verde); transition: width .3s ease-out; }
.faixa-dono { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--raio-p); background: var(--cartao-3); border: 1px solid var(--borda); border-left: 4px solid var(--verde); }
.faixa-dono .escudo { width: 36px; height: 36px; border-radius: 4px; }
.faixa-dono b { display: block; font: 800 18px/1.1 var(--titulo); }
.faixa-dono span { font-size: 12.5px; color: var(--suave); }
.placar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.placar li { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 600; }
.placar li b { font: 800 18px/1 var(--titulo); font-variant-numeric: tabular-nums; }
.placar .barra { grid-column: 1 / 4; height: 6px; margin-top: -2px; }
.moradores { display: flex; flex-wrap: wrap; gap: 6px; }
.morador { font-size: 12px; font-weight: 600; min-height: 32px; background: var(--cartao-2); border: 1px solid var(--borda); border-radius: 3px; padding: 5px 9px; display: inline-flex; gap: 5px; align-items: center; cursor: pointer; transition: background-color .15s, border-color .15s; }
.morador:hover { background: var(--cartao-3); border-color: var(--verde); }
.morador .escudo { width: 11px; height: 11px; border-radius: 2px; }
.extrato { list-style: none; margin: 0; padding: 0; font-size: 12.5px; display: grid; gap: 0; max-height: 180px; overflow: auto; border: 1px solid var(--borda); border-radius: var(--raio-p); }
.extrato li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--borda); padding: 6px 10px; }
.extrato li:nth-child(odd) { background: var(--cartao-2); }
.extrato li:last-child { border-bottom: 0; }
.extrato li b { font: 800 15px/1.2 var(--titulo); color: var(--verde); font-variant-numeric: tabular-nums; }
.extrato small { color: var(--suave); }
.vazio { color: var(--suave); text-align: center; padding: 18px 8px; font-weight: 500; }

/* ---------- acontecendo agora: linhas de "minuto a minuto" ---------- */
.eventos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.eventos li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--borda); border-left: 4px solid var(--verde); border-radius: var(--raio-p); background: var(--cartao); cursor: pointer; font-size: 13.5px; transition: background-color .15s; }
.eventos li:hover { background: var(--cartao-3); }
.eventos .ev-icone { font-size: 20px; line-height: 1.2; flex: none; }
.eventos .ev-corpo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.eventos small { display: block; color: var(--suave); font-size: 11.5px; margin-top: 2px; }
/* evento do próprio @ (sessão vinculada): cartão amarelo bem suave */
.eventos li.meu { background: rgba(255, 212, 0, .16); border-color: var(--amarelo-2); border-left-color: var(--amarelo); }
.eventos li.meu:hover { background: rgba(255, 212, 0, .28); }
/* links pequenos; a área de toque segue 40 px, entrando no padding do item */
.ev-links { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0 0 -9px -6px; }
.ev-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* ---------- ranking: tabela de classificação, líder em linha amarela (enxerto bandeirão) ---------- */
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ranking li { display: grid; grid-template-columns: 36px 22px 1fr auto; gap: 8px; align-items: center; padding: 8px 12px 8px 8px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--cartao); cursor: pointer; transition: background-color .15s, border-color .15s; }
.ranking li:hover { background: var(--cartao-3); border-color: var(--verde); }
.ranking .pos { font: 800 20px/1 var(--titulo); color: var(--suave); text-align: center; font-variant-numeric: tabular-nums; border-radius: 3px; padding: 4px 0; }
.ranking li:nth-child(1) { background: var(--amarelo); border-color: var(--preto); }
.ranking li:nth-child(1):hover { background: var(--led); border-color: var(--preto); }
.ranking li:nth-child(1) .pos { color: var(--led); background: var(--preto); }
.ranking li:nth-child(1) small { color: #3b463e; }
.ranking li:nth-child(2) .pos { color: var(--texto); background: #d9dedb; }
.ranking li:nth-child(3) .pos { color: #fff; background: #a0632a; }
.ranking .nome { min-width: 0; }
.ranking .nome b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .nome small { color: var(--suave); font-size: 12px; }
.ranking .pts { font: 800 20px/1 var(--titulo); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ranking .pts small { display: block; color: var(--suave); font: 800 11.5px/1 var(--rotulo); letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }

/* ---------- acessibilidade: sem movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: none !important; transition: none !important; }
}

/* ---------- celular ---------- */
@media (max-width: 760px) {
  .topo { left: 8px; right: 8px; top: 8px; }
  .logo { padding: 4px 12px 4px 5px; gap: 8px; }
  .logo-casa { width: 34px; height: 34px; font-size: 19px; }
  .logo b { font-size: 22px; }
  .ranking-btn { padding: 7px 10px; }
  .busca-wrap { top: 60px; left: 8px; right: 8px; width: auto; transform: none; }
  .busca input { font-size: 16px; }                      /* 16px evita o zoom automático do iOS */
  .linha-comunidade { bottom: auto; top: 114px; left: 8px; transform: none; max-width: calc(100vw - 16px); }
  .linha-comunidade .pill { padding: 4px 10px; min-height: 36px; }
  .linha-comunidade .pill b { font-size: 18px; }
  .linha-comunidade .pill-clube { display: none; }
  .acoes { top: 160px; left: 8px; max-width: calc(100vw - 16px); }
  .acao { font-size: 12px; padding: 6px 10px; min-height: 40px; }
  .principal {
    left: 8px; right: 8px; top: auto; bottom: 8px; transform: none; width: auto;
    padding: 38px 14px calc(12px + env(safe-area-inset-bottom)); gap: 8px 6px; grid-template-columns: 1fr 1fr; box-shadow: var(--sombra);
  }
  .principal::before { height: 24px; font-size: 11.5px; letter-spacing: .08em; padding-left: 28px; background-position: 14px 50%, 0 0, 0 0; }
  .principal::after { top: 24px; height: 3px; }
  .principal .rotulo, .principal h1, .principal p, .principal .link, .casinhas { grid-column: 1 / 3; }
  .principal h1 { font-size: 26px; }
  .principal p { font-size: 12.5px; margin: 0; }
  .principal .link { justify-self: center; min-height: 40px; padding: 8px 0; }
  .casinhas { display: none; }
  /* 'CHAMAR A TORCIDA · +25' cabe em meia largura: 14px, tracking curto e sem quebra */
  .principal .botao { padding: 10px 6px; font-size: 14px; letter-spacing: .02em; white-space: nowrap; min-height: 44px; }
  .controles { top: 256px; transform: none; right: 8px; }
  .ctrl { width: 40px; height: 40px; }
  .ctrl.brasil { width: 48px; height: 48px; font-size: 18px; }
  .dica-mapa, .creditos, .maplibregl-ctrl-bottom-right { display: none; }
  /* painéis viram folha de baixo; a faixa listrada vira a área da alça */
  .painel {
    top: auto; bottom: 0; left: 0; right: 0; transform: none; width: 100%; max-width: 100vw; max-height: 88vh;
    border-radius: var(--raio-folha) var(--raio-folha) 0 0; border-bottom: 0; padding: 34px 16px calc(20px + env(safe-area-inset-bottom));
  }
  .painel::before { height: 16px; }
  .painel::after { content: ''; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(255,255,255,.6); }
  .painel.lado { right: 0; width: 100%; top: auto; max-height: 88vh; }
  .painel h2 { font-size: 28px; }
  .painel h3 { font-size: 17px; }
  .aba { padding: 10px 10px; font-size: 15px; }
  .stats { gap: 6px; }
  .stat b { font-size: 24px; }
  .casa-card { grid-template-columns: 60px 1fr; gap: 12px; }
  .casa-card .icone { width: 60px; height: 60px; font-size: 36px; }
  .casa-card h3 { font-size: 22px; }
  .busca-at .botao { padding: 10px 12px; }
  .campo input, .campo select, .busca-at input, .arroba input { font-size: 16px; }   /* evita o zoom do iOS ao focar */
  .morador { min-height: 36px; }
  .botoes.lado { gap: 6px; }
  .botoes.lado .botao { padding-inline: 6px; font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
  /* entrada do jogo e feed no celular: tudo cabe na largura, toque de 40 px */
  .etapas li { grid-template-columns: 30px 1fr; gap: 10px; }
  .etapas .num { width: 30px; height: 30px; font-size: 15px; }
  .exemplo { padding: 10px 12px 12px; }
  .dobra summary { font-size: 15px; padding: 10px; }
  .dobra-corpo { padding: 10px 10px 12px; }
  .dobra-corpo .busca-at .botao { padding: 10px 10px; font-size: 14px; white-space: nowrap; }
  .pronto.codigo code { font-size: 22px; }
  .eventos li { padding: 9px 10px; font-size: 13px; }
  .ev-links { gap: 0 4px; }
  @keyframes aparecer { from { opacity: 0; transform: translateY(16px); } }
}
/* telas muito estreitas: o botão secundário do cartão ainda cabe em meia largura */
@media (max-width: 359px) {
  .principal .botao { font-size: 13px; letter-spacing: 0; padding: 10px 4px; }
}

/* ---------- camisa do clube no lugar do quadradinho de cor ---------- */
.escudo.camisa { width: 24px; height: 24px; border-radius: 0; box-shadow: none; vertical-align: -6px; object-fit: contain; }
.faixa-dono .escudo.camisa { width: 44px; height: 44px; }
.morador .escudo.camisa { width: 18px; height: 18px; vertical-align: -4px; }
.ranking .escudo.camisa, .placar .escudo.camisa { width: 28px; height: 28px; }
.tooltip .escudo.camisa { width: 20px; height: 20px; }

/* ---------- vista de jogo: a cidade em miniatura ---------- */
.vista-jogo {
  position: fixed; inset: 0; z-index: 6; width: 100%; height: 100%; touch-action: none; cursor: grab;
  background: radial-gradient(ellipse at 55% 45%, #f4f7ef 0%, #dfe9e4 55%, #cfdde0 100%);
}
.vista-toggle {
  position: fixed; top: 64px; right: 12px; z-index: 11; display: flex; gap: 0;
  background: var(--preto); border: 1.5px solid var(--preto); border-radius: var(--raio-p); box-shadow: var(--relevo); overflow: hidden;
}
.vista-toggle button {
  border: 0; background: none; color: #dfe5df; padding: 9px 14px; min-height: 40px; cursor: pointer;
  font: 800 13px/1 var(--rotulo); letter-spacing: .06em; text-transform: uppercase;
}
.vista-toggle button.ativo { background: var(--amarelo); color: var(--preto); }
.vista-chip {
  position: fixed; left: 50%; bottom: 66px; transform: translateX(-50%); z-index: 8;
  background: var(--cartao); border: 1.5px solid var(--borda-forte); border-radius: var(--raio-p); box-shadow: var(--sombra);
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 8px;
}
.vista-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); display: inline-block; }
.vista-chip small { color: var(--suave); font-weight: 500; border-left: 1px solid var(--borda); padding-left: 8px; }
/* com a maquete aberta: painel da cidade à esquerda e sem o ingresso, como na vista de jogo da VilaUp */
body.em-vista .principal, body.em-vista .dica-mapa { display: none; }
@media (min-width: 761px) {
  body.em-vista .painel.lado { right: auto; left: 12px; top: 112px; max-height: calc(100vh - 124px); }
}

/* lotes e cargos no painel da cidade */
.lotes {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0;
  padding: 10px 12px; border: 1.5px solid var(--borda); border-radius: var(--raio); background: var(--cartao-2); font-size: 13.5px;
}
.lotes b { font: 800 22px/1 var(--titulo); }
.lotes small { color: var(--suave); }
.cargos { display: grid; gap: 6px; margin: 6px 0 10px; }
.cargo {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px solid var(--borda-forte);
  border-radius: var(--raio); background: #fff7cc; cursor: pointer;
}
.cargo:hover { background: #fff0a8; }
.cargo.vago { background: var(--cartao-2); border-color: var(--borda); cursor: default; }
.cargo-icone { width: 34px; height: 34px; display: grid; place-items: center; font-size: 18px; background: var(--amarelo); border: 1.5px solid var(--preto); border-radius: var(--raio-p); flex: none; }
.cargo.vago .cargo-icone { background: #e9ede6; border-color: var(--borda); filter: grayscale(.6); }
.cargo b { display: block; font: 800 13px/1.2 var(--rotulo); letter-spacing: .04em; text-transform: uppercase; }
.cargo small { display: flex; align-items: center; gap: 5px; color: var(--suave); font-size: 12.5px; }
#ver-crescer { margin: 4px 0 6px; }

@media (max-width: 760px) {
  .vista-toggle { top: auto; bottom: 12px; right: 50%; transform: translateX(50%); }
  .vista-toggle button { padding: 8px 10px; font-size: 12px; }
  .vista-chip { top: 194px; bottom: auto; }
}
@media (min-width: 761px) {
  /* chip no meio da área livre, à direita do painel da cidade */
  body.em-vista .vista-chip { left: calc(50% + 200px); }
}
@media (max-width: 760px) {
  /* celular com a maquete aberta: folha do painel mais baixa, botões da vista no topo */
  body.em-vista .painel.lado { max-height: 46vh; }
  body.em-vista .acoes, body.em-vista .linha-comunidade { display: none; }
  body.em-vista .vista-toggle { top: 112px; bottom: auto; left: 8px; right: auto; transform: none; }
  body.em-vista .vista-chip { top: 160px; }
}
/* texto pequeno dentro de número grande (ex.: "· 4 casas" no placar) fica na fonte de rótulo */
.placar li b small, .stat b small { font: 700 12px/1 var(--rotulo); letter-spacing: 0; }

/* braçadeira de capitão (o "C" não existe como emoji no Windows) */
.bracadeira {
  display: inline-grid; place-items: center; width: 1.35em; height: 1.1em; vertical-align: -0.15em;
  background: var(--amarelo); color: var(--preto); border: 1.5px solid var(--preto); border-radius: 3px;
  font: 800 .78em/1 var(--rotulo); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
}
.cargo-icone .bracadeira { font-size: 17px; }
@media (max-width: 760px) {
  /* o subtítulo do logo não quebra em duas linhas no celular */
  .logo small { font-size: 8px; letter-spacing: .08em; white-space: nowrap; }
}

/* ---------- rivalidade ---------- */
/* feed: viradas com destaque */
.eventos li.destaque-invasao { border-left-color: #d62828; background: #fff1ef; }
.eventos li.destaque-classico { border-left-color: var(--amarelo); background: #fff9db; }
.eventos li.destaque-retomada { border-left-color: var(--verde); background: var(--cartao-3); }
.eventos li[class*="destaque-"] .ev-icone { font-size: 22px; }
.ev-provocar { font-weight: 800; color: #b3261e !important; }

/* lista "à beira de virar" */
.disputas { margin: 4px 0 12px; padding: 10px 12px; border: 1.5px solid var(--preto); border-radius: var(--raio);
  background: repeating-linear-gradient(135deg, #fff7cc 0 12px, #fff2b0 12px 24px); }
.disputas h3 { margin: 0 0 6px; font-size: 18px; }
.disputas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.disputas li { display: grid; gap: 2px; padding: 8px 10px; background: #fff; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); cursor: pointer; font-size: 13px; }
.disputas li:hover { background: var(--cartao-2); }
.disputas li span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.disputas li em { font-style: normal; font: 800 11px/1 var(--rotulo); text-transform: uppercase; letter-spacing: .06em; background: #e63946; color: #fff; padding: 3px 6px; border-radius: 3px; }
.disputas li small { color: #b3261e; font-weight: 700; }

/* cidade em disputa pulsando no mapa */
.pulso {
  width: 16px; height: 16px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--cor, #e63946); border: 2.5px solid #fff; box-shadow: 0 0 0 0 var(--cor, #e63946);
  animation: pulso 1.6s ease-out infinite;
}
@keyframes pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor, #e63946) 70%, transparent); }
  100% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--cor, #e63946) 0%, transparent); }
}

/* painel da cidade */
.sede { display: grid; gap: 3px; margin: 6px 0; padding: 8px 10px; border: 1.5px solid var(--borda); border-radius: var(--raio); background: var(--cartao-2); font-size: 13px; }
.sede span { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.sede small { color: var(--verde-texto, var(--verde)); font-weight: 700; }
.casa-tag { font: 700 10.5px/1 var(--rotulo); color: var(--verde); background: var(--cartao-3); padding: 2px 5px; border-radius: 3px; margin-left: 4px; }
.alerta-disputa {
  display: flex; gap: 8px; align-items: center; margin: 6px 0; padding: 10px 12px; border-radius: var(--raio); font-size: 13px;
  border: 2px solid var(--preto); background: repeating-linear-gradient(135deg, #ffe066 0 10px, #ffd43b 10px 20px);
}
.alerta-disputa span { display: grid; gap: 2px; }
.alerta-disputa b:first-child { font: 400 16px/1 var(--titulo); text-transform: uppercase; letter-spacing: .03em; }
.confronto { margin: 6px 0 8px; padding: 10px 12px; border-radius: var(--raio); background: var(--preto); color: #fff; text-align: center; }
.confronto small { display: block; color: var(--led); font: 800 11px/1.2 var(--rotulo); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.confronto div { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.confronto strong { font: 400 26px/1 var(--titulo); color: var(--led); padding: 0 6px; }
#provocar { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } }
.sede { grid-template-columns: 22px 1fr; align-items: start; }
.sede small { grid-column: 2; }