/* ════════════════════════════════════════════════════════════════════════════════
   PAPEL DE CAMPO — src/paperhud.js
   O papel que fica pendurado no canto quando você põe uma anotação numa hotkey.
   Veio do pacote PARAZONA (css/style.css do patch, l.255-259) com uma mudança de
   fundo: lá ele era `position:absolute` no topo-direito, ou seja, EM CIMA do
   objetivo e das contas da v36. Aqui ele é um item de fila dentro da própria
   coluna da direita (#hud .hud-corner-right) — entra embaixo das contas.

   Depois de css/ui36.css no index.html: as duas folhas falam do mesmo #hud e a
   ordem é o desempate.
   ════════════════════════════════════════════════════════════════════════════ */

#hud #paperhud{ display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  width:min(286px, 34vw); pointer-events:none; }

/* SEM PAPEL, SEM CAIXA. Sem isto o `gap:8px` da coluna abre um buraco embaixo das
   contas a run inteira, mesmo com nada pendurado. */
#hud #paperhud:empty{ display:none; }

/* A FOLHA. Papel sujo de campo: fundo bege, tipografia de máquina de escrever, tudo
   em caixa alta. É a única superfície CLARA do HUD, e é de propósito — o papel tem
   que ler como objeto físico no meio de um HUD todo escuro. */
#hud .phpaper{ width:258px; max-width:100%; background:#d8cfaa; color:#23231d;
  border:1px solid #8b8267; padding:10px 11px 9px;
  font-family:"Courier New", ui-monospace, monospace;
  text-transform:uppercase; letter-spacing:.04em; }

/* O SEGUNDO PAPEL ENTRA TORTO. Dois retângulos perfeitamente alinhados leem como
   uma tabela; meio grau de giro basta pra lerem como duas folhas soltas. */
#hud .phpaper:nth-child(2){ transform:rotate(.45deg); }

#hud .phhead, #hud .phfoot{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
#hud .phhead{ border-bottom:1px solid #8b8267; padding-bottom:5px; margin-bottom:6px; }
#hud .phhead b{ font-size:10px; letter-spacing:.09em; }
#hud .phhead span, #hud .phfoot{ font-size:6px; color:#625f4e; }
#hud .phfoot{ border-top:1px solid #8b8267; margin-top:7px; padding-top:5px; }

/* AS LINHAS. Coluna fixa de 12px pro marcador (o "·", ou o que o item mandar) e o
   resto pro texto — assim o texto de todas as linhas começa na mesma vertical. */
#hud .phlines{ display:grid; gap:4px; }
#hud .phlines>div{ display:grid; grid-template-columns:12px 1fr; gap:4px; font-size:8px; line-height:1.25; }
#hud .phlines i{ font-style:normal; color:#914938; }

/* O RECORTE DE MAPA. Desenho de traço, sem imagem: é um mapa rabiscado, não uma
   foto de satélite — e não custa um asset. */
#hud .phmaplab{ font-size:7px; color:#625f4e; margin-bottom:4px; }
#hud .phpaper svg{ display:block; width:100%; height:118px; background:#cfc7a0; }
#hud .phpaper svg .phwater { fill:none; stroke:#66766d; stroke-width:5; }
#hud .phpaper svg .phroad  { fill:none; stroke:#35372f; stroke-width:4; }
#hud .phpaper svg .phminor { fill:none; stroke:#7a7764; stroke-width:1.2; stroke-dasharray:3 3; }
#hud .phpaper svg .phpoi   { fill:#77725d; stroke:#35372f; stroke-width:1; }
#hud .phpaper svg .phtarget{ fill:none; stroke:#914938; stroke-width:2; }
#hud .phpaper svg .phplayer{ fill:#23231d; stroke:#c9873d; stroke-width:1.4; }
#hud .phpaper svg text{ fill:#35372f; font:6px "Courier New", monospace; }

/* TELA ESTREITA: o papel encolhe junto com o resto da coluna. */
@media (max-width:760px){
  #hud #paperhud{ width:min(220px, 54vw); }
  #hud .phpaper{ width:214px; padding:8px 9px; }
  #hud .phpaper svg{ height:94px; }
  #hud .phhead b{ font-size:9px; }
  #hud .phlines>div{ font-size:7px; }
}