/* Simuleitor: história (faísca, melhorias, cartas, capítulos, cenas). Mesma linguagem do jogo: pixel, contorno preto, sombra dura. */
.h-linha { display: flex; align-items: center; gap: 6px; padding: 0 8px 8px; margin-top: -4px; }
.h-linha[hidden] { display: none; }
.h-linha.nasce { animation: hnasce .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes hnasce { from { transform: scale(.6); opacity: 0; } }
.h-fx { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 3px 8px 3px 4px; background: rgba(20,24,33,.92); border: 2px solid #000; border-radius: 999px; box-shadow: 0 3px 0 #000; }
.h-fx img { width: 22px; height: 22px; }
.h-fx b { font: 19px/1 var(--num); color: var(--ouro); white-space: nowrap; }
.h-fx small { font: 11px/1 var(--pixel); color: #E2E6EF; white-space: nowrap; }
.h-jan { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px/1 var(--pixel); padding: 5px 7px; color: #E2E6EF; background: #262B3B; border: 2px solid #000; border-radius: 999px; }
.h-jan.aberta { color: var(--tinta); background: var(--ceu); }
.h-jan[hidden] { display: none; }
.h-up { margin-left: auto; flex: none; display: flex; align-items: center; gap: 4px; padding: 5px 9px 5px 5px; font: 13px/1 var(--pixel); color: #fff; background: #262B3B; border: 2px solid #000; border-radius: 10px; box-shadow: 0 3px 0 #000; }
.h-up img { width: 20px; height: 20px; }
.h-up.pode { color: var(--tinta); background: var(--ouro); animation: hpulsa 1s ease-in-out infinite; }
.h-up.afunda, .h-fx.afunda { transform: translateY(3px); box-shadow: 0 0 0 #000; }
@keyframes hpulsa { 50% { box-shadow: 0 3px 0 #000, 0 0 0 4px rgba(255,210,31,.45); } }

/* retrato que espera na borda: alguém quer falar */
.h-retrato { position: absolute; right: 8px; top: 46%; z-index: 24; width: 58px; padding: 4px 4px 2px; background: #FFFDF5; border: 3px solid #000; border-radius: 12px; box-shadow: 0 4px 0 #000; animation: hchama 1.2s ease-in-out infinite; }
.h-retrato[hidden] { display: none; }
.h-retrato.chega { animation: hchega .45s cubic-bezier(.2,1.5,.4,1), hchama 1.2s ease-in-out .45s infinite; }
.h-ret-img canvas { width: 44px; height: 54px; display: block; margin: 0 auto; }
.h-ret-ex { position: absolute; top: -12px; left: -10px; width: 26px; height: 26px; display: grid; place-items: center; font: 18px/1 var(--pixel); color: var(--tinta); background: var(--ouro); border: 2px solid #000; border-radius: 50%; }
.h-retrato.afunda { transform: translateY(3px); }
@keyframes hchama { 50% { transform: translateX(-4px) rotate(-3deg); } }
@keyframes hchega { from { transform: translateX(90px); } }

/* carta de escolha */
.h-carta { position: absolute; inset: 0; z-index: 42; display: flex; align-items: flex-end; justify-content: center; padding: 0 8px calc(14px + var(--sb)); background: rgba(8,9,14,.6); animation: fade .2s; }
.h-cbox { width: min(420px, 100%); display: grid; gap: 10px; padding: 12px; background: #FFFDF5; color: var(--tinta); border: 3px solid #000; border-radius: 16px; box-shadow: 0 6px 0 var(--ouro), 0 10px 0 #000; animation: folha .3s cubic-bezier(.2,1.2,.4,1); }
.h-quem { display: flex; gap: 10px; align-items: center; }
.h-quem canvas { width: 58px; height: 71px; background: #262B3B; border: 3px solid #000; border-radius: 10px; flex: none; }
.h-nome b { display: block; font: 15px/1.2 var(--pixel); }
.h-laco { display: flex; gap: 2px; margin-top: 4px; }
.h-laco img { width: 16px; height: 16px; }
.h-laco img.vazio { filter: grayscale(1) brightness(1.6); opacity: .45; }
.h-selo { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; padding: 6px 8px; font: 12px/1.2 var(--pixel); color: #fff; background: #7C3AED; border: 2px solid #000; border-radius: 8px; }
.h-selo b { color: var(--ouro); font-weight: 400; }
.h-fala { margin: 0; font: 600 18px/1.3 var(--texto); }
.h-bts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.h-op { display: grid; gap: 6px; justify-items: center; padding: 10px 6px 8px; color: #fff; background: var(--tinta); border: 3px solid #000; border-radius: 12px; box-shadow: 0 5px 0 #000; }
.h-op-t { display: flex; align-items: center; gap: 4px; font: 15px/1.1 var(--pixel); text-align: center; }
.h-op-t img { width: 24px; height: 24px; }
.h-ef { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.h-ef i { display: flex; align-items: center; }
.h-ef img { width: 18px; height: 18px; }
.h-custo { font: 12px/1 var(--pixel); color: var(--vermelho2); }
.h-falta { font: 10px/1 var(--pixel); color: var(--vermelho2); }
.h-op:disabled { opacity: .55; }
.h-op.afunda { transform: translateY(4px); box-shadow: 0 1px 0 #000; }

/* melhorias */
.h-saldo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.h-saldo img { width: 28px; height: 28px; }
.h-saldo b { font: 30px/1 var(--num); color: var(--ouro); }
.h-saldo small { font: 12px/1.35 var(--pixel); color: #C9CFDD; }
.h-ir-evento { position: absolute; right: 8px; bottom: calc(186px + var(--sb)); z-index: 28; width: auto; min-height: 44px; max-width: calc(100% - 16px); margin: 0; padding: 8px 12px; font: 12px/1.2 var(--pixel); }
#jogo:has(.h-cena, .h-festa) .h-ir-evento { display: none; }
.h-lista { display: grid; gap: 8px; }
.h-mel { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; padding: 8px; background: #1F2432; border: 2px solid #000; border-radius: 12px; }
.h-mel > img { width: 32px; height: 32px; }
.h-mel-i b { display: block; font: 15px/1.15 var(--pixel); color: #fff; }
.h-mel-i small { display: block; margin-top: 3px; font: 12px/1.25 var(--pixel); color: #AEB6C6; }
.h-preco { min-width: 84px; min-height: 44px; padding: 6px 8px; font: 16px/1 var(--num); color: #9AA3B8; background: #2A3142; border: 2px solid #000; border-radius: 10px; box-shadow: 0 3px 0 #000; }
.h-mel.pode .h-preco { color: var(--tinta); background: var(--ouro); }
.h-mel.trav { opacity: .55; }
.h-mel.festa { animation: hfesta .5s; }
.h-marco { border-color: var(--ouro); }
@keyframes hfesta { 30% { transform: scale(1.04); background: #2D3A20; } }
.h-nota { margin: 12px 0 0; font: 13px/1.35 var(--pixel); color: #AEB6C6; }
.h-anos { margin: -4px 0 10px; font: 13px/1.2 var(--pixel); color: #AEB6C6; }
.h-obj { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.h-obj li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 8px; font: 14px/1.2 var(--pixel); background: #1F2432; border: 2px solid #000; border-radius: 10px; }
.h-obj li img { width: 24px; height: 24px; }
.h-obj li b { font: 15px/1 var(--num); color: var(--ouro); font-weight: 400; }
.h-obj li.feito span { color: var(--verde2); }

/* cartão "NA VIDA REAL" */
.h-fato { display: grid; gap: 8px; padding: 14px; background: #FFFDF5; color: var(--tinta); border: 3px solid #000; border-radius: 14px; box-shadow: 0 5px 0 var(--ceu); }
.h-fato b { font: 15px/1 var(--pixel); color: #1D4ED8; }
.h-fato p { margin: 0; font: 600 17px/1.35 var(--texto); }
.h-fato small { font: 12px/1 var(--pixel); color: #5B6478; }

/* volta */
.fora-big { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 2px; font: 40px/1 var(--num); color: var(--ouro); animation: hnasce .5s cubic-bezier(.2,1.5,.4,1); }
.fora-big img { width: 40px; height: 40px; }
.fora-sub { margin: 0 0 8px; text-align: center; font: 13px/1.2 var(--pixel); color: #C9CFDD; }
.h-fora-carta { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px; background: #FFFDF5; color: var(--tinta); border: 3px solid #000; border-radius: 12px; font: 15px/1.2 var(--pixel); }
.h-fora-carta canvas { width: 40px; height: 49px; background: #262B3B; border: 2px solid #000; border-radius: 8px; }

/* cena em pixel: faixas de cinema, texto letra a letra */
.h-cena { position: absolute; inset: 0; z-index: 70; overflow: hidden; }
.h-cena-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-faixa { position: absolute; left: 0; right: 0; height: 12%; background: #000; transition: transform .6s cubic-bezier(.3,.8,.3,1); z-index: 2; }
.h-faixa.cima { top: 0; transform: translateY(-100%); }
.h-faixa.baixo { bottom: 0; transform: translateY(100%); }
.h-cena.entra .h-faixa { transform: none; }
.h-cena.sai .h-faixa.cima { transform: translateY(-100%); }
.h-cena.sai .h-faixa.baixo { transform: translateY(100%); }
.h-cena.treme { animation: treme .4s; }
.h-ccartao { position: absolute; left: 50%; top: 22%; z-index: 3; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); padding: 8px 14px; font: clamp(16px, 5vw, 22px)/1.1 var(--pixel); color: var(--tinta); background: var(--ouro); border: 3px solid #000; border-radius: 10px; box-shadow: 0 5px 0 #000; text-align: center; }
.h-ccartao[hidden] { display: none; }
.h-ccartao.entra { animation: hnasce .5s cubic-bezier(.2,1.5,.4,1); }
.h-cfala { position: absolute; left: 10px; right: 10px; bottom: calc(12% + 10px); z-index: 3; display: flex; gap: 10px; align-items: center; padding: 10px; background: rgba(5,6,10,.9); border: 3px solid #fff; border-radius: 12px; }
.h-cfala[hidden] { display: none; }
.h-cfala-r canvas { display: block; width: 52px; height: 64px; background: #262B3B; border: 3px solid var(--ouro); border-radius: 10px; }
.h-cfala-r[hidden] { display: none; }
.h-cfala-n { display: block; font: 11px/1 var(--pixel); color: var(--ouro); font-weight: 400; margin-bottom: 4px; }
.h-cfala-t { min-height: 2.4em; font: clamp(17px, 5.4vw, 22px)/1.2 var(--pixel); color: #fff; }
.h-cfala.narra { justify-content: center; text-align: center; border-color: var(--ouro); }
.h-pular { position: absolute; left: 10px; top: calc(12% + 8px + var(--st)); z-index: 4; display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 10px; font: 13px/1 var(--pixel); color: #fff; background: rgba(20,24,33,.8); border: 2px solid #000; border-radius: 10px; }
.h-pular img { width: 22px; height: 22px; }
.h-cflash { position: absolute; inset: 0; z-index: 5; opacity: 0; pointer-events: none; }
.h-cflash.vai { animation: hflash .35s ease-out; }
@keyframes hflash { from { opacity: .9; } to { opacity: 0; } }
.h-toque { position: absolute; right: 10px; bottom: -14px; padding: 3px 7px; font: 11px/1 var(--pixel); color: var(--tinta); background: var(--ouro); border: 2px solid #000; border-radius: 6px; opacity: 0; transition: opacity .2s; }
.h-cena.toque .h-toque { opacity: 1; animation: hpulsa 1s ease-in-out infinite; }
/* idle: preço no poder, poder caro, carga dourada */
.pd .h-pp { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); display: flex; align-items: center; gap: 1px; padding: 1px 4px 1px 2px; background: var(--ouro); color: var(--tinta); border: 2px solid #000; border-radius: 6px; font: 11px/1 var(--num); white-space: nowrap; pointer-events: none; z-index: 2; }
.pd .h-pp img { width: 12px; height: 12px; }
.pd.h-caro .h-pp { background: #3A4056; color: #C9CFDD; }
.pd.h-caro .circ { filter: saturate(.45) brightness(.8); }
.pd.h-caro-treme { animation: treme .3s; }
.h-bonus { position: absolute; left: 0; top: 0; z-index: 23; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; background: radial-gradient(circle, #FFF6B0 0 30%, #FFD21F 31% 62%, #FF9D0A 63%); border: 3px solid #000; border-radius: 50%; box-shadow: 0 4px 0 #000, 0 0 0 6px rgba(255,210,31,.35); animation: hbonus .9s ease-in-out infinite; }
.h-bonus img { width: 30px; height: 30px; }
.h-bonus.some { opacity: 0; transition: opacity .35s; }
@keyframes hbonus { 50% { margin-top: -6px; box-shadow: 0 10px 0 rgba(0,0,0,.6), 0 0 0 10px rgba(255,210,31,.25); } }
.h-prod { display: grid; gap: 4px; margin: 0 0 12px; padding: 8px; background: #1A1E2B; border: 2px solid #000; border-radius: 12px; }
.h-prod-t { font: 13px/1 var(--pixel); color: var(--ouro); font-weight: 400; margin-bottom: 2px; }
.h-prod-l { display: grid; grid-template-columns: 16px 1fr auto; column-gap: 6px; align-items: center; font: 12px/1.2 var(--pixel); color: #E2E6EF; }
.h-prod-l img { width: 16px; height: 16px; grid-row: span 2; }
.h-prod-l b { font: 13px/1 var(--num); color: var(--verde2); font-weight: 400; }
.h-prod-l small { grid-column: 2 / 4; font: 10px/1 var(--pixel); color: #8E97A8; }
.h-epi { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.h-epi li { padding: 8px 10px; font: 600 15px/1.3 var(--texto); color: var(--tinta); background: #FFFDF5; border: 2px solid #000; border-radius: 10px; }
.h-fato-faixa { position: absolute; left: 10px; right: 10px; top: calc(150px + var(--st)); z-index: 26; text-align: left; animation: hnasce .45s cubic-bezier(.2,1.5,.4,1); }
.h-fato-faixa.some { opacity: 0; transition: opacity .45s; }
.h-fato-faixa p { font-size: 14px; line-height: 1.3; }
/* cartão discreto (sobra da m5): mais baixo, mais estreito e some sozinho */
.h-fato-faixa { gap: 4px; padding: 8px 10px; left: auto; right: 8px; width: min(340px, calc(100% - 16px)); border-width: 2px; box-shadow: 0 3px 0 var(--ceu); }
.h-fato-faixa b { font-size: 12px; }
.h-fato-faixa small { font-size: 10px; }
.h-bonus[hidden] { display: none; }
.h-prod-bonus b { color: var(--ouro); }
.h-regra { display: grid; gap: 4px; text-align: left; padding: 10px 12px; color: #fff; background: #1F2432; border: 3px solid #000; border-radius: 12px; box-shadow: 0 4px 0 #000; }
.h-regra b { font: 15px/1.15 var(--pixel); color: var(--ouro); font-weight: 400; }
.h-regra small { font: 600 14px/1.3 var(--texto); color: #E2E6EF; }
.h-regra i { font: 11px/1 var(--pixel); font-style: normal; color: var(--verde2); }
.h-regra.sel { border-color: var(--ouro); background: #2D2A16; }
.b-ouro:disabled { opacity: .5; }
.b-ouro.h-alerta { background: #F87171; }
.h-era-bt { margin: 0 0 10px; }
.h-setor-nome { margin: 0 0 6px; font: 24px/1.1 var(--pixel); color: #fff; }
.h-setor-vant { margin: 0 0 8px; padding: 6px 10px; font: 15px/1.1 var(--pixel); color: var(--tinta); background: var(--verde2); border: 2px solid #000; border-radius: 8px; width: max-content; max-width: 100%; }
.h-setor-trava { margin: 8px 0 0; font: 15px/1.2 var(--pixel); color: var(--ouro); }
.h-bmapa { position: absolute; left: 8px; top: 46%; z-index: 24; display: grid; justify-items: center; gap: 2px; padding: 6px 6px 4px; font: 10px/1 var(--pixel); color: #fff; background: rgba(20,24,33,.92); border: 2px solid #000; border-radius: 12px; box-shadow: 0 3px 0 #000; }
.h-bmapa[hidden] { display: none; }
.h-bmapa img { width: 28px; height: 28px; }
.h-mapa { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; padding: calc(10px + var(--st)) 10px calc(10px + var(--sb)); background: rgba(8,9,14,.88); animation: fade .2s; }
.h-mapa-box { display: grid; gap: 8px; justify-items: center; max-height: 100%; }
.h-mapa-t { font: 13px/1.1 var(--pixel); color: var(--ouro); font-weight: 400; }
.h-mapa-cv { max-width: calc(100vw - 20px); max-height: calc(100vh - 120px); width: auto; height: auto; border: 3px solid #000; border-radius: 8px; box-shadow: 0 4px 0 #000; cursor: pointer; }
.h-alerta-t { color: var(--vermelho2) !important; }
.h-terra { width: 100%; margin-top: 10px; text-align: left; color: #fff; border-color: var(--ouro); }
.h-terra-p { display: grid; place-items: center; color: var(--tinta); background: var(--ouro); }
.h-mapa-w { position: relative; display: inline-block; }
.h-mapa-r { position: absolute; transform: translate(-50%, -50%); display: grid; gap: 2px; justify-items: center; padding: 4px 6px; max-width: 32%; text-align: center; background: rgba(20,24,33,.92); border: 2px solid #000; border-radius: 8px; pointer-events: none; }
.h-mapa-r b { font: 10px/1.1 var(--pixel); color: #fff; font-weight: 400; }
.h-mapa-r span { font: 10px/1 var(--pixel); color: var(--ouro); }
.h-mapa-r i { font: 9px/1.1 var(--pixel); font-style: normal; color: var(--verde2); }
.h-mapa-r.pode { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(255,210,31,.5); animation: hpulsa 1s ease-in-out infinite; }
.h-ef i { gap: 2px; }
.h-ef-t { font: 10px/1 var(--pixel); }
.h-ef-t.sobe { color: var(--verde2); }
.h-ef-t.desce { color: var(--vermelho2); }
.vel-menu { position: absolute; right: 54px; top: calc(52px + var(--st)); z-index: 50; display: flex; gap: 6px; padding: 6px; background: var(--tinta); border: 3px solid #000; border-radius: 12px; box-shadow: 0 4px 0 #000; }
.vel-op { min-width: 52px; min-height: 44px; font: 16px/1 var(--num); color: #fff; background: #262B3B; border: 2px solid #000; border-radius: 10px; }
.vel-op.sel { color: var(--tinta); background: var(--ouro); }
.loja-de { margin: 0 0 10px; padding: 8px 10px; font: 600 15px/1.3 var(--texto); color: var(--tinta); background: var(--ouro); border: 2px solid #000; border-radius: 10px; }
.h-depois { justify-self: center; padding: 6px 12px; font: 12px/1 var(--pixel); color: #5B6478; background: none; border: 0; text-decoration: underline; }
.h-mel { min-height: 62px; }
.h-mel-i small { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#mais { pointer-events: auto !important; cursor: pointer; }
.h-festa { align-items: center; z-index: 44; }
.h-festa-box { text-align: center; display: grid; gap: 6px; justify-items: center; padding: 18px 16px; }
.h-festa-pre { font: 14px/1 var(--pixel); color: #B07A00; letter-spacing: 1px; }
.h-festa-nome { font: 22px/1.1 var(--pixel); color: #141821; }
.h-festa-premio { font: 26px/1 var(--num); color: #E0A800; margin-top: 6px; text-shadow: 0 2px 0 #000; }
.h-festa-sub { font: 12px/1.3 var(--pixel); color: #5B6478; }
.h-festa-corte { color: #B8452F; }
.h-festa-ok { margin-top: 10px; min-width: 180px; }
.h-ganho { font: 12px/1 var(--num); color: #7CE07C; }

/* ---------- progressão (js/progresso.js, 09/11) ---------- */
.h-mel-grupo { margin: 10px 0 4px; font: 12px/1 var(--pixel); color: #FFD21F; letter-spacing: .06em; }
.h-mel-resto { margin: 6px 0 0; font: 11px/1.3 var(--pixel); color: #8A93A8; text-align: center; }
.h-mel-resto:empty { display: none; }
/* compra em lote */
.p-lote { pointer-events: auto; margin-left: auto; min-width: 46px; height: 30px; padding: 0 8px; border: 2px solid #000; border-radius: 6px; background: #1C2230; color: #C9CFDD; font: 14px/1 var(--pixel); box-shadow: 0 3px 0 #000; }
.p-lote.ligado { background: #FFD21F; color: #141821; }
.p-lote.pula { animation: p-pula .3s ease-out; }
@keyframes p-pula { 40% { transform: scale(1.22); } }
/* barrinha de meta nos contadores */
.cont.p-com-meta { position: relative; padding-bottom: 12px; }
.p-cm { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 8px; border: 1px solid #000; background: #0C0E15; border-radius: 2px; overflow: hidden; }
.p-cm > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: repeating-linear-gradient(90deg, #4ADE80 0 6px, #16A34A 6px 7px); transition: width .4s steps(8); }
.p-cm.cheia > i { background: repeating-linear-gradient(90deg, #FFD21F 0 6px, #F59E0B 6px 7px); animation: p-cheia .6s steps(2) infinite; }
@keyframes p-cheia { 50% { filter: brightness(1.35); } }
.p-cm > em { position: absolute; right: 2px; top: -1px; font: 8px/10px var(--pixel); font-style: normal; color: #fff; text-shadow: 1px 1px 0 #000; }
.cont.p-meta-ok { animation: p-meta-ok .7s ease-out; }
@keyframes p-meta-ok { 25% { transform: scale(1.15); filter: brightness(1.6); } }
/* cartaz de festa (evolução, meta, bairro) */
.p-cartaz { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; pointer-events: none; animation: p-entra .32s cubic-bezier(.2,1.5,.4,1) both; }
.p-cartaz.sai { animation: p-sai .36s ease-in both; }
@keyframes p-entra { from { opacity: 0; transform: scale(.5); } }
@keyframes p-sai { to { opacity: 0; transform: scale(1.12); } }
.p-raios { position: absolute; width: 520px; height: 520px; border-radius: 50%; opacity: .5;
  background: repeating-conic-gradient(from 0deg, var(--c1) 0 10deg, transparent 10deg 30deg); animation: p-gira 6s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); }
.p-meta .p-raios { width: 380px; height: 380px; opacity: .35; }
@keyframes p-gira { to { transform: rotate(360deg); } }
.p-caixa { position: relative; max-width: min(330px, 88vw); padding: 14px 16px 12px; text-align: center; background: #141821; border: 3px solid #000; box-shadow: 0 0 0 3px var(--c1), 0 7px 0 #000; border-radius: 8px; }
.p-ico { display: flex; justify-content: center; margin: -46px 0 6px; }
.p-ico img { width: 64px; height: 64px; padding: 6px; background: #0C0E15; border: 3px solid #000; box-shadow: 0 0 0 3px var(--c1); border-radius: 8px; animation: p-ico 1s ease-in-out infinite; }
@keyframes p-ico { 50% { transform: translateY(-4px) rotate(-4deg); } }
.p-faixa { display: inline-block; margin-bottom: 6px; padding: 3px 8px; background: var(--c1); color: #141821; font: 12px/1 var(--pixel); border: 2px solid #000; }
.p-tit { display: block; font: 20px/1.15 var(--pixel); color: var(--c1); text-shadow: 0 2px 0 #000; }
.p-sub { display: block; margin-top: 6px; font: 11px/1.35 var(--pixel); color: #E6E9F2; }
.p-estrelas { margin-top: 6px; font: 14px/1 var(--pixel); letter-spacing: 2px; color: #3A4258; }
.p-estrelas i { font-style: normal; } .p-estrelas i.on { color: var(--c1); text-shadow: 0 2px 0 #000; }
.p-meta .p-caixa { margin-top: -12vh; } .p-meta .p-ico { margin-top: -40px; } .p-meta .p-ico img { width: 48px; height: 48px; }
/* moedas que voam até o saldo */
.p-moeda { position: absolute; left: 0; top: 0; z-index: 41; width: 10px; height: 10px; pointer-events: none; background: #FFD21F; border: 2px solid #000; border-radius: 50%; box-shadow: inset -2px -2px 0 #F59E0B; }
.h-fx.p-ganha { animation: p-ganha .45s ease-out; }
@keyframes p-ganha { 35% { transform: scale(1.18); filter: brightness(1.5); } }
/* metas */
.p-metas-top { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 10px; }
.p-metas-top b { font: 22px/1 var(--pixel); color: #FFD21F; } .p-metas-top small { font: 11px/1.3 var(--pixel); color: #C9CFDD; }
.p-meta-l { display: flex; gap: 10px; align-items: center; padding: 8px; margin-bottom: 6px; background: #1C2230; border: 2px solid #000; border-radius: 6px; }
.p-meta-l.foco { box-shadow: 0 0 0 2px #FFD21F; }
.p-meta-i { flex: 1; min-width: 0; } .p-meta-i b { display: block; font: 14px/1.1 var(--pixel); color: #fff; } .p-meta-i small { display: block; margin-top: 3px; font: 10px/1.35 var(--pixel); color: #AAB2C5; }
.p-meta-est { display: block; margin-top: 2px; font: 13px/1 var(--pixel); color: #3A4258; letter-spacing: 1px; } .p-meta-est i { font-style: normal; } .p-meta-est i.on { color: #FFD21F; }
/* inauguração e festa do bairro */
.p-inaug { position: absolute; z-index: 12; left: 50%; top: calc(var(--st) + 128px); transform: translateX(-50%); max-width: 92vw; padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #FFD21F; color: #141821; border: 2px solid #000; border-radius: 6px; box-shadow: 0 3px 0 #000; font: 11px/1.2 var(--pixel); pointer-events: auto; animation: p-pisca-b 1.4s steps(2) infinite; }
.p-festa-b { background: #F472B6; pointer-events: none; animation: none; }
@keyframes p-pisca-b { 50% { filter: brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { .p-raios, .p-ico img, .p-cm.cheia > i, .p-inaug { animation: none; } }
/* rodada p1 (09/11): uma festa por vez, metas à vista, evolução na barra, melhorias claras */
#jogo.p-festa #aviso, #jogo.p-festa #conquista { opacity: 0 !important; transition: opacity .15s; }
#contadores.p-pulsa .cont.p-com-meta { animation: p-pulsa 1s ease-in-out infinite; }
@keyframes p-pulsa { 50% { box-shadow: 0 0 0 3px #FFD21F; } }
.pd { position: relative; }
.p-evb { position: absolute; left: 50%; bottom: 17px; transform: translateX(-50%); width: 46px; height: 7px; border: 1px solid #000; background: #0C0E15; border-radius: 2px; overflow: hidden; pointer-events: none; }
.p-evb > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ev, #FFD21F); transition: width .4s steps(6); }
.p-evb > em { position: absolute; inset: 0; font: 7px/7px var(--pixel); font-style: normal; color: #fff; text-align: center; text-shadow: 1px 1px 0 #000; }
.h-mel.feita .h-preco { background: #16A34A !important; color: #fff !important; opacity: 1 !important; }
.h-mel.trav { opacity: .55; } .h-mel.trav .h-preco::before { content: '🔒 '; }
#folha[data-nome="melhorias"] .h-saldo { position: sticky; top: -12px; z-index: 2; background: #141821; box-shadow: 0 6px 8px rgba(0,0,0,.45); }
/* ---------- fase 2: central (js/equipe.js) ---------- */
.p-hub { position: absolute; left: 8px; top: calc(46% + 66px); z-index: 24; display: grid; justify-items: center; gap: 2px; padding: 6px 4px 4px; min-width: 52px; font: 9px/1 var(--pixel); color: #fff; background: rgba(20,24,33,.92); border: 2px solid #000; border-radius: 12px; box-shadow: 0 3px 0 #000; }
.p-hub[hidden] { display: none; } .p-hub img { width: 28px; height: 28px; }
.p-hub .p-hub-bdg { display: none; position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; line-height: 18px; text-align: center; border-radius: 50%; background: #FFD21F; color: #141821; border: 2px solid #000; font: 12px/16px var(--pixel); }
.p-hub.alerta .p-hub-bdg { display: block; animation: p-pula .9s ease-in-out infinite; }
.p-hub.nasce { animation: p-entra .5s cubic-bezier(.2,1.6,.4,1); }
.p-habs { position: absolute; right: 8px; bottom: calc(var(--sb) + 138px); z-index: 24; display: flex; flex-direction: row-reverse; gap: 6px; }
.p-habs[hidden] { display: none; }
.p-hab { position: relative; width: 48px; height: 48px; padding: 0; border-radius: 50%; overflow: hidden; background: #1C2230; border: 3px solid #000; box-shadow: 0 3px 0 #000; }
.p-hab .p-hab-cv { position: absolute; left: 50%; top: 4px; width: 33px; height: 40px; transform: translateX(-50%); image-rendering: pixelated; }
.p-hab .p-hab-rec { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(12,14,21,.65); pointer-events: none; }
.p-hab .p-hab-t { position: absolute; left: 0; right: 0; bottom: 1px; font: 9px/1 var(--pixel); color: #fff; text-shadow: 1px 1px 0 #000; text-align: center; }
.p-hab.pronta { box-shadow: 0 0 0 3px #FFD21F, 0 3px 0 #000; animation: p-pronta 1.2s ease-in-out infinite; }
.p-hab.ativa { box-shadow: 0 0 0 3px #4ADE80, 0 3px 0 #000; } .p-hab.ativa .p-hab-rec { background: rgba(74,222,128,.35); }
.p-hab.super { border-color: #B8860B; } .p-hab.fora { opacity: .45; }
@keyframes p-pronta { 50% { transform: scale(1.08); } }
.p-abas { display: flex; gap: 4px; margin: 6px 0 10px; }
.p-aba { flex: 1; position: relative; padding: 8px 2px; background: #1C2230; border: 2px solid #000; border-radius: 6px; color: #AAB2C5; font: 11px/1 var(--pixel); }
.p-aba.on { background: #FFD21F; color: #141821; }
.p-aba.alerta::after { content: '!'; position: absolute; top: -7px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: #F43F5E; color: #fff; border: 2px solid #000; font: 10px/12px var(--pixel); }
.p-ger, .p-pq { display: flex; align-items: center; gap: 8px; padding: 8px; margin-bottom: 6px; background: #1C2230; border: 2px solid #000; border-radius: 6px; }
.p-ger.super { box-shadow: 0 0 0 2px #FFD21F; }
.p-ger-cv { width: 33px; height: 40px; image-rendering: pixelated; flex: 0 0 33px; }
.p-ger-i { flex: 1; min-width: 0; } .p-ger-i b { display: block; font: 13px/1.1 var(--pixel); color: #fff; } .p-ger-i small { display: block; margin-top: 3px; font: 10px/1.35 var(--pixel); color: #AAB2C5; }
.p-ger-nv { display: flex; gap: 2px; margin-top: 4px; } .p-ger-nv i { width: 9px; height: 6px; background: #3A4258; border: 1px solid #000; } .p-ger-nv i.on { background: #FFD21F; }
.p-fora { color: #F9A8D4 !important; }
.p-feito { background: #16A34A !important; color: #fff !important; }
.p-pq.feita { opacity: .7; } .p-pq.trav { opacity: .45; } .p-pq.atual { box-shadow: 0 0 0 2px #C4B5FD; }
.p-pq-bar { display: block; position: relative; height: 8px; margin-top: 5px; background: #0C0E15; border: 1px solid #000; } .p-pq-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, #C4B5FD 0 6px, #8B5CF6 6px 7px); }
.p-quem { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.p-quem-b { width: 40px; height: 44px; padding: 2px; background: #0C0E15; border: 2px solid #000; border-radius: 6px; } .p-quem-b canvas { width: 30px; height: 36px; image-rendering: pixelated; }
.p-cj { padding: 8px; margin-bottom: 8px; background: #1C2230; border: 2px solid #000; border-radius: 6px; } .p-cj.completo { box-shadow: 0 0 0 2px #FFD21F; }
.p-cj-t { display: block; font: 13px/1.1 var(--pixel); color: #FFD21F; } .p-cj-d { display: block; margin: 3px 0 6px; font: 10px/1.3 var(--pixel); color: #AAB2C5; }
.p-cj-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.p-it { position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 2px; background: #0C0E15; border: 2px solid #000; border-radius: 6px; }
.p-it img { width: 32px; height: 32px; filter: brightness(0) opacity(.35); } .p-it.tem img { filter: none; }
.p-it small { font: 8px/1.2 var(--pixel); color: #AAB2C5; text-align: center; } .p-it em { position: absolute; top: 2px; right: 3px; font: 9px/1 var(--pixel); font-style: normal; color: #FFD21F; }
.p-ger.pode .h-preco, .p-pq.pode .h-preco { background: #FFD21F; color: #141821; border-color: #000; }
.p-previa { color: #4ADE80 !important; }

.p-ou-t { margin: 6px 0 4px; font: 10px/1.3 var(--pixel); color: #F9A8D4; text-align: center; }
.p-pq.p-ou { border-style: dashed; }
.vel-op.trava { opacity: .5; }

.p-precisa { background: #3A4258 !important; color: #C9CFDD !important; font-size: 9px !important; line-height: 1.2 !important; white-space: normal; max-width: 104px; }
/* rodada p3: "ANO 1/10" cortado pelo botão da câmera e meta cortada ("10 DOM…") */
#titulo { gap: 6px; }
#t-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
#t-ano { flex: 0 0 auto; }
@media (max-width: 430px) { #titulo { font-size: 15px; } }
@media (max-width: 360px) { #titulo { font-size: 13px; } }
#missao .m-t { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.12; font-size: 12px; }

/* ------------------------- fase 4: desafios impossíveis (js/desafios.js) ------------------------- */
.p-abas:has(> :nth-child(5)) .p-aba { font-size: 9px; padding: 8px 1px; letter-spacing: -.2px; }
.d-card { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; padding: 10px; margin: 0 0 8px; background: linear-gradient(135deg, #2A1838, #1C2230); border: 2px solid #000; border-radius: 10px; box-shadow: 0 3px 0 #000, inset 0 0 0 1px #7C3AED55; }
.d-card > img, .d-card > canvas { align-self: start; }
.d-card-i { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.d-card-i small { color: #C4B5FD; font: 10px/1.2 var(--pixel); }
.d-card-i b { color: #FFD21F; font: 14px/1.15 var(--pixel); }
.d-card-i span { color: #D6DCEA; font: 11px/1.3 var(--texto, sans-serif); }
.d-card-i .d-card-m { color: #fff; font: 10px/1.3 var(--pixel); }
.d-card-i .d-card-p { color: #FCD34D; font: 10px/1.3 var(--pixel); }
.d-card .b-ouro, .d-card .b-mini, .d-card .d-trava { grid-column: 1 / -1; }
.d-card .d-trava { text-align: center; color: #AAB2C5; font: 10px/1.2 var(--pixel); padding: 6px; border: 2px dashed #3A4256; border-radius: 8px; }
.d-card.trav { filter: saturate(.4); opacity: .8; }
.d-card.ok { background: linear-gradient(135deg, #3A2E0A, #1C2230); box-shadow: 0 3px 0 #000, inset 0 0 0 2px #FFD21F88; }
.d-rel { text-align: center; color: #FFD21F; font: 12px/1.2 var(--pixel); margin: 0 0 8px; text-shadow: 0 2px 0 #000; }
.d-folha .d-nome { text-align: center; color: #FFD21F; font: 18px/1.15 var(--pixel); margin: 4px 0 2px; text-shadow: 0 2px 0 #000; }
.d-folha .d-meta, .d-folha .d-prazo { text-align: center; color: #fff; font: 12px/1.3 var(--pixel); margin: 8px 0 4px; }
.d-folha .d-prazo { color: #C4B5FD; font-size: 11px; }
.d-barra { height: 14px; background: #10141C; border: 2px solid #000; border-radius: 7px; overflow: hidden; margin: 0 4px 6px; }
.d-barra i { display: block; height: 100%; background: linear-gradient(90deg, #A855F7, #FFD21F); transition: width .4s; }
.d-premio { display: flex; gap: 10px; align-items: center; padding: 10px; margin: 8px 0 10px; background: #2A1838; border: 2px solid #000; border-radius: 10px; }
.d-premio div { display: flex; flex-direction: column; gap: 2px; }
.d-premio small { color: #C4B5FD; font: 10px/1 var(--pixel); }
.d-premio b { color: #FFD21F; font: 15px/1.1 var(--pixel); }
.d-premio span { color: #D6DCEA; font: 10px/1.3 var(--pixel); }
.d-premio.ganho { background: linear-gradient(135deg, #5B3A00, #2A1838); animation: d-brilha 1.2s ease-in-out infinite alternate; }
@keyframes d-brilha { from { box-shadow: 0 0 0 0 #FFD21F00; } to { box-shadow: 0 0 22px 2px #FFD21F99; } }
.d-venceu .f-tit { color: #FFD21F; }
#t-nome.d-tit { color: #E9D5FF; }
.d-folha .d-como, .d-card-i .d-card-c { color: #A7F3D0; font: 10px/1.35 var(--pixel); }
.d-folha .d-como { text-align: center; margin: 4px 6px 8px; font-size: 11px; }
.d-bau { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 6px 0 12px; animation: d-brilha 1.2s ease-in-out infinite alternate; border-radius: 12px; padding: 10px; }
.d-bau b { color: #FFD21F; font: 22px/1 var(--pixel); text-shadow: 0 2px 0 #000; }
/* limpeza dos avisos (10/11): o cartão NA VIDA REAL desce para cima da barra, à esquerda, longe da faixa e do botão de habilidade */
.h-fato-faixa { top: auto; bottom: calc(var(--base-h, 150px) + 8px); left: 8px; right: auto; width: min(330px, calc(100% - 92px)); }
.h-fato-faixa { left: 92px; right: 8px; width: auto; bottom: calc(var(--base-h, 150px) + 70px); }
@media (min-width: 700px) { .h-fato-faixa { left: auto; width: 360px; } }
/* o cartão volta ao topo (embaixo dele estava a mão-guia); faixa e caixinha entram abaixo dele */
.h-fato-faixa { top: calc(var(--topo-hud, 150px) + 8px); bottom: auto; left: 8px; right: 8px; width: auto; }
@media (min-width: 700px) { .h-fato-faixa { left: auto; width: 360px; } }
/* 10/11: linha escondida some de verdade (a EQUIPE some de MELHORAR; o display da linha anulava o hidden e sobravam botões vazios) */
.h-mel[hidden], .h-mel-grupo[hidden], .h-mel-resto[hidden] { display: none !important; }
/* o cartão volta à largura antiga (à direita, até 340 px): largo demais ele crescia para baixo e cobria o mapa */
.h-fato-faixa { left: auto; right: 8px; width: min(340px, calc(100% - 16px)); }
/* compacto: abaixo do topo ele não pode descer até o meio do mapa (cobria o toque na terra à venda) */
.h-fato-faixa { top: calc(var(--topo-hud, 150px) + 6px); padding: 6px 10px; gap: 3px; }
.h-fato-faixa p { font-size: 13px; line-height: 1.22; }
.h-fato-faixa small { font-size: 9px; }