/* CRT terminal styling for the 404 page and /play/crt/, project 04.
   Playful-page freedoms per design-system.md section 10: this page breaks
   the palette inside its own stage. It keeps focus visibility, keyboard
   operability, a reduced-motion fallback, and CSP compliance.

   Loaded alongside tokens.css, which supplies the Mono @font-face,
   --focus, and the spacing scale. */

:root {
  --crt-bg: #030905;
  --crt-fg: #33FF66;     /* 14.96:1 on --crt-bg, verified */
  --crt-dim: #1F9B45;    /* quieter phosphor for secondary lines */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--crt-bg);
  color: var(--crt-fg);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: clamp(0.95rem, 0.85rem + 0.6vw, 1.15rem);
  line-height: 1.7;
}

.crt-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  z-index: 10;
  top: 8px;
  left: 8px;
  padding: 12px 16px;
  background: var(--crt-bg);
  color: var(--crt-fg);
  border: 1px solid var(--crt-fg);
  border-radius: 8px;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

:focus-visible {
  outline: 2px solid var(--focus, #8FC4FF);
  outline-offset: 2px;
}

/* The stage fills the viewport and scrolls inside itself on small screens,
   which section 10 permits for a stage area. */
.crt {
  position: relative;
  min-height: 100vh;
  padding: clamp(24px, 6vw, 64px);
  overflow: auto;
}

/* Scanlines and vignette are decorative overlays that never take pointer
   or focus. The faint flicker moves between two opacity levels only, about
   one dip every three seconds, far below any flash threshold. */
.crt::before,
.crt::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.crt::before {
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 60%, rgb(0 0 0 / 0.55) 100%);
  z-index: 2;
}

.crt::after {
  background: repeating-linear-gradient(
    to bottom,
    rgb(0 0 0 / 0) 0,
    rgb(0 0 0 / 0) 2px,
    rgb(0 0 0 / 0.18) 3px,
    rgb(0 0 0 / 0.18) 3px
  );
  z-index: 3;
  animation: crt-flicker 3s steps(2, end) infinite;
}

@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

.crt__back {
  display: inline-block;
  margin-bottom: clamp(24px, 5vw, 48px);
  color: var(--crt-fg);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.crt__back::before {
  content: "> ";
}

.crt__back:hover,
.crt__back:focus-visible {
  text-decoration: underline;
}

.crt__screen {
  position: relative;
  z-index: 1;
  max-width: 62ch;
}

.crt-line {
  margin: 0;
  white-space: pre-wrap;
  min-height: 1.7em;
}

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

.crt-line--gap {
  min-height: 1.7em;
}

/* The blinking cursor rides the line currently being typed. */
.crt-cursor::after {
  content: "\2588";
  margin-left: 1px;
  animation: crt-blink 1s steps(1, end) infinite;
}

@keyframes crt-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.crt__options {
  list-style: none;
  margin: clamp(16px, 4vw, 32px) 0 0;
  padding: 0;
}

.crt__options li {
  margin: 8px 0;
  min-height: 1.7em;
}

.crt-choice {
  display: inline-block;
  padding: 4px 0;
  background: none;
  border: 0;
  color: var(--crt-fg);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.crt-choice::before {
  content: "> ";
}

.crt-choice:hover,
.crt-choice:focus-visible {
  text-decoration: underline;
}

/* Lines waiting to be typed are held hidden by JS. Without JS this class is
   never added, so the full text shows. */
.crt[data-anim="on"] .is-pending {
  visibility: hidden;
}

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