/* CRT surface. The only gradients allowed in this codebase are the scanline
   and vignette overlays below: they are the phosphor texture, not decoration. */

.crt {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding:
    max(clamp(0.75rem, 2vw, 1.5rem), env(safe-area-inset-top, 0px))
    max(clamp(0.75rem, 2vw, 1.5rem), env(safe-area-inset-right, 0px))
    max(clamp(0.75rem, 2vw, 1.5rem), env(safe-area-inset-bottom, 0px))
    max(clamp(0.75rem, 2vw, 1.5rem), env(safe-area-inset-left, 0px));
}

.crt::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.22) 0px,
    rgba(0, 0, 0, 0.22) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
}

.crt::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 58%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

.crt {
  animation: flick 9s steps(1) infinite;
}

@keyframes flick {
  0%, 100% { opacity: 1; }
  7% { opacity: 0.985; }
  8% { opacity: 1; }
  41% { opacity: 0.99; }
  42% { opacity: 1; }
  43% { opacity: 0.97; }
  44% { opacity: 1; }
  77% { opacity: 0.99; }
  78% { opacity: 1; }
}

.screen {
  position: relative;
  z-index: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  text-shadow: 0 0 6px var(--glow);
  word-break: break-word;
}

.screen::-webkit-scrollbar {
  display: none;
}

.line {
  white-space: pre-wrap;
  min-height: 1.45em;
}

.line.dim {
  color: var(--phos-dim);
}

.line.bright {
  color: var(--phos-bright);
}

.line.alert {
  color: var(--alert);
}

.boot,
.lines {
  font-size: var(--t-14);
}

html.js .boot {
  display: none;
}

.promptline {
  display: flex;
  gap: 0.6ch;
  align-items: center;
  min-height: 44px;
  padding-block: 0.35rem;
  text-shadow: 0 0 6px var(--glow);
}

html.js .promptline {
  display: none;
}

html.js .promptline.ready {
  display: flex;
}

.promptline .pl {
  color: var(--phos-dim);
  white-space: nowrap;
}

#cmd {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--phos-bright);
  caret-color: var(--phos-bright);
  font: inherit;
  text-shadow: inherit;
  padding: 0;
}

.statusbar {
  position: relative;
  z-index: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.8rem;
  padding: 0.3rem 0.6rem;
  background: var(--phos);
  color: var(--bg);
  font-size: var(--t-11);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  user-select: none;
}

.statusbar .mid {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen.tear {
  animation: tear 120ms steps(2) 1;
}

@keyframes tear {
  0% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
  30% {
    transform: translateX(-7px);
    clip-path: inset(18% 0 64% 0);
  }
  60% {
    transform: translateX(5px);
    clip-path: inset(52% 0 22% 0);
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
}

.crt.operator .screen {
  filter: invert(1) hue-rotate(180deg);
}

@media (max-width: 640px) {
  .boot,
  .lines {
    font-size: var(--t-12);
  }

  .statusbar .mid {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crt {
    animation: none;
  }

  .screen.tear {
    animation: none;
  }
}