/* ============================================================
   HOODMONS — trava de manutenção
   ------------------------------------------------------------
   Autocontido, igual ao JS que o acompanha: não depende de nenhum token de base.css,
   porque este par tem que funcionar mesmo se o resto do app não carregar. Remover a
   trava do site = apagar as duas linhas do index.html que trazem os dois arquivos.
   ============================================================ */

/* Enquanto o status não chega, a página fica invisível — não em branco por engano, mas
   de propósito, para que a landing não pisque antes da trava aparecer. */
html.maint-checking body { visibility: hidden; }

/* Apareceu sem resposta do servidor: visível, mas INERTE. Fecha a corrida de quem
   clicasse em CONNECT no intervalo entre a página pintar e o status chegar. */
html.maint-guarding body > *:not(#maint-screen) { pointer-events: none; }

/* Trancado: o app continua no DOM, só não é exibido. Apagá-lo obrigaria a recarregar
   para destravar — e é exatamente o que fazemos no unlock, mas por outro motivo. */
html.maint-locked body > *:not(#maint-screen) { display: none !important; }
html.maint-locked, html.maint-locked body { overflow: hidden; }

#maint-screen {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  padding: 24px; background: #0d0f12;
  background-image: repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px);
  color: #e6ecf2;
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
}

.maint-card {
  border: 3px solid #39424f; background: #161a20; padding: 38px 30px;
  box-shadow: 8px 8px 0 #00000088; text-align: center; max-width: 400px; width: 100%;
}

/* O mesmo logotipo do app, feito só de CSS: sem arquivo de imagem para carregar durante
   uma manutenção em que o backend pode estar meio fora. */
.maint-mark {
  width: 52px; height: 52px; background: #c8e600; position: relative;
  display: block; margin: 0 auto 24px; box-shadow: 5px 5px 0 #00000066;
}
.maint-mark::before, .maint-mark::after {
  content: ""; position: absolute; top: 15px; width: 11px; height: 11px; background: #0d0f12;
}
.maint-mark::before { left: 11px; }
.maint-mark::after  { right: 11px; }

.maint-badge {
  display: inline-block; font-family: "Press Start 2P", monospace; font-size: 8px;
  color: #f0c645; border: 2px solid #7d6a1f; background: #221d0c; padding: 6px 9px;
  margin-bottom: 20px; letter-spacing: .1em;
}

#maint-screen h1 {
  font-family: "Press Start 2P", monospace; font-size: 15px; line-height: 1.6;
  margin: 0 0 16px;
}
.maint-sub { color: #8a97a6; font-size: 14px; line-height: 1.6; margin: 0; }

/* O portão nasce fechado e não há nada na tela dizendo que ele existe: o visitante vê
   só o aviso, e quem sabe do atalho (Shift+H) é quem precisa entrar. */
.maint-gate { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.maint-gate.is-open { max-height: 190px; }
.maint-gate form { display: flex; gap: 7px; margin: 26px 0 0; }
.maint-gate input {
  flex: 1; min-width: 0; background: #0d0f12; border: 2px solid #39424f; color: #e6ecf2;
  padding: 12px; font-family: "Press Start 2P", monospace; font-size: 9px;
}
.maint-gate input:focus { outline: none; border-color: #c8e600; }
.maint-gate button {
  font-family: "Press Start 2P", monospace; font-size: 9px; padding: 12px 15px;
  background: #c8e600; color: #141a00; border: 3px solid #c8e600; cursor: pointer;
  box-shadow: 3px 3px 0 #5c6b00;
}
.maint-gate button:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 #5c6b00; }
.maint-gate button:disabled { opacity: .5; cursor: not-allowed; }
.maint-msg { font-size: 12px; color: #e04a3f; margin: 11px 0 0; min-height: 16px; }

/* Senha errada treme o cartão. É o retorno que a mensagem sozinha não dá — e o motivo
   de o JS forçar um reflow antes de re-adicionar a classe. */
.maint-card.is-wrong { animation: maint-shake .32s; }
@keyframes maint-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-9px); }
  75% { transform: translateX(9px); }
}

@media (prefers-reduced-motion: reduce) {
  .maint-card.is-wrong { animation: none; }
  .maint-gate { transition: none; }
}