/* ========================================================================= * css/pz-ui.css — a ADAPTAÇÃO da entrega Parazona UI v2 (design/handoff/). * * Os tokens vêm de css/pz-tokens.css, que é cópia verbatim do pacote. Aqui mora * o que o handoff NÃO traz: o leiaute das telas. A folha de verdade visual * (`Parazona UI v2.dc.html`) não veio no pacote, então o arranjo abaixo é * construído a partir das medidas das §4/§5 do HANDOFF.md — cores, tipos e * espaçamentos são da entrega; a disposição é interpretação, e está marcada * como tal em docs/ui-v2.md. * * REGRA 1 DO PACOTE: nenhum valor cru. Tudo sai de var(--pz-*). Onde um token * falta, ele é criado em pz-tokens.css — não se escreve hex aqui. * ========================================================================= */ /* ---- shell de três camadas (HANDOFF §1) --------------------------------- z 0 vinheta ATRÁS do conteúdo — §6 chama isso de "a regra que já custou um bug": por cima, ela escurece os rótulos de canto e derruba o contraste pra ~1,4:1. z 1 #pz-ui a interface. `pointer-events: none` no root; cada painel interativo reativa. Sem isso o HUD come o clique do mundo. z 60 scanlines por cima de tudo. As classes .pz-vinheta / .pz-scanlines / .pz-conteudo são da entrega (pz-tokens.css); daqui pra baixo é adaptação. */ #pz-ui { position: fixed; inset: 0; pointer-events: none; font-family: var(--pz-font-dados); color: var(--pz-tinta); text-transform: uppercase; display: none; /* ligado por G.pzui.abrir() */ } #pz-ui[data-ligado='1'] { display: block; } /* A pele v2 e a v36 não podem desenhar juntas: as duas têm scanline e as duas pintam o rodapé. Enquanto a substituição não termina (são 8 passos), quem está ligado esconde a outra — ver G.pzui em src/pzui.js. */ body[data-pz='1'] #hud, body[data-pz='1'] .paperhud { display: none !important; } body[data-pz='1'] { background: var(--pz-bg); } /* ---- página e painéis (HANDOFF §4) -------------------------------------- */ .pz-pagina { max-width: var(--pz-largura-max); margin: 0 auto; padding: var(--pz-pad-pagina); height: 100%; display: grid; grid-template-columns: 300px 1fr 320px; grid-template-rows: 1fr auto; gap: var(--pz-grelha); align-content: start; } .pz-painel { pointer-events: auto; } .pz-painel--largo { padding: 16px; } /* ---- vitais (HANDOFF §4: barra h 9, ícone 20) --------------------------- */ .pz-vitais { display: flex; flex-direction: column; gap: var(--pz-gap); } .pz-vital { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; } .pz-vital__nome { font-size: var(--pz-fs-rotulo); letter-spacing: var(--pz-tr-rotulo); color: var(--pz-tinta-fraca); } .pz-vital__num { font-size: var(--pz-fs-log); color: var(--pz-tinta-media); } .pz-vital .pz-barra { grid-column: 1 / -1; } .pz-vital--saude { color: var(--pz-saude); } .pz-vital--fome { color: var(--pz-fome); } .pz-vital--sede { color: var(--pz-sede); } .pz-vital--radiacao { color: var(--pz-radiacao); } .pz-vital--sono { color: var(--pz-sono); } /* §5: abaixo de 25% a barra pisca e o ícone sobe pra cor plena */ .pz-vital[data-baixo='1'] .pz-barra > i { animation: pz-blink 1s infinite; } /* VITAL QUE O JOGO NÃO SIMULA (fome, sede, sono — ver docs/ui-v2.md). Aparece apagado e com um traço no lugar do número, em vez de mentir um valor. Sumir com a linha seria pior: o painel da entrega tem cinco, e quem compara ia achar que faltou implementar a barra, não o sistema. */ .pz-vital[data-ausente='1'] { opacity: .38; } .pz-vital[data-ausente='1'] .pz-barra > i { width: 0 !important; } /* ---- grade de itens (HANDOFF §4: 4 colunas, gap 8) ---------------------- */ .pz-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pz-gap-celula); } .pz-celula--vazia { border-color: var(--pz-traco-interno); cursor: default; } .pz-celula__nome { font-size: 10px; letter-spacing: .04em; color: var(--pz-tinta-media); padding: 2px; text-align: center; line-height: 1.15; word-break: break-word; } /* ---- log (HANDOFF §5: 5 linhas no painel, sem slide) -------------------- */ .pz-log { display: flex; flex-direction: column; gap: 3px; } .pz-log__linha { font-size: var(--pz-fs-log); color: var(--pz-tinta-media); } .pz-log__tag { color: var(--pz-tinta-fraca); } .pz-log__linha[data-tag='RADIO'] .pz-log__tag { color: var(--pz-log-radio); } .pz-log__linha[data-tag='SISTEMA'] .pz-log__tag { color: var(--pz-log-sistema); } .pz-log__linha[data-tag='ALERTA'] .pz-log__tag { color: var(--pz-log-alerta); } /* ---- painel de depuração (HANDOFF §10 passo 2) -------------------------- */ .pz-debug { grid-column: 1 / -1; display: flex; gap: var(--pz-gap); align-items: center; flex-wrap: wrap; } .pz-debug .pz-botao { padding: 5px 9px; } .pz-debug__fonte { color: var(--pz-log-sistema); font-size: var(--pz-fs-rotulo); letter-spacing: var(--pz-tr-rotulo); } /* ========================================================================= * PASSOS 4 a 8 — telas, rádio, PDA, rodapé. * A moldura do PDA é CSS, não `assets/pda-front-cut.png`: o PNG tem 2 MB e, * pior, PNG de disco é cross-origin em `file://` — o Chrome bloqueia antes de * desenhar. O handoff já prevê a saída (§9): "tudo isso também existe como CSS * puro em tokens.css". A área de tela respeita a medida da entrega, 206×637. * ========================================================================= */ .pz-pagina { /* 180, não 150: INVENTÁRIO no corpo de menu da entrega (16px, 0.14em) mede ~150 sozinho, e o item ainda carrega o '>' e o recuo — a 150 ele vazava do realce. Encolher a letra trairia o token; a coluna é que é nossa. */ grid-template-columns: 180px 1fr; grid-template-rows: 1fr auto auto; align-content: stretch; } .pz-abas { grid-row: 1; pointer-events: auto; align-content: start; } .pz-corpo { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--pz-grelha); align-content: start; } .pz-debug, .pz-rodape { grid-column: 1 / -1; } /* célula: foco de teclado é requisito da entrega (regra 6), e por isso ela é