/* ============================================================
   Chloro — entrada
   A marca é um "C" de gosma corrosiva. A página assume isso:
   a gosma escorre do topo e o cartão é um frasco de contenção.
   ============================================================ */

:root{
  --breu:#060c09;
  --fundo:#0a1210;
  --vidro:#101b16;
  --vidro-alto:#16241d;
  --borda:#1e2f26;
  --limo:#7dfc3a;      /* verde ácido do logo */
  --limo-esc:#3fb970;
  --limo-fundo:rgba(125,252,58,.09);
  --tinta:#e8f2ec;
  --tinta2:#93a89c;
  --perigo:#ff6b5e;
  --curva:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  min-height:100vh;display:grid;place-items:center;padding:28px;
  background:
    radial-gradient(60rem 40rem at 50% -10%, rgba(125,252,58,.07), transparent 60%),
    var(--fundo);
  color:var(--tinta);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}

/* ---------------- gosma escorrendo ---------------- */
.escorrido{position:fixed;inset:0 0 auto 0;height:100vh;pointer-events:none;z-index:0}
.escorrido span{
  position:absolute;top:0;left:var(--x);width:3px;height:var(--alt);
  background:linear-gradient(180deg,var(--limo),rgba(125,252,58,0));
  border-radius:0 0 3px 3px;opacity:.22;
  transform-origin:top;transform:scaleY(0);
  animation:escorrer 9s var(--curva) infinite;animation-delay:var(--atraso);
}
/* a gota que se solta na ponta */
.escorrido span::after{
  content:"";position:absolute;left:50%;bottom:-5px;translate:-50% 0;
  width:7px;height:7px;border-radius:50%;background:var(--limo);
  box-shadow:0 0 10px var(--limo);
}
@keyframes escorrer{
  0%{transform:scaleY(0);opacity:0}
  12%{opacity:.28}
  55%{transform:scaleY(1);opacity:.22}
  100%{transform:scaleY(1);opacity:0}
}

/* ---------------- frasco ---------------- */
.frasco{
  position:relative;z-index:1;width:100%;max-width:392px;
  background:linear-gradient(180deg,var(--vidro-alto),var(--vidro));
  border:1px solid var(--borda);border-radius:20px;
  padding:34px 32px 26px;
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  animation:subir .5s var(--curva) both;
}
@keyframes subir{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}

/* fio de gosma que entra no frasco pelo topo */
.frasco::before{
  content:"";position:absolute;top:-46px;left:50%;translate:-50% 0;
  width:2px;height:46px;
  background:linear-gradient(180deg,transparent,var(--limo));
  opacity:.5;
}

.topo{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.selo{
  width:52px;height:52px;border-radius:15px;object-fit:cover;
  background:#0b1410;border:1px solid var(--borda);
  box-shadow:0 0 0 1px rgba(125,252,58,.12), 0 6px 20px rgba(125,252,58,.14);
  animation:pulsar 4.5s ease-in-out infinite;
}
@keyframes pulsar{
  0%,100%{box-shadow:0 0 0 1px rgba(125,252,58,.12), 0 6px 20px rgba(125,252,58,.14)}
  50%{box-shadow:0 0 0 1px rgba(125,252,58,.3), 0 8px 30px rgba(125,252,58,.32)}
}

h1{font-size:27px;font-weight:800;letter-spacing:-.9px;line-height:1}
.etiqueta{
  margin-top:5px;font-size:10.5px;font-weight:700;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--limo);opacity:.75;
}

/* ---------------- formulário ---------------- */
.campo{display:block;margin-bottom:15px}
.campo span{
  display:block;margin-bottom:7px;font-size:11px;font-weight:700;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--tinta2);
}
.campo input{
  width:100%;padding:13px 15px;font:inherit;font-size:15px;color:var(--tinta);
  background:var(--breu);border:1px solid var(--borda);border-radius:11px;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.campo input::placeholder{color:#4a5a51}
.campo input:hover{border-color:#2a4034}
.campo input:focus{
  outline:0;background:#080f0c;border-color:var(--limo-esc);
  box-shadow:0 0 0 3px var(--limo-fundo);
}

button{
  width:100%;margin-top:8px;padding:14px;border:0;border-radius:11px;
  font:inherit;font-size:14.5px;font-weight:750;letter-spacing:.4px;
  color:#06140a;cursor:pointer;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--limo),var(--limo-esc));
  transition:transform .16s var(--curva),box-shadow .18s,filter .18s;
}
button:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(125,252,58,.24);filter:brightness(1.06)}
button:active{transform:none}
button:disabled{opacity:.55;cursor:progress;transform:none;filter:grayscale(.3)}

/* brilho que atravessa o botão ao passar o mouse */
button::after{
  content:"";position:absolute;inset:0;translate:-120% 0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45),transparent 65%);
  transition:translate .55s var(--curva);
}
button:hover::after{translate:120% 0}

#recado{
  min-height:19px;margin-top:13px;font-size:13px;line-height:1.45;
  color:var(--perigo);opacity:0;transform:translateY(-4px);
  transition:opacity .2s,transform .2s;
}
#recado.ver{opacity:1;transform:none}

/* sacudida discreta quando erra */
.frasco.erro{animation:tremer .34s ease}
@keyframes tremer{
  0%,100%{transform:none}
  25%{transform:translateX(-7px)}
  75%{transform:translateX(7px)}
}

footer{
  display:flex;align-items:center;gap:8px;margin-top:24px;padding-top:17px;
  border-top:1px solid var(--borda);
  font-size:11.5px;color:var(--tinta2);
}
.ponto{
  width:6px;height:6px;border-radius:50%;background:var(--limo);flex-shrink:0;
  box-shadow:0 0 8px var(--limo);animation:piscar 2.6s ease-in-out infinite;
}
@keyframes piscar{0%,100%{opacity:1}50%{opacity:.25}}

:focus-visible{outline:2px solid var(--limo);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}
@media (max-width:420px){
  .frasco{padding:28px 22px 22px}
  h1{font-size:24px}
}

/* ---------------- entrar com Discord ---------------- */
/* Só aparece enquanto o OAuth não estiver configurado: explica por que ainda
   existe um campo de senha nesta tela. */
.nota-reserva{font-size:12.5px;line-height:1.5;color:var(--suave);
  background:rgba(125,252,58,.06);border:1px solid var(--borda);
  border-left:3px solid var(--limo);border-radius:9px;padding:11px 13px;margin-bottom:18px}

.ou{display:flex;align-items:center;gap:12px;margin:20px 0 16px;
  color:var(--tinta2);font-size:11px;letter-spacing:1.6px;text-transform:uppercase}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--borda)}

.discord{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px;border-radius:11px;text-decoration:none;
  background:#5865F2;color:#fff;font-weight:700;font-size:14.5px;
  transition:transform .16s var(--curva),box-shadow .18s,filter .18s}
.discord:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(88,101,242,.35);filter:brightness(1.08)}
.discord:active{transform:none}
.discord svg{width:21px;height:16px;flex-shrink:0}