/* ============================================================================
   ui36.css — A PELE DO HUD, entrega "PARAZONA UI FINAL v36"
   Fonte: design/parazona-main/ui/ui-main-v36.html (CSS extraído em ui-v36.css,
   ícones em ui-v36-icons.js). Doc: docs/ui-v36.md.

   POR QUE UM ARQUIVO NOVO, e não o bloco de HUD do css/style.css: o bloco de lá
   é a tela 3a (tokens Nocturne — Inter, #161826, acento roxo) e continua valendo
   pra tudo que ainda não migrou. Este arquivo entra DEPOIS dele e ganha por
   especificidade (`#hud .classe` bate `.classe`), então a v36 é a pele e o 3a é o
   chão. Quem quiser a 3a de volta tira uma linha do index.html.

   O QUE A ENTREGA MUDA DE VERDADE, além de cor:
     · a informação sai das quatro bordas e vira TRÊS blocos: cartão de minimapa
       (topo-esquerda), objetivo + mensagem (topo-direita) e vitais (baixo-esquerda);
     · o vital deixa de ser ícone que se enche e passa a ser CAIXA que muda de
       borda — normal, warn, crit. O número ficou (ver docs/ui-v36.md, "desvios");
     · tudo é monoespaçado de máquina de escritório, não Inter;
     · os números de leitura (hora, geiger, munição) são LCD de fósforo.

   FONTE: a entrega pede IBM Plex Mono / VT323 / Share Tech Mono do Google Fonts.
   O jogo roda em file:// e offline (docs/hud.md), então NÃO há link de CDN aqui:
   a pilha cai em Lucida Console / Courier New, que é o próximo degrau da própria
   entrega. A Home Video (fonte de título, TTF embutido em base64) está em
   design/parazona-main/ui/ui-v36.css se um dia valer o megabyte.

   DESVIO DE TAMANHO, e é medido: a entrega escreve rótulo de 5,5-6 px e número de
   8 px, e é isso que o autor viu no mock dela — que é uma página parada. Num jogo
   em movimento, sobre chão de areia clara e com o grão da pilha de 50 por cima,
   6 px não se lê. Todo tipo pequeno subiu UM degrau (5,5->6,5 · 6->7 · 7->8,5 ·
   8->9,5), sem mexer em placa, cor, fio ou posição. É a mesma correção que o HUD
   3a já precisou fazer, e pelo mesmo motivo (docs/hud.md, "desvios do design").
   ========================================================================== */

#hud{
  /* paleta da entrega (as :root dela, traduzidas pro escopo do HUD) */
  --v36ink:#0a0c0a;
  --v36panel:rgba(8,11,8,0.76);     /* placa do minimapa no passe final */
  --v36panel2:rgba(9,12,9,0.74);    /* objetivo */
  --v36panel3:rgba(10,14,10,0.76);  /* mensagem */
  --v36row:rgba(8,11,8,0.62);       /* caixa de vital */
  --v36line:rgba(107,117,103,0.28);
  --v36line2:rgba(110,120,105,0.22);
  --v36amber:#d97706;               /* --final-amber */
  --v36amber2:#ff9900;              /* --amber, o aro vivo */
  --v36phos:#39ff14;
  --v36paper:#d1c7a3;
  --v36bone:#ece6cf;
  --v36sodium:#ff6b00;
  --v36red:#b84b36;
  --v36crit:#914236;
  --v36warn:#8c6b35;
  --v36text:#cdd2c8;
  --v36dim:#8d988b;
  --v36geiger:#93dc81;

  /* opt-out da tipografia: o body do projeto força Courier New + uppercase, o
     bloco 3a forçava Inter. A v36 é monoespaçada de caixa mista. */
  font-family:"IBM Plex Mono","Lucida Console","Courier New",monospace;
  font-weight:400; font-size:12px; letter-spacing:normal; text-transform:none;
  color:var(--v36text);
}
#hud .digital-readout{
  /* os LCD da entrega. VT323 é de CDN; local fica Lucida Console, que também é
     de largura fixa e some no mesmo lugar. */
  font-family:"VT323","Share Tech Mono","Lucida Console","Courier New",monospace;
  text-transform:uppercase; letter-spacing:0.055em; font-variant-numeric:tabular-nums;
}
/* rebites: dois pontos escuros no topo da placa, como no case do veículo da entrega */
#hud .rivet::before,#hud .rivet::after{ content:""; position:absolute; width:5px; height:5px;
  border-radius:50%; background:#090b09; box-shadow:0 0 0 1px #555d53; top:7px; }
#hud .rivet::before{ left:7px; } #hud .rivet::after{ right:7px; }

/* ═════════════════════════════════ (a) TOPO-ESQUERDA: cartão de minimapa ════
   O radar de 168 px do 3a virou o disco do cartão: mesmo canvas, mesma rotação,
   mesmo N — o que mudou é a moldura, que agora carrega bússola em cima e geiger
   embaixo. Largura 152 px é a da entrega no passe final. */
#hud .hud-corner-left{ left:18px; top:18px; display:flex; flex-direction:column; gap:8px;
  align-items:flex-start; z-index:4; }
#hud .minimap-card{ position:relative; width:152px; padding:7px;
  background:var(--v36panel); box-shadow:0 8px 18px rgba(0,0,0,0.24), 0 0 0 1px var(--v36line); }

#hud .minimap-compass{ display:flex; justify-content:space-between; align-items:center;
  margin-bottom:5px; font-size:7px; letter-spacing:0.12em; text-transform:uppercase; color:#dcd6bd; }
#hud .minimap-compass b{ font-size:11px; font-weight:400; color:#efe6c7; font-variant-numeric:tabular-nums; }

/* o disco: fundo de grade + anéis, tudo em gradiente (a entrega não usa imagem) */
#hud .minimap-disc{ position:relative; width:100%; aspect-ratio:1/1; border-radius:50%;
  overflow:hidden; box-shadow:0 0 0 1px rgba(120,129,113,0.3);
  background:
    radial-gradient(circle at center, rgba(172,188,160,.08) 0 12%, transparent 13% 28%,
      rgba(172,188,160,.06) 29% 30%, transparent 31% 46%, rgba(172,188,160,.05) 47% 48%, transparent 49%),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, #1a201a, #0d110d 68%);
  background-size:auto, 16px 16px, 16px 16px, auto; }
/* o canvas dos blips ocupa o disco inteiro (ele é desenhado em 168 e escala) */
#hud .minimap-disc #radar{ position:absolute; inset:0; width:100%; height:100%;
  border:0; border-radius:50%; background:transparent; }
#hud .minimap-disc .pznwrap{ position:absolute; inset:0; }
#hud .minimap-disc .pznwrap i{ position:absolute; left:50%; top:3px; transform:translateX(-50%);
  font-style:normal; font-size:8px; letter-spacing:0.16em; color:#cfd6c4; text-shadow:0 1px 2px #000; }
/* VOCÊ: a entrega desenha um triângulo âmbar apontando pra frente. O disco gira com
   a câmera, então a ponta pra cima continua sendo "sua frente" (ver docs/hud.md). */
#hud .minimap-disc .pzme{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:0; height:0; background:none; border-radius:0;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-bottom:9px solid var(--v36amber2);
  filter:drop-shadow(0 0 4px rgba(255,153,0,.35)) drop-shadow(0 0 1px #000); box-shadow:none; }

#hud .minimap-geiger{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  margin-top:6px; padding:5px 6px; background:rgba(8,10,8,.6); box-shadow:0 0 0 1px rgba(88,96,83,.25); }
#hud .minimap-geiger b{ font-size:7px; font-weight:400; letter-spacing:0.14em; color:#dad4bd; }
#hud .minimap-geiger span{ font-size:8px; color:var(--v36geiger); letter-spacing:0.06em;
  /* NÃO uppercase: o `text-transform` do LCD transforma o MICRO SIGN (U+00B5) em
     GREEK CAPITAL MU e o mostrador passa a dizer "MSV/H". Visto em tela. */
  text-transform:none; }
#hud .minimap-geiger small{ grid-column:1/-1; font-size:6.5px; letter-spacing:0.12em; color:#7f887b; }
/* dose alta: o mostrador vira âmbar e depois vermelho, como as caixas de vital */
#hud .minimap-geiger.warn span{ color:#ebc36a; }
#hud .minimap-geiger.crit span{ color:#ff8b76; }

/* rodapé do cartão: faixa de perigo + relógio, os dois em placa da entrega */
#hud .minimap-foot{ display:flex; justify-content:space-between; align-items:center;
  gap:6px; margin-top:6px; }
#hud .pzfaixa{ padding:3px 6px; background:rgba(12,15,12,.6); font-size:7px; letter-spacing:0.16em;
  color:#cfd6c4; box-shadow:none; border-top:2px solid var(--v36amber);
  border-bottom:1px solid rgba(115,123,111,.3); }
#hud .pzfaixa.t1{ color:#ebc36a; border-top-color:#c9861f; }
#hud .pzfaixa.t2{ color:#ff8b76; border-top-color:var(--v36crit); }
#hud .pzhora{ position:static; padding:0; background:none; transform:none;
  font-size:13px; letter-spacing:0.06em; color:#cfe8b0; }

/* DIAL DA RÁDIO — a entrega tem a placa do PDA (borda verde, canto de baixo) e a
   faixa da estação no topo. Aqui ele herda a placa do PDA, embaixo do cartão. */
#hud .pzradio{ position:static; min-width:0; width:152px; padding:7px 9px;
  background:rgba(8,12,8,.82); box-shadow:0 8px 22px rgba(0,0,0,.24);
  border-left:2px solid #6fc35d; transform:translateY(8px); opacity:0; transition:.18s; }
#hud .pzradio.on{ opacity:1; transform:translateY(0); }
#hud .pzradio b{ display:block; font-weight:400; font-size:7px; letter-spacing:0.16em; color:#cfe7c9; }
#hud .pzradio i{ display:block; font-style:normal; font-size:8.5px; margin-top:3px; color:#9fb49a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ══════════════════════════════ (b) TOPO-DIREITA: objetivo, mensagem, contas ══ */
#hud .hud-corner-right{ right:18px; top:18px; display:flex; flex-direction:column; gap:8px;
  align-items:flex-end; z-index:4; }

/* OBJETIVO: placa de barra âmbar à esquerda. O rótulo é ::before porque o texto do
   alvo e a distância são escritos por H.update (textContent apagaria um <b> real). */
#hud .objective-panel{ min-width:270px; max-width:min(380px,40vw); padding:7px 9px;
  background:var(--v36panel2); border-left:2px solid var(--v36amber);
  box-shadow:0 8px 22px rgba(0,0,0,.24); }
#hud .objective-panel::before{ content:'OBJETIVO'; display:block; margin-bottom:3px;
  font-size:7px; letter-spacing:0.17em; color:#ddd7bd; }
#hud .objective-panel .pzalvo{ font-size:8.5px; letter-spacing:0.1em; color:#9ea79d; }
#hud .pzdist{ padding:0; background:none; margin-left:6px; font-size:8.5px; letter-spacing:0.06em; color:#cfd6c4;
  font-variant-numeric:tabular-nums; }
#hud .pzdist::before{ content:'\25c6 '; color:var(--v36amber2); letter-spacing:0; }

/* MENSAGEM: mesma placa, borda inteira. Some quando o texto é vazio — o :empty é
   o que faz a placa não ficar de pé vazia a run toda. */
#hud .pzstatus{ min-width:240px; max-width:min(360px,40vw); padding:7px 9px;
  background:var(--v36panel3); box-shadow:0 0 0 1px rgba(96,109,96,.3);
  font-size:8.5px; letter-spacing:0.06em; color:#9ea79d; line-height:1.5; }
#hud .pzstatus::before{ content:'MENSAGEM'; display:block; margin-bottom:3px;
  font-size:7px; letter-spacing:0.17em; color:#ddd7bd; }
#hud .pzstatus:empty{ display:none; }

/* CONTADORES: a entrega não tem contador de saque, então eles herdam a gramática
   do cartão — rótulo de 6 px em cima, número tabular embaixo. */
#hud .pzcnts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:rgba(96,109,96,.22); box-shadow:0 8px 18px rgba(0,0,0,.2); }
#hud .pzcnt{ display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:5px 9px; background:rgba(9,12,9,.82); }
#hud .pzcnt b{ font-weight:400; font-size:13px; color:#e6dfc7; font-variant-numeric:tabular-nums; }
#hud .pzcnt i{ font-style:normal; font-size:6.5px; letter-spacing:0.16em; color:#879082; }

/* ═══════════════════════════════════════ (c) FITA DE BÚSSOLA, topo-centro ════
   A fita é pedido do dono (docs/hud.md) e a entrega não tem equivalente: o que
   ela tem é o rumo em números, que agora mora no cartão. Então a fita continua,
   com a moldura da entrega — placa escura, fio de 1 px e cursor âmbar. As cores
   dos traços são do canvas (src/hud.js, tabela BUSS). */
#hud .pzobj{ left:50%; top:14px; transform:translateX(-50%); display:flex;
  flex-direction:column; align-items:center; gap:5px; }
#hud .pzbuss{ position:relative; width:440px; height:30px; background:rgba(8,10,8,.56);
  box-shadow:0 0 0 1px rgba(92,106,92,.22); }
#hud .pzbcaret{ position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
  width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
  border-bottom:7px solid var(--v36amber2); }
#hud .pzbrow{ display:flex; align-items:baseline; gap:8px; }
#hud .pzgrau{ padding:2px 9px; background:rgba(8,10,8,.7); font-size:13px; letter-spacing:0.08em;
  color:#e6dfc7; font-variant-numeric:tabular-nums; box-shadow:0 0 0 1px rgba(92,106,92,.22); }

/* BANNER DE EMISSÃO: a placa de aviso da entrega — fio vermelho, sem preenchimento */
#hud .pzstorm{ left:50%; top:76px; transform:translateX(-50%); padding:5px 12px;
  background:rgba(9,12,9,.8); font-size:8px; letter-spacing:0.16em; color:#ffb9a8;
  box-shadow:0 0 0 1px rgba(184,75,54,.75); display:none; animation:pzpulse .7s infinite; }

/* ══════════════════════════════ (d) BAIXO-ESQUERDA: cluster de vitais ════════
   Caixas de 28 px com ícone de contorno da biblioteca da entrega. O estado é a
   BORDA (normal/warn/crit), não o preenchimento. O número é desvio documentado. */
#hud .hud-status{ left:18px; bottom:16px; display:flex; align-items:flex-start; gap:6px; }
#hud .hud-row{ position:relative; width:31px; height:38px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; border-radius:3px;
  background:var(--v36row); box-shadow:0 0 0 1px var(--v36line2), inset 0 0 0 1px rgba(0,0,0,.22);
  color:var(--v36text); opacity:.72; }
#hud .hud-row.pzoff{ display:none; }                 /* vital que o jogo não simula */
#hud .hud-row.normal{ opacity:.72; }
#hud .hud-row.warn{ box-shadow:0 0 0 1px var(--v36warn), inset 0 0 0 1px rgba(0,0,0,.22);
  color:#ebc36a; opacity:.96; }
/* CRÍTICO PULSA. A borda vermelha parada já dizia "está ruim", mas não dizia "AGORA":
   a mesma batida do aviso de ferida do passe PSX (docs/psx.md) aparece aqui, e as duas
   juntas é que fazem 24% de vida ler como emergência sem precisar de texto. */
#hud .hud-row.crit{ box-shadow:0 0 0 1px var(--v36crit), inset 0 0 0 1px rgba(0,0,0,.22);
  color:#ff8b76; opacity:1; animation:pzferida 1.15s ease-in-out infinite; }
@keyframes pzferida{ 50%{ box-shadow:0 0 0 1px #d4563f, 0 0 10px rgba(212,86,63,.45), inset 0 0 0 1px rgba(0,0,0,.22); color:#ffb0a1; } }
#hud .hud-row.radwarn{ box-shadow:0 0 0 1px #5d8f47, inset 0 0 0 1px rgba(0,0,0,.22);
  color:#b6ff9d; opacity:.96; }
#hud .hud-row.radcrit{ box-shadow:0 0 0 1px #84d552, inset 0 0 0 1px rgba(0,0,0,.22);
  color:#d8ffbc; opacity:1; }
#hud .hud-row.dim{ opacity:.4; }                     /* dose zero: o trefoil apaga */
#hud .hud-row.alerta{ opacity:1; animation:pzalerta 1.6s ease-in-out infinite; }
#hud .hud-icon{ width:17px; height:17px; display:grid; place-items:center; }
#hud .hud-icon svg{ width:17px; height:17px; display:block; stroke:currentColor; fill:none;
  stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
/* o número: 8 px tabular com contorno curto de sombra. Mesmo motivo do 3a — o chão
   deste jogo é areia clara, e glifo claro sem contorno desaparece (docs/hud.md). */
#hud .pznum{ font-size:9.5px; line-height:1; color:currentColor; font-variant-numeric:tabular-nums;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 1px 0 0 rgba(0,0,0,.6), -1px 0 0 rgba(0,0,0,.6),
              0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(0,0,0,.6); }
/* FÔLEGO: a caixa da energia leva o trilho do 3a como fio de 2 px no pé. A entrega
   mostra só o ícone; sem o trilho não há como ver a corrida acabando ANTES de acabar. */
#hud .pzrail{ position:absolute; left:3px; right:3px; bottom:2px; width:auto; height:2px;
  margin:0; display:block; background:rgba(233,233,237,.2); box-shadow:none; }
#hud .pzfill{ position:absolute; inset:0; width:100%; background:#cfae42; }
#hud .pzfill.adren{ background:var(--v36sodium); box-shadow:0 0 8px rgba(255,107,0,.7); }

/* AVISOS (coleta, dano, recados): a placa do PDA da entrega, empilhada em cima
   dos vitais — é o canto que a v36 reserva pra mensagem de máquina. */
#hud .pzleft{ left:18px; bottom:58px; top:auto; display:flex; flex-direction:column-reverse;
  gap:5px; max-width:340px; transform:none; }
#hud .pzavisos{ display:flex; flex-direction:column-reverse; gap:5px; }
#hud .toast{ display:block; padding:6px 9px; background:rgba(10,14,10,.8);
  border-left:2px solid #6fc35d; box-shadow:0 8px 22px rgba(0,0,0,.24);
  font-size:8.5px; letter-spacing:0.06em; line-height:1.45; color:#9fb49a;
  opacity:1; transition:opacity .4s, transform .4s; }
#hud .toast.warn{ border-left-color:var(--v36amber2); color:#e3d3a5; }
#hud .toast.out{ opacity:0; transform:translateY(6px); }

/* ═════════════════════════════════════════════ (e) HOTBAR = quickbar da v36 ══
   Seis colunas na entrega, quatro no jogo (são quatro slots de cinto). Slot ativo
   é aro de fósforo, não crescimento. */
#hud .pzhotbar{ left:50%; bottom:16px; transform:translateX(-50%); display:grid;
  grid-auto-flow:column; grid-auto-columns:1fr; gap:3px; padding:4px; width:min(420px,52vw);
  background:rgba(10,14,10,.74); box-shadow:0 0 0 1px #384338, 0 10px 24px rgba(0,0,0,.28);
  pointer-events:auto; }
#hud .hslot{ position:relative; width:auto; height:50px; background:#101510; cursor:pointer;
  box-shadow:0 0 0 1px #293329; }
#hud .hslot.empty{ background:rgba(16,21,16,.55); box-shadow:0 0 0 1px #222b22; }
#hud .hslot.active{ background:#141a14; box-shadow:0 0 0 1px var(--v36phos), inset 0 0 0 1px #244e27; }
#hud .hslot .hk{ left:4px; top:2px; font-size:8px; color:#576259; }
#hud .hslot.active .hk{ color:var(--v36phos); }
#hud .hslot .hn{ right:4px; top:2px; font-size:9.5px; color:#cdd2c8; }
#hud .hslot .hic{ font-size:20px; transform:translateY(-4px); }
#hud .hslot .hnm{ bottom:4px; font-size:7px; letter-spacing:0.1em; color:#abb4a7; }
#hud .hslot.active .hnm{ color:#e4dcc0; }
#hud .hslot.empty .hnm{ color:#6a746a; }

/* ══════════════════════════════════════════════════════ (f) ARMA, baixo-direita
   A entrega não tem bloco de arma; o que ela tem é o case de metal do painel do
   veículo. É dele que a munição herda: caixa fundida, rebite e LCD de fósforo. */
#hud .pzarma{ right:18px; bottom:16px; display:flex; flex-direction:column; align-items:stretch;
  gap:5px; width:min(220px,32vw); padding:12px 11px 8px;
  background:linear-gradient(145deg,#292923,#131511);
  box-shadow:0 0 0 3px #0b0d0b, 0 8px 24px rgba(0,0,0,.42), inset 0 0 0 1px #42463c; }
#hud .pzammo{ display:flex; align-items:baseline; justify-content:center; gap:6px;
  padding:5px 8px; background:#061007; box-shadow:inset 0 0 15px #000, 0 0 0 3px #101a12; }
#hud #ammoNow{ font-size:26px; line-height:1; color:var(--v36phos);
  text-shadow:0 0 7px rgba(57,255,20,.4); font-variant-numeric:tabular-nums; }
#hud #ammoRes{ font-size:11px; letter-spacing:0.06em; color:#2f7a2a; font-variant-numeric:tabular-nums; }
#hud #ammoNow.seco{ color:#ff6b5a; text-shadow:0 0 7px rgba(184,75,54,.5); }
#hud #ammoNow.rec{ color:var(--v36amber2); text-shadow:0 0 7px rgba(255,153,0,.4); }
#hud .pzwn{ display:flex; align-items:center; justify-content:center; gap:7px; padding:0;
  background:none; }
#hud .pzwic{ font-size:12px; }
#hud #wName{ font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:#b9b9a9; }
/* ARMA GASTA (docs/desgaste.md): abaixo do limiar de travamento o nome vira âmbar. Não é
   alarme — alarme é a palavra TRAVADA no lugar do número. É o aviso de "leva um kit". */
#hud #wName.gasta{ color:#d9873d; }
#hud .pzkeys{ padding:0; background:none; text-align:center; font-size:6.5px;
  letter-spacing:0.14em; color:#737b72; }

/* ═════════════════════════════════════════════════════ (g) MIRA, PROMPT, SAQUE
   A entrega usa um PONTO de 4 px em osso. As quatro hastes do 3a ficam (o jogo
   tem tiro de verdade e o ponto só não basta em cena clara), mas em osso e com o
   ponto no meio, que é a assinatura da v36. */
#hud .pzmira span{ background:rgba(10,12,10,.7); box-shadow:0 0 0 1px rgba(236,230,207,.35); }
#hud .pzmira::after{ content:''; position:absolute; left:50%; top:50%; width:4px; height:4px;
  margin:-2px; background:var(--v36bone); opacity:.52; box-shadow:0 0 0 1px rgba(0,0,0,.32); }

#hud .pzprompt{ left:50%; top:57%; transform:translateX(-50%); align-items:center; gap:10px;
  padding:7px 12px; background:rgba(11,14,11,.84); border-left:2px solid var(--v36amber2);
  box-shadow:0 8px 22px rgba(0,0,0,.3); }
#hud .pzkey{ display:inline-grid; place-items:center; min-width:22px; height:20px; padding:0 5px;
  background:#141914; box-shadow:0 0 0 1px #687064, inset 0 -2px 0 #070907;
  font-size:10px; color:#bcc4b7; }
#hud .pzptxt{ font-size:9px; letter-spacing:0.08em; color:#d3d4c6; }

#hud .pzlootbar{ left:50%; bottom:76px; transform:translateX(-50%); width:214px; height:3px;
  background:rgba(233,233,237,.18); box-shadow:none; }
#hud .pzlootfill{ background:var(--v36amber2); }

/* SEGURE [E] PARA VASCULHAR — #lootprompt mora no index.html, fora do #hud */
#lootprompt{ background:rgba(10,14,10,.84) !important; border:0 !important;
  box-shadow:0 0 0 1px rgba(96,109,96,.3), 0 10px 28px rgba(0,0,0,.3);
  font-family:"IBM Plex Mono","Lucida Console","Courier New",monospace; color:#cdd2c8; }
#lootprompt .nm{ color:#e2dbc1; letter-spacing:0.14em; }
#lootprompt .tier{ background:none; box-shadow:0 0 0 1px var(--v36amber2); color:#e8c37a; }
#lootprompt .holdsegs i{ background:rgba(233,233,237,.18); }
#lootprompt .holdsegs i.on{ background:var(--v36amber2); }

/* ═══════════════════════════════════════════════════════════ (h) ANALÓGICOS E TOQUE
   O 8a/8b é design próprio (não veio na v36) e não muda de forma aqui: só troca de
   paleta, pra o celular não ficar com dois jogos na mesma tela. */
#hud .stick{ background:rgba(8,11,8,.3); box-shadow:inset 0 0 0 2px rgba(236,230,207,.45); }
#hud #stickR{ box-shadow:inset 0 0 0 2px rgba(255,153,0,.55); }
#hud .stick .knob{ background:rgba(236,230,207,.5); box-shadow:inset 0 0 0 2px var(--v36bone); }
#hud #stickR .knob{ box-shadow:inset 0 0 0 2px var(--v36amber2); }

/* no celular o cartão encolhe e a coluna da direita sobe (o polegar direito cobre
   exatamente onde ela estava) — as âncoras da entrega pra <=780 px */
body.touch #hud .hud-corner-left{ left:12px; top:12px; }
body.touch #hud .minimap-card{ width:118px; padding:6px; }
body.touch #hud .pzradio{ width:118px; }
body.touch #hud .hud-corner-right{ right:12px; top:12px; }
body.touch #hud .objective-panel,body.touch #hud .pzstatus{ min-width:0; max-width:52vw; }
/* CONTADORES no celular: a coluna da direita é do polegar (MOCHILA / CARTA /
   CÂMERA vivem ali, design 8a), então eles descem pra baixo do cartão. `fixed` e
   não `absolute` de propósito: o pai .hud-corner-right é posicionado, e absolute
   ancoraria neles mesmos em vez de na tela. */
body.touch #hud .pzcnts{ position:fixed; left:12px; top:auto; bottom:58px; width:118px;
  grid-template-columns:repeat(2,minmax(0,1fr)); }
body.touch #hud .pzcnt{ padding:3px 4px; }
body.touch #hud .pzcnt b{ font-size:11px; }
/* a bússola do cartão perde o rótulo: em 118 px de largura, "bússola 354° NORTE"
   não cabe e as três peças colam uma na outra (visto em 844x390) */
body.touch #hud .minimap-compass span:first-child{ display:none; }
body.touch #hud .minimap-compass{ font-size:6px; }
body.touch #hud .pzleft{ bottom:120px; }
body.touch #hud .hud-status{ left:12px; bottom:12px; }
body.touch #hud .pzleft{ left:12px; bottom:52px; max-width:52vw; }
body.touch #hud .pzobj{ display:none; }     /* a fita não cabe: o rumo fica no cartão */
body.touch #hud .pzarma{ display:none; }    /* munição vive embaixo do ATACAR (8a) */
body.touch #hud .pzhotbar{ display:none; }

/* ═══════════════════════════════════════════ (i) MENU DE PAUSA (src/pausa.js) ══
   A entrega desenha a pausa como cartão de metal com título em fio tracejado e
   itens numerados de barra âmbar. O menu do jogo tem os mesmos elementos com
   outros nomes de classe, então isto é só pele. */
#pausa{ background:rgba(4,6,4,.74); }
#pausa .panel.pausa{ width:min(440px,92vw); background:#111511; border:3px solid #2c342d;
  padding:24px 26px 20px; box-shadow:14px 18px 0 rgba(0,0,0,.28); text-align:left;
  font-family:"IBM Plex Mono","Lucida Console","Courier New",monospace; color:#aeb5aa; }
#pausa .panel.pausa h1{ font-size:22px; letter-spacing:0.12em; color:#ded8c1;
  border-bottom:1px dashed #50584d; padding-bottom:10px; margin:0 0 6px; }
#pausa .panel.pausa .sub{ font-size:8px; letter-spacing:0.1em; color:#788178; margin-bottom:14px; }
#pausa .panel.pausa .btn{ display:block; width:100%; margin:5px 0; padding:11px 12px;
  background:#181d18; border:0; border-left:2px solid #3c463d; color:#aeb5aa;
  font-size:10px; letter-spacing:0.1em; text-align:left; }
#pausa .panel.pausa .btn:hover{ background:#232a22; border-left-color:var(--amber,#ff9900);
  color:#e8e0c7; filter:none; }
#pausa .panel.pausa .btn.ghost{ border:0; border-left:2px solid #3c463d; margin-left:0; }
#pausa .panel.pausa .btnrow{ display:block; margin-top:0; }
#pausa .panel.pausa .psgrp{ border-top:1px dashed #50584d; }
#pausa .panel.pausa .mglab{ color:#9fa69b; }
#pausa .panel.pausa .optrow .val{ color:#e8c37a; font-weight:400; }
#pausa .panel.pausa .mgbtn{ background:#181d18; border:0; box-shadow:0 0 0 1px #464c41;
  color:#b8bcae; padding:6px 10px; font-size:9px; }
#pausa .panel.pausa .mgbtn:hover{ color:var(--amber,#ff9900); box-shadow:0 0 0 1px #776239; }
#pausa .panel.pausa .pshint{ color:#6e766d; letter-spacing:0.14em; font-size:8px; }
/* SLIDER: o trilho amarelo de 2 px de borda era da paleta antiga e gritava dentro do
   cartão de metal. Na v36 ele é fio fino com preenchimento âmbar e pino de papel.
   O --f (0..1) continua sendo escrito pelo JS do pausa.js — só a pele mudou. */
#pausa .panel.pausa .sldr::-webkit-slider-runnable-track{ height:6px; border:0;
  box-shadow:inset 0 0 0 1px #465044;
  background:linear-gradient(to right, var(--v36amber,#d97706) calc(var(--f,0)*100%), #0a0d0a calc(var(--f,0)*100%)); }
#pausa .panel.pausa .sldr::-moz-range-track{ height:6px; border:0;
  box-shadow:inset 0 0 0 1px #465044;
  background:linear-gradient(to right, var(--v36amber,#d97706) calc(var(--f,0)*100%), #0a0d0a calc(var(--f,0)*100%)); }
#pausa .panel.pausa .sldr::-webkit-slider-thumb{ width:8px; height:18px; margin-top:-6px;
  background:#d1c7a3; border:0; box-shadow:0 0 0 1px #0a0d0a; }
#pausa .panel.pausa .sldr::-moz-range-thumb{ width:8px; height:18px;
  background:#d1c7a3; border:0; box-shadow:0 0 0 1px #0a0d0a; }
#pausa .panel.pausa .sldr:hover::-webkit-slider-thumb{ background:#ff9900; }
#pausa .panel.pausa .sldr:hover::-moz-range-thumb{ background:#ff9900; }
#pausa .panel.pausa .psnota{ color:#788178; }

/* ══════════════════════════════════════════════ (j) GRÃO E SCANLINE DA ENTREGA
   Duas camadas fixas por cima de tudo, como na v36. Ficam ATRÁS do HUD e à
   frente do canvas; são de pixel, não de shader — o passe da pilha de 50 já
   trata a imagem 3D, e estas duas também cobrem o DOM do HUD, que é o ponto.

   O GRÃO ficou SUTIL: a entrega pede 0,035 de opacidade e isso soma com o grão do
   shader 46 e com o do passe PSX — três grãos no mesmo pixel, e o texto de 7 px do
   HUD começa a fervilhar. 0,012 é o que dá "fita velha" sem borrar leitura.
   Ajustar: GAME_OPTS.UI36 = { GRAO: 0.03 } (número = opacidade; false = fora).
   A SCANLINE é outra coisa — é linha de varredura, não sujeira — e segue no valor
   da entrega. Pra mexer nela: `#ui36fx .scanlines{ opacity }` aqui. */
#ui36fx{ position:fixed; inset:0; pointer-events:none; z-index:11; }
#ui36fx .scanlines{ position:absolute; inset:0; opacity:.55; mix-blend-mode:multiply;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.055) 2px 3px); }
#ui36fx .noise{ position:absolute; inset:0; opacity:var(--ui36-grao, .012);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }