:root {
  --noite: #0b1222;
  --painel: rgba(11, 17, 32, 0.94);
  --borda: rgba(255, 255, 255, 0.12);
  --luz: #ffd36b;
  --sangue: #e5383b;
  --texto: #f3efe6;
  --apagado: #9aa3b8;
  --estado: #9ec5ff;
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--noite); color: var(--texto); font-family: var(--fonte); }
button { font: inherit; color: inherit; cursor: pointer; }
.invisivel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

#mapa { position: fixed; inset: 0; width: 100%; height: 100%; background: #05070d; }
#mapa .maplibregl-ctrl-attrib { font-size: 10px; background: rgba(5, 8, 16, 0.7); color: #9aa3b8; }
#mapa .maplibregl-ctrl-attrib a { color: #c9cfdd; }

/* topo */
#topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: linear-gradient(var(--noite) 40%, rgba(11, 18, 34, 0));
  pointer-events: none;
}
.marca { font-weight: 900; font-size: 22px; letter-spacing: 0.04em; line-height: 1; text-shadow: 0 0 18px rgba(229, 56, 59, 0.55); }
.marca span { color: var(--sangue); }
.horda {
  display: flex; align-items: center; gap: 7px; pointer-events: auto;
  background: rgba(229, 56, 59, 0.16); border: 1px solid rgba(229, 56, 59, 0.6);
  border-radius: 12px; padding: 5px 10px 5px 12px;
}
.horda b { font-size: 24px; font-weight: 900; color: #ff6b6d; line-height: 1; }
.horda small { font-size: 10px; line-height: 1.1; color: #ffb3b4; text-transform: uppercase; letter-spacing: 0.05em; }

/* busca */
#busca { position: fixed; z-index: 6; top: calc(58px + env(safe-area-inset-top)); left: 12px; right: 12px; max-width: 520px; margin: 0 auto; }
#campo {
  width: 100%; height: 48px; border-radius: 14px; border: 1px solid var(--borda);
  background: var(--painel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239aa3b8' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 14px 50%;
  color: var(--texto); font: 600 16px var(--fonte); padding: 0 14px 0 44px; outline: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
#campo:focus { border-color: var(--luz); }
#campo::placeholder { color: var(--apagado); font-weight: 500; }
#sugestoes { list-style: none; margin: 6px 0 0; padding: 0; background: var(--painel); border-radius: 14px; overflow: hidden; border: 1px solid var(--borda); }
#sugestoes:empty { display: none; }
#sugestoes li { padding: 11px 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
#sugestoes li:first-child { border-top: 0; }
#sugestoes li.ativo, #sugestoes li:hover { background: rgba(255, 211, 107, 0.12); }
#sugestoes .arroba { font-weight: 800; }
#sugestoes .onde { color: var(--apagado); font-size: 13px; margin-left: auto; text-align: right; }
#sugestoes .vazio { color: var(--apagado); cursor: default; display: block; line-height: 1.4; }
#contagem { margin: 7px 2px 0; font-size: 12.5px; color: var(--apagado); text-shadow: 0 1px 3px #000; }
#contagem b { color: var(--luz); }

/* botões */
#botoes { position: fixed; z-index: 4; right: 12px; bottom: calc(40px + env(safe-area-inset-bottom)); display: flex; gap: 8px; }
#botoes button, #zoom button {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 12px;
  font-weight: 700; font-size: 14px; padding: 10px 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
#zoom { position: fixed; z-index: 4; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; }
#zoom button { width: 42px; height: 42px; padding: 0; font-size: 20px; }

/* folha de baixo */
#folha {
  position: fixed; z-index: 8; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto;
  max-height: 55vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--painel); border: 1px solid var(--borda); border-bottom: 0;
  border-radius: 20px 20px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  transition: transform 0.28s ease;
}
#folha.fechada { transform: translateY(110%); }
#f-fechar { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.08); font-size: 22px; line-height: 1; }

.rotulo { font-size: 11.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--luz); margin: 0 0 4px; }
.rotulo.estado { color: var(--estado); }
.titulo { font-size: 24px; font-weight: 900; margin: 0 40px 2px 0; word-break: break-word; line-height: 1.15; }
.sub { color: var(--apagado); margin: 0 0 14px; font-size: 15px; }
.fichas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ficha { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--borda); border-radius: 12px; padding: 8px 12px; }
.ficha b { display: block; font-size: 20px; font-weight: 900; color: var(--luz); line-height: 1.1; }
.ficha small { color: var(--apagado); font-size: 12px; }
.prox { font-size: 14px; color: var(--texto); margin: 0 0 14px; line-height: 1.45; }
.prox b { color: var(--luz); }
.aviso { font-size: 14px; line-height: 1.5; background: rgba(158, 197, 255, 0.1); border: 1px solid rgba(158, 197, 255, 0.35); border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; }
.principal, .secundario { border-radius: 12px; padding: 12px 16px; font-weight: 800; font-size: 15px; border: 0; }
.principal { background: var(--luz); color: #1a1405; }
.secundario { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--borda); }
.largo { width: 100%; }
.largo + .largo { margin-top: 8px; }

.lista { list-style: none; margin: 10px 0 0; padding: 0; columns: 2; column-gap: 14px; }
.lista li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 14px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista li span { color: var(--apagado); font-size: 12.5px; }
.lista li.eu { color: var(--luz); font-weight: 800; }

.abas { display: flex; gap: 6px; margin: 4px 0 10px; }
.abas button { flex: 1; border-radius: 10px; border: 1px solid var(--borda); background: transparent; padding: 8px; font-weight: 700; color: var(--apagado); }
.abas button.on { background: rgba(255, 211, 107, 0.14); border-color: var(--luz); color: var(--texto); }
.rank { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rank li { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); cursor: pointer; }
.rank li::before { counter-increment: r; content: counter(r); color: var(--apagado); font-weight: 800; text-align: right; }
.rank .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .barra { grid-column: 2 / 4; height: 4px; border-radius: 2px; background: var(--luz); opacity: 0.7; margin-top: -4px; }
.rank b { color: var(--luz); }

.regras { margin: 6px 0 0; padding-left: 20px; line-height: 1.5; font-size: 15px; }
.regras li { margin-bottom: 8px; }
.armas { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 6px 0 0; font-size: 14px; }
.armas b { color: var(--luz); text-align: right; }

/* cena: a cidade por dentro */
#cena { position: fixed; inset: 0; z-index: 9; background: #05070d; display: flex; justify-content: center; overflow: hidden; }
#cena.some { display: none; }
#cena.abrindo #c-palco { animation: mergulho 0.7s ease-out both; }
@keyframes mergulho { from { transform: scale(1.25); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }
#c-palco { position: relative; height: 100%; aspect-ratio: 900 / 1612; flex: none; background: url("img/cidade.jpg") center / cover no-repeat; }
#c-gente { position: absolute; inset: 0; }
.pessoa { position: absolute; width: 0; height: 0; }
.pessoa .corpo { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); display: block; height: var(--h); width: auto; max-width: none;
  animation: entra 0.5s cubic-bezier(.2,.9,.3,1.3) both, respira 2.8s ease-in-out infinite; animation-delay: var(--d), calc(var(--d) + 0.5s); transform-origin: 50% 100%; }
.pessoa.virado .corpo { --vira: -1; }
@keyframes entra { from { opacity: 0; transform: translateX(-50%) translateY(30%) scaleX(var(--vira, 1)); } to { opacity: 1; transform: translateX(-50%) scaleX(var(--vira, 1)); } }
@keyframes respira { 0%, 100% { transform: translateX(-50%) scaleX(var(--vira, 1)) scaleY(1); } 50% { transform: translateX(-50%) scaleX(var(--vira, 1)) scaleY(1.018); } }
.pessoa .sombra { position: absolute; left: 0; top: 0; width: calc(var(--h) * 0.42); height: calc(var(--h) * 0.06); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0) 70%); }
.pessoa.fundo .corpo { filter: brightness(0.55) saturate(0.7); }
.pessoa.meio .corpo { filter: brightness(0.85); }
.pessoa.meio .tag { font-size: clamp(8px, 1.05vh, 11px); padding: 1px 5px; display: none; }
.pessoa.mostra .tag { display: block; z-index: 2; background: rgba(5, 8, 16, 0.95); }
.pessoa .corpo { cursor: pointer; }
.pessoa .tag { position: absolute; left: 0; bottom: calc(var(--h) + 2px); transform: translateX(-50%); white-space: nowrap;
  font: 700 clamp(9px, 1.25vh, 13px) var(--fonte); color: #f3efe6; background: rgba(5, 8, 16, 0.78); border-radius: 8px; padding: 2px 6px; animation: entra-tag 0.4s ease-out both; animation-delay: calc(var(--d) + 0.25s); }
@keyframes entra-tag { from { opacity: 0; } to { opacity: 1; } }
.pessoa.eu .corpo { filter: drop-shadow(0 0 10px rgba(255, 211, 107, 0.65)); }
.pessoa.eu .sombra { width: calc(var(--h) * 0.6); height: calc(var(--h) * 0.1); background: radial-gradient(rgba(255,211,107,0.6), rgba(255,211,107,0) 70%); }
.pessoa.eu .tag { font-size: clamp(13px, 2vh, 18px); background: var(--luz); color: #1a1405; padding: 4px 10px; border-radius: 10px; bottom: calc(var(--h) + 8px); }
.pessoa.eu .tag::before { content: "VOCÊ"; position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px); font-size: 14px; font-weight: 900; letter-spacing: 0.14em; color: var(--luz); background: none; animation: pula 1.1s ease-in-out infinite; text-shadow: 0 1px 4px #000; }
.pessoa.eu .tag::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--luz); }
@keyframes pula { 0%, 100% { transform: translate(-50%, -4px); } 50% { transform: translate(-50%, -9px); } }
.multidao { position: absolute; left: 50%; transform: translateX(-50%); font: 800 clamp(11px, 1.5vh, 15px) var(--fonte); color: var(--luz); background: rgba(5, 8, 16, 0.8); border: 1px solid rgba(255, 211, 107, 0.5); border-radius: 10px; padding: 3px 10px; white-space: nowrap; }

#c-topo { position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 10px; align-items: flex-start; padding: calc(12px + env(safe-area-inset-top)) 14px 30px; background: linear-gradient(rgba(5, 8, 16, 0.85), rgba(5, 8, 16, 0)); max-width: 560px; margin: 0 auto; }
#c-voltar { background: var(--painel); border: 1px solid var(--borda); border-radius: 12px; padding: 8px 12px; font-weight: 800; flex: none; }
.c-titulo h2 { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.15; text-shadow: 0 2px 6px #000; }
.c-titulo p { margin: 2px 0 0; font-size: 14px; color: #e9e2cf; text-shadow: 0 1px 4px #000; }
.c-titulo p b { color: var(--luz); }
#c-baixo { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(5, 8, 16, 0), rgba(5, 8, 16, 0.82) 60%); max-width: 560px; margin: 0 auto; }
/* menu da cidade: uma linha só, para a multidão aparecer inteira */
.c-barra { display: flex; align-items: center; gap: 6px; }
.c-ic { flex: none; width: 52px; height: 52px; padding: 0; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(12, 18, 32, 0.72);
  color: var(--texto, #f3efe6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 800; cursor: pointer; }
.c-ic svg, #c-jogar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#c-jogar.jogar { flex: 1; min-width: 0; height: 52px; margin: 0; padding: 0 14px; border: 0; border-radius: 999px; font-size: 16px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
#c-prox { margin: 4px 0 0; font-size: 11.5px; line-height: 1.35; color: #e9e2cf; text-shadow: 0 1px 4px #000; max-width: 320px; }
#c-prox b { color: var(--luz); }
.c-botoes { display: flex; gap: 8px; }
.c-botoes button { flex: 1; }
#c-escolha { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
#c-escolha.some { display: none; }
#c-escolha button { background: rgba(255, 255, 255, 0.07); border: 2px solid transparent; border-radius: 12px; padding: 4px; height: 74px; }
#c-escolha button.on { border-color: var(--luz); background: rgba(255, 211, 107, 0.15); }
#c-escolha img { height: 100%; width: auto; }

.jogar { margin-bottom: 8px; font-size: 18px; padding: 14px; text-transform: uppercase; letter-spacing: 0.05em; background: var(--sangue); color: #fff; box-shadow: 0 0 24px rgba(229, 56, 59, 0.55); }

/* rua: as casas da cidade */
#rua { position: fixed; inset: 0; z-index: 11; background: #0b1020; }
#rua.some { display: none; }
#r-rolo { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: #0b1020 url("img/rua.jpg") repeat-x left bottom / auto 100%; background-attachment: local; }
#r-trilha { position: relative; height: 100%; }
.lote { position: absolute; bottom: 19vh; width: 0; cursor: pointer; }
.lote .casa { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); height: var(--h); width: auto; max-width: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55)); }
.lote .dono { position: absolute; left: 0; bottom: -7vh; transform: translateX(-10%); height: 15vh; width: auto; max-width: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }
.lote .placa { position: absolute; left: 0; bottom: calc(var(--h) + 6px); transform: translateX(-50%); white-space: nowrap; text-align: center;
  font: 800 13px var(--fonte); background: rgba(5, 8, 16, 0.82); border: 1px solid var(--borda); border-radius: 10px; padding: 3px 9px; color: var(--texto); }
.lote .placa small { display: block; font-size: 11px; font-weight: 700; color: var(--apagado); }
.lote .placa .cor { color: #ff6b8a; }
.lote.minha .placa { background: var(--luz); color: #1a1405; border-color: var(--luz); }
.lote.minha .placa small { color: #4a3a10; }
.lote.minha .casa { filter: drop-shadow(0 0 16px rgba(255, 211, 107, 0.7)); }
.lote.nunca .casa { filter: brightness(0.7) saturate(0.7) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55)); }
#r-topo { position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 10px; align-items: flex-start; padding: calc(12px + env(safe-area-inset-top)) 14px 24px;
  background: linear-gradient(rgba(5, 8, 16, 0.9), rgba(5, 8, 16, 0)); pointer-events: none; }
#r-topo > * { pointer-events: auto; }
#r-voltar { background: var(--painel); border: 1px solid var(--borda); border-radius: 12px; padding: 8px 12px; font-weight: 800; flex: none; }
/* a casa abre em tela cheia, do topo, com o "← Voltar" parado em cima (igual aos outros quadros) */
#r-cartao { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 4; max-width: 560px; margin: 0 auto; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; background: #0b1222; border: solid var(--borda);
  border-width: 0 1px; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); }
#r-cartao .r-cab { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; margin: 0 -16px 12px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: #0d1426; border-bottom: 1px solid var(--borda); }
#r-cartao .r-cab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 14px; color: var(--apagado); }
#r-cartao.some { display: none; }
#r-cartao h3 { margin: 0 0 2px; font-size: 22px; font-weight: 900; word-break: break-word; }
.r-vitrine { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 30vh; max-height: 230px; margin: 8px 0 10px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 211, 107, 0.18), rgba(0, 0, 0, 0) 70%); }
.r-vitrine img { height: 100%; width: auto; }
.r-vitrine img.dono { height: 62%; margin-left: -6%; }
.r-arsenal { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.r-arsenal span { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--borda); border-radius: 10px; padding: 4px 8px 4px 4px; }
.r-arsenal img { height: 24px; width: auto; }
.curtir { background: rgba(255, 107, 138, 0.15); border: 1px solid #ff6b8a; color: #ffd0da; }
.curtir:disabled { opacity: 0.6; }
#r-fechar { flex: none; }

/* jogo */
#jogo { position: fixed; inset: 0; z-index: 12; background: #05070d; touch-action: none; user-select: none; -webkit-user-select: none; }
#jogo.some { display: none; }
#j-tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#j-hud { position: absolute; top: 0; left: 0; right: 0; max-width: 560px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top)) 12px 0; pointer-events: none; }
#jogo.no-painel #j-hud { display: none; }
.j-linha { display: flex; align-items: center; gap: 10px; font-weight: 900; text-shadow: 0 2px 4px #000; }
#j-coracoes { color: #ff4d55; font-size: 22px; letter-spacing: 2px; }
#j-coracoes i { font-style: normal; color: rgba(255, 255, 255, 0.25); }
#j-horda { font-size: 16px; color: var(--luz); }
#j-mortes { font-size: 15px; margin-left: auto; }
.j-linha button { pointer-events: auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--borda); background: var(--painel); font-size: 16px; }
.j-linha button.desligado { opacity: 0.45; text-decoration: line-through; }
#j-xp { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
#j-nivel { font-size: 13px; color: var(--luz); text-shadow: 0 1px 3px #000; min-width: 44px; white-space: nowrap; }
#j-horda, #j-mortes { white-space: nowrap; }
.j-barra { flex: 1; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.15); overflow: hidden; }
.j-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb347, var(--luz)); transition: width 0.2s; }
#j-aviso { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font: 900 clamp(30px, 6vh, 54px) var(--fonte); color: #fff; text-shadow: 0 0 20px rgba(229, 56, 59, 0.9), 0 3px 0 #000; pointer-events: none; opacity: 0; }
#j-aviso small { display: block; font-size: 0.42em; color: var(--luz); text-shadow: 0 2px 4px #000; margin-top: 6px; }
#j-aviso.mostra { animation: aviso 1.6s ease-out both; }
@keyframes aviso { 0% { opacity: 0; transform: scale(1.6); } 15% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
#j-painel { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 16px; background: rgba(5, 8, 16, 0.72); overflow-y: auto; }
#j-painel > * { margin-top: auto; margin-bottom: auto; }   /* centraliza, mas o quadro alto começa no topo (dá para rolar até o título) */
#j-painel:empty { display: none; }
.j-cartao { width: 100%; max-width: 440px; background: var(--painel); border: 1px solid var(--borda); border-radius: 20px; padding: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.j-cartao h2 { margin: 0 0 2px; font-size: 22px; font-weight: 900; word-break: break-word; }
.j-cartao h2 span { color: var(--luz); font-size: 16px; margin-left: 6px; white-space: nowrap; }
.j-cartao .j-barra { height: 10px; margin: 8px 0 2px; }
.j-cartao small { color: var(--apagado); font-size: 12px; }
.j-resumo { margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: rgba(229, 56, 59, 0.12); border: 1px solid rgba(229, 56, 59, 0.45); font-size: 15px; line-height: 1.5; }
.j-resumo b { color: var(--luz); }
.j-titulo { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--apagado); margin: 14px 0 6px; }
.j-melhorias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.j-melhorias button { border-radius: 12px; border: 1px solid var(--borda); background: rgba(255, 255, 255, 0.06); padding: 8px 4px; font-size: 13px; line-height: 1.3; }
.j-melhorias button b { display: block; font-size: 18px; color: var(--luz); }
.j-melhorias button:disabled { opacity: 0.5; cursor: default; }
.j-melhorias button.pode { border-color: var(--luz); background: rgba(255, 211, 107, 0.14); }
.j-armas { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.j-armas li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.j-armas li span { color: var(--apagado); }
.j-armas li.atual { color: var(--luz); font-weight: 800; }
.j-placar { font-size: 13px; color: var(--apagado); line-height: 1.5; margin: 12px 0; }
.j-placar b { color: var(--texto); }
.j-cartao .principal { margin-top: 4px; }

/* mapa das fases */
#j-mapa { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; background: #05070d; }
#j-mapa.some { display: none; }
#j-mapa-topo { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: var(--painel); border-bottom: 1px solid var(--borda); z-index: 2; }
#j-mapa-topo button { flex: none; border-radius: 12px; border: 1px solid var(--borda); background: rgba(255, 255, 255, 0.06); padding: 8px 12px; font-weight: 800; font-size: 14px; }
#j-mapa-melhorias.pode { border-color: var(--luz); background: rgba(255, 211, 107, 0.16); color: var(--luz); animation: pulsa-borda 1.4s ease-in-out infinite; }
@keyframes pulsa-borda { 50% { box-shadow: 0 0 14px rgba(255, 211, 107, 0.6); } }
.j-mapa-quem { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-mapa-quem span { color: var(--luz); font-weight: 800; }
.j-mapa-quem .j-barra { height: 6px; margin-top: 4px; }
#j-mapa-rolo { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#j-trilha { position: relative; width: 100%; max-width: 560px; margin: 0 auto; overflow: hidden; background: #0a0e18; }
.j-banda { position: absolute; left: 0; right: 0; background-size: cover; background-position: center 62%; }
.j-banda::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(5, 7, 13, 0.85), rgba(5, 7, 13, 0.35) 18%, rgba(5, 7, 13, 0.4) 82%, rgba(5, 7, 13, 0.85)); }
.j-banda-nome { position: absolute; z-index: 1; top: 18px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-weight: 900; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--luz); background: rgba(5, 8, 16, 0.85); border: 1px solid rgba(255, 211, 107, 0.4); border-radius: 999px; padding: 6px 14px; }
.j-embreve { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-weight: 800; font-size: 13px; color: var(--apagado); border: 1px dashed rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 8px 14px; }
.j-caminho { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }
.j-caminho polyline { fill: none; stroke: rgba(255, 211, 107, 0.6); stroke-width: 6; stroke-dasharray: 1 14; stroke-linecap: round; }
.j-caminho line.secreto { stroke: #b48cff; stroke-width: 5; stroke-dasharray: 1 10; stroke-linecap: round; }
.j-no { position: absolute; z-index: 2; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; font: 900 18px var(--fonte); border: 3px solid; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); }
.j-no.vencida { background: #2f6b3a; border-color: #8bd34a; color: #fff; }
.j-no.atual { background: var(--sangue); border-color: #fff; color: #fff; animation: no-atual 1.2s ease-in-out infinite; }
@keyframes no-atual { 50% { box-shadow: 0 0 0 10px rgba(229, 56, 59, 0.25), 0 4px 10px rgba(0, 0, 0, 0.6); } }
.j-no.trancada { background: rgba(20, 24, 36, 0.9); border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.3); }
.j-no.chefe { width: 62px; height: 62px; margin: -31px 0 0 -31px; font-size: 20px; }
.j-no.secreta { background: #4b2a7a; border-color: #c9a8ff; color: #fff; font-size: 22px; animation: secreta 2s ease-in-out infinite; }
.j-no.secreta.vencida { animation: none; background: #3b2a5a; }
@keyframes secreta { 50% { box-shadow: 0 0 22px rgba(180, 140, 255, 0.8); } }
.j-no.treme { animation: treme 0.35s; }
@keyframes treme { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.j-segredo { position: absolute; z-index: 2; width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0; border: 0; background: none; opacity: 0.5; cursor: default; }
.j-segredo svg { width: 100%; height: 100%; display: block; }
.j-segredo.mexe { animation: treme 0.3s; }
#j-eu { position: absolute; z-index: 3; height: 76px; width: auto; transform: translate(-50%, -100%); transition: left 0.9s ease-in-out, top 0.9s ease-in-out; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7)); }
#j-eu.andando { animation: anda 0.22s ease-in-out infinite alternate; }
@keyframes anda { from { margin-top: 0; } to { margin-top: -7px; } }
#j-mapa-cartao { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; max-width: 560px; margin: 0 auto; background: var(--painel); border: 1px solid var(--borda); border-bottom: 0; border-radius: 20px 20px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6); }
#j-mapa-cartao.some { display: none; }
#j-mapa-cartao h3 { margin: 0 0 4px; font-size: 22px; font-weight: 900; }
#j-mapa-cartao .sub { margin: 0 0 12px; }
#j-mapa-cartao .j-resumo { margin: 0 0 10px; }
#j-mapa-cartao .largo + .largo { margin-top: 8px; }
#j-painel { z-index: 5; }
.j-rank { list-style: none; margin: 0; padding: 0; max-height: 42vh; overflow-y: auto; }
.j-rank li { display: grid; grid-template-columns: 38px 1fr auto; gap: 8px; align-items: center; padding: 8px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 14px; }
.j-rank li > b:first-child { color: var(--apagado); text-align: right; }
.j-rank li > b:last-child { color: var(--luz); }
.j-rank li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-rank li small { display: block; color: var(--apagado); font-size: 12px; }
.j-rank li.eu { background: rgba(255, 211, 107, 0.12); border-radius: 8px; }
.j-rank li.eu span { color: var(--luz); font-weight: 800; }
#j-mapa-topo { flex-wrap: wrap; row-gap: 8px; }
#j-mapa-topo button { padding: 8px 10px; font-size: 13px; }
#j-mapa-topo .j-mapa-quem { flex: 1 1 calc(100% - 110px); }
#j-mapa-ranking, #j-mapa-loja, #j-mapa-melhorias { flex: 1 1 0; }
#j-mapa-topo .j-quebra { flex-basis: 100%; height: 0; }          /* Profissão e Missões ganham a linha delas */
#j-mapa-prof, #j-mapa-missoes { flex: 1 1 0; }
.moedas { color: #ffd36b; font-weight: 900; white-space: nowrap; }
.moedas::before { content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-right: 4px; vertical-align: -0.08em; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3b0, #f2b632 55%, #a8740f); box-shadow: inset 0 0 0 1.5px #7a5208; }
#j-mapa-loja { color: #ffd36b; }
#j-escudos { color: #7cc4ff; font-size: 18px; letter-spacing: 2px; }
#j-armas-barra { position: absolute; z-index: 2; right: 10px; bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; }
#jogo.no-painel #j-armas-barra { display: none; }
#j-armas-barra button { width: 58px; height: 58px; border-radius: 14px; border: 2px solid var(--borda); background: rgba(11, 17, 32, 0.85); padding: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 800; color: var(--texto); }
#j-armas-barra button img { max-width: 40px; max-height: 32px; }
#j-armas-barra button.on { border-color: var(--luz); background: rgba(255, 211, 107, 0.2); }
.j-loja { list-style: none; margin: 0; padding: 0; }
.j-loja li { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.j-loja .icone { width: 56px; height: 48px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--apagado); }
.j-loja .icone img { max-width: 52px; max-height: 44px; }
.j-loja b { display: block; font-size: 15px; }
.j-loja small { color: var(--apagado); font-size: 12.5px; }
.j-loja button { border-radius: 10px; padding: 8px 10px; font-weight: 800; font-size: 13px; border: 1px solid var(--borda); background: rgba(255, 255, 255, 0.06); white-space: nowrap; }
.j-loja button.compra { background: var(--luz); color: #1a1405; border-color: var(--luz); }
.j-loja button.compra .moedas { color: #1a1405; }
/* ouro: moeda paga, em barrinha (a moeda grátis é redonda) */
.ouro { color: #ffb84d; font-weight: 900; white-space: nowrap; }
.ouro::before { content: ""; display: inline-block; width: 1.05em; height: 0.62em; margin-right: 4px; vertical-align: 0.02em;
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); background: linear-gradient(#fff1b8, #ffb21e 55%, #b86e00); }
#j-mapa-ouro { margin-left: 4px; }
.j-loja .ouro-icone { background: radial-gradient(ellipse at 50% 80%, rgba(255, 178, 30, 0.35), rgba(255, 255, 255, 0.05) 70%); }
.j-loja .ouro-icone::before { content: ""; width: 34px; height: 20px; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  background: linear-gradient(#fff1b8, #ffb21e 55%, #b86e00); filter: drop-shadow(0 2px 0 #7a4700); }
.j-ouro-chamada { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 12px;
  border-radius: 12px; border: 1px solid rgba(255, 184, 77, 0.45); background: rgba(255, 184, 77, 0.08); }
.j-ouro-chamada small { display: block; color: var(--apagado); font-size: 12.5px; }
.j-teste { margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: rgba(90, 200, 255, 0.12); border: 1px dashed rgba(90, 200, 255, 0.6);
  color: #9fdcff; font-size: 12.5px; font-weight: 800; }
#j-painel .j-cartao a { color: var(--luz); font-weight: 700; }
/* bônus por repost */
.j-repost { display: block; width: 100%; margin: 10px 0 0; padding: 11px 12px; border-radius: 12px; border: 1px dashed rgba(255, 184, 77, 0.7);
  background: rgba(255, 184, 77, 0.08); color: #ffd9a0; font-weight: 800; font-size: 13.5px; text-align: center; cursor: pointer; }
.j-arquivo { display: block; margin: 10px 0 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--borda); background: rgba(255, 255, 255, 0.06);
  text-align: center; font-weight: 800; cursor: pointer; }
.j-arquivo input { display: none; }
.j-print-ver { display: block; max-width: 100%; max-height: 260px; margin: 0 auto 10px; border-radius: 10px; border: 1px solid var(--borda); }
.j-print-ver.some { display: none; }
.j-resumo.j-certo { background: rgba(139, 211, 74, 0.1); border-color: rgba(139, 211, 74, 0.5); }
#j-painel button.some { display: none; }
.j-pix-qr { display: block; width: min(220px, 60vw); margin: 10px auto; border-radius: 10px; background: #fff; padding: 8px; }
.j-loja button:disabled { opacity: 0.55; cursor: default; }
#j-aviso { z-index: 6; }

/* intro */
#intro { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6, 10, 20, 0.78); }
#intro.some { display: none; }
.cartaz { display: flex; align-items: flex-end; gap: 4px; max-width: 520px; background: var(--painel); border: 1px solid var(--borda); border-radius: 22px; padding: 22px 22px 22px 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.cartaz img { width: 128px; height: auto; flex: none; margin-bottom: -22px; }
.cartaz h1 { font-size: 24px; font-weight: 900; margin: 0 0 8px; line-height: 1.15; }
.cartaz p { color: var(--apagado); margin: 0 0 16px; font-size: 15px; line-height: 1.45; }
.cartaz button { display: block; width: 100%; margin-top: 8px; }
.cartaz button[hidden] { display: none; }

#rodape { position: fixed; z-index: 3; left: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); font-size: 11.5px; color: var(--apagado); text-shadow: 0 1px 3px #000; }
#rodape a { color: var(--apagado); }

@media (max-width: 600px) {
  #zoom { top: auto; transform: none; bottom: calc(92px + env(safe-area-inset-bottom)); }
  #zoom button { width: 38px; height: 38px; font-size: 18px; }
}
@media (max-width: 420px) {
  .cartaz img { width: 96px; }
  .cartaz h1 { font-size: 21px; }
  .lista { columns: 1; }
  #botoes button { padding: 9px 12px; font-size: 13px; }
}
@media (min-width: 900px) {
  #busca { left: 24px; right: auto; width: 420px; margin: 0; }
  #folha { left: 24px; right: auto; bottom: 24px; width: 420px; border-radius: 20px; border-bottom: 1px solid var(--borda); max-height: calc(100vh - 220px); }
  #folha.fechada { transform: translateX(calc(-100% - 40px)); }
}

/* caminho da casa: as 8 casas em fila e a obra da próxima (tijolos) */
.r-caminho { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; align-items: end; margin: 2px 0 8px; }
.r-caminho span { display: flex; align-items: flex-end; justify-content: center; height: 42px; padding: 3px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; }
.r-caminho img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.r-caminho .falta img { filter: brightness(0) invert(1) opacity(0.2); }
.r-caminho .atual { border-color: var(--luz); background: rgba(255, 211, 107, 0.16); }
.r-obra { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.r-obra b { color: var(--luz); }
.r-barra { height: 10px; margin: 0 0 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.r-barra i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #b8492a, #e9845a); transition: width 0.6s ease-out; }
.r-regra { font-size: 11.5px; margin: 0 0 6px; }
.r-saldo { font-size: 11.5px; margin: 6px 0 0; }
/* quadro da casa compacto: Enfeitar no alto, casa menor, tijolos lado a lado */
#r-cartao .r-vitrine { height: 24vh; max-height: 210px; margin: 6px 0 8px; }
.r-acoes-cartao { display: flex; gap: 8px; margin: 10px 0 6px; }
.r-acoes-cartao button { flex: 1; height: 46px; margin: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 15px; }
.r-tij { display: flex; gap: 8px; }
.r-tij button { flex: 1; min-width: 0; margin: 0; padding: 11px 6px; font-size: 13px; font-weight: 800; border-radius: 12px; }
/* na sua rua: Enfeitar e Evoluir sempre à mão */
#r-acoes { position: absolute; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 3; display: flex; gap: 8px; max-width: 536px; margin: 0 auto; }
#r-acoes.some { display: none; }
#r-acoes button { flex: 1; height: 50px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 15px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
#r-acoes svg, .r-acoes-cartao svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#r-cartao .principal .moedas { color: #1a1405; }
.r-festa { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--luz); background: rgba(255, 211, 107, 0.15); font-weight: 800; text-align: center; animation: r-festa 0.7s ease-out; }
.r-festa b { color: var(--luz); }
.r-nova img:first-child { animation: r-festa 0.7s ease-out; }
@keyframes r-festa { from { transform: scale(0.7); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } to { transform: scale(1); } }
.r-vitrine img:first-child { max-width: 74%; object-fit: contain; object-position: center bottom; }

/* ---------- profissões e a obra do muro ---------- */
.j-prof { margin: 8px 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 159, 58, 0.08); border: 1px solid rgba(255, 159, 58, 0.4); font-size: 14px; line-height: 1.35; }
.j-prof .ic { font-size: 18px; margin-right: 6px; }
.j-prof b { color: #ffd2a0; }
.j-prof .j-prof-missao { display: block; margin: 4px 0 6px; }
.j-prof .j-barra { margin: 0 0 8px; }
.j-prof small { display: block; margin-top: 4px; color: var(--apagado); font-size: 12px; }
.j-prof.pronta { border-color: var(--luz); background: rgba(255, 211, 107, 0.1); }
.j-prof .principal { margin-top: 2px; }
.j-prof-destino { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--apagado); }
.j-prof-destino select { flex: 1; min-width: 0; padding: 7px 8px; border-radius: 10px; border: 1px solid var(--borda); background: #0f1628; color: var(--texto); font: inherit; }
.j-profs { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 10px 0 12px; }
@media (min-width: 560px) { .j-profs { grid-template-columns: 1fr 1fr; } }
.j-profs button { display: flex; align-items: flex-start; gap: 10px; width: 100%; margin: 0; padding: 10px 12px; text-align: left; border-radius: 12px;
  border: 1px solid var(--borda); background: rgba(255, 255, 255, 0.05); color: var(--texto); cursor: pointer; }
.j-profs button.on { border-color: var(--luz); background: rgba(255, 211, 107, 0.12); }
.j-profs button:disabled { opacity: 0.45; cursor: default; }
.j-profs .ic { font-size: 26px; line-height: 1.1; }
.j-profs .tx b { display: block; font-size: 15px; }
.j-profs .tx small { display: block; margin-top: 2px; font-size: 12px; color: var(--apagado); font-weight: 600; line-height: 1.35; }
.j-profs .tx small.vant { color: #bfe3ff; }
.pessoa .tag .p-ic { font-style: normal; margin-right: 3px; }
button.v-obra { display: block; width: 100%; max-width: 330px; text-align: left; color: var(--texto); font-family: inherit; cursor: pointer; }
.v-obra .v-vaga { color: #ffb03a; font-weight: 800; }
.v-obra .v-obra-ver { float: right; margin-left: 8px; color: var(--luz); font-weight: 800; }
#obra-folha { position: fixed; inset: 0; z-index: 60; display: none; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.55); }
#obra-folha.aberta { display: flex; }
.obra-cartao { width: min(560px, 100%); max-height: 88vh; overflow: auto; padding: 18px 16px 16px; border-radius: 18px 18px 0 0; background: var(--painel);
  border: 1px solid var(--borda); color: var(--texto); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
@media (min-width: 700px) { #obra-folha { align-items: center; } .obra-cartao { border-radius: 18px; } }
.obra-cartao h2 { margin: 0 0 10px; font-size: 22px; }
.obra-cartao h2 small { color: var(--apagado); font-size: 14px; }
.obra-muro { position: relative; display: flex; align-items: flex-end; min-height: 44px; margin: 0 0 12px; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.05); }
.obra-muro img { display: block; width: 100%; height: auto; max-height: 180px; object-fit: cover; }
.obra-muro span { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 8px; background: rgba(5, 8, 16, 0.8); font-weight: 800; font-size: 13px; color: var(--luz); }
.obra-tit { margin: 12px 0 6px; font-size: 13px; font-weight: 800; color: var(--texto); }
.obra-tit b { color: var(--luz); }
.obra-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.obra-itens li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; column-gap: 6px; font-size: 13.5px; }
.obra-itens .ic { font-size: 17px; }
.obra-itens .q { font-variant-numeric: tabular-nums; color: var(--apagado); font-weight: 700; }
.obra-itens li.pronto .q { color: #8bd34a; }
.obra-itens .j-barra { grid-column: 2 / 4; height: 5px; }
.obra-itens li.pronto .j-barra i { background: #8bd34a; }
.obra-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.obra-chips span { padding: 5px 9px; border-radius: 10px; font-size: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--borda); }
.obra-chips span.ok { border-color: rgba(139, 211, 74, 0.6); }
.obra-chips span.ruim { border-color: rgba(255, 138, 141, 0.6); }
.obra-vagas { display: flex; flex-wrap: wrap; gap: 6px; }
.obra-vagas span { padding: 5px 10px; border-radius: 999px; background: rgba(255, 176, 58, 0.12); border: 1px solid rgba(255, 176, 58, 0.5); font-size: 13px; font-weight: 700; }
.obra-ataque { margin: 0 0 6px; padding: 9px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--borda); }
.obra-ataque.ok { border-color: rgba(139, 211, 74, 0.55); }
.obra-ataque.ruim { border-color: rgba(255, 138, 141, 0.6); background: rgba(229, 56, 59, 0.08); }
.obra-como { margin: 12px 0; font-size: 13px; color: var(--apagado); }
.obra-como summary { cursor: pointer; color: var(--texto); font-weight: 800; }
.obra-como ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.45; }
.v-obra .v-obra-img { float: left; width: 58px; height: 33px; margin: 0 8px 0 0; object-fit: cover; border-radius: 6px; border: 1px solid var(--borda); }
.v-obra::after { content: ""; display: block; clear: both; }
.v-obra .v-obra-img.futuro, .obra-muro.futuro img { opacity: 0.4; filter: grayscale(0.7); }
#j-mapa-prof { white-space: nowrap; }
#j-mapa-prof.pode { border-color: var(--luz); background: rgba(255, 211, 107, 0.16); color: var(--luz); animation: pulsa-borda 1.4s ease-in-out infinite; }
/* 5 botões + Defender: em celular estreito, os botões encolhem */
@media (max-width: 420px) { .c-barra { gap: 5px; } .c-ic { width: 48px; } #c-jogar.jogar { padding: 0 10px; font-size: 15px; } }
@media (max-width: 380px) { .c-ic { width: 44px; font-size: 9px; } #c-jogar.jogar svg { display: none; } }
.c-ic .c-prof-ic { font-style: normal; font-size: 20px; line-height: 22px; }
#j-mapa-missoes.pode { border-color: var(--luz); background: rgba(255, 211, 107, 0.16); color: var(--luz); animation: pulsa-borda 1.4s ease-in-out infinite; }
.j-missoes-todas .j-titulo { margin-top: 14px; }
/* Missão e Profissão: em pé, no canto esquerdo da cidade, entre o muro e o prédio (preso ao desenho) */
#c-lado { position: absolute; z-index: 3; top: 29%; left: max(8px, calc((100% - 100vw) / 2 + 8px)); display: flex; flex-direction: column; gap: 8px; }
#c-lado .c-ic { width: clamp(44px, 6.4vh, 52px); height: clamp(44px, 6.4vh, 52px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
.c-ic.pode { border-color: var(--luz); color: var(--luz); animation: pulsa-borda 1.4s ease-in-out infinite; }
/* arsenal novo: emoji no lugar do desenho que ainda não chegou; barra de armas rola se tiver muitas */
.j-loja .icone[data-emoji]:empty::before, #j-armas-barra .arma-ic[data-emoji]:empty::before { content: attr(data-emoji); font-size: 24px; line-height: 1; }
#j-armas-barra .arma-ic { display: flex; align-items: center; justify-content: center; min-height: 26px; }
#j-armas-barra { max-height: calc(100% - 190px); overflow-y: auto; scrollbar-width: none; }

/* ---------- sugestões da aba Melhorias (2026-11-05) ---------- */
/* o líder da cidade: a linha no topo da cena e a coroa em cima do boneco */
#c-lider { margin: 3px 0 0; font-size: 12.5px; line-height: 1.35; color: #fff3cf; text-shadow: 0 1px 4px #000; max-width: 330px; }
#c-lider.some { display: none; }
#c-lider b { color: var(--luz); }
.pessoa .coroa { position: absolute; left: 0; bottom: calc(var(--h) + 24px); transform: translateX(-50%); font-size: 22px; line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)); animation: coroa 2.4s ease-in-out infinite; pointer-events: none; }
.pessoa.fundo .coroa { bottom: calc(var(--h) + 4px); font-size: 16px; }
.pessoa.lider .tag { border-color: var(--luz); color: var(--luz); }
@keyframes coroa { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -3px); } }
/* chamar gente da cidade */
#c-chamar { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--borda); background: rgba(11, 17, 32, 0.85);
  color: var(--texto); font-size: 20px; line-height: 1; cursor: pointer; }
/* a meta de hoje, no espaço embaixo do mapa das hordas */
#j-meta { position: absolute; left: 10px; bottom: 8px; z-index: 4; max-width: calc(100% - 20px); pointer-events: none; }
#j-meta:empty { display: none; }
#j-meta button { pointer-events: auto; display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; text-align: left;
  border: 1px solid rgba(255, 211, 107, 0.55); background: rgba(14, 18, 32, 0.95); color: var(--texto); font: 600 12.5px var(--fonte); cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55); }
#j-meta .j-meta-ic { font-size: 17px; line-height: 1; }
#j-meta b { font-size: 13px; white-space: nowrap; }
#j-meta small { color: var(--apagado); white-space: nowrap; }
#j-meta i { font-style: normal; font-weight: 900; color: var(--luz); margin-left: 2px; }
/* o cartão da horda diz quanto ela vale (pode quebrar linha) */
#j-mapa-cartao .j-previa + .sub.j-vale { white-space: normal; }
/* loja: item trancado mostra o nível e o preço */
.j-loja button.trancado { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.j-loja button.trancado small { font-size: 11px; margin-top: 2px; }
/* entrar pelo site */
.e-campo { display: block; margin: 10px 0 2px; font-size: 13.5px; font-weight: 800; }
.e-campo input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 11px 12px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25); background: #0f1628; color: var(--texto); font: 600 16px var(--fonte); }
.e-campo input:focus { outline: none; border-color: var(--luz); }
.e-cidades { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; }
.e-cidades button { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--borda); background: rgba(255, 255, 255, 0.06); color: var(--texto); font: 600 14px var(--fonte); text-align: left; cursor: pointer; }
.e-cidades small { color: var(--apagado); font-size: 12px; white-space: nowrap; }
.e-cidades .vazio { color: var(--apagado); font-size: 13px; padding: 4px 2px; }
.e-link { display: block; text-align: center; text-decoration: none; margin-top: 8px; padding: 12px; border-radius: 12px; color: var(--texto);
  font-weight: 800; border: 1px solid var(--borda); background: rgba(255, 255, 255, 0.06); }
#sugestoes .vazio .e-abrir { margin-top: 8px; }

/* ---------- jogo mais limpo (2026-11-05) ---------- */
/* topo da cidade em duas partes: em cima o voltar, o nome, o rádio e o chamar; embaixo as informações na largura toda */
#c-topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 8px; row-gap: 1px; align-items: center; }
#c-topo .c-titulo { display: contents; }
#c-voltar { grid-row: 1; grid-column: 1; }
#c-cidade { grid-row: 1; grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#c-radio { grid-row: 1; grid-column: 3; margin-left: 0; }
#c-chamar { grid-row: 1; grid-column: 4; }
#c-topo .c-titulo > :not(h2) { grid-column: 1 / -1; }
#c-topo .c-titulo > p { font-size: 13px; line-height: 1.35; margin: 2px 0 0; }
#c-topo #c-obra { margin-top: 2px; }
#c-prox { font-size: 12px; }
/* cartões das hordas (antes, vitória e derrota): a faixa da missão só aparece quando tem prêmio para pegar ali;
   o resto fica na pílula Meta de hoje e em Missões */
#j-mapa-cartao [data-missao-lugar]:not(:has([data-missao])) { display: none; }
#j-mapa-cartao [data-prof-lugar]:not(:has([data-prof-entregar])) { display: none; }

/* ---------- entrar no mapa mais fácil (2026-11-05) ---------- */
#contagem { display: flex; align-items: center; gap: 8px; }
#contagem .entrar-mapa { margin-left: auto; flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--luz);
  background: rgba(12, 16, 28, 0.88); color: var(--luz); font-family: inherit; font-weight: 800; font-size: 12.5px; text-shadow: none; cursor: pointer; }
#sugestoes .vazio.quase { padding-bottom: 2px; font-size: 12.5px; }