/* UI do Fuga de Ironhold — playables-ui (versão com o portão "cara de I.A.", 2026-10-31).
FICHA DE IDENTIDADE (references/anti-ia.md §1):
- Material: a papelada da prisão. Ficha policial em papel manila, formulário datilografado, clipe, grampo e carimbo
de tinta, presos numa chapa de aço pintada com parafusos; contagens a giz no concreto da cela.
- Forma assinatura: a ficha com o canto de cima à direita cortado a 45° e uma aba de pasta presa no alto.
Botões são plaquetas de aço com 2 rebites; nada de pílula.
- Letreiro: stencil de caixote e uniforme (Big Shoulders Stencil) em títulos, números e botões; máquina de escrever
(Special Elite) nos dados da ficha. Números em plaquetas.
- Personagem: a foto de ficha do próprio preso (render do GLB T3), presa com clipe; o carimbo muda com o momento
(FUGIU em tinta azul, VISTO em vermelho). Guarda e chefe no dossiê.
- Paleta da cena: manila, tinta, concreto, aço, o laranja do uniforme do preso (botão principal), o ouro da chave
(selo/estrela) e o vermelho só para "visto".
- Detalhe narrativo: a vitória é o relatório da fuga datilografado; o prêmio diário são riscos de giz na parede;
o mapa é o arquivo com uma pasta por ala; o túnel é uma régua de profundidade riscada.
Referências de estúdio da mesma tela: Royal Match (recompensa, HUD) e Brawl Stars (Starr Drop, HUD) em
demos/ui-t3/referencias/ (estudo interno). */
:root {
--u: clamp(1px, calc(min(100vw, 100vh) / 400), 4px);
--noite: #0c1016; --concreto: #3e4446; --concreto-esc: #22272b; --aco: #59656d; --aco-claro: #8e9aa1; --aco-esc: #2a3136; --linha: #0d1013;
--papel: #d6c79f; --papel-claro: #e7dcbc; --papel-esc: #ad9b70; --tinta: #23252a; --tinta-suave: #4a4a46; --tinta-azul: #1f3f73;
--laranja: #b0602e; --laranja-claro: #da8a4e; --laranja-esc: #6a3415; --ouro: #e2b45a; --ouro-esc: #8e6526; --perigo: #c8392b; --perigo-esc: #6e1a12;
--giz: #e9e5da; --texto: #e6e1d7; --texto2: #9aa3ab; --foco: #8fd0ff;
--f-letreiro: 'Big Shoulders Stencil Display', 'Oswald', 'Arial Narrow', sans-serif;
--f-maquina: 'Special Elite', 'Courier New', monospace;
--f-rotulo: 'Oswald', 'Arial Narrow', sans-serif;
--grao: url("data:image/svg+xml;utf8,");
--grao-concreto: url("data:image/svg+xml;utf8,");
--gasto: url("data:image/svg+xml;utf8,");
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--noite); color: var(--texto); font-family: var(--f-rotulo); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#app { position: fixed; inset: 0; }
#tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
/* ícones renderizados do Blender (atlas 4×4) */
.ico { display: inline-block; width: calc(var(--t, 28) * var(--u)); height: calc(var(--t, 28) * var(--u)); flex: none; background: url(assets/ui/icones.webp) no-repeat; background-size: 400% 400%; background-position: calc(var(--cx) * 100% / 3) calc(var(--cy) * 100% / 3); }
#vinheta { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(200, 120, 40, 0.55) 100%); transition: opacity 0.12s; }
#vinheta.perigo { background: radial-gradient(ellipse at center, transparent 40%, rgba(200, 40, 30, 0.7) 100%); }
#flash { position: absolute; inset: 0; pointer-events: none; background: #c8392b; opacity: 0; }
/* ---------- plaqueta de aço (HUD e botões secundários): chapa pintada com 2 rebites ---------- */
.placa { position: relative; display: flex; align-items: center; gap: calc(6 * var(--u)); min-height: calc(48 * var(--u)); padding: 0 calc(12 * var(--u)); color: var(--texto);
background: var(--grao-concreto), linear-gradient(#4b555c, #343c42 60%, #2a3136); border: calc(2.5 * var(--u)) solid var(--linha); border-radius: calc(5 * var(--u));
box-shadow: inset 0 calc(1.5 * var(--u)) 0 rgba(255, 255, 255, 0.16), inset 0 calc(-4 * var(--u)) 0 #1c2226, 0 0 0 calc(1.5 * var(--u)) #8e9aa1, 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.45); } /* aresta clara de fora: a plaqueta lê sobre concreto escuro e iluminado */
.placa::before, .placa::after { content: ''; position: absolute; top: calc(5 * var(--u)); width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c2ccd2, #59646b 60%, #22282c); box-shadow: 0 0 0 calc(0.8 * var(--u)) #14181b; }
.placa::before { left: calc(4 * var(--u)); } .placa::after { right: calc(4 * var(--u)); }
/* ---------- HUD ---------- */
#hud { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: calc(8 * var(--u)); padding: max(calc(10 * var(--u)), env(safe-area-inset-top)) max(calc(10 * var(--u)), env(safe-area-inset-right)) 0 max(calc(10 * var(--u)), env(safe-area-inset-left)); pointer-events: none; }
#hud > * { pointer-events: auto; }
.hud-esq { display: flex; flex-direction: column; align-items: flex-start; gap: calc(5 * var(--u)); min-width: 0; }
.hud-dir { display: flex; gap: calc(8 * var(--u)); align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; min-width: 0; }
/* placa da fase: número grande em stencil + nome; ala em cima, pequena */
#hud-fase { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: calc(4 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u)) calc(14 * var(--u)); max-width: 100%; transform: rotate(-1.5deg); transform-origin: left top; }
#hud-fase .ala { font: 600 calc(14 * var(--u)) var(--f-rotulo); letter-spacing: 0.14em; text-transform: uppercase; color: var(--papel-claro); white-space: nowrap; }
#hud-fase .nome { display: flex; align-items: baseline; gap: calc(6 * var(--u)); white-space: nowrap; overflow: hidden; max-width: 100%; }
#hud-fase .nome b { font: 900 calc(26 * var(--u)) / 1 var(--f-letreiro); color: var(--papel-claro); }
#hud-fase .nome span { font: 700 calc(15 * var(--u)) / 1 var(--f-letreiro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto); overflow: hidden; text-overflow: ellipsis; }
#hud-coleta { display: flex; gap: calc(2 * var(--u)); padding-left: calc(6 * var(--u)); }
#hud-coleta .ico { --t: 26; filter: grayscale(1) brightness(0.35) drop-shadow(0 0 calc(1 * var(--u)) #000); transition: filter 0.25s, transform 0.25s; }
#hud-coleta .ico.ok { filter: drop-shadow(0 calc(1.5 * var(--u)) 0 rgba(0, 0, 0, 0.6)); transform: scale(1.12) rotate(-8deg); }
#hud-colheres { gap: calc(4 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(8 * var(--u)); font: 900 calc(22 * var(--u)) / 1 var(--f-letreiro); color: var(--papel-claro); }
#hud-colheres .ico { --t: 30; }
#hud-colheres.pula { animation: pula 0.3s; }
#num-colheres { font-variant-numeric: tabular-nums; }
/* chave: etiqueta de papel pendurada */
#hud-chave { display: grid; place-items: center; width: calc(48 * var(--u)); height: calc(48 * var(--u)); background: var(--grao), var(--papel); clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 100%, 0 100%, 0 22%); transform: rotate(8deg); filter: drop-shadow(0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.5)); }
#hud-chave .ico { --t: 36; }
#hud-sorte { font: 700 calc(12 * var(--u)) var(--f-maquina); color: var(--giz); letter-spacing: 0.1em; padding: calc(2 * var(--u)) calc(8 * var(--u)); background: rgba(12, 16, 22, 0.6); border-left: calc(3 * var(--u)) solid #7fbf7a; }
/* botões de ícone do HUD (pausa, prêmio, pacote) */
.btn-icone { width: calc(48 * var(--u)); height: calc(48 * var(--u)); min-height: calc(48 * var(--u)); justify-content: center; padding: 0; cursor: pointer; font: inherit; }
.btn-icone svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: var(--papel-claro); }
.btn-icone .ico { --t: 34; }
.btn-icone:focus-visible, .btn:focus-visible, .aba-ala:focus-visible, .etiqueta:focus-visible, .slot:focus-visible, .uni:focus-visible { outline: calc(3 * var(--u)) solid var(--foco); outline-offset: calc(3 * var(--u)); }
.is-press { transform: translateY(calc(3 * var(--u))) scale(0.96) !important; box-shadow: inset 0 0 0 transparent, 0 calc(1 * var(--u)) 0 rgba(0, 0, 0, 0.45) !important; transition-duration: 60ms !important; }
#btn-pausa { transform: none; }
#btn-pausa svg rect { fill: var(--papel-claro); }
#btn-diario { animation: chama 1.6s ease-in-out infinite; }
#btn-diario .giz { stroke: var(--giz); stroke-width: 2.2; stroke-linecap: round; fill: none; }
#btn-pacote { position: relative; }
#btn-pacote svg.anel { position: absolute; inset: calc(-4 * var(--u)); width: calc(100% + 8 * var(--u)); height: calc(100% + 8 * var(--u)); fill: none; pointer-events: none; }
.anel-fundo { stroke: rgba(0, 0, 0, 0.5); stroke-width: 3; fill: none; }
.anel-barra { stroke: var(--laranja-claro); stroke-width: 3; fill: none; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.4s; }
#btn-pacote.cheio { animation: chama 1s ease-in-out infinite; }
@media (hover: hover) { .btn-icone:hover, .btn:hover { filter: brightness(1.12); } .etiqueta:not(:disabled):hover { transform: rotate(var(--r, 0deg)) translateY(calc(-2 * var(--u))); } }
/* pedra: plaqueta redonda embaixo à direita, contador numa etiqueta */
#btn-pedra { position: absolute; right: max(calc(14 * var(--u)), env(safe-area-inset-right)); bottom: max(calc(16 * var(--u)), env(safe-area-inset-bottom)); width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%; justify-content: center; padding: 0; cursor: pointer; }
#btn-pedra::before, #btn-pedra::after { display: none; }
#btn-pedra .ico { --t: 46; }
#btn-pedra span { position: absolute; right: calc(-6 * var(--u)); top: calc(-6 * var(--u)); min-width: calc(24 * var(--u)); height: calc(22 * var(--u)); padding: 0 calc(5 * var(--u)); display: grid; place-items: center; background: var(--grao), var(--papel); color: var(--tinta); font: 900 calc(15 * var(--u)) var(--f-letreiro); transform: rotate(6deg); box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.45); }
#btn-pedra.ativo { box-shadow: 0 0 0 calc(3 * var(--u)) var(--laranja-claro), inset 0 calc(-4 * var(--u)) 0 #1c2226; }
#btn-pedra:disabled { filter: grayscale(1) brightness(0.6); }
/* hotbar: os bolsos do uniforme (lona laranja com costura) */
#hotbar { position: absolute; left: 50%; bottom: max(calc(12 * var(--u)), env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: calc(8 * var(--u)); }
#hotbar .slot { position: relative; width: calc(50 * var(--u)); height: calc(54 * var(--u)); padding: 0; display: grid; place-items: center; border: calc(2.5 * var(--u)) solid var(--linha); border-radius: calc(4 * var(--u)) calc(4 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
background: var(--grao), linear-gradient(#a85a2b, #8a4620); box-shadow: inset 0 0 0 calc(3 * var(--u)) #8a4620, inset 0 0 0 calc(4.5 * var(--u)) rgba(240, 200, 160, 0.55), 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.45); }
#hotbar .slot::after { content: ''; position: absolute; left: calc(5 * var(--u)); right: calc(5 * var(--u)); top: calc(8 * var(--u)); border-top: calc(1.5 * var(--u)) dashed rgba(240, 200, 160, 0.55); } /* costura da aba do bolso */
#hotbar button.slot { cursor: pointer; }
#hotbar .slot .ico { --t: 42; position: relative; z-index: 1; filter: drop-shadow(0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.45)); }
#hotbar .slot b { position: absolute; left: calc(-4 * var(--u)); top: calc(-6 * var(--u)); z-index: 2; min-width: calc(16 * var(--u)); padding: 0 calc(3 * var(--u)); background: var(--papel-claro); color: var(--tinta); font: 900 calc(12 * var(--u)) / calc(16 * var(--u)) var(--f-letreiro); text-align: center; transform: rotate(-8deg); }
#hotbar .slot.vazio { background: var(--grao), linear-gradient(#5a3a24, #44291a); box-shadow: inset 0 0 0 calc(3 * var(--u)) #44291a, inset 0 0 0 calc(4.5 * var(--u)) rgba(240, 200, 160, 0.22), 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.45); }
#hotbar .slot.vazio b { opacity: 0.6; }
/* dica: tira de papel datilografada presa com fita crepe */
#dica { position: absolute; left: 50%; bottom: calc(150 * var(--u)); transform: translateX(-50%) rotate(-1deg); max-width: min(calc(100% - 32px), calc(360 * var(--u))); padding: calc(9 * var(--u)) calc(18 * var(--u)); background: var(--grao), var(--papel-claro); color: var(--tinta); font: calc(14 * var(--u)) / 1.35 var(--f-maquina); text-align: center; pointer-events: none; box-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.4); }
#dica::before, #dica::after { content: ''; position: absolute; top: calc(-7 * var(--u)); width: calc(34 * var(--u)); height: calc(14 * var(--u)); background: rgba(214, 200, 150, 0.82); }
#dica::before { left: calc(-10 * var(--u)); transform: rotate(-24deg); } #dica::after { right: calc(-10 * var(--u)); transform: rotate(22deg); }
/* efeitos ativos: etiquetas com o ícone e os segundos */
#efeitos { position: absolute; left: 50%; bottom: calc(80 * var(--u)); transform: translateX(-50%); display: flex; gap: calc(6 * var(--u)); pointer-events: none; }
#efeitos span { display: flex; align-items: center; gap: calc(3 * var(--u)); padding: calc(2 * var(--u)) calc(8 * var(--u)) calc(2 * var(--u)) calc(3 * var(--u)); background: var(--grao), var(--papel); color: var(--tinta); font: 900 calc(15 * var(--u)) var(--f-letreiro); border-left: calc(4 * var(--u)) solid var(--cor); transform: rotate(-2deg); }
#efeitos span .ico { --t: 24; }
#cavar { position: absolute; left: 50%; bottom: calc(118 * var(--u)); width: calc(170 * var(--u)); height: calc(14 * var(--u)); margin-left: calc(-85 * var(--u)); border: calc(2.5 * var(--u)) solid var(--linha); background: #2a2018; overflow: hidden; }
#cavar span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #8a6a40 0 calc(8 * var(--u)), #6b5032 calc(8 * var(--u)) calc(10 * var(--u))); }
/* joystick flutuante e mão do tutorial (simples de propósito: anti-ia §4) */
#joy { position: absolute; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; border: 2px solid rgba(220, 225, 230, 0.18); background: rgba(220, 225, 230, 0.04); pointer-events: none; }
#joy-pino { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(220, 225, 230, 0.22); }
#mao { position: absolute; left: 50%; bottom: 18%; margin-left: -28px; pointer-events: none; animation: arrasta 1.8s ease-in-out infinite; }
.mao-anel { fill: none; stroke: rgba(230, 225, 215, 0.35); stroke-width: 2; }
.mao-dedo { fill: rgba(230, 225, 215, 0.75); }
/* ---------- modal: a cena por trás, desfocada; a ficha por cima ---------- */
#modal { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(14 * var(--u)) max(calc(12 * var(--u)), env(safe-area-inset-right)) calc(14 * var(--u)) max(calc(12 * var(--u)), env(safe-area-inset-left)); background: rgba(8, 10, 13, 0.55); -webkit-backdrop-filter: blur(3px) saturate(0.7); backdrop-filter: blur(3px) saturate(0.7); overflow-y: auto; }
#modal[hidden] { display: none; }
#painel { position: relative; width: min(calc(372 * var(--u)), 100%); max-height: 100%; padding-top: calc(22 * var(--u)); filter: drop-shadow(0 calc(5 * var(--u)) 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 calc(16 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, 0.55)); animation: desliza 0.38s cubic-bezier(.2, .9, .3, 1.15) backwards; }
#painel.larga { width: min(calc(420 * var(--u)), 100%); }
/* a aba da pasta, presa no alto da ficha */
.aba-pasta { position: absolute; left: calc(18 * var(--u)); top: calc(2 * var(--u)); z-index: 2; height: calc(24 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(12 * var(--u)); display: flex; align-items: center; background: var(--grao), var(--papel-esc); color: var(--tinta); font: 600 calc(11 * var(--u)) var(--f-rotulo); letter-spacing: 0.16em; text-transform: uppercase; clip-path: polygon(0 100%, 0 0, calc(100% - 12 * var(--u)) 0, 100% 100%); white-space: nowrap; max-width: 80%; overflow: hidden; }
.folha { position: relative; padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u)); color: var(--tinta); text-align: left;
background: var(--grao), radial-gradient(circle at 86% 78%, rgba(120, 90, 40, 0.16) 0 calc(26 * var(--u)), transparent calc(27 * var(--u)) calc(30 * var(--u)), rgba(120, 90, 40, 0.1) calc(31 * var(--u)), transparent calc(33 * var(--u))), linear-gradient(170deg, var(--papel-claro), var(--papel) 60%, #cdbb8d);
clip-path: polygon(0 0, calc(100% - 26 * var(--u)) 0, 100% calc(26 * var(--u)), 100% 100%, 0 100%); }
.folha::before { content: ''; position: absolute; right: 0; top: 0; width: calc(26 * var(--u)); height: calc(26 * var(--u)); background: linear-gradient(225deg, transparent 50%, #b6a37a 50%, #c8b78e); } /* dobra do canto cortado */
.folha.concreto { color: var(--giz); background: var(--grao-concreto), linear-gradient(170deg, #4a5257, #353c41 55%, #2b3135); }
.folha.concreto::before { background: linear-gradient(225deg, transparent 50%, #23292d 50%); }
.folha.perigo { background: var(--grao), linear-gradient(170deg, #e2d4b2, #cbb98f); }
.carimbo-wrap { position: absolute; z-index: 3; pointer-events: none; }
.datilo { font-family: var(--f-maquina); font-size: calc(14 * var(--u)); line-height: 1.45; color: var(--tinta-suave); }
.folha h1, .folha h2 { margin: 0; font-family: var(--f-letreiro); font-weight: 900; text-transform: uppercase; color: var(--tinta); }
.folha h1 { font-size: calc(54 * var(--u)); line-height: 0.92; letter-spacing: 0.02em; }
.folha h2 { font-size: calc(32 * var(--u)); line-height: 1; letter-spacing: 0.03em; }
.folha.concreto h1, .folha.concreto h2 { color: var(--giz); }
.folha p { margin: calc(6 * var(--u)) 0 calc(10 * var(--u)); font: calc(14 * var(--u)) / 1.45 var(--f-maquina); color: var(--tinta-suave); }
.folha.concreto p { color: #c9cdcf; }
.linha-form { display: flex; align-items: baseline; gap: calc(8 * var(--u)); padding: calc(4 * var(--u)) 0; border-bottom: calc(1 * var(--u)) solid rgba(43, 74, 120, 0.28); font: calc(14 * var(--u)) var(--f-maquina); color: var(--tinta-suave); }
.linha-form b { margin-left: auto; font: 900 calc(20 * var(--u)) var(--f-letreiro); color: var(--tinta); font-variant-numeric: tabular-nums; }
/* ---------- botões: plaqueta de aço pintada (laranja do uniforme no principal) ---------- */
.botoes { display: flex; flex-direction: column; gap: calc(10 * var(--u)); margin-top: calc(14 * var(--u)); }
.botoes.linha { flex-direction: row; }
.botoes.linha > * { flex: 1; }
.btn { --c1: #6a767e; --c2: #4c565d; --c3: #3a4349; --c4: #232a2f; --tx: var(--texto);
position: relative; min-height: calc(52 * var(--u)); min-width: calc(48 * var(--u)); padding: 0 calc(20 * var(--u)); cursor: pointer;
border: calc(3 * var(--u)) solid var(--linha); border-radius: calc(6 * var(--u)); background: var(--grao-concreto), linear-gradient(var(--c1), var(--c2) 55%, var(--c3));
box-shadow: inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.22), inset 0 calc(-6 * var(--u)) 0 var(--c4), 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, 0.5);
color: var(--tx); font: 900 calc(21 * var(--u)) / 1 var(--f-letreiro); letter-spacing: 0.08em; text-transform: uppercase;
-webkit-text-stroke: calc(4 * var(--u)) var(--c4); paint-order: stroke fill; text-shadow: 0 calc(2 * var(--u)) 0 var(--c4);
transition: transform 160ms cubic-bezier(.34, 1.56, .64, 1), filter 80ms ease-out; }
.btn::before, .btn::after { content: ''; position: absolute; top: 50%; width: calc(6 * var(--u)); height: calc(6 * var(--u)); margin-top: calc(-5 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d8dfe3, #6c777e 60%, #262c30); box-shadow: 0 0 0 calc(1 * var(--u)) var(--linha); }
.btn::before { left: calc(8 * var(--u)); } .btn::after { right: calc(8 * var(--u)); }
.folha.concreto .btn { box-shadow: inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.22), inset 0 calc(-6 * var(--u)) 0 var(--c4), 0 0 0 calc(1.5 * var(--u)) #b9c2c7, 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, 0.5); } /* na parede de concreto o botão ganha a aresta clara */
.btn.primario { --c1: #e1955a; --c2: #bf6a33; --c3: #a5552a; --c4: #5e2c10; --tx: #fff3e2; min-height: calc(62 * var(--u)); font-size: calc(26 * var(--u)); }
.btn.perigo { --c1: #d65a48; --c2: #b2382a; --c3: #962b20; --c4: #4e130d; --tx: #fff0ea; min-height: calc(62 * var(--u)); font-size: calc(26 * var(--u)); }
.btn.papel { --c1: #e8dcbb; --c2: #d6c79f; --c3: #c4b285; --c4: #6e5c37; --tx: var(--tinta); -webkit-text-stroke: 0; text-shadow: none; }
.btn[aria-disabled="true"], .btn:disabled { filter: grayscale(1) brightness(0.7); cursor: default; }
.btn .ico { --t: 28; vertical-align: middle; margin: calc(-6 * var(--u)) calc(4 * var(--u)) calc(-6 * var(--u)) 0; -webkit-text-stroke: 0; }
/* ---------- foto de ficha (personagem) + carimbo ---------- */
.foto { position: relative; width: calc(132 * var(--u)); padding: calc(7 * var(--u)) calc(7 * var(--u)) calc(22 * var(--u)); background: #ece8de; transform: rotate(var(--r, -3deg)); box-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.35); flex: none; }
.foto .imagem { position: relative; aspect-ratio: 1; overflow: hidden; background: repeating-linear-gradient(#9aa0a4 0 calc(1 * var(--u)), transparent calc(1 * var(--u)) calc(12 * var(--u))), linear-gradient(#b8bec2, #8f979c); }
.foto .imagem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.08) saturate(0.82); }
.foto .placa-num { position: absolute; left: 50%; bottom: calc(4 * var(--u)); transform: translateX(-50%); padding: 0 calc(6 * var(--u)); background: var(--tinta); color: var(--papel-claro); font: 900 calc(12 * var(--u)) / calc(16 * var(--u)) var(--f-letreiro); letter-spacing: 0.1em; white-space: nowrap; }
.foto .legenda { position: absolute; left: 0; right: 0; bottom: calc(3 * var(--u)); text-align: center; font: calc(11 * var(--u)) var(--f-maquina); color: var(--tinta-suave); }
.foto .clipe { position: absolute; top: calc(-12 * var(--u)); left: calc(18 * var(--u)); width: calc(16 * var(--u)); height: calc(36 * var(--u)); border: calc(2.5 * var(--u)) solid #9aa4aa; border-radius: calc(8 * var(--u)); border-bottom-color: transparent; transform: rotate(-6deg); filter: drop-shadow(0 calc(1 * var(--u)) 0 #33393d); }
.carimbo { display: inline-block; padding: calc(4 * var(--u)) calc(12 * var(--u)); border: calc(4 * var(--u)) solid currentColor; border-radius: calc(4 * var(--u)); color: var(--tinta-azul); font: 900 calc(36 * var(--u)) / 1 var(--f-letreiro); letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(var(--r, -12deg)); opacity: 0.92; background: rgba(231, 220, 188, 0.18);
-webkit-mask: var(--gasto) 0 0 / calc(120 * var(--u)) calc(60 * var(--u)); mask: var(--gasto) 0 0 / calc(120 * var(--u)) calc(60 * var(--u)); animation: bate 0.42s cubic-bezier(.2, .7, .3, 1) backwards; animation-delay: var(--d, 0.35s); }
.carimbo.vermelho { color: var(--perigo); }
.carimbo.pequeno { font-size: calc(16 * var(--u)); border-width: calc(2.5 * var(--u)); padding: calc(2 * var(--u)) calc(6 * var(--u)); }
/* ---------- vitória: relatório da fuga ---------- */
.relatorio { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'foto titulo' 'itens itens'; gap: calc(8 * var(--u)) calc(14 * var(--u)); }
.relatorio .foto { grid-area: foto; align-self: start; margin-top: calc(-34 * var(--u)); margin-left: calc(-6 * var(--u)); }
.relatorio .cab { grid-area: titulo; align-self: end; position: relative; }
.relatorio .cab .datilo { font-size: calc(12 * var(--u)); }
.relatorio .itens { grid-area: itens; }
.relatorio .carimbo-wrap { left: calc(66 * var(--u)); top: calc(104 * var(--u)); }
.checklist { margin: calc(4 * var(--u)) 0 calc(6 * var(--u)); padding: 0; list-style: none; }
.checklist li { display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(40 * var(--u)); border-bottom: calc(1 * var(--u)) solid rgba(43, 74, 120, 0.28); font: calc(15 * var(--u)) var(--f-maquina); color: var(--tinta-suave); }
.checklist li .selo { flex: none; width: calc(34 * var(--u)); height: calc(34 * var(--u)); display: grid; place-items: center; border-radius: 50%; border: calc(2 * var(--u)) dashed rgba(35, 37, 42, 0.45); }
.checklist li.ok { color: var(--tinta); }
.checklist li.ok .selo { border: calc(2.5 * var(--u)) solid var(--ouro-esc); background: radial-gradient(circle at 38% 32%, #fbe2a0, var(--ouro) 45%, #b5832f); box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.35), inset 0 0 0 calc(3 * var(--u)) rgba(255, 240, 200, 0.4); animation: sela 0.4s cubic-bezier(.3, 1.5, .5, 1) backwards; animation-delay: var(--d); }
.checklist li .selo svg { width: 60%; height: 60%; fill: transparent; }
.checklist li.ok .selo svg { fill: #7a5418; }
.ganhos { display: flex; flex-wrap: wrap; align-items: stretch; gap: calc(8 * var(--u)); margin-top: calc(8 * var(--u)); }
.recibo { flex: 1 1 calc(120 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); background: rgba(255, 252, 240, 0.55); border: calc(1.5 * var(--u)) dashed rgba(35, 37, 42, 0.4); }
.recibo .ico { --t: 40; }
.recibo b { display: block; font: 900 calc(28 * var(--u)) / 1 var(--f-letreiro); color: var(--tinta); font-variant-numeric: tabular-nums; }
.recibo small { display: block; font: calc(11 * var(--u)) / 1.3 var(--f-maquina); color: var(--tinta-suave); }
/* envelope de contrabando (baú de marco) */
.envelope { position: relative; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); background: var(--grao), linear-gradient(#b48a5a, #9a7148); color: #2a1a0c; transform: rotate(-1.2deg); box-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.35); }
.envelope::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(12 * var(--u)); background: linear-gradient(170deg, #8a6038 50%, transparent 50%), linear-gradient(190deg, #8a6038 50%, transparent 50%); background-size: 50% 100%; background-repeat: no-repeat; background-position: left top, right top; }
.envelope .rot { flex: 1 1 100%; font: 900 calc(15 * var(--u)) var(--f-letreiro); letter-spacing: 0.1em; text-transform: uppercase; }
.envelope .peca { display: flex; align-items: center; gap: calc(4 * var(--u)); font: 900 calc(20 * var(--u)) var(--f-letreiro); }
.envelope .peca .ico { --t: 44; }
.envelope .peca small { font: calc(12 * var(--u)) var(--f-maquina); }
.envelope .amostra, .amostra { display: inline-block; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border: calc(2 * var(--u)) solid var(--linha); clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%); }
.aliado-novo { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); background: rgba(43, 74, 120, 0.1); border-left: calc(4 * var(--u)) solid var(--tinta-azul); font: calc(13 * var(--u)) / 1.35 var(--f-maquina); color: var(--tinta); }
.aliado-novo b { font: 900 calc(17 * var(--u)) var(--f-letreiro); letter-spacing: 0.04em; text-transform: uppercase; }
/* ---------- derrota ---------- */
.ocorrencia { display: flex; gap: calc(14 * var(--u)); align-items: flex-start; }
.ocorrencia .foto { margin-top: calc(-30 * var(--u)); }
.ocorrencia .carimbo-wrap { left: calc(84 * var(--u)); top: calc(118 * var(--u)); }
.ocorrencia p { font-size: calc(17 * var(--u)) !important; color: var(--tinta) !important; }
/* ---------- mapa: o arquivo, uma pasta por ala ---------- */
#painel.mapa { padding-top: 0; }
.abas-ala { display: flex; gap: calc(8 * var(--u)); margin: 0 0 calc(-1 * var(--u)) calc(14 * var(--u)); position: relative; z-index: 2; }
.aba-ala { min-width: calc(48 * var(--u)); height: calc(48 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)) 0; border: 0; cursor: pointer; background: var(--grao), var(--papel-esc); color: var(--tinta-suave); clip-path: polygon(calc(8 * var(--u)) 0, calc(100% - 8 * var(--u)) 0, 100% 100%, 0 100%); font: 900 calc(20 * var(--u)) / 1 var(--f-letreiro); transform: translateY(calc(6 * var(--u))); transition: transform 0.15s; }
.aba-ala.sel { background: var(--grao), var(--papel-claro); color: var(--tinta); transform: none; }
.aba-ala:disabled { color: rgba(35, 37, 42, 0.35); cursor: default; }
.grade-fases { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(9 * var(--u)) calc(8 * var(--u)); margin: calc(10 * var(--u)) 0 calc(4 * var(--u)); }
/* cada fase é uma etiqueta de arquivo com furo, número em stencil e os selos */
.etiqueta { --r: 0deg; position: relative; min-height: calc(60 * var(--u)); padding: calc(10 * var(--u)) 0 calc(4 * var(--u)); border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--u));
background: var(--grao), #f1e9d2; color: var(--tinta); font: 900 calc(24 * var(--u)) / 1 var(--f-letreiro); transform: rotate(var(--r)); box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.3); clip-path: polygon(0 calc(8 * var(--u)), calc(8 * var(--u)) 0, 100% 0, 100% 100%, 0 100%); transition: transform 0.15s; }
.etiqueta::before { content: ''; position: absolute; top: calc(4 * var(--u)); left: 50%; width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-left: calc(-3.5 * var(--u)); border-radius: 50%; background: #8d7f5c; box-shadow: inset 0 calc(1 * var(--u)) 0 rgba(0, 0, 0, 0.4); } /* furo */
.etiqueta .selos { display: flex; gap: calc(1 * var(--u)); }
.etiqueta .selos i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; border: calc(1.2 * var(--u)) dashed rgba(35, 37, 42, 0.45); }
.etiqueta .selos i.ok { border: 0; background: radial-gradient(circle at 38% 32%, #fbe2a0, var(--ouro) 55%, #a9772a); }
.etiqueta.chefe { background: var(--grao), #d9c08a; }
.etiqueta.chefe::after { content: ''; position: absolute; right: calc(3 * var(--u)); bottom: calc(3 * var(--u)); width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid var(--perigo-esc); opacity: 0.55; }
.etiqueta.atual { outline: calc(3 * var(--u)) solid var(--laranja); outline-offset: calc(-3 * var(--u)); }
.etiqueta:disabled { cursor: default; background: var(--grao), #c4b892; color: rgba(35, 37, 42, 0.35); }
.etiqueta:disabled .ico { --t: 26; opacity: 0.8; }
.mapa-pe { display: flex; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); }
.mapa-pe .btn { flex: 1; font-size: calc(18 * var(--u)); padding: 0 calc(14 * var(--u)); }
.uniformes { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(6 * var(--u)); }
.rotulo-sec { margin: calc(12 * var(--u)) 0 calc(2 * var(--u)); font: 600 calc(11 * var(--u)) var(--f-rotulo); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-suave); }
/* amostras de tecido do uniforme (presas com alfinete) */
.uni { position: relative; width: calc(48 * var(--u)); height: calc(48 * var(--u)); padding: 0; cursor: pointer; border: calc(2 * var(--u)) solid var(--linha); clip-path: polygon(0 0, 100% 0, 100% 82%, 82% 100%, 0 100%); background-image: var(--grao); }
.uni.sel { box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--papel-claro); }
.uni.sel::after { content: ''; position: absolute; left: calc(4 * var(--u)); top: calc(4 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #c9d1d6 60%, #6a737a); }
.uni:disabled { filter: grayscale(0.85) brightness(0.55); cursor: default; }
/* ---------- túnel: régua de profundidade a giz no concreto ---------- */
.regua { position: relative; height: calc(40 * var(--u)); margin: calc(10 * var(--u)) 0; border-left: calc(3 * var(--u)) solid var(--giz); border-bottom: calc(3 * var(--u)) solid var(--giz); display: flex; }
.regua i { flex: 1; border-right: calc(2 * var(--u)) solid rgba(233, 229, 218, 0.35); height: 45%; align-self: flex-end; }
.regua i:nth-child(4n) { height: 80%; }
.regua i.ok { border-right-color: var(--giz); }
.regua .cavado { position: absolute; left: 0; bottom: 0; height: 30%; background: repeating-linear-gradient(-45deg, rgba(233, 229, 218, 0.55) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(6 * var(--u))); transition: width 0.5s; }
.historia { max-height: calc(190 * var(--u)); overflow-y: auto; padding: calc(8 * var(--u)) calc(12 * var(--u)); background: var(--grao), repeating-linear-gradient(transparent 0 calc(21 * var(--u)), rgba(43, 74, 120, 0.25) calc(21 * var(--u)) calc(22 * var(--u))), #efe6cc; color: var(--tinta); transform: rotate(0.6deg); }
.historia p { margin: 0 0 calc(4 * var(--u)) !important; font: calc(13 * var(--u)) / calc(22 * var(--u)) var(--f-maquina) !important; color: var(--tinta) !important; }
/* ---------- dossiê: fichas presas no quadro ---------- */
.fichas { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)) calc(8 * var(--u)); margin: calc(4 * var(--u)) 0 calc(8 * var(--u)); }
.cartao { position: relative; padding: calc(8 * var(--u)); background: var(--grao), #f1e9d2; color: var(--tinta); transform: rotate(var(--r, 0deg)); box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.3); font: calc(12 * var(--u)) / 1.35 var(--f-maquina); }
.cartao b { display: block; font: 900 calc(16 * var(--u)) / 1.05 var(--f-letreiro); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: calc(3 * var(--u)); }
.cartao img { float: left; width: calc(46 * var(--u)); height: calc(46 * var(--u)); margin: 0 calc(6 * var(--u)) calc(2 * var(--u)) 0; object-fit: cover; background: linear-gradient(#b8bec2, #8f979c); border: calc(2 * var(--u)) solid #fff; }
.cartao.fechado { background: var(--grao), #c9bd99; color: rgba(35, 37, 42, 0.5); }
.cartao .silhueta { float: left; width: calc(46 * var(--u)); height: calc(46 * var(--u)); margin: 0 calc(6 * var(--u)) calc(2 * var(--u)) 0; background: radial-gradient(circle at 50% 36%, #555b60 0 22%, transparent 23%), radial-gradient(ellipse at 50% 100%, #555b60 0 46%, transparent 47%), #9aa0a4; border: calc(2 * var(--u)) solid #fff; }
/* ---------- prêmio diário: riscos de giz na parede da cela ---------- */
.dias { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8 * var(--u)); margin: calc(12 * var(--u)) 0 calc(4 * var(--u)); }
.dia { position: relative; min-height: calc(80 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(3 * var(--u)); border: calc(2 * var(--u)) solid rgba(233, 229, 218, 0.55); border-radius: calc(2 * var(--u)) calc(9 * var(--u)) calc(3 * var(--u)) calc(7 * var(--u)); color: var(--giz); font: calc(11 * var(--u)) var(--f-maquina); }
.dia b { display: flex; align-items: center; gap: calc(2 * var(--u)); font: 900 calc(18 * var(--u)) var(--f-letreiro); }
.dia b .ico { --t: 30; }
.dia.feito::after { content: ''; position: absolute; inset: calc(6 * var(--u)); background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--giz) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)); opacity: 0.8; } /* riscado a giz */
.dia.feito { opacity: 0.7; }
.dia.hoje { border-color: var(--laranja-claro); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(218, 138, 78, 0.25); animation: chama 1.6s ease-in-out infinite; }
.dia.d7 { grid-column: span 2; }
/* ---------- pacote do contrabando ---------- */
.pacote-grande { display: flex; align-items: center; gap: calc(12 * var(--u)); margin: calc(6 * var(--u)) 0; }
.pacote-grande .ico { --t: 110; transform: rotate(-6deg); animation: chacoalha 0.6s ease-in-out 0.2s backwards; }
/* ---------- loading ---------- */
#carregando { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(22 * var(--u)); background: var(--grao-concreto), radial-gradient(circle at 50% 40%, #1e252c, var(--noite) 70%); z-index: 5; }
#carregando .foto { width: calc(150 * var(--u)); }
#carregando span { font: 900 calc(44 * var(--u)) var(--f-letreiro); letter-spacing: 0.3em; color: var(--texto2); animation: chama 1.4s ease-in-out infinite; }
@keyframes pula { 40% { transform: scale(1.18); } }
@keyframes desliza { from { transform: translateY(calc(40 * var(--u))) rotate(2deg); opacity: 0; } }
@keyframes bate { 0% { transform: rotate(var(--r, -12deg)) scale(2.4); opacity: 0; } 60% { transform: rotate(var(--r, -12deg)) scale(0.94); opacity: 0.95; } 80% { transform: rotate(calc(var(--r, -12deg) + 1deg)) scale(1.02); } }
@keyframes sela { from { transform: scale(1.8); opacity: 0; } }
@keyframes chama { 50% { filter: brightness(1.3); } }
@keyframes chacoalha { 0% { transform: rotate(-6deg) translateY(calc(-30 * var(--u))); opacity: 0; } 60% { transform: rotate(3deg); opacity: 1; } 80% { transform: rotate(-8deg); } }
@keyframes arrasta { 0% { transform: translate(-60px, 0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(60px, -30px); opacity: 1; } 100% { transform: translate(60px, -30px); opacity: 0; } }
/* paisagem baixa: ficha mais larga, foto ao lado, botões em linha */
@media (max-height: 480px) {
#painel, #painel.larga { width: min(calc(720 * var(--u)), 100%); padding-top: calc(20 * var(--u)); }
.folha { padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)); }
.duas { display: grid; grid-template-columns: 1.1fr 1fr; gap: calc(18 * var(--u)); align-items: start; }
.folha h1 { font-size: calc(44 * var(--u)); }
.relatorio .foto { width: calc(108 * var(--u)); margin-top: calc(-26 * var(--u)); }
.relatorio .carimbo-wrap { left: calc(250 * var(--u)); top: calc(40 * var(--u)); }
.ocorrencia .carimbo-wrap { left: auto; right: calc(40 * var(--u)); top: calc(30 * var(--u)); }
.folha h2 { font-size: calc(26 * var(--u)); }
.grade-fases { gap: calc(8 * var(--u)); margin-top: calc(6 * var(--u)); }
.etiqueta { min-height: calc(48 * var(--u)); padding-top: calc(8 * var(--u)); font-size: calc(20 * var(--u)); }
.mapa-pe .btn, .lado > .btn { min-height: calc(50 * var(--u)); font-size: calc(18 * var(--u)); }
.rotulo-sec { margin-top: calc(8 * var(--u)); }
.checklist li { min-height: calc(34 * var(--u)); }
.lado .botoes { margin-top: calc(10 * var(--u)); }
.botoes.linha { flex-direction: row; }
.ocorrencia + .botoes { flex-direction: row; } .ocorrencia + .botoes > * { flex: 1; }
.mapa-pe { margin-top: 0; }
.dias { grid-template-columns: repeat(7, 1fr); } .dia.d7 { grid-column: auto; }
#dica { bottom: calc(96 * var(--u)); }
}
@media (max-width: 440px) { #hud-fase .nome span { display: none; } } /* no celular estreito, só o número da fase (sem nome cortado) */
@media (max-width: 460px) { #btn-pedra { bottom: calc(86 * var(--u)); } #efeitos { bottom: calc(150 * var(--u)); } #dica { bottom: calc(176 * var(--u)); } }
.captura *, .captura *::before, .captura *::after { animation-delay: 0s !important; animation-duration: 1ms !important; } /* captura de revisão: estado final */
.captura #festa .papel { animation-duration: var(--t) !important; animation-delay: calc(-1s - var(--d) * 1.7) !important; animation-play-state: paused; } /* papéis congelados em pleno voo */
.captura #festa .facho { animation: none !important; transform: rotate(-9deg); } .captura #festa .facho.f2 { transform: rotate(11deg); }
/* ===== rodada 2 do crítico (2026-10-31): carimbo herói, botões mais gordos, festa, papel com fibra e dobra ===== */
#painel { rotate: -0.8deg; }
#painel.larga { width: min(calc(400 * var(--u)), 100%); }
.folha { box-shadow: inset 0 0 calc(34 * var(--u)) rgba(120, 90, 40, 0.32); }
.folha::after { content: ''; position: absolute; left: 0; right: 0; top: 54%; height: calc(3 * var(--u)); background: linear-gradient(rgba(255, 250, 230, 0.35), rgba(110, 85, 40, 0.18)); pointer-events: none; } /* vinco da dobra */
.folha.concreto::after { display: none; }
.datilo, .folha p { font-size: calc(15 * var(--u)); }
.fase-nome { font: 700 calc(18 * var(--u)) var(--f-letreiro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); }
/* a foto é o herói: maior, saindo do quadro, com o carimbo na área dela (nada de texto embaixo) */
.area-foto { grid-area: foto; position: relative; align-self: start; margin: calc(-50 * var(--u)) 0 0 calc(-16 * var(--u)); }
.relatorio .foto, .ocorrencia .foto { width: calc(176 * var(--u)); margin: 0; }
.area-foto .carimbo-wrap, .relatorio .area-foto .carimbo-wrap, .ocorrencia .area-foto .carimbo-wrap { left: calc(-6 * var(--u)); right: auto; top: calc(118 * var(--u)); }
.area-foto .carimbo { font-size: calc(56 * var(--u)); border-width: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)); opacity: 1; background: rgba(238, 230, 206, 0.78); -webkit-text-stroke: calc(1.5 * var(--u)) rgba(238, 230, 206, 0.9); paint-order: stroke fill; box-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.3); } /* tinta sobre um papel colado por cima da foto: lê sobre o laranja */
.relatorio { grid-template-columns: auto 1fr; grid-template-areas: 'foto titulo' 'itens itens'; }
.relatorio .cab { padding-top: calc(4 * var(--u)); }
.folha h1 { font-size: calc(62 * var(--u)); }
/* selos grandes que batem um por um */
.selos { display: flex; justify-content: space-around; gap: calc(6 * var(--u)); margin: calc(16 * var(--u)) 0 calc(6 * var(--u)); }
.selo-g { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); width: calc(96 * var(--u)); text-align: center; }
.selo-g .selo { width: calc(66 * var(--u)); height: calc(66 * var(--u)); display: grid; place-items: center; border-radius: 50%; border: calc(3 * var(--u)) dashed rgba(35, 37, 42, 0.35); transform: rotate(var(--r)); }
.selo-g .selo svg { width: 58%; height: 58%; fill: rgba(35, 37, 42, 0.12); }
.selo-g small { font: calc(14 * var(--u)) / 1.2 var(--f-maquina); color: var(--tinta-suave); }
.selo-g.ok .selo { border: calc(4 * var(--u)) solid #8e6526; background: radial-gradient(circle at 36% 30%, #fff1c4, var(--ouro) 42%, #b07d2c 78%, #7d5718); box-shadow: 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, 0.4), inset 0 0 0 calc(4 * var(--u)) rgba(255, 240, 200, 0.35), inset 0 calc(-5 * var(--u)) 0 rgba(90, 60, 15, 0.35); animation: bate 0.4s cubic-bezier(.2, .7, .3, 1) backwards; animation-delay: var(--d); }
.selo-g.ok .selo svg { fill: #6e4a12; filter: drop-shadow(0 calc(1 * var(--u)) 0 rgba(255, 240, 200, 0.6)); }
.selo-g.ok small { color: var(--tinta); font-weight: 700; }
.recibo { padding: calc(8 * var(--u)) calc(12 * var(--u)); }
.recibo b { font-size: calc(38 * var(--u)); }
.recibo small, .envelope .peca small, .aliado-novo { font-size: calc(14 * var(--u)); }
.aba-pasta { font-size: calc(13 * var(--u)); height: calc(26 * var(--u)); }
.rotulo-sec { font-size: calc(13 * var(--u)); }
.dia, .cartao { font-size: calc(13 * var(--u)); }
#hud-sorte { font-size: calc(14 * var(--u)); }
/* botões: chapa mais grossa, contorno forte, sombra sólida; o principal bem mais alto e mais claro que os secundários */
.btn { min-height: calc(58 * var(--u)); border-width: calc(4 * var(--u)); font-size: calc(23 * var(--u)); -webkit-text-stroke: calc(5 * var(--u)) var(--c4); text-shadow: 0 calc(3 * var(--u)) 0 var(--c4);
--c1: #56616a; --c2: #3a434a; --c3: #2b3237; --c4: #14181b;
box-shadow: inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, 0.28), inset 0 calc(-8 * var(--u)) 0 var(--c4), inset 0 calc(-10 * var(--u)) 0 rgba(0, 0, 0, 0.25), 0 calc(6 * var(--u)) 0 rgba(0, 0, 0, 0.55); }
.btn.primario { --c1: #f0a868; --c2: #d07a3e; --c3: #b1602d; --c4: #5a280c; min-height: calc(78 * var(--u)); font-size: calc(36 * var(--u)); letter-spacing: 0.06em; }
.btn.perigo { --c1: #e2675a; --c2: #bf3d2e; --c3: #9a2b20; --c4: #4a110b; min-height: calc(78 * var(--u)); font-size: calc(36 * var(--u)); }
.btn.papel { --c1: #efe5c6; --c2: #d9cba5; --c3: #c2b083; --c4: #6e5c37; }
.btn::before, .btn::after { width: calc(9 * var(--u)); height: calc(9 * var(--u)); margin-top: calc(-7 * var(--u)); }
.btn.primario::before, .btn.perigo::before { left: calc(12 * var(--u)); } .btn.primario::after, .btn.perigo::after { right: calc(12 * var(--u)); }
/* festa da fuga: o facho do holofote varrendo atrás da ficha e papéis da ficha voando; no "visto", o facho é a lanterna que pegou */
#festa { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#festa .facho { position: absolute; left: 50%; top: -20%; width: 140vmax; height: 140vmax; margin-left: -70vmax; transform-origin: 50% 0; background: conic-gradient(from 168deg at 50% 0, transparent 0deg, rgba(200, 225, 255, 0.0) 2deg, rgba(200, 225, 255, 0.26) 8deg, rgba(200, 225, 255, 0.08) 15deg, transparent 18deg); -webkit-mask: radial-gradient(circle at 50% 0, #000 20%, transparent 62%); mask: radial-gradient(circle at 50% 0, #000 20%, transparent 62%); animation: varre 7s ease-in-out infinite alternate; }
#festa .facho.f2 { animation-duration: 9s; animation-delay: -4s; opacity: 0.7; }
#festa .papel { position: absolute; top: -8%; left: var(--x); width: calc(14 * var(--u)); height: calc(18 * var(--u)); background: var(--grao), #e7dcbc; box-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.25); animation: cai var(--t) linear infinite; animation-delay: var(--d); opacity: 0.85; }
#festa .papel:nth-child(3n) { background: var(--grao), #c9b58a; width: calc(10 * var(--u)); }
#festa .papel:nth-child(4n) { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: rgba(230, 225, 210, 0.5); box-shadow: none; } /* poeira */
#festa.fuga::before { content: ''; position: absolute; left: 50%; top: -30%; width: 120vmin; height: 90vmin; margin-left: -60vmin; background: radial-gradient(ellipse at 50% 30%, rgba(190, 215, 250, 0.32), rgba(190, 215, 250, 0.08) 45%, transparent 70%); } /* a luz fria do holofote em cima da ficha */
#festa.visto .papel { display: none; }
#festa.visto .facho { background: conic-gradient(from 170deg at 50% 0, transparent 0deg, rgba(255, 220, 160, 0.22) 6deg, rgba(255, 220, 160, 0.06) 16deg, transparent 20deg); animation: none; transform: rotate(-6deg); }
#festa.visto .facho.f2 { display: none; }
#festa.visto::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(150, 25, 18, 0.45) 100%); }
#modal > #painel { z-index: 1; }
@keyframes varre { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes cai { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(120vh) rotate(var(--g)); } }
/* mapa: a fase que falta com alfinete laranja; chefes com a foto do chefe */
.etiqueta.proxima { transform: rotate(var(--r)) scale(1.08); z-index: 1; box-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.35), 0 0 0 calc(3 * var(--u)) var(--laranja-claro); }
.etiqueta.proxima::before { background: radial-gradient(circle at 35% 35%, #ffd2a0, var(--laranja) 55%, #5a2a0e); width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin-left: calc(-5.5 * var(--u)); top: calc(2 * var(--u)); }
.etiqueta .chefe-foto { position: absolute; right: calc(-6 * var(--u)); bottom: calc(-6 * var(--u)); width: calc(28 * var(--u)); height: calc(28 * var(--u)); object-fit: cover; background: #8f979c; border: calc(2 * var(--u)) solid #fff; transform: rotate(8deg); }
.etiqueta.chefe::after { display: none; }
.etiqueta:disabled .chefe-foto { filter: grayscale(1) brightness(0.6); }
@media (max-height: 480px) {
#painel, #painel.larga { width: min(calc(740 * var(--u)), 100%); }
.area-foto { margin: calc(-34 * var(--u)) 0 0 calc(-10 * var(--u)); }
.relatorio .foto, .ocorrencia .foto { width: calc(120 * var(--u)); }
.area-foto .carimbo-wrap, .relatorio .area-foto .carimbo-wrap, .ocorrencia .area-foto .carimbo-wrap { top: calc(78 * var(--u)); left: calc(-4 * var(--u)); }
.area-foto .carimbo { font-size: calc(40 * var(--u)); }
.folha h1 { font-size: calc(46 * var(--u)); }
.selos { margin: calc(8 * var(--u)) 0 0; }
.selo-g .selo { width: calc(50 * var(--u)); height: calc(50 * var(--u)); }
.btn.primario, .btn.perigo { min-height: calc(62 * var(--u)); font-size: calc(30 * var(--u)); }
.btn { min-height: calc(52 * var(--u)); }
}
/* ===== rodada 3 do crítico (2026-10-31): letreiro mais gordo, botão com lábio grosso, medalhas, festa visível, HUD maior ===== */
:root { --f-gordo: 'Saira Stencil One', 'Big Shoulders Stencil Display', sans-serif; }
.btn { font-family: var(--f-gordo); font-weight: 400; letter-spacing: 0.04em; border-radius: calc(8 * var(--u));
box-shadow: inset 0 calc(4 * var(--u)) 0 rgba(255, 255, 255, 0.38), inset 0 calc(-12 * var(--u)) 0 var(--c4), inset 0 calc(-15 * var(--u)) 0 rgba(0, 0, 0, 0.2), 0 calc(7 * var(--u)) 0 rgba(0, 0, 0, 0.6); padding-bottom: calc(6 * var(--u)); }
.btn.primario, .btn.perigo { min-height: calc(84 * var(--u)); font-size: calc(34 * var(--u)); -webkit-text-stroke: calc(6 * var(--u)) var(--c4); text-shadow: 0 calc(4 * var(--u)) 0 var(--c4); }
.btn.primario { --c1: #ffc08a; --c2: #e0864a; --c3: #c2672f; }
.btn { font-size: calc(21 * var(--u)); }
.folha h1, .area-foto .carimbo, .recibo b { font-family: var(--f-gordo); font-weight: 400; }
.folha h1 { font-size: calc(58 * var(--u)); letter-spacing: 0; }
.area-foto .carimbo { font-size: calc(50 * var(--u)); }
.datilo, .folha p, .recibo small, .selo-g small, .envelope .peca small, .aliado-novo { font-size: calc(16 * var(--u)); }
.relatorio { column-gap: calc(20 * var(--u)); }
/* medalhas de metal com bisel e brilho especular */
.selo-g { width: calc(104 * var(--u)); }
.selo-g .selo { width: calc(86 * var(--u)); height: calc(86 * var(--u)); }
.selo-g.ok .selo { border: calc(5 * var(--u)) solid #6e4a12; background: radial-gradient(circle at 34% 26%, #fffbe6 0 8%, #ffe39a 16%, var(--ouro) 42%, #b07d2c 72%, #6e4a12); box-shadow: 0 calc(6 * var(--u)) 0 rgba(0, 0, 0, 0.45), inset 0 0 0 calc(6 * var(--u)) #d9a54a, inset 0 0 0 calc(8 * var(--u)) rgba(90, 60, 15, 0.45), inset 0 calc(-8 * var(--u)) calc(4 * var(--u)) rgba(90, 60, 15, 0.4); }
.selo-g.ok .selo svg { width: 52%; height: 52%; fill: #5a3a0c; }
/* facho do holofote bem visível nas bordas, papéis em camadas */
#festa .facho { background: conic-gradient(from 160deg at 50% 0, transparent 0deg, rgba(205, 228, 255, 0.36) 6deg, rgba(205, 228, 255, 0.14) 16deg, rgba(205, 228, 255, 0.04) 26deg, transparent 30deg); -webkit-mask: radial-gradient(circle at 50% 0, #000 30%, transparent 75%); mask: radial-gradient(circle at 50% 0, #000 30%, transparent 75%); }
.captura #festa .facho { transform: rotate(-24deg); } .captura #festa .facho.f2 { transform: rotate(18deg); }
#festa-frente { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
#festa-frente .papel { position: absolute; top: -8%; left: var(--x); width: calc(20 * var(--u)); height: calc(26 * var(--u)); background: var(--grao), #efe6cc; box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.35); animation: cai var(--t) linear infinite; animation-delay: var(--d); }
#festa-frente.visto { display: none; }
.captura #festa-frente .papel { animation-duration: var(--t) !important; animation-delay: calc(-1.5s - var(--d) * 1.3) !important; animation-play-state: paused; }
#festa .papel { width: calc(16 * var(--u)); height: calc(21 * var(--u)); }
/* HUD maior e mais claro: plaqueta de aço com valor separado do chão */
.placa { min-height: calc(54 * var(--u)); background: var(--grao-concreto), linear-gradient(#77838b, #545f66 55%, #424b51); }
.btn-icone { width: calc(54 * var(--u)); height: calc(54 * var(--u)); min-height: calc(54 * var(--u)); }
.btn-icone .ico { --t: 40; }
.btn-icone svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
#hud-fase .nome b { font: 400 calc(30 * var(--u)) / 1 var(--f-gordo); }
#hud-fase .nome span { font-size: calc(17 * var(--u)); }
#hud-colheres { font: 400 calc(26 * var(--u)) / 1 var(--f-gordo); }
#hud-colheres .ico { --t: 36; }
#hud-coleta .ico { --t: 32; filter: grayscale(1) brightness(0.55) drop-shadow(0 0 calc(1.5 * var(--u)) #000); }
#hud-chave { width: calc(54 * var(--u)); height: calc(54 * var(--u)); } #hud-chave .ico { --t: 42; }
#btn-pedra { width: calc(72 * var(--u)); height: calc(72 * var(--u)); } #btn-pedra .ico { --t: 52; }
/* bolso vazio: só a costura, sem caixa */
#hotbar .slot.vazio { background: rgba(20, 14, 10, 0.25); border-style: dashed; border-color: rgba(240, 200, 160, 0.45); box-shadow: none; }
#hotbar .slot.vazio::after { display: none; }
#hotbar .slot { width: calc(54 * var(--u)); height: calc(58 * var(--u)); } #hotbar .slot .ico { --t: 46; }
/* mapa: selos legíveis */
.etiqueta .selos i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.etiqueta { font: 400 calc(24 * var(--u)) / 1 var(--f-gordo); }
/* retrato: o letreiro gordo é mais largo; foto, título e carimbo cabem na ficha */
.relatorio .foto, .ocorrencia .foto { width: calc(146 * var(--u)); }
.folha h1 { font-size: calc(46 * var(--u)); white-space: nowrap; }
.relatorio .cab, .ocorrencia > div:last-child { min-width: 0; }
.area-foto .carimbo { font-size: calc(38 * var(--u)); border-width: calc(5 * var(--u)); }
.area-foto .carimbo-wrap, .relatorio .area-foto .carimbo-wrap, .ocorrencia .area-foto .carimbo-wrap { left: calc(-16 * var(--u)); top: calc(100 * var(--u)); }
.ocorrencia { gap: calc(18 * var(--u)); }
@media (max-height: 480px) {
.relatorio { column-gap: calc(22 * var(--u)); }
.folha h1 { font-size: calc(42 * var(--u)); }
.btn.primario, .btn.perigo { min-height: calc(64 * var(--u)); font-size: calc(28 * var(--u)); }
.selo-g .selo { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
.area-foto .carimbo { font-size: calc(36 * var(--u)); }
}
/* ===== celebração da vitória em canvas (playables-vfx, js/festa.js): substitui os papéis quadrados e os fachos em CSS ===== */
#festa, #festa-frente { position: fixed; } /* o #modal rola; a festa fica presa à tela (o canvas mede pela viewport) */
#festa canvas, #festa-frente canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#festa.fuga .facho, #festa.visto canvas, #festa-frente.visto canvas { display: none; }
/* rodada 2 do VFX: carimbo herói com desgaste de grão grande (2–3 níveis, sem ruído por pixel), fora do rosto; sombra quente nas medalhas */
:root { --gasto-grosso: url("data:image/svg+xml;utf8,"); }
.relatorio .area-foto .carimbo { -webkit-mask: var(--gasto-grosso) 0 0 / calc(160 * var(--u)) calc(80 * var(--u)); mask: var(--gasto-grosso) 0 0 / calc(160 * var(--u)) calc(80 * var(--u)); background: rgba(238, 230, 206, 0.9); }
.relatorio .area-foto .carimbo-wrap { left: calc(34 * var(--u)); top: calc(136 * var(--u)); }
.selo-g.ok .selo { box-shadow: 0 calc(6 * var(--u)) 0 rgba(110, 55, 12, 0.55), inset 0 0 0 calc(6 * var(--u)) #d9a54a, inset 0 0 0 calc(8 * var(--u)) rgba(90, 60, 15, 0.45), inset 0 calc(-8 * var(--u)) calc(4 * var(--u)) rgba(90, 60, 15, 0.4); }
@media (max-height: 480px) { .relatorio .area-foto .carimbo-wrap { left: calc(24 * var(--u)); top: calc(96 * var(--u)); } }
/* rodada 3 do VFX: carimbo FORAGIDO no peito da foto (não repete o título, não tapa o rosto nem o título); ouro saturado nas medalhas */
.relatorio .area-foto .carimbo { font-size: calc(23 * var(--u)); border-width: calc(4 * var(--u)); padding: calc(3 * var(--u)) calc(8 * var(--u)); }
.relatorio .area-foto .carimbo-wrap { left: calc(-6 * var(--u)); top: calc(108 * var(--u)); }
.selo-g.ok .selo { border-color: #7a3a08; background: linear-gradient(160deg, transparent 30%, rgba(255, 250, 225, 0.55) 38%, transparent 46%), radial-gradient(circle at 34% 26%, #fff6c8 0 9%, #ffd23e 22%, #f2a51e 52%, #c46a10 78%, #7a3a08); box-shadow: 0 calc(6 * var(--u)) 0 rgba(120, 50, 10, 0.6), inset 0 0 0 calc(6 * var(--u)) #f0b334, inset 0 0 0 calc(8 * var(--u)) rgba(120, 60, 10, 0.5), inset 0 calc(-8 * var(--u)) calc(4 * var(--u)) rgba(120, 50, 10, 0.45); }
.selo-g.ok .selo svg { fill: #6a2f06; }
@media (max-height: 480px) { .relatorio .area-foto .carimbo-wrap { left: calc(-2 * var(--u)); top: calc(82 * var(--u)); } .relatorio .area-foto .carimbo { font-size: calc(22 * var(--u)); } }
/* chave do portão reforçado: a mesma etiqueta do HUD, em cobre (o par chave/portão tem a mesma cor) */
#hud-chave-b { display: grid; place-items: center; width: calc(54 * var(--u)); height: calc(54 * var(--u)); background: var(--grao), #e9b48a; clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 100%, 0 100%, 0 22%); transform: rotate(-6deg); filter: drop-shadow(0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.5)); }
#hud-chave-b[hidden] { display: none; }
#hud-chave-b .ico { --t: 42; filter: sepia(1) saturate(2.4) hue-rotate(-18deg) brightness(0.95); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } #mao { animation: none; } }
/* papéis da frente só nas laterais: nunca em cima do carimbo nem do botão */
#festa-frente .papel:nth-child(odd) { left: calc(var(--x) * 0.1); }
#festa-frente .papel:nth-child(even) { left: calc(88% + var(--x) * 0.08); }
/* abas bloqueadas: cadeado, não transparência; fase atual com etiqueta laranja e pulso */
.aba-ala:disabled { color: var(--tinta-suave); background: var(--grao), #b9a77c; }
.aba-ala .ico { vertical-align: middle; }
.etiqueta.atual { background: var(--grao), #f3c79a; outline: calc(4 * var(--u)) solid var(--laranja); outline-offset: calc(-4 * var(--u)); animation: chama 1.4s ease-in-out infinite; }