:root {
  --preto: #16131a; --creme: #f3ead6; --amarelo: #f4cf5c; --brasa: #ff8a4a; --osso: #e0d4b8;
  --vermelho: #8a1e22; --ouro: #b08a3a; --pedra: #4a4440;
  --fonte: 'Pixelify Sans', 'Courier New', monospace;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--preto); color: var(--creme); font-family: var(--fonte); overscroll-behavior: none; }
#mapa { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
#vinheta { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 62% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }

#topo { position: fixed; top: 0; left: 0; right: 0; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; text-align: center; pointer-events: none;
  background: linear-gradient(rgba(22,19,26,.9), rgba(22,19,26,0)); }
#topo .titulo { font-size: 26px; letter-spacing: 1px; color: var(--osso); text-shadow: 3px 3px 0 #000; line-height: 1; }
#topo .titulo span { color: var(--brasa); }
#topo .sub { margin-top: 4px; font-size: 14px; color: var(--amarelo); text-shadow: 2px 2px 0 #000; }

#dica { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); text-align: center; font-size: 12px; color: rgba(243,234,214,.75); text-shadow: 2px 2px 0 #000; pointer-events: none; transition: opacity 1s; }
#dica.some { opacity: 0; }

#botoes { position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; gap: 10px; justify-content: center; padding: 0 16px; }
.pix { font-family: var(--fonte); font-size: 15px; letter-spacing: .5px; color: var(--amarelo); background: rgba(22,19,26,.88); border: 3px solid var(--ouro); padding: 9px 14px;
  box-shadow: 4px 4px 0 #000; cursor: pointer; }
.pix:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }

#cartao, #lista { position: fixed; left: 0; right: 0; bottom: 0; max-height: 62vh; display: flex; flex-direction: column; background: rgba(22,19,26,.96); border-top: 4px solid var(--ouro);
  box-shadow: 0 -6px 0 rgba(0,0,0,.5); padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); transform: translateY(0); transition: transform .22s ease-out; z-index: 5; }
#cartao.oculto, #lista.oculto { transform: translateY(110%); pointer-events: none; }
.puxador { width: 44px; height: 4px; background: var(--ouro); margin: 0 auto 10px; }
.cab { display: flex; align-items: center; gap: 12px; }
#cartao-sprite { width: 66px; height: 78px; image-rendering: pixelated; background: #2a2430; border: 3px solid var(--pedra); flex: none; }
.cab-txt { flex: 1; min-width: 0; }
.nome { font-size: 22px; color: var(--amarelo); text-shadow: 2px 2px 0 #000; line-height: 1.05; }
.tipo { font-size: 13px; color: var(--osso); opacity: .85; margin-top: 3px; }
#c-fechar, #l-fechar { font-family: var(--fonte); font-size: 26px; color: var(--creme); background: none; border: 0; width: 40px; height: 40px; cursor: pointer; flex: none; }
.corpo { margin-top: 10px; font-size: 15px; line-height: 1.35; overflow: auto; }
.corpo p { margin: 0 0 8px; }
.corpo .rot { color: var(--brasa); }
.corpo .ig { color: #7ac0ff; text-decoration: none; }
.corpo .misterio { color: #ff5a5a; }
.cta { display: block; margin-top: 10px; text-align: center; font-size: 17px; color: var(--preto); background: var(--amarelo); border: 3px solid #000; padding: 10px; text-decoration: none; box-shadow: 4px 4px 0 #000; }
.cta.oculto { display: none; }

.morador { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(176,138,58,.3); cursor: pointer; }
.morador canvas { width: 36px; height: 42px; image-rendering: pixelated; background: #2a2430; flex: none; }
.morador .m-nome { color: var(--amarelo); font-size: 17px; }
.morador .m-papel { color: var(--osso); font-size: 13px; opacity: .85; }
.morador.dormindo .m-papel::after { content: ' · dormindo'; color: #7ac0ff; }

#erro { position: fixed; top: 40%; left: 16px; right: 16px; text-align: center; color: #ff5a5a; text-shadow: 2px 2px 0 #000; font-size: 16px; }

.secao { margin: 14px 0 4px; font-size: 13px; color: var(--brasa); letter-spacing: .5px; border-top: 2px solid var(--ouro); padding-top: 10px; }
.morador.chegando { opacity: .8; }
.morador.chegando .m-papel::after { content: ' · em breve'; color: var(--brasa); }