/* SFDOS terminal styling — CRT shader effect, phosphor glow, scanlines */

:root {
  --phosphor: #c5c5c5;
  --phosphor-bright: #ffffff;
  --bg: #0a0a0a;
}

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

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
}

.crt {
  position: relative;
  width: 100vw;
  height: 100vh;
  background:
    radial-gradient(ellipse at center, #0a0a0a 0%, #000 100%);
  overflow: hidden;
  /* slight CRT curvature feel via outline shadow */
  box-shadow: inset 0 0 200px rgba(0,0,0,0.9);
}

.scanlines {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.03) 0px,
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 10;
}

#terminal {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  padding: 20px 30px;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 22px;
  line-height: 1.15;
  color: var(--phosphor);
  text-shadow:
    0 0 1px var(--phosphor),
    0 0 3px rgba(197, 197, 197, 0.6),
    0 0 8px rgba(197, 197, 197, 0.2);
  white-space: pre;
  overflow-y: auto;
  cursor: text;
}

#terminal::-webkit-scrollbar { display: none; }

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1em;
  background: var(--phosphor);
  vertical-align: text-bottom;
  animation: blink 1s steps(2) infinite;
  box-shadow: 0 0 4px var(--phosphor);
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Subtle screen flicker */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  98% { opacity: 1; }
  99% { opacity: 0.96; }
}

.crt {
  animation: flicker 8s infinite;
}