/* ═══════════════════════════════════════════════════════════════════════════
   SERRADINHA · 02-ui — peças reutilizáveis
   O painel com ESQUADROS é a assinatura da marca. Vem daqui.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════ 1. PAINEL HUD ═══════════════════════
   Fundo chapado + hairline + esquadros de mira nos cantos.
   Zero blur, zero sombra difusa: isto é chapa, não vidro. */
.hud{
  position:relative;
  border:1px solid var(--linha-2);
  border-radius:var(--raio);
  isolation:isolate;

  /* fio de luz na aresta de cima: é o que faz a caixa ler como CHAPA e
     não como rectângulo. Uma chapa apanha luz em cima. */
  box-shadow:inset 0 1px 0 #ffffff0a;

  /* ── a corrosão («velho, usado, descontinuado, sucata») ──
     Duas camadas: a tinta por cima e a textura por baixo. O ALFA DA TINTA
     é o botão de força — a `f2` (95%) passam ~5% da corrosão, que é onde
     se vê sujidade sem o texto começar a sofrer. Subir isso é a primeira
     coisa a mexer se ele quiser mais gasto; descer, se quiser mais limpo.
     (O `background-blend-mode` não serve aqui: não tem regulação.) */
  background:
    linear-gradient(#171210f2,#171210f2),
    var(--chapa) 0 0 / 320px;
  background-color:var(--tinta);
}
/* os esquadros por cima da corrosão, o conteúdo por cima de tudo */
.hud::before,.hud::after{z-index:2}
.hud > *{position:relative;z-index:1}
.hud::before,.hud::after{
  content:"";
  position:absolute;
  width:10px;height:10px;
  border:1.5px solid var(--ferrugem);
  pointer-events:none;
  transition:width .35s var(--mola),height .35s var(--mola);
}
.hud::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.hud::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.hud:hover::before,.hud:hover::after{width:18px;height:18px}

/* variante sem realce nos cantos */
.hud-mudo::before,.hud-mudo::after{border-color:var(--linha-4)}

/* cabeça de painel — a barra de título de um instrumento */
.hud-cabeca{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 16px;
  border-bottom:1px solid var(--linha-2);
  background:#cd412a08;
}
.hud-corpo{padding:clamp(16px,2.4vw,26px)}

/* ═══════════════════════ 2. BOTÕES ═══════════════════════
   Canto cortado a 45°, como etiqueta de caixote. Sem raio, sem gradiente. */
.bt{
  --bt-fundo:transparent;
  --bt-cor:var(--osso);
  --bt-borda:var(--linha-3);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 24px;
  border:1px solid var(--bt-borda);
  background:var(--bt-fundo);
  color:var(--bt-cor);
  font-family:var(--mono);
  font-weight:700;
  font-size:.79rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  isolation:isolate;
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px));
  transition:background .2s,border-color .2s,color .2s,transform .3s var(--mola);
}
.bt:hover{transform:translate(1px,-1px)}
.bt:active{transform:translate(0,0)}
.bt svg{width:15px;height:15px;flex:none}

.bt-cheio{
  --bt-fundo:var(--ferrugem);
  --bt-cor:var(--sobre-ferrugem);
  --bt-borda:var(--ferrugem);
}
.bt-cheio:hover{--bt-fundo:#f2664a;--bt-borda:#f2664a}

.bt-linha:hover{--bt-fundo:#cd412a14;--bt-borda:var(--ferrugem)}

.bt-nu{
  --bt-borda:transparent;
  color:var(--osso-2);
  padding-inline:12px;
  clip-path:none;
}
.bt-nu:hover{color:var(--osso);--bt-fundo:#cd412a12}

.bt-g{padding:17px 32px;font-size:.84rem}

/* varrimento de luz — só no botão cheio, e uma vez */
.bt-cheio::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 32%,#ff9a7d66 48%,transparent 64%);
  transform:translateX(-130%);
  transition:transform .75s var(--seco);
}
.bt-cheio:hover::before{transform:translateX(130%)}

/* ═══════════════════════ 3. FICHAS / SELOS ═══════════════════════ */
.ficha{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 10px;
  border:1px solid var(--linha-2);
  background:#cd412a0a;
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--osso-2);
  border-radius:var(--raio);
  white-space:nowrap;
}
.ficha-forte{border-color:var(--ferrugem-medio);color:var(--ferrugem-txt);background:var(--ferrugem-fraco)}
/* 11/09 — o estado passou de amarelo para VERDE, pedido do 10100: «tem de
   ser verde, que quer dizer que teve sucesso». Só o indicador de estado. */
.ficha-viva{border-color:var(--verde-medio);color:var(--verde);background:var(--verde-fraco)}

/* ponto a pulsar — estado do servidor */
.pulso{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--verde);
  box-shadow:0 0 0 0 #3ddc84b3;
  animation:pulsar 2.4s infinite;
  flex:none;
}
.pulso.morto{background:var(--ferrugem-morta);animation:none;box-shadow:none}
@keyframes pulsar{
  0%{box-shadow:0 0 0 0 #3ddc84b3}
  70%{box-shadow:0 0 0 8px #3ddc8400}
  100%{box-shadow:0 0 0 0 #3ddc8400}
}

/* ═══════════════════════ 4. FUNDO ═══════════════════════
   Estático desde 29/08, por pedido dele: «escuro, parado». Não há vídeo
   nem canvas — a imagem vive no ::before aqui em baixo e o ::after é o
   véu que salva o texto por cima dela. */
.vfundo{
  position:fixed;
  inset:0;
  overflow:hidden;
  z-index:0;
  background:var(--fundo);
}
/* 🔴 11/09: o fundo do cartaz passa a PARADO (fixed) — pedido do 10100:
   «o fundo ainda desloca». No serradinha.pt o fundo é position:fixed e
   fica sempre parado quando se desloca a página. A secção do wipe usa a
   MESMA classe mas como acento de secção, por isso volta a absolute para
   não duplicar o fundo fixo por cima do cartaz. */
#wipe .vfundo{position:absolute}
/* A chapa gasta DELE — a MESMA imagem que está no serradinha.pt.
   Pedido dele a 26/08: «escuro, parado. Tipo, aquela imagem que tenho no
   site online, mas bastante escurecida».
   ⚠️ O ficheiro tem 475×247, logo em ecrã grande é ampliado. A esta
   escuridão isso não se vê — lê-se como chapa, não como imagem esticada.
   Está no ::before para o ::after continuar a ser o véu que salva o texto. */
.vfundo::before{
  content:"";
  position:absolute;
  inset:0;
  /* 🔴 10/09: cover → contain, pedido do 10100. A imagem de fundo agora
     estica/encolhe com o ecrã (tamanho dinâmico) em vez de ser cortada.
     Com contain a imagem inteira fica à vista, por isso a palavra RUST
     (que está na imagem) aparece mais pequena — era o que ele queria. */
  background:url(../img/textura.jpg) center/contain no-repeat;
  filter:brightness(.24) saturate(.66) contrast(1.06) blur(2px);
}

/* ── o véu por cima do fundo animado ──
   🔴 Medido no browser a 22/08: com um véu uniforme o fundo animado
   passava POR TRÁS do parágrafo e o texto deixava de se ler. Um fundo
   animado que come o texto não é um fundo bonito, é um defeito.

   A cura não é apagar a cena — é dar-lhe peso ONDE ELA NÃO ESTORVA.
   O véu é pesado à esquerda (onde vive o título e o texto) e leve à
   direita, que é onde as serras e as brasas ficam à vista.
   O instrumento do lado direito tem fundo próprio e não precisa de véu. */
.vfundo::after{
  content:"";
  position:absolute;inset:0;
  background:
    /* 1. o calor do poente, canto superior direito */
    radial-gradient(110% 80% at 78% 12%,#cd412a16,transparent 60%),
    /* 2. o véu horizontal: opaco à esquerda, aberto à direita */
    linear-gradient(90deg,#0d0a08f7 0%,#0d0a08ee 30%,#0d0a08c4 55%,#0d0a0885 78%,#0d0a0866 100%),
    /* 3. o véu vertical: fecha o topo (por baixo do menu) e o fundo */
    /* 🔴 Medido a 22/08 por amostragem da canvas: o véu vertical acabava a
       98% de opacidade e apagava EXACTAMENTE a banda onde vivem o poente e
       as serras (76-84% da altura). A cena estava a ser desenhada e ninguém
       a via. Agora fecha em cima (por baixo do menu), abre no meio-baixo, e
       só volta a fechar no último palmo, onde assenta a barra do endereço. */
    linear-gradient(180deg,#0d0a08e6 0%,#0d0a0873 24%,#0d0a0859 56%,#0d0a0866 80%,#0d0a08b3 100%);
  pointer-events:none;
}
/* em ecrã estreito o texto ocupa a largura toda ⇒ o véu passa a uniforme,
   senão a cena voltava a comer o texto do lado direito */
@media (max-width:960px){
  .vfundo::after{
    background:
      radial-gradient(110% 80% at 78% 12%,#cd412a14,transparent 60%),
      linear-gradient(180deg,#0d0a08ee 0%,#0d0a08d6 30%,#0d0a08d6 62%,#0d0a08fa 100%);
  }
}

/* ═══════════════════════ 5. NAVEGAÇÃO ═══════════════════════ */
.topo{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  height:var(--topo);
  background:#0d0a08d9;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linha);
  transition:background .3s,border-color .3s;
}
.topo[data-rolado]{background:#0d0a08f5;border-bottom-color:var(--linha-2)}

.topo-int{
  height:100%;
  display:flex;
  align-items:center;
  gap:clamp(12px,2.4vw,30px);
}

.marca{
  display:flex;
  align-items:center;
  gap:11px;
  border:0!important;
  flex:none;
}
.marca img{width:26px;height:26px;border-radius:var(--raio)}

/* ── 6) O LOGO DELE ──
   Pedido dele a 26/08: o ícone que está no rodapé do serradinha.pt, «no
   formato mais pequeno» na barra de cima e «na versão maior» no rodapé.
   É o ficheiro dele tal e qual (srs-logo.png, sha256 igual ao do site dele).
   🔴 MEDIDO a 29/08: o logo é transparente, mas a palavra RUST é PRETA e
   sobre o nosso fundo escuro DESAPARECE — lê-se SERRADINHA e SERVER e o
   meio some. No site dele não acontece porque o fundo lá é claro (#f5f5f5).
   Por isso vai numa chapa clara, que é a única forma de usar a arte dele
   sem lhe mexer nas cores. */
/* 🔴 O `box-sizing:border-box` é global (01-base.css:117), logo o padding
   come a altura POR DENTRO. Com height:76px e padding:9px a imagem desenhada
   eram **58 px** e o lettering ficava a 7,8 px — medido no render, não lido.
   O número escrito é a CAIXA, nunca a marca. Por isso o padding vertical é
   ZERO: o ficheiro dele já traz ~20 px de transparente em cima e em baixo
   (a tinta ocupa 57,4% da altura).
   Os 5 px à esquerda compensam a assimetria do próprio ficheiro — 80 px de
   margem transparente à esquerda contra 99 à direita — que sem isso deixava
   a marca fora do centro da chapa. */
.marca .logo-srs{
  width:auto;
  height:96px;
  /* 🔴 10/09: a chapa clara saiu. O texto RUST do logo foi recolorido de
     preto para branco (recolor.py), por isso o logo já se lê sobre o fundo
     escuro sem precisar de chapa — era o que o 10100 pediu («não consegues
     transparente? O fundo branco fica muito mal»). */
  background:transparent;
  padding:0;
  border-radius:0;
  /* 11/09 — o 10100: o logo do rodapé «não tem o efeito de sombra» que o
     resto do site tem e «está muito vivo». Uma sombra suave (~20% do halo
     do logo flutuante) assenta-o no fundo sem o apagar. */
  filter:drop-shadow(0 0 6px #cd412a33);
}
@media(max-width:560px){ .marca .logo-srs{height:80px} }
/* 11/09 — troca pedida pelo 10100: o logo completo passou para o CABEÇALHO.
   A barra subiu para 80px (--topo) e o logo para 64px — o 10100 pediu-o
   «semelhante aquele que depois aparece» (o do rodapé/flutuante), que anda
   nos 84–96px. 64px é o máximo que cabe na barra sem a tornar desproporcional
   em telemóvel. */
.marca .logo-srs-topo{height:64px}
.marca b{
  font-family:var(--display);
  font-weight:800;
  font-size:.94rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--osso);
  line-height:1;
}
.marca span{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.22em;
  color:var(--ferrugem-txt);
  display:block;
  margin-top:3px;
  line-height:1;
}

.menu{display:flex;align-items:center;gap:2px;margin-left:auto}
.menu a{
  position:relative;
  white-space:nowrap;   /* um item do menu nunca parte em duas linhas */
  padding:9px 13px;
  font-family:var(--mono);
  font-size:.71rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--osso-2);
  border:0!important;
  transition:color .2s;
}
.menu a:hover{color:var(--osso)}
.menu a[aria-current="true"]{color:var(--ferrugem-txt)}
.menu a[aria-current="true"]::after{
  content:"";
  position:absolute;
  left:13px;right:13px;bottom:2px;
  height:2px;
  background:var(--ferrugem);
}
/* 🔴 1024 → 1120 a 23/08. Com a entrada «Bem-vindos» o menu passou a 7 itens e a
   1025px o rótulo partia-se em duas linhas («BEM-» / «VINDOS»), o que fica pior do
   que não ter menu nenhum. Acima de 1120 os 7 cabem numa linha; abaixo, o hambúrguer
   — que já existia e já servia. Estes dois pontos TÊM de andar juntos: se só um
   mudasse, haveria uma faixa de larguras sem menu e sem hambúrguer. */
@media (max-width:1120px){.menu{display:none}}

.topo-fim{display:flex;align-items:center;gap:8px;margin-left:auto}
@media (min-width:1025px){.topo-fim{margin-left:0}}

/* interruptor de língua */
.lingua{
  display:flex;
  border:1px solid var(--linha-2);
  border-radius:var(--raio);
  overflow:hidden;
  flex:none;
}
.lingua button{
  background:transparent;
  border:0;
  padding:7px 11px;
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--osso-3);
  cursor:pointer;
  transition:background .2s,color .2s;
}
.lingua button:hover{color:var(--osso)}
.lingua button[aria-pressed="true"]{background:var(--ferrugem);color:var(--sobre-ferrugem)}

/* barra de progresso da leitura */
.progresso{
  position:absolute;
  left:0;bottom:-1px;
  height:2px;
  width:0%;
  background:var(--ferrugem);
  transition:width .1s linear;
}

/* 🔴 Medido a 390px a 22/08: marca + PT/EN + Discord + hamburguer não
   cabem em 376px — a barra de topo ia até aos 423 e fazia a PÁGINA INTEIRA
   deslizar na horizontal. Abaixo dos 620 o Discord sai da barra (continua
   na gaveta, no rodapé e na secção da comunidade: não se perde caminho
   nenhum) e a segunda linha da marca cala-se. */
@media (max-width:620px){
  .topo .bt-cheio{display:none}
  .marca span span{display:none}
  .marca b{font-size:.86rem}
  .lingua button{padding:6px 9px}
}

/* botão do menu em telemóvel */
.hamburguer{
  display:none;
  width:40px;height:40px;
  align-items:center;justify-content:center;
  background:transparent;
  border:1px solid var(--linha-2);
  border-radius:var(--raio);
  cursor:pointer;
  flex:none;
}
.hamburguer span{
  display:block;width:16px;height:1.5px;background:var(--osso);
  position:relative;transition:transform .3s var(--mola),background .2s;
}
.hamburguer span::before,.hamburguer span::after{
  content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--osso);
  transition:transform .3s var(--mola),top .2s;
}
.hamburguer span::before{top:-5px}
.hamburguer span::after{top:5px}
.hamburguer[aria-expanded="true"] span{background:transparent}
.hamburguer[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.hamburguer[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media (max-width:1120px){.hamburguer{display:flex}}

/* gaveta do menu em telemóvel */
.gaveta{
  position:fixed;
  top:var(--topo);left:0;right:0;
  z-index:49;
  background:#0d0a08fa;
  border-bottom:1px solid var(--linha-2);
  padding:12px var(--gutter) 22px;
  display:none;
  flex-direction:column;
  gap:2px;
}
.gaveta[data-aberta]{display:flex;animation:gaveta-desce .35s var(--mola) both}
@keyframes gaveta-desce{from{opacity:0;transform:translateY(-12px)}}
.gaveta a{
  padding:14px 4px;
  font-family:var(--mono);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--osso-2);
  border-bottom:1px solid var(--linha)!important;
}
.gaveta a:hover{color:var(--ferrugem-txt)}

/* ═══════════════════════ 6. PRÉ-CARREGAMENTO ═══════════════════════
   Sequência de arranque, à consola. Serve para dois fins: dá tempo às
   fontes e à canvas, e assina o tom antes de a página aparecer. */
.pre{
  position:fixed;
  inset:0;
  z-index:100;
  background:var(--fundo);
  display:grid;
  place-content:center;
  justify-items:start;
  gap:20px;
  padding:var(--gutter);
  transition:opacity .6s var(--seco),visibility .6s;
}
.pre.saiu{opacity:0;visibility:hidden;pointer-events:none}

.pre-marca{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.3rem,4vw,2rem);
  text-transform:uppercase;
  letter-spacing:.1em;
}
.pre-marca img{width:32px;height:32px;border-radius:var(--raio)}

.pre-log{
  font-family:var(--mono);
  font-size:.72rem;
  line-height:2;
  color:var(--osso-3);
  min-height:6em;
  min-width:min(320px,70vw);
}
.pre-log b{color:var(--amarelo);font-weight:600}
.pre-log i{color:var(--ferrugem-txt);font-style:normal}

.pre-barra{
  width:min(320px,70vw);
  height:2px;
  background:#cd412a1f;
  overflow:hidden;
}
.pre-barra i{
  display:block;height:100%;width:0%;
  background:var(--ferrugem);
  transition:width .25s var(--seco);
}

/* ═══════════════════════ 7. PORTÃO DE IDADE ═══════════════════════ */
.portao{
  position:fixed;
  inset:0;
  z-index:90;
  display:grid;
  place-items:center;
  padding:var(--gutter);
  background:#0d0a0899;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.portao[hidden]{display:none}

.portao-caixa{
  width:min(540px,100%);
  background:var(--tinta);
  border:1px solid var(--linha-3);
  padding:clamp(26px,4.4vw,40px);
  position:relative;
  animation:portao-entra .5s var(--mola) both;
}
@keyframes portao-entra{from{opacity:0;transform:translateY(16px)}}
/* esquadros também aqui */
.portao-caixa::before,.portao-caixa::after{
  content:"";position:absolute;width:14px;height:14px;
  border:2px solid var(--ferrugem);
}
.portao-caixa::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.portao-caixa::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

.portao-selos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.portao-caixa h2{font-size:clamp(1.4rem,3.4vw,1.9rem);margin-bottom:14px;text-transform:uppercase}
.portao-caixa p{color:var(--osso-2);margin:0 0 12px;font-size:.94rem}
.portao-caixa b{color:var(--osso);font-weight:700}
.portao-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

/* ═══════════════════════ 8. AVISO FLUTUANTE (copiar) ═══════════════════════ */
.aviso{
  position:fixed;
  left:50%;bottom:26px;
  transform:translate(-50%,20px);
  z-index:95;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  background:var(--tinta-2);
  border:1px solid var(--ferrugem-medio);
  color:var(--osso);
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s,transform .4s var(--mola),visibility .3s;
  border-radius:var(--raio);
}
.aviso[data-visivel]{opacity:1;visibility:visible;transform:translate(-50%,0)}
.aviso svg{width:15px;height:15px;color:var(--ferrugem);flex:none}

/* ═══════════════════════ 8b. LOGO FLUTUANTE ═══════════════════════
   Pedido do 10100 a 10/09: «o logotipo a flutuar na página… no canto
   inferior direito?». Fica fixo, discreto, e não rouba cliques nem
   leitura — é decoração, por isso pointer-events:none e aria-hidden. */
.logo-flutuante{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:60;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s;
}
/* 11/09 — o 10100: «o logo flutuante não devia de aparecer a não ser quando
   há scroll». Escondido no topo, aparece mal se rola. */
.logo-flutuante[data-visivel]{opacity:.5}
.logo-flutuante:hover{opacity:.85}
.logo-flutuante img{
  width:auto;
  height:clamp(44px,6vw,84px);
  filter:drop-shadow(0 0 18px #cd412a40);
}
@media (max-width:560px){ .logo-flutuante{right:10px;bottom:10px} }
@media print{ .logo-flutuante{display:none!important} }

/* ═══════════════════════ 9. REVELAÇÃO AO ROLAR ═══════════════════════ */
.rev{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--seco),transform .7s var(--seco);
}
.rev[data-visto]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none}
}