/* Hacker-film 404 styles */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: "Courier New", monospace;
}

:root{
  --bg:#000;
  --neon:#00ff66;
  --accent1:#00ff66;
  --accent2:#00ffff;
  --danger:#ff0044;
}

html,body{
  height:100%;
  background:var(--bg);
  color:var(--neon);
  overflow:hidden;
}

/* Canvas (binary rain) */
canvas#matrix{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}

/* subtle scanlines */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,255,100,0.03),
    rgba(0,255,100,0.03) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events:none;
  z-index:6;
}

/* BIG CENTERED ERROR */
.center{
  position:absolute;
  top:44%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  z-index:10;
  animation:jitter 0.12s infinite;
  width:90%;
  max-width:1200px;
  overflow:visible; /* allow sys-box to sit above without clipping */
} 

.center h1{
  font-size:14rem;
  line-height:0.9;
  letter-spacing:1.2rem;
  margin-bottom:.2rem;
  color:var(--neon);
  text-shadow:0 0 30px rgba(0,255,102,0.15);
  animation:glitch 1.4s infinite;
} 

.center .headline{
  font-size:2.2rem;
  opacity:0.98;
  margin-top:8px;
  color:var(--neon);
  animation:flicker 2.6s infinite;
}

.center .subtext{
  margin-top:6px;
  font-size:1.05rem;
  opacity:0.92;
  color:rgba(0,255,102,0.95);
} 

/* center message layout */
.center .message{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:12px;
  width:100%;
}

/* SYSTEM BREACH BOX (terminal-like) */
.sys-box{
  position:absolute;
  top:-7.5rem; /* sit above the big 404 so it won't overlap */
  left:50%;
  transform:translateX(-50%);
  padding:6px 10px;
  border:1px solid rgba(0,255,102,0.18);
  background:linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.45));
  color:var(--neon);
  font-weight:700;
  letter-spacing:1px;
  z-index:12;
  box-shadow:0 0 30px rgba(0,255,102,0.02);
  font-size:0.82rem;
  border-radius:4px;
  pointer-events:none;
  opacity:0.95;
  white-space:nowrap;
  transform-origin:center;
} 

/* status block under headline */
.center .status{
  background:rgba(0,0,0,0.6);
  border-left:4px solid var(--neon);
  padding:14px 16px;
  width:min(720px, 88%);
  margin-top:6px;
  color:var(--neon);
  text-align:left;
}

/* actions/buttons under status */
.actions{margin-top:10px; display:flex; gap:10px; align-items:center; justify-content:flex-start}
.btn{display:inline-block;padding:8px 12px;border-radius:6px;text-decoration:none;font-weight:700;border:1px solid rgba(255,255,255,0.03);transition:transform .08s ease, filter .08s ease}
.btn-primary{background:rgba(0,255,102,0.07);color:var(--neon);border-color:rgba(0,255,102,0.18)}
.btn-secondary{background:transparent;color:#dcdcdc;border-color:rgba(255,255,255,0.04)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.04)}

/* use pre for preserved line breaks */
.center .status pre{
  margin:0;
  font-family:inherit;
  white-space:pre-wrap;
  line-height:1.35;
  font-size:1rem;
  opacity:0.95;
}


/* Notice badge (calmer) */
.hack-badge{
  position:fixed;
  top:16px;
  left:20px;
  z-index:11;
  padding:8px 12px;
  border-radius:4px;
  background:linear-gradient(90deg, rgba(0,255,102,0.06), rgba(0,255,102,0.02));
  color:var(--neon);
  font-weight:700;
  letter-spacing:1px;
  border:1px solid rgba(0,255,102,0.12);
  text-shadow:0 0 6px rgba(0,255,102,0.03);
  backdrop-filter: blur(2px);
  font-size:0.9rem;
}

/* Terminal-style console */
.terminal{
  position:absolute;
  bottom:4%;
  left:3%;
  width:34%;
  max-width:520px;
  height:24%;
  padding:14px;
  border:1px solid rgba(0,255,102,0.18);
  background:linear-gradient(180deg, rgba(0,0,0,0.78), rgba(0,0,0,0.5));
  z-index:10;
  overflow:auto;
  font-size:0.95rem;
  color:var(--neon);
  box-shadow:0 0 36px rgba(0,255,102,0.02);
}

.terminal br{line-height:1.35}

/* Terminal header and body */
.terminal{
  position:absolute;
  bottom:4%;
  left:3%; /* move terminal to bottom-left CMD style */
  right:auto;
  width:34%;
  max-width:480px;
  height:22%;
  padding:0;
  border-radius:6px;
  overflow:visible;
  border:2px solid var(--neon); /* neon green frame */
  background:#000; /* solid black like CMD */
  box-shadow:0 8px 48px rgba(0,255,102,0.08), 0 12px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  transition:transform .12s ease, box-shadow .12s ease;
}

.terminal:hover{transform:translateY(-2px); box-shadow:0 12px 68px rgba(0,255,102,0.12);} 

.cmd-style{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  background:#000; /* dark title bar */
  border-bottom:1px solid rgba(255,255,255,0.03);
}

.cmd-icon{
  color:#47d447; /* greenish prompt icon */
  font-weight:700;
  font-size:0.95rem;
  padding-right:6px;
}

.term-title{
  color:rgba(255,255,255,0.9);
  font-weight:600;
  font-size:0.85rem;
  margin-left:2px;
}

.cmd-body{background:#000}

.term-body{
  padding:10px 12px;
  height:calc(100% - 36px);
  overflow:auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;
  font-size:0.92rem;
  color:#dcdcdc; /* light gray like CMD */
  line-height:1.35;
  background:transparent;
}

.term-line{margin-bottom:6px}
.term-line .ok{color:#a8ff8f; font-weight:600}
.term-line .warn{color:#ffd36e; font-weight:600}
.term-line .err{color:#ff8b8b; font-weight:700}
.term-line .info{color:#8fd3ff; font-weight:600}

/* CMD style prompt */
.prompt{color:#47d447; font-weight:700; margin-right:6px}

/* Cursor inside term-body */
.cursor{
  display:inline-block;
  width:10px;
  animation:blink 1s infinite;
  background:currentColor;
  height:1em;
}

/* Custom scrollbar for term-body */
.term-body::-webkit-scrollbar{width:8px}
.term-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:8px}
.term-body::-webkit-scrollbar-track{background:transparent}

/* subtle flash layer (calmer) */
.flash{
  position:fixed;
  inset:0;
  background:rgba(0,255,102,0.02);
  animation:flash 10s infinite;
  z-index:9;
  pointer-events:none;
}

/* ANIMATIONS */
@keyframes glitch{
  0%{text-shadow:0 0 30px rgba(0,255,102,0.12);} 
  25%{text-shadow:2px 0 18px rgba(0,255,102,0.14);} 
  50%{text-shadow:0 6px 28px rgba(0,255,102,0.16);} 
  75%{text-shadow:-2px 0 18px rgba(0,255,102,0.14);} 
  100%{text-shadow:0 0 40px rgba(0,255,102,0.18);} 
} 

@keyframes flicker{
  0%,100%{opacity:1;} 
  50%{opacity:0.88;} 
}

@keyframes jitter{from{transform:translate(-50%,-50%) translateX(-4px);}to{transform:translate(-50%,-50%) translateX(4px);}}

@keyframes flash{0%,92%,100%{opacity:0;}94%{opacity:0.6;}96%{opacity:0.2;}}

@keyframes blink{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}}

/* RESPONSIVE ADJUSTMENTS */
@media (max-width:900px){
  .center h1{font-size:10rem; letter-spacing:1rem}
  .terminal{width:92%; left:4%; height:28%;}
  .sys-box{position:static; transform:none; top:auto; margin-bottom:6px; font-size:0.9rem;}
}
@media (max-width:480px){
  .center h1{font-size:6.8rem}
  .center .headline{font-size:1.6rem}
  .terminal{font-size:0.95rem; height:22%;}
  .hack-badge{left:10px; top:10px; font-size:0.8rem}
}

/* small utility */
.hidden{display:none!important}