/* A porta. Uma tela só, e ela carrega sem depender de nada além de si —
   é a primeira coisa que alguém vê, inclusive quando algo mais está fora
   do ar. */
:root {
  --fundo: #0d0e12;
  --cartao: #191c25;
  --linha: #252a36;
  --linha-alta: #333a4a;
  --texto: #e8e9ed;
  --texto-fraco: #949aab;
  --texto-mudo: #5d6475;
  --acento: #f0a868;
  --alerta: #f07a63;
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior: none; }
body {
  background:
    radial-gradient(900px 480px at 50% -8%, rgba(240,168,104,.10), transparent 62%),
    var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
.porta {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.cartao-porta {
  width: min(92vw, 400px);
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 32px 28px 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  text-align: center;
}
.selo {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .3em;
  color: var(--acento);
  border: 1px solid rgba(240,168,104,.35);
  border-radius: 99px; padding: 5px 13px 5px 16px;
  margin-bottom: 20px;
}
h1 {
  margin: 0 0 8px; font-size: 21px; font-weight: 650; letter-spacing: -.015em;
}
.subtitulo {
  margin: 0 0 24px; color: var(--texto-fraco); font-size: 13.5px; line-height: 1.5;
}
.entrar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 18px;
  background: #2a2f3d; border: 1px solid var(--linha-alta);
  border-radius: 10px; color: var(--texto);
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  transition: background .14s, border-color .14s, transform .06s;
}
.entrar:hover { background: #333a4a; border-color: #46506a; }
.entrar:active { transform: translateY(1px); }
.entrar:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.recusa {
  text-align: left;
  border: 1px solid rgba(240,122,99,.3);
  background: rgba(240,122,99,.08);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 18px;
  font-size: 13px; line-height: 1.5;
}
.recusa b { display: block; color: var(--alerta); font-weight: 650; margin-bottom: 4px; }
.recusa span { color: var(--texto-fraco); }
.rodape {
  margin: 18px 0 0; color: var(--texto-mudo); font-size: 12px; line-height: 1.5;
}

/* O botão da porta que ainda não está ligada: ele deixa de parecer clicável,
   porque clicar não leva a lugar nenhum. Estado desabilitado é um dos estados
   obrigatórios, e ele precisa ser VISÍVEL como tal. */
.entrar.desligado {
  background: transparent;
  border-style: dashed;
  border-color: var(--linha-alta);
  color: var(--texto-mudo);
  cursor: default;
  pointer-events: none;
}
.entrar.desligado svg { display: none; }