/* Photographic monochrome-phosphor CRT. Realism comes from layered analog passes
   (bloom, fine grain, soft focus, scanlines, vignette, flicker) over a period
   typeface. Every parameter is a CSS variable. */

/* Authentic IBM VGA 8x16 text-mode font (int10h Oldschool PC Font Pack, CC BY-SA 4.0),
   self-hosted so there's no external dependency and view-source stays in character. */
@font-face {
  font-family: "VGA437";
  src: url("../fonts/Web437_IBM_VGA_8x16.woff") format("woff");
  font-display: swap;
}

.crt {
  --phosphor: #79ff8c;          /* real P1-ish green, not neon #00ff00 */
  --bg: #070806;                /* matte near-black to match the recessed screen glass */
  --font-size: 30px;
  --line-height: 1.25;

  /* Tuned look values. JS counterparts: grainFps 34, flickerAmp 0.07 (main.js). */
  --screen-blur: 1.35px;        /* soft focus on the text */
  --glow-tight: 0px;            /* tight halo (text-shadow) */
  --glow-wide: 28px;            /* wider halo */
  --glow-alpha: 0.5;

  --bloom-blur: 20px;           /* the overexposed bleed */
  --bloom-bright: 1.6;
  --bloom-sat: 0.5;             /* desaturate so dense text blows toward white */
  --bloom-opacity: 0.5;

  --scan-opacity: 0.5;
  --scan-period: 2px;

  --grain-opacity: 0.27;

  --vignette: 0.5;
  --bright: 1.36;
  --contrast: 1.1;
  --flicker: 1;                 /* driven by JS */

  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
  filter: brightness(calc(var(--bright) * var(--flicker))) contrast(var(--contrast));
}

.crt-layer {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 4.5% 5%;
  font-family: "VGA437", ui-monospace, Menlo, monospace;
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: 0.02em;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
}

/* Base phosphor text: bright core + tight green halo, slightly defocused. */
.crt-base {
  color: var(--phosphor);
  text-shadow:
    0 0 var(--glow-tight) rgba(121, 255, 140, var(--glow-alpha)),
    0 0 var(--glow-wide) rgba(121, 255, 140, calc(var(--glow-alpha) * 0.6));
  filter: blur(var(--screen-blur));
  z-index: 1;
}

/* Bloom: a blurred, brightened, desaturated copy screen-blended over the base so
   bright/dense areas bleed light and overexpose toward white. */
.crt-bloom {
  color: var(--phosphor);
  filter: blur(var(--bloom-blur)) brightness(var(--bloom-bright)) saturate(var(--bloom-sat));
  mix-blend-mode: screen;
  opacity: var(--bloom-opacity);
  z-index: 2;
}

.crt-overlay { position: absolute; inset: 0; pointer-events: none; }

.crt-scanlines {
  z-index: 3;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, var(--scan-opacity)) 0,
    rgba(0, 0, 0, var(--scan-opacity)) 1px,
    transparent 1px,
    transparent var(--scan-period)
  );
  mix-blend-mode: multiply;
}

.crt-grain {
  z-index: 4;
  width: 100%;
  height: 100%;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  image-rendering: auto;
}

/* Edge falloff + the dark glass of the tube. */
.crt-vignette {
  z-index: 5;
  background: radial-gradient(120% 120% at 50% 48%, transparent 52%, rgba(0, 0, 0, var(--vignette)) 100%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.85);
}

/* Faint glass sheen across the top — kept very low so it never looks like a sticker. */
.crt-glass {
  z-index: 6;
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.035), transparent 38%);
}

/* Output is selectable/copyable; the bloom duplicate never intercepts the mouse. */
.crt-base { user-select: text; -webkit-user-select: text; }
.crt-bloom { user-select: none; -webkit-user-select: none; pointer-events: none; }

/* Loading screen: shrink the font so the full ASCII logo fits, centered. */
.crt.logo-mode { --font-size: 8px; --line-height: 1.04; --bloom-blur: 8px; }
.crt.logo-mode .crt-layer { padding: 3% calc((100% - 88ch) / 2); }

/* App view (per-command UI, e.g. the NEUROCODE translator) replaces the terminal text
   but stays under the grain/scanline overlays so it reads as the same screen. */
.crt.app-open .crt-base,
.crt.app-open .crt-bloom { display: none; }

.crt-app {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg);
  color: var(--phosphor);
  font-family: "VGA437", ui-monospace, Menlo, monospace;
  padding: 4.5% 5%;
  display: flex;
}
.crt-app[hidden] { display: none; }
.app-pane { display: flex; flex-direction: column; width: 100%; height: 100%; gap: 9px; }
.app-title { font-size: calc(var(--font-size) * 1.05); letter-spacing: 0.06em; text-shadow: 0 0 6px rgba(121, 255, 140, 0.7); }
.app-label { font-size: calc(var(--font-size) * 0.68); color: rgba(121, 255, 140, 0.75); letter-spacing: 0.08em; }
.app-in, .app-out {
  flex: 1; min-height: 0;
  background: rgba(10, 22, 14, 0.55);
  border: 1px solid rgba(121, 255, 140, 0.35);
  color: var(--phosphor);
  font-family: inherit; font-size: var(--font-size); line-height: 1.3;
  padding: 10px 12px; resize: none; outline: none;
  text-shadow: 0 0 5px rgba(121, 255, 140, 0.55);
  caret-color: var(--phosphor);
}
.app-out { color: #a8ffc0; }
.app-foot { display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--font-size) * 0.66); color: rgba(121, 255, 140, 0.7); }
.app-copy {
  font-family: inherit; font-size: inherit;
  background: transparent; border: 1px solid rgba(121, 255, 140, 0.4); color: var(--phosphor);
  padding: 5px 12px; cursor: pointer; text-shadow: 0 0 5px rgba(121, 255, 140, 0.5);
}
.app-copy:hover { background: rgba(121, 255, 140, 0.12); }
.app-close {
  font-family: inherit; font-size: inherit;
  background: transparent; border: 0; color: rgba(121, 255, 140, 0.7);
  cursor: pointer; letter-spacing: inherit; padding: 5px 0;
}
.app-close:hover { color: var(--phosphor); }

/* Focus must stay visible (WCAG 2.4.7) — reads as the field energizing, stays in fiction. */
.app-in:focus-visible, .app-out:focus-visible {
  border-color: var(--phosphor);
  box-shadow: 0 0 8px rgba(121, 255, 140, 0.45);
}