/* Milan's Idea — retro high-contrast pixel HUD */ :root{ --ink:#12140e; --paper:#f0f0e8; --hp:#e23b3b; --st:#f2c033; --rad:#7a3ea0; --panel:rgba(18,20,14,.86); --edge:#f0f0e8; --t0:#8fb84a; --t1:#f2812f; --t2:#e23b3b; --accent:#2ec9c9; } *{ box-sizing:border-box; margin:0; padding:0; } html,body{ width:100%; height:100%; overflow:hidden; background:#000; } body{ font-family:"Courier New",ui-monospace,monospace; color:var(--paper); -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; touch-action:none; text-transform:uppercase; letter-spacing:.5px; } #game-wrap{ position:fixed; inset:0; } #game{ width:100vw; height:100vh; display:block; will-change:transform; } /* ============================================================================ HUD DE GAMEPLAY — design "3a HUD limpo" (Parazona / tokens Nocturne) Substitui o bloco de HUD antigo de css/style.css (linhas 20-79, 114-154 e 288). Âncoras em px fixos como no design (1920x1080); a escala global vive em --pzs. FONTE: o design usa Inter. O jogo roda em file:// e não pode depender de rede, então NÃO há @import/@font-face de CDN: a pilha usa a Inter LOCAL se existir e cai em system-ui (SF/Segoe/Roboto), que tem as mesmas proporções humanistas. Se você quiser Inter garantida, baixe o .woff2 para assets/fonts/ e descomente: @font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:local("Inter"), local("Inter var"), url("../assets/fonts/Inter-Variable.woff2") format("woff2-variations"); } COR: o design escreve as cores de status em oklch(). As dez estão DENTRO do gamut sRGB (conferido), então o hex ao lado é exatamente o mesmo pixel numa tela sRGB — e hex funciona em navegador velho e no canvas 2D, que é onde os blips do radar são pintados. ========================================================================== */ #hud{ position:fixed; inset:0; pointer-events:none; z-index:10; /* tokens Nocturne traduzidos */ --pzbg:#161826; /* --color-bg */ --pzsurf:#232532; /* --color-surface (o 3a não usa; fica declarado) */ --pztext:#e9e9ed; /* --color-text */ --pzacc:#9184d9; /* --color-accent */ --pzacc2:#e7e5fe; /* --color-accent-200 */ --pzn100:#f3f5fe; /* --color-neutral-100 */ --pzn200:#e1e4f2; /* --color-neutral-200 — HEX NÃO ESPECIFICADO pelo design; interpolado entre 100 e 300 */ --pzn300:#cfd3e5; /* --color-neutral-300 */ --pzn400:#b2b6ca; /* --color-neutral-400 */ /* status (fixas no design) */ --pzvida:#f2716a; /* oklch(0.70 0.16 25) */ --pzstam:#cfae42; /* oklch(0.76 0.13 92) */ --pzrad:#87d576; /* oklch(0.80 0.15 140) */ --pzfome:#f2ad73; /* oklch(0.80 0.11 60) */ --pzsede:#7dd0fa; /* oklch(0.82 0.10 232) */ --pzsan:#d997d2; /* oklch(0.76 0.11 330) */ --pzwarn:#ccae4e; /* oklch(0.76 0.12 92) barra do aviso amarelo + blip */ --pzwarn2:#e4c973; /* oklch(0.84 0.11 92) glifo "!" do aviso */ /* placas: TODO fundo do 3a é o --color-bg com alpha */ --pzp60:rgba(22,24,38,0.60); --pzp66:rgba(22,24,38,0.66); --pzp72:rgba(22,24,38,0.72); --pzp74:rgba(22,24,38,0.74); --pzp78:rgba(22,24,38,0.78); --pzp85:rgba(22,24,38,0.85); --pzp90:rgba(22,24,38,0.90); --pzp96:rgba(22,24,38,0.96); --pzs:1; /* escala global do HUD (ver @media no fim) */ /* o body do projeto força Courier New + uppercase + letter-spacing:.5px; o design 3a é Inter em caixa mista, então o HUD faz opt-out explícito */ font-family:"Inter","Inter var","Inter Variable",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-weight:400; font-size:14px; line-height:1.2; text-transform:none; letter-spacing:normal; color:var(--pzn100); -webkit-font-smoothing:antialiased; } #hud>*{ position:absolute; } /* ---------------------------------------------------------------- (a) OBJETIVO topo-centro: chevron 18x12 + placa de distância + etiqueta de rumo */ .pzobj{ left:50%; top:34px; transform:translateX(-50%) scale(var(--pzs)); transform-origin:top center; display:flex; flex-direction:column; align-items:center; gap:5px; } /* FITA DE BÚSSOLA (src/hud.js H.drawCompass). O canvas desenha traço, letra e o losango do objetivo; o CSS só põe a placa embaixo e a mira no meio. As pontas da fita apagam por alpha DENTRO do canvas — máscara de CSS não valeria aqui, porque o que precisa sumir é o traço, não a placa. */ .pzbuss{ position:relative; width:440px; height:30px; background:var(--pzp72); } #bussola{ display:block; width:440px; height:30px; } .pzbcaret{ position:absolute; left:50%; bottom:-1px; transform:translateX(-50%); width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:8px solid var(--pzacc); } .pzbrow{ display:flex; align-items:baseline; gap:8px; } /* o GRAU é a informação principal do bloco: fonte maior e tabular pra não dançar */ .pzgrau{ padding:3px 11px; background:var(--pzp85); font-size:17px; letter-spacing:0.12em; font-variant-numeric:tabular-nums; color:var(--pzn100); } .pzdist{ padding:3px 10px; background:var(--pzp72); font-size:14px; letter-spacing:0.14em; font-variant-numeric:tabular-nums; color:var(--pzn400); } .pzdist::before{ content:'\25c6 '; color:var(--pzacc); letter-spacing:0; } /* -------------------------------------------------------------- (b) TOPO-DIREITA radar 168 + FAIXA + contadores */ .pztr{ right:40px; top:34px; transform:scale(var(--pzs)); transform-origin:top right; display:flex; flex-direction:column; align-items:flex-end; gap:12px; } .pzradar{ position:relative; width:168px; height:168px; border-radius:50%; background:var(--pzp96); box-shadow:0 0 0 1px rgba(207,211,229,0.55); } .pzradar .pzring{ position:absolute; inset:26px; border-radius:50%; box-shadow:0 0 0 1px rgba(207,211,229,0.22); } /* o canvas só pinta os BLIPS: disco, aro, anel, N e seta do jogador são DOM */ #radar{ position:absolute; inset:0; width:168px; height:168px; display:block; border:0; background:transparent; border-radius:50%; } /* o radar gira com o yaw da câmera, então o N do design não pode ser estático: a camada gira e o glifo se desgira pra ficar em pé (H.update escreve as duas) */ .pznwrap{ position:absolute; inset:0; } .pznwrap i{ position:absolute; left:50%; top:8px; transform:translateX(-50%); font-style:normal; font-size:11px; letter-spacing:0.16em; color:var(--pzn300); } /* VOCÊ, no centro do radar: PONTO vermelho, não seta. O radar já gira com a câmera (o topo é sempre a sua frente) e agora a fita de bússola diz o rumo em graus — a seta repetia essas duas coisas e ainda competia com os blips, que também são quadradinhos claros. O aro escuro é o que faz o ponto se destacar de um blip que passe por baixo. */ .pzradar .pzme{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:var(--pzvida); box-shadow:0 0 0 2px rgba(22,24,38,0.92), 0 0 8px rgba(242,113,106,0.55); } .pzfaixawrap{ display:flex; align-items:center; gap:8px; } .pzfaixa{ padding:4px 11px; background:var(--pzp72); font-size:12px; letter-spacing:0.2em; color:var(--pzacc2); box-shadow:0 0 0 1px rgba(145,132,217,0.55); } /* o jogo pinta a faixa por perigo (t0/t1/t2); o design só desenhou a t0 (accent) */ .pzfaixa.t1{ color:var(--pzfome); box-shadow:0 0 0 1px rgba(242,173,115,0.55); } .pzfaixa.t2{ color:var(--pzvida); box-shadow:0 0 0 1px rgba(242,113,106,0.60); } .pzcnts{ display:flex; flex-direction:column; gap:5px; align-items:flex-end; } .pzcnt{ display:flex; align-items:center; gap:9px; padding:4px 10px; background:var(--pzp66); font-size:14px; font-variant-numeric:tabular-nums; color:var(--pzn100); } .pzcnt b{ font-weight:400; } .pzcnt i{ font-style:normal; font-size:11px; letter-spacing:0.14em; color:var(--pzn400); } /* ------------------------------------------------------------ (c) AVISOS, ESQUERDA #status é a primeira placa da coluna e some quando vazia */ .pzleft{ left:40px; top:200px; transform:scale(var(--pzs)); transform-origin:top left; display:flex; flex-direction:column; gap:6px; max-width:520px; } .pzavisos{ display:flex; flex-direction:column; gap:6px; } .pzaviso,.toast{ display:flex; align-items:center; gap:10px; padding:6px 12px; background:var(--pzp66); font-size:14px; color:var(--pzn100); box-shadow:inset 2px 0 0 var(--pzacc); opacity:1; transition:opacity .4s, transform .4s; } .toast.warn{ box-shadow:inset 2px 0 0 var(--pzwarn); } .toast.out{ opacity:0; transform:translateX(-20px); } .pzstatus{ box-shadow:inset 2px 0 0 rgba(207,211,229,0.70); color:var(--pzn200); font-size:13px; letter-spacing:0.04em; } .pzstatus:empty{ display:none; } /* DIAL DA RÁDIO — não existe no 3a; herda a placa de aviso com a barra da stamina */ .pzradio{ left:40px; top:150px; min-width:170px; padding:6px 12px; background:var(--pzp66); box-shadow:inset 2px 0 0 var(--pzstam); transform:translateX(-8px) scale(var(--pzs)); transform-origin:top left; opacity:0; transition:opacity .25s, transform .25s; } .pzradio.on{ opacity:1; transform:translateX(0) scale(var(--pzs)); } /* RELÓGIO DA RUN — design 8a ("18:42"). Herda a gramática de placa do .pzdist. A vaga em top:84px é estável nos dois layouts: 16 px abaixo do botão de pausa do toque (left:24 top:24, 44x44 -> termina em y=68) e 66 px acima do .pzradio (top:150), que entra e sai por opacity/translateX e nunca muda de altura. */ .pzhora{ left:40px; top:84px; transform:scale(var(--pzs)); transform-origin:top left; padding:3px 10px; background:var(--pzp72); font-size:14px; letter-spacing:0.14em; font-variant-numeric:tabular-nums; color:var(--pzn100); } .pzradio b{ display:block; font-weight:400; font-size:11px; letter-spacing:0.14em; color:var(--pzacc2); } .pzradio i{ display:block; font-style:normal; font-size:10px; letter-spacing:0.02em; color:var(--pzn400); margin-top:2px; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* BANNER DE EMISSÃO — não existe no 3a; placa do design com o aro vermelho da vida */ .pzstorm{ left:50%; top:118px; transform:translateX(-50%) scale(var(--pzs)); transform-origin:top center; padding:5px 14px; background:var(--pzp78); font-size:13px; letter-spacing:0.16em; color:var(--pzn100); box-shadow:0 0 0 1px rgba(242,113,106,0.6); display:none; animation:pzpulse .7s infinite; } @keyframes pzpulse{ 50%{ opacity:.62; } } /* ------------------------------------------------------------------ (d) MIRA 22px ESCURA (rgba(22,24,38,0.85)), sem ponto central. Não escala: 2px tem de ser 2px. */ .pzmira{ left:50%; top:50%; transform:translate(-50%,-50%); width:22px; height:22px; } .pzmira span{ position:absolute; background:var(--pzp85); } .pzmira .u{ left:10px; top:0; width:2px; height:7px; } .pzmira .d{ left:10px; bottom:0; width:2px; height:7px; } .pzmira .l{ top:10px; left:0; height:2px; width:7px; } .pzmira .r{ top:10px; right:0; height:2px; width:7px; } body.touch .pzmira{ display:none; } /* ------------------------------------------------------------------- (e) PROMPT top:57% é o TOPO da placa (o design não centraliza no eixo Y) */ .pzprompt{ left:50%; top:57%; transform:translateX(-50%) scale(var(--pzs)); transform-origin:top center; display:none; align-items:center; gap:12px; padding:8px 16px; background:var(--pzp74); } .pzkey{ display:grid; place-items:center; width:26px; height:26px; font-size:14px; color:var(--pzacc2); box-shadow:inset 0 0 0 1px var(--pzacc); } .pzkey.off{ display:none; } .pzptxt{ font-size:16px; letter-spacing:0.03em; color:var(--pzn100); } /* ------------------------------------------------------------ (f) CLUSTER DE STATUS 5 ícones de 30px (fome/sede/sanidade nascem em .pzoff) + trilho de stamina 214x5 */ .pzvitais{ left:40px; bottom:38px; transform:scale(var(--pzs)); transform-origin:bottom left; display:flex; flex-direction:column; align-items:flex-start; } .pzicons{ display:flex; align-items:flex-start; gap:14px; } .pzvit{ display:flex; flex-direction:column; align-items:center; gap:3px; } .pzvit svg{ display:block; } .pzvit.pzoff{ display:none; } /* vital que o jogo não simula */ .pzvit.dim{ opacity:.45; } /* radiação em zero: ícone apagado */ /* ALERTA (spec §2.2): abaixo do limiar o ícone deixa de ser discreto e pulsa em 1,6 s */ .pzvit.alerta{ opacity:1; animation:pzalerta 1.6s ease-in-out infinite; } @keyframes pzalerta{ 50%{ opacity:.42; } } .pznum{ font-size:11px; font-variant-numeric:tabular-nums; color:var(--pzn100); /* DESVIO MEDIDO do design. Ele especifica só `0 1px 3px rgba(0,0,0,0.95)` e peso 400, e funciona na cena escura em que foi desenhado. Neste jogo o chão é areia clara e capim: branco de 11px com sombra difusa some por completo — o jogador não conseguia ler a própria vida (conferido em tela). A regra do spec é "fundo transparente, só text-shadow no número", e ela continua valendo: o que mudou foi a sombra passar a ter um contorno curto de 1px, que é o que faz ela cumprir o papel sobre fundo claro. O peso 500 é o máximo que o Nocturne permite. */ font-weight:500; text-shadow:0 1px 3px rgba(0,0,0,0.95), 0 0 2px rgba(0,0,0,0.9), 1px 0 0 rgba(0,0,0,0.55), -1px 0 0 rgba(0,0,0,0.55), 0 1px 0 rgba(0,0,0,0.55), 0 -1px 0 rgba(0,0,0,0.55); } .pzrail{ position:relative; display:block; width:214px; height:5px; margin-top:11px; background:rgba(233,233,237,0.22); box-shadow:0 1px 3px rgba(0,0,0,0.8); } .pzfill{ position:absolute; inset:0; width:100%; background:var(--pzstam); } .pzfill.adren{ background:var(--pzvida); box-shadow:0 0 10px rgba(242,113,106,.7); } /* ------------------------------------------------------------------ (g) HOTBAR 4 slots de 66px, gap 8 (288px no total). Anel INSET: o slot ativo não cresce. */ .pzhotbar{ left:50%; bottom:38px; transform:translateX(-50%) scale(var(--pzs)); transform-origin:bottom center; display:flex; gap:8px; pointer-events:auto; } .hslot{ position:relative; width:66px; height:66px; background:var(--pzp72); cursor:pointer; box-shadow:inset 0 0 0 1px rgba(207,211,229,0.40); } .hslot.empty{ box-shadow:inset 0 0 0 1px rgba(207,211,229,0.28); } .hslot.active{ background:var(--pzp78); box-shadow:inset 0 0 0 2px var(--pzacc); } .hslot .hk{ position:absolute; left:6px; top:4px; font-size:11px; color:var(--pzn300); } .hslot.active .hk{ color:var(--pzacc2); } .hslot .hn{ position:absolute; right:6px; top:3px; font-size:13px; font-variant-numeric:tabular-nums; color:var(--pzn100); } /* o design não desenhou ícone (o mock não tinha arte); o jogo tem emoji e cabe */ .hslot .hic{ position:absolute; inset:0; display:grid; place-items:center; font-size:26px; line-height:1; transform:translateY(-3px); pointer-events:none; } .hslot .hnm{ position:absolute; left:0; right:0; bottom:5px; text-align:center; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--pzn200); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 3px; } .hslot.active .hnm{ color:var(--pzacc2); } .hslot.empty .hnm{ color:var(--pzn300); } .hslot.swapping{ animation:hswap .5s linear infinite; } @keyframes hswap{ 50%{ opacity:.45; } } /* -------------------------------------------------------------------- (h) ARMA munição + nome + linha de teclas, canto inferior direito */ .pzarma{ right:40px; bottom:38px; transform:scale(var(--pzs)); transform-origin:bottom right; display:flex; flex-direction:column; align-items:flex-end; gap:8px; } .pzammo{ display:flex; align-items:baseline; gap:8px; padding:4px 12px; background:var(--pzp72); } #ammoNow{ font-size:30px; line-height:1; font-variant-numeric:tabular-nums; color:var(--pzn100); } #ammoRes{ font-size:16px; font-variant-numeric:tabular-nums; letter-spacing:0.08em; color:var(--pzn400); } #ammoRes:empty{ display:none; } /* PENTE VAZIO e RECARGA (docs/pente.md). O número do pente é a peça mais lida do HUD numa briga: vazio ele fica VERMELHO e recarregando ele pisca, pra o jogador parar de puxar o gatilho sem ter que ler texto nenhum. */ #ammoNow.seco{ color:var(--hp,#f2716a); } #ammoNow.rec{ color:var(--pzacc); animation:pzrec .5s linear infinite; } @keyframes pzrec{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } } .pzwn{ display:flex; align-items:center; gap:11px; padding:7px 14px; background:var(--pzp72); } .pzwic{ font-size:17px; line-height:1; } .pzwic:empty{ display:none; } /* ---------- ícone de item (src/icones.js) ---------- O emoji é texto e se mede pelo font-size de cada caixa; a foto não. Por padrão ela tem a altura da letra e a largura da proporção da peça (fuzil 2x1 sai deitado). Onde há caixa de verdade — célula da grade, slot, hotbar, peça arrastada — ela estica na caixa e o object-fit segura a proporção. */ .pzic{ display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; line-height:1; } .pzic-img{ height:1.35em; aspect-ratio:var(--pzar, 1); max-width:100%; } .pzic img{ display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none; user-select:none; } .pzic-sheet{ image-rendering:pixelated; } /* nas caixas a foto ESTICA (a proporção fica por conta do object-fit): sem o aspect-ratio:auto, um absoluto com as quatro bordas ainda obedece a proporção e vaza */ .tile .pzic-img, .carry .pzic-img, .hslot .hic .pzic-img{ position:absolute; width:auto; height:auto; aspect-ratio:auto; } /* a peça da grade: a área da célula menos a faixa do nome embaixo e as pontas de cima */ .tile .pzic-img{ left:6px; right:6px; top:9px; bottom:13px; } .tile .ic:has(> .pzic-img){ margin:0; } .carry .pzic-img{ inset:6px; } .eqmain .ic .pzic-img, .eqslot .ic .pzic-img{ height:88%; width:92%; aspect-ratio:auto; } /* hotbar: a .hic é um grid de inset:0, onde altura em % não resolve — vai por bordas, deixando o número em cima e o nome embaixo livres */ .hslot .hic .pzic-img{ left:10px; right:10px; top:13px; bottom:15px; } .mgdet .art .big .pzic-img{ height:56px; width:84px; } @media (max-width:760px){ .mgdet .art .big .pzic-img{ height:40px; width:54px; } } #wName{ font-size:15px; letter-spacing:0.16em; text-transform:uppercase; color:var(--pzn100); } .pzkeys{ padding:4px 11px; background:var(--pzp72); font-size:11px; letter-spacing:0.16em; color:var(--pzn200); } /* ------------------------------------------------------- setas de alerta de barulho */ .alerts{ inset:0; } .aarrow{ position:absolute; transform:translate(-50%,-50%); font-size:15px; text-shadow:0 1px 3px rgba(0,0,0,0.95); pointer-events:none; } /* trilho de saque legado (nada escreve nele hoje: quem manda é #lootprompt) */ .pzlootbar{ left:50%; bottom:118px; transform:translateX(-50%) scale(var(--pzs)); transform-origin:bottom center; width:214px; height:5px; background:rgba(233,233,237,0.22); box-shadow:0 1px 3px rgba(0,0,0,0.8); display:none; overflow:hidden; } .pzlootfill{ height:100%; width:0%; background:var(--pzstam); } /* ------------------------------------------------------------- analógicos virtuais NÃO escalam: alvo de dedo é alvo de dedo. */ /* Anel de 132 px com botão interno de 56 px (design 2f). Em repouso o controle vive a 55% de opacidade e vai a 100% enquanto o dedo está nele — é a regra do spec pra o controle não competir com a cena. O direito leva contorno em acento. */ .stick{ position:absolute; width:132px; height:132px; border-radius:50%; display:none; opacity:.55; transition:opacity .12s; background:rgba(22,24,38,0.28); box-shadow:inset 0 0 0 2px rgba(207,211,229,0.50); } .stick.ativo{ opacity:1; } #stickR{ box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--pzacc) 70%, transparent); } .stick .knob{ position:absolute; left:38px; top:38px; width:56px; height:56px; border-radius:50%; background:rgba(243,245,254,0.55); box-shadow:inset 0 0 0 2px var(--pzn100); } #stickR .knob{ box-shadow:inset 0 0 0 2px var(--pzacc2); } /* ------------------------------------------------------------ CONTROLES DE TOQUE Gramática de MOBA (design 8a / regras do arco em 8b). O polegar direito PIVOTA no canto inferior direito: o botão grande de ATACAR fica sob ele, e tudo que é de combate cabe num arco de raio 118 px entre 100° e 180°. O que não é de combate (mochila, carta, câmera) é empurrado pra borda de cima — dois toques de distância do combate, de propósito. Números do 8b, todos literais: · ATACAR Ø112, centro a 100/100 do canto -> right/bottom 44 · satélites Ø62 DESENHADOS, alvo real 76 (a borda transparente de 7 px é o que aumenta a área de toque sem engordar o desenho) · folga mínima de 16 px entre satélites — nada encosta · 24 px livres na borda de baixo pro gesto do sistema Posição de cada satélite = centro do ATACAR + 118 px no ângulo, menos meio alvo. */ .tbtn{ display:none; pointer-events:auto; align-items:center; justify-content:center; flex-direction:column; gap:1px; opacity:.55; transition:opacity .1s; color:var(--pzn100); font-size:9px; letter-spacing:.06em; text-align:center; line-height:1.05; } .tbtn .tico{ font-style:normal; font-size:20px; line-height:1; } .tbtn b{ font-weight:400; font-size:8px; letter-spacing:.1em; opacity:.9; } .tbtn.press, .tbtn.on{ opacity:1; } /* ---- ATACAR: o único elemento grande da tela ---- */ .tatk{ display:none; position:absolute; right:44px; bottom:44px; width:112px; height:112px; border-radius:50%; place-items:center; pointer-events:auto; opacity:.62; transition:opacity .1s; background:rgba(22,24,38,0.72); color:var(--pzn100); box-shadow:inset 0 0 0 2px var(--pzacc), 0 0 26px color-mix(in srgb, var(--pzacc) 26%, transparent), 0 2px 14px rgba(0,0,0,.5); } .tatk .tico{ font-style:normal; font-size:40px; line-height:1; } .tatk.press{ opacity:1; background:color-mix(in srgb, var(--pzacc) 30%, rgba(22,24,38,0.72)); } body.touch .tatk{ display:grid; } /* munição embaixo do botão, como no 8a */ /* No 8a este contador é só leitura; aqui ele é TAMBÉM o botão de RECARREGAR, porque o arco de satélites não tem vaga (os quatro alvos de 76 px já se tocam) e no toque não existe tecla R — ver docs/pente.md. Por isso `pointer-events:auto` e o padding maior: o alvo passa de 15 px de altura pra 22, encostando no ATACAR sem invadir. */ .tammo{ display:none; position:absolute; right:44px; bottom:20px; width:112px; text-align:center; font-size:11px; font-variant-numeric:tabular-nums; letter-spacing:.08em; color:var(--pzn100); background:rgba(10,11,18,.82); border-radius:4px; padding:5px 0 4px; pointer-events:auto; touch-action:none; } .tammo.press{ background:rgba(30,34,52,.95); } .tammo.seco{ color:var(--hp,#f2716a); } body.touch .tammo{ display:block; } /* ---- satélites do arco: desenho de 62, alvo de 76 ---- */ .tsat{ width:76px; height:76px; border-radius:50%; border:7px solid transparent; background:rgba(22,24,38,0.76); background-clip:padding-box; box-shadow:inset 0 0 0 1px rgba(207,211,229,0.38); } body.touch .tsat{ display:flex; } body.touch .tsat.s100{ right:82px; bottom:178px; } /* 100° — SUBIR */ body.touch .tsat.s140{ right:152px; bottom:138px; } /* 140° — AGACHAR */ body.touch .tsat.s180{ right:180px; bottom:62px; } /* 180° — ARMA */ /* contextual: o ÚNICO ponto acima do arco (60°), e só existe com alvo perto. Quem liga e desliga é H.setPrompt. */ /* nasce ESCONDIDO: quem acende é H.setPrompt, quando há corpo ou contêiner por perto */ body.touch .tsat.sctx{ display:none; } .tsat.sctx{ right:3px; bottom:164px; color:oklch(.92 .08 60); box-shadow:inset 0 0 0 1px oklch(.80 .11 60), 0 0 18px color-mix(in srgb, oklch(.80 .11 60) 26%, transparent); } /* ---- CORRER: perto do analógico esquerdo (8a) ---- */ .tcorr{ width:54px; height:54px; border-radius:50%; left:196px; bottom:58px; background:rgba(22,24,38,0.76); box-shadow:inset 0 0 0 1px rgba(207,211,229,0.38); } body.touch .tcorr{ display:flex; } .tcorr.on{ box-shadow:inset 0 0 0 2px var(--pzacc); color:var(--pzacc2); } /* ---- fora do arco: borda superior direita, abaixo do radar ---- */ /* 126 e não os 130 do 8a: lá o satélite de 100° é DESENHADO com 62 px e começa em 183; aqui ele tem alvo de 76 e começa em 176, então os dois se tocavam por 2 px — uma faixa onde o toque fica ambíguo. Quatro pixels resolvem e ninguém vê. */ .tborda{ width:48px; height:48px; border-radius:12px; top:126px; background:rgba(22,24,38,0.76); box-shadow:inset 0 0 0 1px rgba(207,211,229,0.38); } body.touch .tborda{ display:flex; } body.touch .tb1{ right:24px; } body.touch .tb2{ right:82px; } body.touch .tb3{ right:140px; } body.touch .tbtn.bps{ display:flex; left:24px; top:24px; width:44px; height:44px; border-radius:50%; background:rgba(22,24,38,0.76); box-shadow:inset 0 0 0 1px rgba(207,211,229,0.38); font-size:13px; } body.touch .pzkeys{ display:none; } /* TAB/M/V não existem no toque */ /* Num celular em paisagem a coluna do topo-direita desce EXATAMENTE onde o polegar direito trabalha, e os contadores colidiam com a grade 2x2. Eles saem: as telas de celular do design (5a/7b) também não os mostram — lá o número que importa é a carga da mochila, e sucata/dinheiro se veem no inventário. O dedo vale mais que o contador. */ /* No celular a coluna do topo-direita desce EXATAMENTE onde o polegar direito trabalha. O design 8a resolve isso encolhendo o bloco: radar de 104 px com a FAIXA escrita DENTRO dele, e nada de contadores — sucata e dinheiro se veem no inventário. */ body.touch .pzcnts{ display:none; } /* o 8a encolhe o radar pra 104 px e sobe o bloco: é isso que abre espaço pros botões de borda (top:130) sem esbarrar no satélite de SAQUEAR, que vem logo abaixo */ body.touch .pztr{ position:relative; top:16px; right:20px; transform:scale(.62); } body.touch .pzfaixawrap{ position:absolute; left:0; right:0; top:138px; justify-content:center; } body.touch .pzfaixa{ padding:1px 7px; font-size:9px; letter-spacing:.14em; background:rgba(10,11,18,.82); box-shadow:none; } /* o bloco de arma sai: no 8a a mesma informação vive embaixo do botão de ATACAR */ body.touch .pzarma{ display:none; } /* --------------------------------------------------------------------- ESCALA O design é 1920x1080 com px fixos. As âncoras de canto continuam em px (40/38/34), e o CONTEÚDO de cada canto encolhe por transform:scale a partir do próprio canto (transform-origin), o que preserva a margem de segurança e não mexe em nada do layout. Mira, setas de alerta, analógicos e botões de toque ficam fora da escala. */ @media (max-width:1600px),(max-height:900px){ #hud{ --pzs:.90; } } @media (max-width:1280px),(max-height:760px){ #hud{ --pzs:.80; } } @media (max-width:1024px),(max-height:640px){ #hud{ --pzs:.70; } } @media (max-width:760px), (max-height:520px){ #hud{ --pzs:.62; } } /* Escolha de personagem na tela inicial */ .swatches.chars{ gap:8px; } .charbtn{ cursor:pointer; background:#000; color:var(--paper,#f0f0e8); border:2px solid #3a3f2c; font-family:inherit; padding:6px 12px; text-align:left; line-height:1.35; } .charbtn b{ display:block; font-size:12px; letter-spacing:.06em; } .charbtn i{ display:block; font-size:10px; color:#8a9078; font-style:normal; } .charbtn:hover{ border-color:#2ec9c9; } .charbtn.active{ border-color:#f2c033; color:#f2c033; background:#1c2414; } /* Mapa do mundo (tecla M): imagem assada do mapa inteiro + seta do jogador. */ #worldmap{ position:fixed; inset:0; display:none; z-index:40; background:rgba(6,9,6,.93); align-items:center; justify-content:center; font-family:"Courier New",ui-monospace,monospace; } #worldmap.on{ display:flex; } #worldmap .wmwrap{ position:relative; } #worldmap .wmcv{ display:block; width:min(88vh,88vw); height:min(88vh,88vw); border:2px solid #f2c033; image-rendering:auto; background:#0c1008; } #worldmap .wmhud{ position:absolute; left:0; top:-24px; font-size:12px; color:#f2c033; letter-spacing:.06em; } #worldmap .wmhud .wmpos{ color:#8a9078; } #worldmap .wmtip{ position:absolute; right:0; top:-24px; font-size:11px; color:#8a9078; } #worldmap .wmload{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; color:#f2c033; font-size:14px; background:rgba(6,9,6,.85); } /* Luneta (AS VAL, botão direito): vinheta preta com o tubo redondo no meio + retículo. O zoom em si é FOV de câmera (src/scene.js) — isto aqui é só a máscara. */ .scope{ position:absolute; inset:0; display:none; pointer-events:none; } .scope.on{ display:block; } .scope::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 27vh, rgba(0,0,0,.97) 28vh); } .scope > i{ position:absolute; background:rgba(12,14,10,.9); } .scope > i.v{ left:50%; top:calc(50% - 27vh); width:1px; height:54vh; transform:translateX(-50%); } .scope > i.h{ top:50%; left:calc(50% - 27vh); height:1px; width:54vh; transform:translateY(-50%); } .scope > i.mil{ left:50%; top:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:#e23b3b; } /* ---------- admin inspector (attachments) ---------- */ #admin{ position:fixed; top:10px; right:10px; z-index:40; display:none; max-height:94vh; overflow:auto; pointer-events:auto; } /* painel de atmosfera (src/atmoslab.js, F8): à esquerda, pra o céu e o HUD da direita ficarem à vista */ #atmoslab{ position:fixed; top:10px; left:10px; z-index:40; display:none; max-height:94vh; overflow:auto; pointer-events:auto; } .apanel.lpanel{ width:min(380px,94vw); background:rgba(20,22,16,.88); } .lread{ font-size:11px; background:#000; border:1px solid #3a3f2c; padding:4px 6px; color:#cfd6bb; } .lsl{ display:grid; grid-template-columns:92px 1fr 48px; align-items:center; gap:6px; font-size:11px; margin:1px 0; } .lsl span{ color:#b9c0a8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lsl input{ width:100%; accent-color:var(--accent); } .lsl b{ text-align:right; font-weight:normal; color:var(--paper); font-variant-numeric:tabular-nums; } .lcores{ display:flex; gap:12px; font-size:11px; margin:3px 0; } .lcores input{ width:38px; height:20px; border:1px solid #3a3f2c; background:#000; padding:0; vertical-align:middle; } .lout{ display:none; width:100%; height:120px; margin-top:5px; background:#000; color:var(--paper); border:1px solid #3a3f2c; font:10px monospace; } .abtn.acc{ border-color:var(--accent); color:var(--accent); } .apanel{ width:min(440px,94vw); background:var(--panel); border:3px solid var(--accent); padding:10px 12px; font-size:12px; line-height:1.42; box-shadow:0 4px 20px rgba(0,0,0,.55); } .ahead{ font-size:14px; font-weight:bold; border-bottom:2px solid var(--accent); padding-bottom:5px; margin-bottom:6px; display:flex; justify-content:space-between; align-items:center; } .ax{ cursor:pointer; color:var(--hp); font-weight:bold; padding:0 4px; } .ahint{ color:#b9c0a8; font-size:11px; margin-bottom:6px; } .asec{ margin:9px 0 4px; font-weight:bold; color:var(--st); border-top:1px dashed #4a4f3a; padding-top:6px; } .atbl{ width:100%; border-collapse:collapse; } .atbl th,.atbl td{ text-align:left; padding:2px 5px; border-bottom:1px solid #2c3122; vertical-align:top; } .atbl th{ color:var(--accent); font-size:11px; } .adim{ color:#8a9078; } .arow{ display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; } .abtn{ cursor:pointer; border:2px solid var(--edge); padding:2px 8px; font-weight:bold; font-size:11px; background:#000; color:var(--paper); } .abtn.on{ border-color:var(--t0); color:var(--t0); } .abtn.danger{ border-color:var(--hp); color:var(--hp); } .acat{ border:1px solid #3a3f2c; padding:4px 6px; margin-top:5px; background:rgba(0,0,0,.22); } .acath{ color:var(--accent); font-size:11px; margin-bottom:3px; } .aok{ color:var(--t0); } .acatit{ padding:2px 0 2px 4px; border-top:1px dashed #2c3122; } .acatit:first-of-type{ border-top:none; } .acatit.sub{ padding-left:16px; opacity:.85; } .acatit .aic{ font-size:14px; } .atag{ color:var(--st); font-size:11px; } .abtn.sm{ padding:1px 6px; font-size:10px; margin-left:4px; } .amob{ border:1px solid #3a3f2c; padding:4px 6px; margin-top:5px; background:rgba(0,0,0,.25); } .aparts{ display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; } .apart{ background:#000; border:1px solid #3a3f2c; padding:1px 5px; font-size:11px; } .apart i{ color:var(--accent); font-style:normal; } /* ---------- inventory ---------- */ #inv{ position:fixed; inset:0; z-index:20; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); pointer-events:auto; } .invpanel{ width:min(560px,94vw); background:var(--panel); border:3px solid var(--edge); padding:14px; } .invhead{ font-size:16px; font-weight:bold; margin-bottom:10px; border-bottom:2px solid var(--edge); padding-bottom:6px; } .invhead .hint{ font-size:10px; opacity:.7; font-weight:normal; } .eqrow{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:10px; } .eqslot{ border:2px solid var(--accent); background:#000; padding:5px; text-align:center; cursor:pointer; } .eqslot .lab{ font-size:9px; color:var(--accent); } .eqslot .ic{ font-size:22px; min-height:26px; } .eqslot .nm{ font-size:9px; opacity:.85; } .baggrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; } .slot{ position:relative; border:2px solid var(--edge); background:#000; aspect-ratio:1; padding:3px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; } .slot.empty{ border-color:#333; cursor:default; } .slot .ic{ font-size:22px; } .slot .nm{ font-size:8px; opacity:.8; text-align:center; line-height:1; } .slot .qty{ position:absolute; right:2px; bottom:1px; font-size:11px; font-weight:bold; color:var(--st); text-shadow:1px 1px 0 #000; } .slot:not(.empty):hover{ border-color:var(--st); } .invstats{ margin-top:10px; font-size:11px; opacity:.9; border-top:2px solid var(--edge); padding-top:6px; } /* drop button in a bag slot */ .slot .drop{ position:absolute; left:1px; top:0; font-size:12px; line-height:1; color:var(--hp); opacity:.55; cursor:pointer; padding:1px 3px; } .slot .drop:hover{ opacity:1; color:#fff; background:var(--hp); } /* loot (container) window — mirrors #inv */ #loot{ position:fixed; inset:0; z-index:21; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); pointer-events:auto; } .lootpanel{ border-color:var(--accent); } .lootbtns{ margin-top:12px; display:flex; gap:10px; justify-content:center; } .btn.small{ margin-top:0; font-size:13px; padding:8px 16px; } .lootempty{ opacity:.6; font-size:13px; text-align:center; padding:20px; } /* ---------- big screens ---------- */ #screens{ position:fixed; inset:0; z-index:30; display:none; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 40%, rgba(46,201,201,.08), rgba(0,0,0,.9)); pointer-events:auto; } .panel{ width:min(640px,94vw); max-height:94vh; overflow:auto; background:var(--panel); border:3px solid var(--edge); padding:22px; text-align:center; } .panel h1{ font-size:34px; letter-spacing:2px; margin-bottom:4px; } .panel.title h1{ color:var(--accent); text-shadow:3px 3px 0 #000; } .panel.dead h1{ color:var(--hp); } .panel.win h1{ color:var(--st); } .panel .sub{ font-size:13px; opacity:.8; margin-bottom:14px; } .panel .story{ font-size:12px; line-height:1.6; opacity:.92; margin:12px auto; max-width:520px; text-transform:none; } .controls{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:14px 0; } .cc{ border:2px solid var(--edge); padding:10px; font-size:11px; line-height:1.6; text-align:left; text-transform:none; min-width:210px; } .cc b{ color:var(--st); } .score{ font-size:14px; line-height:1.8; margin:14px 0; } .score .fin{ display:block; margin-top:8px; font-size:22px; color:var(--accent); } .btn{ margin-top:12px; pointer-events:auto; background:var(--accent); color:#08201f; border:none; font-weight:bold; font-family:inherit; text-transform:uppercase; font-size:18px; padding:12px 28px; cursor:pointer; letter-spacing:2px; } .btn:hover{ filter:brightness(1.15); } .btn:active{ transform:translateY(2px); } .btn.ghost{ background:transparent; color:var(--accent); border:2px solid var(--accent); font-size:14px; padding:8px 18px; margin-left:8px; } .btn.ghost:hover{ background:rgba(46,201,201,.15); } .btnrow{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px; } .btnrow .btn{ margin-top:0; } .btnrow .btn.ghost{ margin-left:0; } /* ═══════════ TELA 2a — "placa de interdição" (design Parazona) ═══════════ Estrutura do design escolhido pelo dono (docs/tela-inicial.md): placa de interdição à esquerda, menu de seis entradas à direita, gaveta embaixo. O markup está em H.showScreen('title') e não mudou. A PELE é o contrato visual final da Parazona (design/PARAZONA_UI_FINAL_INTEGRATION_PATCH/design/ui/PARAZONA_UI_DESIGN_SYSTEM_FINAL.md), e ele tem uma frase-âncora: "equipamento de campo, não software de vidro". O que isso trocou em relação à pele Nocturne que estava aqui: · PALETA. O lilás sobre azul-noite (#9184d9 sobre #161826) saiu pro preto-oliva da Zona com texto osso e âmbar de interação — as cores nº 7 do contrato. Cor aqui indica ESTADO e categoria, nunca decoração. · TIPOGRAFIA. Inter em caixa mista virou monoespaçada de terminal de campo. Rótulo curto vai em CAIXA ALTA; só o texto narrativo longo (a portaria, o rodapé, a tabela de comandos) fica em caixa mista, que é a regra nº 8. · SUPERFÍCIE OPACA. A placa, o crachá, o boletim e a gaveta eram cartões semitransparentes por cima do mundo. Agora são opacos: superfície grande de UI é opaca (regra nº 2), e vidro empilhado é exatamente o que o contrato recusa. O VÉU de fundo continua sendo véu — ele não é cartão, é o chão da tela, e é o que deixa a cena 3D ainda aparecer na borda direita. · SEM CANTO ARREDONDADO. Retângulo só existe quando tem razão física ou funcional (regra nº 1); cartão de cantos macios é a linguagem de dashboard que o contrato manda evitar. · FEEDBACK BARATO. O item em foco era um degradê com brilho. Virou um fio âmbar na borda e a mudança do próprio rótulo — "sublinhado, borda na célula funcional, mudança de ícone/valor" (regra nº 10). Nada de bloom nem glow. Uma coisa NÃO mudou, de propósito: a faixa de interdição no topo. Ela é marcação física de perímetro, não enfeite — é o mesmo motivo pelo qual o contrato deixa passar "etiqueta militar e ferragem improvisada". Ela só trocou de cor. */ #screens.tela2a{ background:none; align-items:stretch; justify-content:stretch; padding:0; } /* As cores do contrato, num lugar só. Mexer aqui repinta a tela inteira. */ .t2a{ --t2fundo:#050705; --t2sup:#080b08; --t2sup2:#0d120d; --t2txt:#ded8c4; --t2forte:#f0e7cf; --t2mudo:#788176; --t2fio:#263027; --t2ambar:#c9873d; --t2ferrugem:#9b6544; --t2ok:#8fb84a; position:relative; flex:1; overflow:hidden; color:var(--t2txt); font-family:'Courier New', ui-monospace, monospace; text-transform:none; letter-spacing:.02em; font-weight:400; font-size:15px; line-height:1.55; } /* key art da portaria: quando existir, é só apontar o background aqui */ .t2keyart{ position:absolute; inset:0; background-size:cover; background-position:center; } /* VÉU, não cartão. Opaco onde mora o texto e aberto na direita, que é o que deixa o horizonte da cena 3D aparecer atrás do menu sem nenhuma superfície de vidro. */ .t2veu{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(80deg, var(--t2fundo) 0%, var(--t2fundo) 46%, rgba(5,7,5,.82) 78%, rgba(5,7,5,.55) 100%); } /* faixa de interdição: marcação física de perímetro, o único lugar onde o acento vira área */ .t2faixa{ position:absolute; left:0; right:0; top:0; height:12px; pointer-events:none; background:repeating-linear-gradient(135deg, var(--t2ambar) 0 14px, transparent 14px 28px); } .t2corpo{ position:absolute; inset:0; display:flex; flex-direction:column; padding:clamp(28px,4.4vw,76px) clamp(24px,4.8vw,84px) clamp(22px,3.2vw,56px); overflow:auto; } .t2topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:60px; flex-wrap:wrap; } .t2org{ font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--t2ambar); margin-bottom:12px; } .t2titulo{ margin:0; font-size:clamp(44px,5.8vw,96px); line-height:.92; letter-spacing:.1em; font-weight:700; color:var(--t2forte); } .t2ver{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--t2mudo); margin-top:14px; } .t2dir{ display:flex; align-items:center; gap:20px; } /* o seletor de idioma é controle de verdade: tem alvo de clique, então pode ter caixa */ .t2seg{ display:inline-flex; border:1px solid var(--t2fio); } .t2seg span{ padding:9px 16px; font-size:13px; letter-spacing:.14em; } .t2seg span.on{ color:var(--t2forte); background:var(--t2sup2); box-shadow:inset 0 -2px 0 var(--t2ambar); } .t2seg span.t2off{ color:var(--t2mudo); cursor:not-allowed; } /* crachá: documento físico. Opaco, quadrado, e o número é a etiqueta. */ .t2cracha{ display:flex; align-items:center; gap:14px; padding:10px 18px 10px 12px; background:var(--t2sup); border:1px solid var(--t2fio); } .t2num{ width:42px; height:42px; background:var(--t2ferrugem); display:grid; place-items:center; font-size:16px; letter-spacing:.06em; color:var(--t2forte); } .t2nome{ display:block; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--t2forte); } .t2aut{ display:block; font-size:10px; letter-spacing:.14em; color:var(--t2mudo); } .t2meio{ flex:1; display:flex; align-items:center; gap:clamp(24px,4vw,72px); flex-wrap:wrap; } /* A PLACA é o documento: superfície opaca, fio duplo, sem canto macio. */ .t2placa{ width:min(520px,100%); flex:none; padding:34px 30px; border:1px solid var(--t2txt); background:var(--t2sup); } .t2placain{ border:1px solid var(--t2fio); padding:28px 24px; } .t2aviso{ font-size:clamp(34px,3.6vw,56px); line-height:1; letter-spacing:.22em; text-align:center; color:var(--t2forte); } .t2avisoen{ font-size:13px; letter-spacing:.24em; text-align:center; margin-top:10px; color:var(--t2mudo); } .t2fio{ height:1px; margin:22px 0; background:var(--t2fio); } /* texto de portaria: o único lugar da tela em caixa mista, pela regra nº 8 */ .t2texto{ margin:0; font-size:16px; line-height:1.6; text-align:center; text-wrap:pretty; } .t2texto span{ font-size:13px; color:var(--t2mudo); } .t2ref{ display:flex; justify-content:space-between; font-size:12px; letter-spacing:.14em; color:var(--t2mudo); } .t2rodape{ margin:24px 0 0; font-size:13px; line-height:1.6; color:var(--t2mudo); } .t2menu{ flex:1; min-width:300px; display:flex; flex-direction:column; } /* Sem cartão atrás de item de menu. O que separa uma linha da outra é o fio. */ .t2item{ display:flex; align-items:center; gap:22px; padding:16px 0 16px 20px; border-bottom:1px solid var(--t2fio); border-left:2px solid transparent; cursor:pointer; outline:none; } .t2item .t2i{ font-size:13px; letter-spacing:.16em; color:var(--t2mudo); width:34px; flex:none; } .t2item .t2l{ display:flex; flex-direction:column; } .t2item b{ font-size:clamp(19px,1.7vw,26px); letter-spacing:.11em; font-weight:700; color:var(--t2txt); } .t2item i{ font-style:normal; font-size:11px; letter-spacing:.16em; color:var(--t2mudo); margin-top:3px; } .t2item:hover:not(.off){ border-left-color:var(--t2fio); } /* item em foco: fio âmbar na borda e o rótulo em osso. Sem degradê, sem brilho. */ .t2item.on{ border-left-color:var(--t2ambar); background:var(--t2sup2); } .t2item.on .t2i{ color:var(--t2ambar); } .t2item.on b{ color:var(--t2forte); } .t2item.on i{ color:var(--t2txt); } .t2item.dim b{ color:var(--t2mudo); } /* desligado: o rótulo diz o porquê, não é botão morto sem explicação */ .t2item.off{ cursor:not-allowed; } .t2item.off b{ color:#4c5349; } .t2item.off i{ color:#4c5349; } .t2pe{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; } .t2teclas{ display:flex; align-items:center; gap:30px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--t2mudo); flex-wrap:wrap; } .t2teclas b{ color:var(--t2ambar); font-weight:700; } .t2online{ display:flex; align-items:center; gap:9px; } .t2online i{ width:7px; height:7px; background:var(--t2ok); } /* boletim: instrumento, então caixa é legítima — e opaca */ .t2boletim{ display:flex; align-items:center; gap:16px; padding:11px 18px; border:1px solid var(--t2fio); border-left:2px solid var(--t2ok); background:var(--t2sup); } .t2boletim span{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--t2mudo); } .t2boletim b{ font-size:20px; font-variant-numeric:tabular-nums; color:var(--t2ok); font-weight:700; } /* gaveta da ficha do operador / tabela de comandos — superfície grande, opaca */ .t2gaveta{ position:absolute; inset:auto 0 0 0; max-height:82%; overflow:auto; display:none; padding:24px clamp(24px,4.8vw,84px) 28px; background:var(--t2sup); border-top:1px solid var(--t2fio); } .t2gaveta.on{ display:block; } .t2gtit{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--t2ambar); margin-bottom:10px; } .t2cmd{ display:flex; gap:34px; flex-wrap:wrap; font-size:13px; line-height:1.7; color:var(--t2txt); } .t2cmd b{ color:var(--t2forte); font-weight:700; } .t2gfecha{ margin-top:18px; } /* os seletores herdados (personagem, cor da roupa) dentro da gaveta */ .t2gaveta .colorpick{ margin:8px 0 16px; } .t2gaveta .colorpick span{ font-size:11px; letter-spacing:.2em; color:var(--t2mudo); } /* CONFIGURAÇÕES DO PERSONAGEM: boneco à esquerda, gavetas de roupa à direita. O boneco é um canvas 3D de verdade (src/hud.js, preview) — a roupa que se escolhe entra NELE na hora, que é a única forma honesta de escolher roupa. */ .t2roupa{ display:flex; gap:clamp(18px,3vw,44px); align-items:flex-start; flex-wrap:wrap; } .t2roupa .t2rcol{ flex:1 1 260px; min-width:240px; } .t2prev{ position:relative; flex:0 0 auto; width:clamp(180px,17vw,250px); aspect-ratio:3/4; background:var(--t2fundo); border:1px solid var(--t2fio); cursor:grab; } .t2prev:active{ cursor:grabbing; } .t2prev canvas{ display:block; width:100%; height:100%; } .t2prev .t2prevdica{ position:absolute; inset:auto 0 6px 0; text-align:center; pointer-events:none; font-size:10px; letter-spacing:.18em; color:var(--t2mudo); } .t2prev .t2prevfalta{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 14px; font-size:11px; letter-spacing:.12em; color:var(--t2mudo); } .charbtn.off{ opacity:.4; cursor:default; } .charbtn.off:hover{ border-color:#3a3f2c; } /* Os controles HERDADOS que moram na gaveta (botão de personagem, seletor de cor da roupa) são globais — o criador de personagem usa os mesmos. Em vez de repintar a regra global, a gaveta os veste com a paleta dela. É a regra nº 14 do contrato: a mesma ação se representa do mesmo jeito em todo lugar, e aqui "o mesmo jeito" é o da tela em que ela está. */ .t2gaveta .charbtn{ background:var(--t2fundo); color:var(--t2txt); border:1px solid var(--t2fio); } .t2gaveta .charbtn:hover{ border-color:var(--t2mudo); } .t2gaveta .charbtn.active{ border-color:var(--t2ambar); color:var(--t2forte); background:var(--t2sup2); } .t2gaveta .charbtn i{ color:var(--t2mudo); } .t2gaveta .swatch{ border-radius:0; border:1px solid var(--t2fio); box-shadow:none; } .t2gaveta .swatch:hover{ transform:none; border-color:var(--t2mudo); } .t2gaveta .swatch.active{ border-color:var(--t2ambar); box-shadow:inset 0 0 0 2px var(--t2fundo); } .t2gaveta .mgbtn, .t2gaveta .btn{ background:transparent; color:var(--t2txt); border:1px solid var(--t2fio); border-radius:0; font-family:inherit; letter-spacing:.14em; } .t2gaveta .mgbtn:hover, .t2gaveta .btn:hover{ color:var(--t2forte); border-color:var(--t2ambar); filter:none; } /* ---------- MENU DE PAUSA (src/pausa.js) ---------- Container próprio, não o #screens: aquele é destrutivo (innerHTML='') e o fundo dele é um radial-gradient até rgba(0,0,0,.9), que ESCONDERIA o mundo congelado em vez de escurecê-lo. Aqui o véu é o mesmo do #manage. z-index 35: acima do #manage (20) e do #screens (30), abaixo do #worldmap e do #admin (40) — que o menu fecha ao abrir. */ #pausa{ position:fixed; inset:0; z-index:35; display:none; align-items:center; justify-content:center; background:rgba(8,9,6,.84); padding:16px; } #pausa.on{ display:flex; } .panel.pausa{ width:min(560px,94vw); } .panel.pausa h1{ color:var(--accent); font-size:26px; } .psgrp{ margin:16px 0 6px; border-top:1px dashed #4a4f3a; padding-top:8px; text-align:left; } .pshint{ margin-top:14px; font-size:10px; letter-spacing:.12em; color:#8d907e; } /* text-transform:none é o opt-out do projeto pra frase longa (o body força uppercase) */ .psnota{ font-size:10px; line-height:1.5; color:#8d907e; text-transform:none; text-align:left; margin-top:4px; } /* linha rótulo / controle / valor */ .optrow{ display:grid; grid-template-columns:150px 1fr 62px; gap:12px; align-items:center; margin:10px 0; font-size:11px; letter-spacing:.12em; text-align:left; } .optrow .val{ text-align:right; color:var(--st); font-weight:bold; } .optrow .mgbtn{ justify-self:start; } /* ---------- SLIDER ---------- O projeto não tinha UM pixel de CSS de formulário (o range que parece existir mora no