:root{
  --bg:#000;
  --green:#00FF88;
  --white:#E9FFF5;
  --dim:rgba(0,255,136,.55);
}

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--green);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

#screen{
  position:relative;
  height:100%;
  overflow:auto;
  padding:18px 18px 40px 18px;
  box-sizing:border-box;
  line-height:1.35;
  font-size:15px;
  letter-spacing:0.2px;
}

#terminal{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
}

#cursor{
  display:inline-block;
  margin-left:4px;
  color:var(--green);
  animation:blink 1.2s steps(1) infinite;
}

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

.white{ color:var(--white); }
.dim{ color:var(--dim); }
.warn{ color:#ff4d4d; }

#overlay{
  position:fixed;
  inset:0;
  background:#000;
  opacity:0;
  transition:opacity 700ms ease;
  z-index:9998;
}
#overlay.hidden{ display:none; }
#overlay.visible{ display:block; opacity:1; }

/* Optional subtle scanline feel (very light) */
#screen::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.02) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  opacity:0.12;
  z-index:0;
}