:root {
  --bg-edge: #021403;
  --bg-mid: #0a3a12;
  --fg: #3dff6e;
  --dim: #1f9e43;
  --pad: 5vw;
}

html, body { height: 100%; margin: 0; }

body {
  padding: 0 var(--pad);
  box-sizing: border-box;
  overflow: hidden;
  background: radial-gradient(ellipse at center, var(--bg-mid) 0%, var(--bg-edge) 85%);
}

.screen {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ip {
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  line-height: 1;
  white-space: nowrap;
  user-select: all;
  -webkit-user-select: all;
  cursor: text;
  text-shadow: 0 0 0.04em var(--fg), 0 0 0.25em rgba(61, 255, 110, 0.55);
  animation: flicker 7s infinite;
}

/* Scanlines */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.3) 3px,
    rgba(0, 0, 0, 0) 4px
  );
}

/* Tube curvature shading */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.7) 100%);
}

/* Slow rolling refresh band */
.screen::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 14vh;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(61, 255, 110, 0), rgba(61, 255, 110, 0.06), rgba(61, 255, 110, 0));
  animation: roll 8s linear infinite;
}


/* Gentle, infrequent dips (max ~12 percent, well under 3 per second) */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  4%  { opacity: 0.92; }
  6%  { opacity: 1; }
  31% { opacity: 0.95; }
  33% { opacity: 0.88; }
  35% { opacity: 1; }
  62% { opacity: 0.94; }
  64% { opacity: 1; }
  83% { opacity: 0.9; }
  85% { opacity: 0.97; }
  87% { opacity: 1; }
}

@keyframes roll {
  from { transform: translateY(-20vh); }
  to   { transform: translateY(120vh); }
}

@media (prefers-reduced-motion: reduce) {
  #ip, .screen::after { animation: none; }
}