:root{--g:#39ff14;--g2:#0b3d0b;--bg:#020a04;--red:#ff3b3b;}
*{box-sizing:border-box;}
body{
  margin:0;min-height:100vh;color:var(--g);
  font-family:"Courier New",Courier,monospace;text-align:center;
  background:
    radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 78% 12%,#bfffb0 50%,transparent 51%),
    radial-gradient(2px 2px at 40% 70%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 88% 64%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 25% 88%,#bfffb0 50%,transparent 51%),
    radial-gradient(1px 1px at 63% 40%,#fff 50%,transparent 51%),
    radial-gradient(ellipse at 50% 120%,#0f4a12 0%,transparent 60%),
    var(--bg);
}
/* linhas de CRT por cima de tudo */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0,rgba(0,0,0,.28) 1px,transparent 1px,transparent 3px);
}
/* barra de varredura descendo a tela */
body::before{
  content:"";position:fixed;left:0;right:0;top:-120px;height:120px;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(57,255,20,.07),transparent);
  animation:scan 7s linear infinite;
}
main{max-width:640px;margin:0 auto;padding:60px 20px 40px;}
.ufo{display:block;font-size:56px;animation:float 4s ease-in-out infinite;filter:drop-shadow(0 0 12px var(--g));}
h1{
  margin:10px 0 4px;font-size:42px;letter-spacing:.35em;text-transform:uppercase;
  text-shadow:0 0 6px var(--g),0 0 22px var(--g);animation:flicker 5s infinite;
}
/* glitch no titulo */
h1{position:relative;}
h1::before,h1::after{
  content:attr(data-text);position:absolute;left:0;right:0;top:0;overflow:hidden;
  letter-spacing:inherit;text-shadow:none;
}
h1::before{color:#ff3b3b;transform:translateX(-2px);animation:glitch1 3.2s infinite steps(1);}
h1::after{color:#38e8ff;transform:translateX(2px);animation:glitch2 3.2s infinite steps(1);}
.status{margin:0 0 26px;font-size:12px;letter-spacing:.2em;color:#7dff63;}
.dot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;
  background:var(--g);box-shadow:0 0 8px var(--g);animation:pulse 1.4s ease-in-out infinite;}
.sub{margin:0 0 34px;color:#7dff63;opacity:.8;letter-spacing:.2em;font-size:13px;}
.painel{
  position:relative;padding:28px 24px 24px;border:1px solid var(--g);background:rgba(4,20,6,.82);
  box-shadow:0 0 18px rgba(57,255,20,.35),inset 0 0 24px rgba(57,255,20,.12);
}
/* colchetes de mira nos cantos */
.painel::after{
  content:"";position:absolute;inset:-6px;pointer-events:none;
  --c:var(--g);
  background:
    linear-gradient(var(--c),var(--c)) top left/16px 2px no-repeat,
    linear-gradient(var(--c),var(--c)) top left/2px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/16px 2px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/2px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/16px 2px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/2px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/16px 2px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/2px 16px no-repeat;
}
.painel::before{
  content:"CONFIDENCIAL";position:absolute;top:-14px;right:18px;padding:2px 10px;
  color:var(--red);border:2px solid var(--red);background:var(--bg);
  font-weight:bold;letter-spacing:.2em;font-size:12px;transform:rotate(3deg);
}
label{display:block;flex:0 0 100%;margin-bottom:4px;font-size:13px;letter-spacing:.15em;}
form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
input{
  flex:1 1 260px;background:#010801;color:var(--g);border:1px solid var(--g);
  padding:11px 14px;font:inherit;outline:none;caret-color:var(--g);
}
input::placeholder{color:#2f8f1f;}
input:focus{box-shadow:0 0 12px var(--g);}
button{
  background:var(--g);color:#010801;border:0;padding:11px 20px;font:inherit;
  font-weight:bold;letter-spacing:.15em;cursor:pointer;text-transform:uppercase;
}
button:hover{box-shadow:0 0 16px var(--g);}
#resultado{margin-top:28px;min-height:24px;word-break:break-word;}
#resultado b{color:#fff;text-shadow:0 0 8px var(--g);}
#flag[hidden]{display:none;}
#flag{
  display:inline-block;margin-top:26px;padding:12px 18px;border:1px dashed var(--g);
  background:#010801;color:#fff;text-shadow:0 0 10px var(--g);word-break:break-all;
  animation:flicker 3s infinite;
}
footer{margin-top:44px;font-size:11px;opacity:.55;letter-spacing:.15em;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes flicker{0%,18%,22%,60%,64%,100%{opacity:1}20%,62%{opacity:.55}}
@keyframes scan{to{transform:translateY(calc(100vh + 240px))}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes glitch1{0%,92%,100%{clip-path:inset(0 0 100% 0)}93%{clip-path:inset(10% 0 55% 0)}95%{clip-path:inset(60% 0 8% 0)}97%{clip-path:inset(30% 0 40% 0)}}
@keyframes glitch2{0%,90%,100%{clip-path:inset(0 0 100% 0)}91%{clip-path:inset(55% 0 12% 0)}94%{clip-path:inset(5% 0 70% 0)}96%{clip-path:inset(40% 0 30% 0)}}
@media (prefers-reduced-motion:reduce){.ufo,h1,#flag,.dot,body::before,h1::before,h1::after{animation:none;}}