/* ═══════════════════════════════════════════════════════════════════════════
   SERRADINHA · 03-secoes — cada secção com a sua planta
   Nada é centrado por omissão. A página lê-se da esquerda, como um documento.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════ 1. CARTAZ (hero) ═══════════════════════ */
.cartaz{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  padding-top:var(--topo);
  overflow:hidden;
  isolation:isolate;
}
.cartaz-int{
  position:relative;
  z-index:2;
  width:100%;
  padding-bottom:clamp(28px,5vw,64px);
}

.cartaz-grade{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,56px);
  align-items:flex-end;
  margin-bottom:clamp(26px,4vw,46px);
}
@media (max-width:960px){
  .cartaz-grade{grid-template-columns:1fr}
}

.cartaz-olho{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:clamp(16px,2.4vw,26px);
}

.cartaz h1{margin-bottom:clamp(18px,2.6vw,28px)}
/* a 2.ª linha do título entra a ferrugem, com calor de brasa à volta.
   É o único sítio do site com brilho a sério — se estivesse em todo o
   lado deixava de significar seja o que for.
   ⚠️ Usa --ferrugem-txt (6,37:1) e NÃO --ferrugem (4,12:1): é texto. */
.cartaz h1 em{
  font-style:normal;
  color:var(--ferrugem-txt);
  display:block;
  text-shadow:var(--halo-forte);
}

/* ── O EFEITO DE «USADO» NAS LETRAS ──
   Pedido dele a 26/08: «a fonte DA SERRADINHA — eu já vi estas letras com
   um efeito e até tinha feito referência à beleza! Estas não têm esse
   efeito de usado». A mesma chapa do fundo entra DENTRO das letras, em
   soft-light por cima do laranja: o laranja manda na cor (é ele que dá o
   contraste), a chapa só lhe come o brilho aqui e ali.
   🔴 O @supports não é enfeite: sem background-clip:text, um text-fill
   transparente apagava o nome do servidor por completo. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .cartaz h1 em{
    background-image:url(../img/textura.jpg),
      linear-gradient(178deg,#ff8d6e 0%,#f2664a 44%,#d4523a 100%);
    background-size:760px auto, cover;
    background-position:center 38%, center;
    background-blend-mode:soft-light;
    -webkit-background-clip:text;
            background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 0 24px #cd412a4d);
  }
  /* o reclame a piscar mexia no text-shadow, que aqui já não pinta nada */
  .cartaz h1 em.acende{animation-name:acender-nome}
  @keyframes acender-nome{
    0%{opacity:.05} 5%{opacity:.78} 7%{opacity:.07} 13%{opacity:.88}
    15%{opacity:.10} 16%{opacity:.72} 22%{opacity:.09} 34%{opacity:1}
    38%{opacity:.42} 41%{opacity:1} 100%{opacity:1}
  }
}

/* ── O NOME ACENDE COMO UM RECLAME AVARIADO ──
   O briefing dele: «velho, usado, descontinuado, sucata». Um letreiro que
   pega à terceira diz isso melhor do que qualquer textura.
   ⚠️ Os tempos são propositadamente IRREGULARES — falhas a intervalos
   certinhos leem-se como animação, não como avaria. */
@keyframes acender{
  0%   {opacity:.05; text-shadow:none}
  5%   {opacity:.78; text-shadow:var(--halo)}
  7%   {opacity:.07; text-shadow:none}
  13%  {opacity:.88; text-shadow:var(--halo-forte)}
  15%  {opacity:.10; text-shadow:none}
  16%  {opacity:.72; text-shadow:var(--halo)}
  22%  {opacity:.09; text-shadow:none}
  34%  {opacity:1;   text-shadow:var(--halo-forte)}
  38%  {opacity:.42; text-shadow:var(--halo)}
  41%  {opacity:1;   text-shadow:var(--halo-forte)}
  62%  {opacity:1;   text-shadow:var(--halo-forte)}
  64%  {opacity:.68; text-shadow:var(--halo)}
  66%  {opacity:1;   text-shadow:var(--halo-forte)}
  100% {opacity:1;   text-shadow:var(--halo-forte)}
}
.cartaz h1 [data-acende].acende,
.cartaz h1 em.acende{animation:acender 1.9s var(--seco) both}

/* a 1.ª linha (osso) acende sem halo — o brilho é privilégio do nome */
.cartaz h1 span.acende{animation:acender 1.9s var(--seco) both}
.cartaz h1 span.acende{text-shadow:none}

/* quem desligou animações lê o nome já aceso, sem uma única falha */
@media (prefers-reduced-motion:reduce){
  .cartaz h1 .acende{animation:none;opacity:1}
}

.cartaz .lead{max-width:56ch}

.cartaz-acoes{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:clamp(22px,3vw,32px);
}

/* ── instrumento do lado direito: o retrato do servidor ── */
.instrumento{
  width:min(340px,100%);
  flex:none;
}
.instrumento .hud-corpo{padding:0}

.leitura{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:13px 16px;
  border-bottom:1px solid var(--linha);
}
.leitura:last-child{border-bottom:0}
.leitura dt{
  font-family:var(--mono);
  font-size:.67rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--osso-3);
  margin:0;
}
.leitura dd{
  margin:0;
  font-family:var(--mono);
  font-weight:700;
  font-size:.95rem;
  color:var(--osso);
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.leitura dd small{
  font-weight:400;
  color:var(--osso-3);
  font-size:.8em;
}
.leitura-destaque dd{font-size:1.5rem;color:var(--ferrugem-txt);line-height:1}
/* datas do mapa (último wipe / próximo): mais compridas que os outros
   valores, por isso um corpo ligeiramente menor — mas IGUAL nas duas. */
#mapa-ultimo,#mapa-proximo{font-size:.82rem}

/* ── barra do endereço, ao fundo do cartaz ── */
.endereco{
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,20px);
  flex-wrap:wrap;
  padding:clamp(14px,2vw,18px) clamp(16px,2.4vw,22px);
  border:1px solid var(--linha-2);
  background:#0d0a08cc;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:var(--raio);
}
.endereco-rot{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--osso-3);
  flex:none;
}
.endereco code{
  font-family:var(--mono);
  font-size:clamp(.95rem,2.2vw,1.3rem);
  font-weight:700;
  color:var(--osso);
  letter-spacing:.01em;
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
}
.endereco code::-webkit-scrollbar{display:none}
.endereco .bt{flex:none}

/* seta de rolar */
.rolar{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  z-index:2;
  display:grid;
  justify-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--osso-3);
  border:0!important;
}
.rolar i{
  display:block;
  width:1px;height:32px;
  background:linear-gradient(180deg,var(--ferrugem),transparent);
  animation:descer 2.2s var(--seco) infinite;
}
@keyframes descer{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@media (max-height:640px){.rolar{display:none}}

/* ═══════════════════════ 2. CINTA DE DADOS ═══════════════════════
   Faixa de células separadas por hairlines — grupo de instrumentos. */
.cinta{
  border-block:1px solid var(--linha-2);
  background:var(--fundo-2);
  position:relative;
  z-index:2;
}
.cinta-grade{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:820px){.cinta-grade{grid-template-columns:repeat(2,1fr)}}

.celula{
  padding:clamp(18px,2.6vw,28px) clamp(14px,2vw,22px);
  border-left:1px solid var(--linha);
  display:grid;
  gap:7px;
  align-content:start;
}
.celula:first-child{border-left:0}
@media (max-width:820px){
  .celula:nth-child(odd){border-left:0}
  .celula:nth-child(n+3){border-top:1px solid var(--linha)}
}
.celula-rot{
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--osso-3);
}
.celula-val{
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(1.25rem,2.8vw,1.85rem);
  line-height:1;
  color:var(--osso);
  font-variant-numeric:tabular-nums;
  display:flex;
  align-items:baseline;
  gap:6px;
}
.celula-val small{font-size:.55em;color:var(--osso-3);font-weight:500}
.celula-nota{font-size:.76rem;color:var(--osso-3);line-height:1.4}

/* ═══════════════════════ 3. FOLHA DE ESPECIFICAÇÕES ═══════════════════════
   Não são "cartões": é uma folha técnica. Duas colunas de pares chave/valor
   com hairline entre linhas, como um caderno de encargos. */
.especs{
  display:grid;
  /* 🔴 Medido a 390px a 22/08: `minmax(380px,1fr)` cru FORÇA 380px de
     largura mínima mesmo quando o contentor só tem 376 — e a página
     passa a deslizar na horizontal. O `min(380px,100%)` deixa a coluna
     encolher abaixo do mínimo quando o ecrã é mais estreito do que ele.
     É o remédio para TODOS os minmax() desta folha; os outros já cabem. */
  grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));
  gap:0 clamp(24px,4vw,52px);
}
.espec{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--linha);
}
.espec dt{
  font-size:.9rem;
  color:var(--osso-2);
  margin:0;
}
.espec dd{
  margin:0;
  font-family:var(--mono);
  font-size:.86rem;
  font-weight:700;
  color:var(--osso);
  text-align:right;
  letter-spacing:.01em;
}
.espec dd.sim{color:var(--ferrugem)}
.espec dd.nao{color:var(--ferrugem-txt)}

/* bloco "medido" — o que o servidor diz de si próprio */
.medido{margin-top:clamp(34px,4.6vw,52px)}
.medido .hud-cabeca{gap:10px;flex-wrap:wrap}
.medido-nota{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.06em;
  color:var(--osso-3);
  text-transform:none;
}
.medido-grade{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0;
}
/* 🔴 Medido no browser a 22/08: em linha (dt à esquerda, dd à direita) o
   endereço "194.65.190.109:28015" não cabia em 200px e TRANSBORDAVA por
   cima da etiqueta da célula ao lado — a seed ficava ilegível.
   Aqui a leitura empilha-se: a etiqueta em cima, o valor por baixo com a
   largura toda da célula. É o único sítio do site onde .leitura não é
   lado-a-lado, e é de propósito. */
.medido-grade .leitura{
  display:grid;
  gap:6px;
  align-content:start;
  border-right:1px solid var(--linha);
  border-bottom:1px solid var(--linha);
  min-width:0;
}
.medido-grade .leitura dd{
  text-align:left;
  font-size:.82rem;
  overflow-wrap:anywhere;   /* um valor longo quebra dentro da célula */
  min-width:0;
}

/* ═══════════════════════ 4. MAPA INTERACTIVO ═══════════════════════ */
.mapa-conj{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(18px,2.6vw,30px);
  align-items:start;
}
@media (max-width:940px){.mapa-conj{grid-template-columns:1fr}}

.mapa-palco{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#0d0a08;
  border:1px solid var(--linha-2);
  cursor:grab;
  touch-action:none;
  border-radius:var(--raio);
}
.mapa-palco:active{cursor:grabbing}
.mapa-palco::before,.mapa-palco::after{
  content:"";position:absolute;width:16px;height:16px;
  border:2px solid var(--ferrugem);z-index:4;pointer-events:none;
}
.mapa-palco::before{top:8px;left:8px;border-right:0;border-bottom:0}
.mapa-palco::after{bottom:8px;right:8px;border-left:0;border-top:0}

.mapa-tela{
  position:absolute;
  inset:0;
  transform-origin:0 0;
  will-change:transform;
}
.mapa-tela img{
  width:100%;height:100%;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

/* grelha de coordenadas por cima do mapa */
.mapa-grelha{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s;
  background-image:
    linear-gradient(90deg,transparent calc(50% - .5px),#cd412a38 calc(50% - .5px),#cd412a38 calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(180deg,transparent calc(50% - .5px),#cd412a38 calc(50% - .5px),#cd412a38 calc(50% + .5px),transparent calc(50% + .5px));
  /* 🔴 11/09 — a grelha do Rust é CENTRADA no mapa (0,0 no centro), com
     células de 150 m. 3500 / 150 = 23,33 ⇒ 24 células, as de fora ficam
     cortadas. Antes arrancava do canto com 24 células iguais (145,8 m), o
     que a deslocava ~meia célula e as coordenadas não batiam com o jogo. */
  background-size:calc(100% * 3 / 70) calc(100% * 3 / 70);
  background-position:center;
}
.mapa-palco[data-grelha] .mapa-grelha{opacity:1}

/* mira que segue o rato */
.mapa-mira{
  position:absolute;
  z-index:3;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s;
  border:1px solid var(--ferrugem);
  background:var(--ferrugem-fraco);
  width:calc(100% * 3 / 70);
  height:calc(100% * 3 / 70);
}
.mapa-palco[data-grelha]:hover .mapa-mira{opacity:1}

/* leitura de coordenada, canto inferior esquerdo */
.mapa-coord{
  position:absolute;
  left:8px;bottom:8px;
  z-index:5;
  padding:6px 11px;
  background:#0d0a08e6;
  border:1px solid var(--linha-2);
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--ferrugem-txt);
  pointer-events:none;
  border-radius:var(--raio);
  min-width:56px;
  text-align:center;
}

/* comandos do mapa, canto superior direito */
.mapa-cmd{
  position:absolute;
  top:8px;right:8px;
  z-index:5;
  display:flex;
  gap:4px;
}
.mapa-cmd button{
  width:32px;height:32px;
  display:grid;place-items:center;
  background:#0d0a08e6;
  border:1px solid var(--linha-2);
  color:var(--osso-2);
  cursor:pointer;
  font-family:var(--mono);
  font-size:.8rem;
  font-weight:700;
  border-radius:var(--raio);
  transition:background .2s,color .2s,border-color .2s;
}
.mapa-cmd button:hover{background:var(--ferrugem);color:var(--sobre-ferrugem);border-color:var(--ferrugem)}
.mapa-cmd button[aria-pressed="true"]{background:var(--ferrugem);color:var(--sobre-ferrugem);border-color:var(--ferrugem)}
.mapa-cmd svg{width:14px;height:14px}

.mapa-lado{display:grid;gap:clamp(14px,2vw,18px)}
.mapa-dica{
  font-size:.8rem;
  color:var(--osso-3);
  line-height:1.55;
}

/* ═══════════════════════ 5. WIPE ═══════════════════════ */
.wipe-conj{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);
  align-items:start;
}
@media (max-width:940px){.wipe-conj{grid-template-columns:1fr}}

/* relógio grande */
.relogio{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--linha-2);
  border-radius:var(--raio);
  overflow:hidden;
}
.relogio div{
  padding:clamp(14px,2.4vw,22px) 8px;
  text-align:center;
  border-left:1px solid var(--linha);
}
.relogio div:first-child{border-left:0}
.relogio b{
  display:block;
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(1.7rem,5vw,2.9rem);
  line-height:1;
  color:var(--osso);
  font-variant-numeric:tabular-nums;
}
.relogio span{
  display:block;
  margin-top:8px;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--osso-3);
}

/* calendário dos próximos wipes */
.agenda{display:grid;gap:0;margin-top:clamp(22px,3vw,30px)}
.agenda-lin{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:16px;
  align-items:center;
  padding:15px 0;
  border-bottom:1px solid var(--linha);
}
.agenda-lin:first-child{border-top:1px solid var(--linha)}
.agenda-n{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--osso-3);
  width:26px;
}
.agenda-lin[data-proximo] .agenda-n{color:var(--ferrugem-txt)}
.agenda-d{font-family:var(--mono);font-size:.92rem;font-weight:600;color:var(--osso)}
.agenda-lin[data-proximo] .agenda-d{color:var(--ferrugem-txt)}
.agenda-r{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--osso-3);
  text-align:right;
  white-space:nowrap;
}

/* o que leva o wipe */
.leva{display:grid;gap:2px}
.leva-lin{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  border:1px solid var(--linha);
  background:#cd412a07;
  border-radius:var(--raio);
}
.leva-ic{
  width:22px;height:22px;
  display:grid;place-items:center;
  flex:none;
  font-family:var(--mono);
  font-weight:700;
  font-size:.8rem;
}
.leva-lin[data-vai] .leva-ic{color:var(--ferrugem-morta)}
.leva-lin[data-fica] .leva-ic{color:var(--ferrugem)}
.leva-t{font-size:.9rem;color:var(--osso);flex:1}
.leva-e{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--osso-3);
}

/* ═══════════════════════ 6. REGRAS ═══════════════════════ */
.reg-barra{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:clamp(20px,3vw,28px);
}
.busca{
  position:relative;
  flex:1 1 260px;
  min-width:0;
}
.busca input{
  width:100%;
  padding:13px 42px 13px 42px;
  background:var(--tinta);
  border:1px solid var(--linha-2);
  color:var(--osso);
  font-family:var(--mono);
  font-size:.85rem;
  border-radius:var(--raio);
  transition:border-color .2s;
}
.busca input:focus{border-color:var(--ferrugem);outline:none}
.busca input::placeholder{color:var(--osso-3)}
.busca-ic{
  position:absolute;
  left:14px;top:50%;
  transform:translateY(-50%);
  width:16px;height:16px;
  color:var(--osso-3);
  pointer-events:none;
}
.busca-x{
  position:absolute;
  right:8px;top:50%;
  transform:translateY(-50%);
  width:28px;height:28px;
  display:none;
  place-items:center;
  background:transparent;
  border:0;
  color:var(--osso-3);
  cursor:pointer;
  border-radius:var(--raio);
}
.busca-x:hover{color:var(--osso);background:#cd412a14}
.busca[data-cheia] .busca-x{display:grid}

.reg-contagem{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--osso-3);
  white-space:nowrap;
}
.reg-contagem b{color:var(--ferrugem-txt)}

/* famílias */
.familia{margin-bottom:clamp(26px,3.4vw,38px)}
.familia[hidden]{display:none}
.familia-t{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--linha-2);
}
.familia-t h3{
  font-size:.92rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--osso-2);
  font-weight:700;
}
.familia-t .ficha{margin-left:auto}

.regra{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:16px;
  align-items:start;
  padding:14px 12px 14px 0;
  border-bottom:1px solid var(--linha);
  scroll-margin-top:calc(var(--topo) + 24px);
  transition:background .3s;
}
.regra[hidden]{display:none}
.regra:target,.regra[data-realce]{background:var(--ferrugem-fraco)}
.regra-n{
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:700;
  color:var(--ferrugem-txt);
  width:26px;
  padding-top:2px;
  font-variant-numeric:tabular-nums;
}
.regra-t{font-size:.94rem;color:var(--osso);line-height:1.55;min-width:0}
.regra-t mark{
  background:var(--ferrugem);
  color:var(--sobre-ferrugem);
  padding:0 2px;
  border-radius:1px;
}
.regra-lig{
  opacity:0;
  width:28px;height:28px;
  display:grid;place-items:center;
  background:transparent;
  border:1px solid var(--linha-2);
  color:var(--osso-3);
  cursor:pointer;
  border-radius:var(--raio);
  transition:opacity .2s,color .2s,border-color .2s;
  flex:none;
}
.regra:hover .regra-lig,.regra-lig:focus-visible{opacity:1}
.regra-lig:hover{color:var(--ferrugem-txt);border-color:var(--ferrugem-medio)}
.regra-lig svg{width:13px;height:13px}

.reg-nada{
  padding:36px 0;
  text-align:center;
  color:var(--osso-3);
  font-family:var(--mono);
  font-size:.84rem;
}
.reg-nada[hidden]{display:none}

/* os 3 blocos dobrados */
.dobra{
  border:1px solid var(--linha-2);
  border-radius:var(--raio);
  margin-bottom:10px;
  background:#cd412a07;
}
.dobra summary{
  padding:16px 18px;
  cursor:pointer;
  font-family:var(--display);
  font-weight:700;
  font-size:.98rem;
  color:var(--osso);
  list-style:none;
  display:flex;
  align-items:center;
  gap:12px;
}
.dobra summary::-webkit-details-marker{display:none}
.dobra summary::after{
  content:"+";
  margin-left:auto;
  font-family:var(--mono);
  font-size:1.1rem;
  color:var(--ferrugem-txt);
  transition:transform .3s var(--mola);
}
.dobra[open] summary::after{transform:rotate(45deg)}
.dobra-corpo{padding:0 18px 18px;color:var(--osso-2);font-size:.92rem}
.dobra-corpo p{margin:0 0 12px}
.dobra-corpo p:last-child{margin-bottom:0}
.dobra-corpo strong{color:var(--osso)}

/* ═══════════════════════ 7. COMO LIGAR ═══════════════════════ */
.passos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(14px,2vw,20px);
  counter-reset:passo;
}
.passo{
  padding:clamp(20px,2.8vw,28px);
  position:relative;
}
.passo-n{
  font-family:var(--display);
  font-weight:800;
  font-size:2.6rem;
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1.5px var(--ferrugem-medio);
  margin-bottom:16px;
  display:block;
}
.passo h3{margin-bottom:9px;font-size:1.05rem;text-transform:uppercase;letter-spacing:-.01em}
.passo p{margin:0;font-size:.88rem;color:var(--osso-2);line-height:1.6}

/* bloco de consola */
.consola{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 13px;
  background:#0d0a08;
  border:1px solid var(--linha-2);
  border-radius:var(--raio);
}
.consola code{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--amarelo);
  flex:1;
  min-width:0;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
}
.consola code::-webkit-scrollbar{display:none}
.consola button{
  flex:none;
  background:transparent;
  border:1px solid var(--linha-2);
  color:var(--osso-3);
  width:28px;height:28px;
  display:grid;place-items:center;
  cursor:pointer;
  border-radius:var(--raio);
  transition:color .2s,border-color .2s;
}
.consola button:hover{color:var(--ferrugem-txt);border-color:var(--ferrugem-medio)}
.consola svg{width:13px;height:13px}

/* ═══════════════════════ 8. COMUNIDADE ═══════════════════════ */
.com-conj{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,24px);
  align-items:start;
}
@media (max-width:880px){.com-conj{grid-template-columns:1fr}}

.discord{
  padding:clamp(24px,3.4vw,38px);
  position:relative;
  overflow:hidden;
}
.discord h3{font-size:clamp(1.2rem,2.4vw,1.6rem);margin-bottom:12px;text-transform:uppercase}
.discord p{color:var(--osso-2);font-size:.92rem;margin:0 0 22px;max-width:46ch}

/* bloco "Comunidade" — painel normal, sem selo de proposta */
.amigas{
  padding:clamp(20px,2.8vw,28px);
}
/* 11/09 — o 10100: «este botão está cortado quando não está ativo». O clip-path
   de canto cortado a 45° (herdado de .bt) comia a seta do botão «Rust Portugália»
   quando o fundo é transparente. Sem clip-path o botão fica inteiro. */
.amigas .bt{clip-path:none}
.amigas h3{font-size:1.05rem;margin:0 0 10px;text-transform:uppercase}
.amigas p{color:var(--osso-2);font-size:.86rem;margin:0 0 18px}

.contactos{margin-top:clamp(16px,2.4vw,24px)}
.contactos .leitura dd{font-size:.82rem}
.contactos .leitura dd a{border:0!important}

.nota-imp{
  margin-top:clamp(20px,3vw,28px);
  padding:16px 18px;
  border-left:2px solid var(--ferrugem);
  background:var(--ferrugem-fraco);
  font-size:.88rem;
  color:var(--osso-2);
  border-radius:0 var(--raio) var(--raio) 0;
}
.nota-imp strong{color:var(--osso)}

/* ═══════════════════════ 9. RODAPÉ ═══════════════════════ */
.rodape{
  border-top:1px solid var(--linha-2);
  background:var(--fundo-2);
  padding-block:clamp(36px,5vw,56px);
  position:relative;
  z-index:2;
}
.rodape-grade{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,40px);
  align-items:start;
  margin-bottom:28px;
}
@media (max-width:760px){.rodape-grade{grid-template-columns:1fr}}
.rodape-liga{display:flex;gap:18px;flex-wrap:wrap}
.rodape-liga a{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--osso-2);
  border:0!important;
}
.rodape-liga a:hover{color:var(--ferrugem-txt)}
.rodape-lei{
  display:grid;
  gap:10px;
  padding-top:22px;
  border-top:1px solid var(--linha);
  font-size:.74rem;
  color:var(--osso-3);
  line-height:1.6;
  max-width:88ch;
}


/* ═══════════════════════ 11. IMPRESSÃO ═══════════════════════
   A moderação leva as regras em papel. Os blocos dobrados TÊM de abrir. */
@media print{
  .topo,.gaveta,.pre,.portao,.grao,.riscos,.poeira,.grelha,.rolar,
  .vfundo,.mapa-cmd,.reg-barra,.aviso,.cartaz-acoes{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  .cartaz{min-height:auto;padding-top:0}
  .secao{padding-block:18pt;break-inside:avoid}
  .dobra[open] .dobra-corpo,.dobra .dobra-corpo{display:block!important}
  .dobra summary::after{display:none}
  .regra,.familia{break-inside:avoid}
  .regra-t,.espec dt,.espec dd,.lead,p{color:#000!important}
  .h-cartaz,.h-secao,h3{color:#000!important}
  .secao-num{-webkit-text-stroke:1px #999}
  .hud,.hud-corpo{border-color:#bbb!important;background:#fff!important}
  .hud::before,.hud::after{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
}

/* ═══════════════════════════════════════════════════════════════════════════
   01 · BEM-VINDOS — o ensaio dele
   14 parágrafos escritos por ele em serradinha.pt. Texto longo a sério, por
   isso ganha medida de leitura (66ch) e entrelinha larga, com a ficha da
   classificação etária ao lado como âncora visual.
   ⭐ O sticky da ficha foi MEDIDO, não assumido. O `body` tem `overflow-x:hidden`
      (01-base.css) e a regra da casa diz que isso mata o sticky — mas aqui NÃO mata:
      quem rola nesta página é o `<html>` (document.scrollingElement), e o
      `overflow-x` do body só faria dele contentor de scroll se fosse ELE a rolar.
      Provado a 23/08: com o topo a 82px, ao rolar mais 400px a ficha ficou nos
      mesmos 82px em vez de subir. Se um dia deixar de pegar, a cura é
      `overflow-x:clip` no `<html>`.
   ═══════════════════════════════════════════════════════════════════════════ */
.bv{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(24px,4vw,52px);
  align-items:flex-start;
  margin-top:clamp(26px,3.2vw,40px);
}
.bv-texto{
  flex:1 1 34ch;
  min-width:0;
  max-width:66ch;
}
.bv-texto p{
  margin:0 0 1.05em;
  color:var(--osso-2);
  line-height:1.78;
  font-size:clamp(.95rem,1.1vw,1.02rem);
}
.bv-texto p:last-child{margin-bottom:0}

/* As duas frases com que ELE remata cada metade do texto — «Rust não é para os
   fracos» e «Rust definitivamente não é adequado para crianças». Ganham peso e
   uma barra, não uma cor nova: são dele, não são um aviso nosso. */
.bv-peso{
  color:var(--osso);
  border-left:2px solid var(--ferrugem);
  padding-left:18px;
}
.bv-texto p.bv-peso{color:var(--osso)}

.bv-lista{
  list-style:none;
  margin:0 0 1.05em;
  padding:0;
  display:grid;
  gap:9px;
}
.bv-lista li{
  position:relative;
  padding-left:22px;
  color:var(--osso-2);
  line-height:1.6;
}
.bv-lista li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.62em;
  width:8px;
  height:1px;
  background:var(--ferrugem);
}

.bv-ficha{
  position:sticky;
  top:calc(var(--topo) + 22px);
  background:var(--tinta);
  border:1px solid var(--linha-2);
  border-radius:var(--raio);
  padding:22px;
}
.bv-ficha .etiq{display:block;margin-bottom:16px;color:var(--ferrugem-txt)}
.bv-selos{display:grid;gap:10px;margin-bottom:18px}
.bv-selo{
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.05em;
  color:var(--osso);
  background:var(--fundo-2);
  border:1px solid var(--linha-3);
  border-radius:var(--raio);
  padding:11px 13px;
}
.bv-ficha .bt{width:100%}

@media (max-width:720px){
  .bv-ficha{position:static;width:100%}
}

/* ═══ o preâmbulo das regras — as 2 linhas dele que faltavam ═══ */
.reg-pre{margin:0 0 22px;max-width:72ch}
.reg-pre p{
  margin:0 0 .7em;
  color:var(--osso-2);
  line-height:1.7;
  font-size:.95rem;
}
.reg-pre p:last-child{margin-bottom:0}

/* ═══ as 19 numa lista corrida, pela ordem dele (AGRUPAR_REGRAS = false) ═══ */
.familia-corrida{margin-bottom:0}
.familia-corrida .regra:first-child{border-top:1px solid var(--linha)}

/* ═══ 🔴 defeito PRÉ-EXISTENTE, achado a 23/08 ao medir esta entrega ═══
   O `.bt` tem `white-space:nowrap` (02-ui.css). Em INGLÊS o botão «Or connect straight
   through Steam» mede 359px + 48px de padding e passa a largura do ecrã: a 390px o
   scrollWidth dá 396 e a PÁGINA INTEIRA rola de lado. Em PT o rótulo é mais curto e o
   defeito não aparece — foi por isso que passou despercebido durante todo o rascunho.
   ⭐ Medido com controlo: esconder a secção nova #bem-vindos deixa o scrollWidth
      exactamente igual (396), logo o transbordo não vinha dela.
   ⚠️ A 1.ª cura foi por breakpoint (max-width:560px) e NÃO chegava: a 768px o botão
      continuava 5px fora, porque o que o aperta é a COLUNA em que vive, não a largura
      do ecrã. Um botão nunca pode passar do que o segura, em largura nenhuma — por
      isso a regra é sem media query.
   ⭐ Não muda nada onde já cabia: com white-space:normal só quebra quem não cabe. */
.bt{white-space:normal;max-width:100%}

.reboot-aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.04);
  border-left: 3px solid rgba(239, 68, 68, 0.4);
  color: rgba(255, 255, 255, 0.7);
  font-family: monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.reboot-ic {
  color: rgb(239, 68, 68);
  font-weight: bold;
}
.reboot-aviso-simples {
  grid-column: 1 / -1;       /* Tells it to stretch all the way across */
  padding: 16px 16px 4px;    /* Spacing that aligns with the cells above it */
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--osso-3);      /* Matches the exact color of the other labels */
}