/* ============================================================
   guest@steve.net:~$  —  shell mode
   Phosphor is driven by CSS custom properties so `phosphor <name>`
   only swaps a handful of values on :root.
   ============================================================ */

:root {
  /* --- green phosphor P1 (default) --- */
  --phos:        #3dffa0;
  --phos-dim:    #2bb474;
  --phos-faint:  #17603f;
  --phos-glow:   rgba(61, 255, 160, 0.55);
  --bg-0:        #030b06;   /* deepest */
  --bg-1:        #04120a;   /* screen  */
  --accent:      #b6ffd8;   /* bright hits */
  --warn:        #ffd166;
  --err:         #ff6b6b;
  --link:        #7fd4ff;
  --img-hue:     60deg;

  --bezel:       #14100c;
  --bezel-hi:    #211a12;
  --bezel-lo:    #060403;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs: clamp(13px, 0.72vw + 10px, 16.5px);
  --scan-op: 0.28;
  --curve: cubic-bezier(0.22, 1, 0.36, 1);
}

/* amber phosphor P3 */
:root[data-phosphor="amber"] {
  --phos: #ffc257; --phos-dim: #d6912e; --phos-faint: #6b4611;
  --phos-glow: rgba(255,194,87,0.5);
  --bg-0: #100801; --bg-1: #170d02; --accent: #ffe6b0;
  --link: #ffd98c;
  --img-hue: -15deg;
}
/* ice / white phosphor P4 */
:root[data-phosphor="ice"] {
  --phos: #cfeaff; --phos-dim: #7fb4dd; --phos-faint: #2c4d69;
  --phos-glow: rgba(159,212,255,0.5);
  --bg-0: #030812; --bg-1: #04101f; --accent: #eaf6ff;
  --link: #a8d8ff;
  --img-hue: 165deg;
}
/* Tektronix 4010 storage tube */
:root[data-phosphor="tek"] {
  --phos: #8cffe9; --phos-dim: #45c4ab; --phos-faint: #1b5f51;
  --phos-glow: rgba(140,255,233,0.5);
  --bg-0: #010a09; --bg-1: #021413; --accent: #e0fff9;
  --link: #5ce8ff;
  --img-hue: 110deg;
}
/* storage tubes draw vectors, not raster — no scanlines, stronger bloom */
:root[data-phosphor="tek"] .scanlines { display: none; }
:root[data-phosphor="tek"] .crt {
  text-shadow: 0 0 8px var(--phos-glow), 0 0 2px var(--phos-glow);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html, body {
  margin: 0; height: 100%;
  background:
    radial-gradient(120% 90% at 50% 0%, #14110c 0%, #0a0805 55%, #050403 100%);
  color: var(--phos);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

::selection { background: var(--phos); color: var(--bg-0); text-shadow: none; }

/* ---------- power-on flash ---------- */
.power {
  position: fixed; inset: 0; z-index: 60; background: #000;
  pointer-events: none;
}
.power.on { animation: crtflash 1100ms var(--curve) forwards; }
@keyframes crtflash {
  0%   { background:#000; }
  4%   { background:#eafff4; }
  9%   { background:#0a1f14; }
  14%  { background:#000; }
  100% { background: transparent; visibility: hidden; }
}

/* ---------- monitor bezel ---------- */
.bezel {
  position: fixed; inset: 0;
  margin: clamp(10px, 2.4vmin, 40px);
  border-radius: clamp(14px, 2vmin, 26px);
  background:
    linear-gradient(160deg, var(--bezel-hi), var(--bezel) 40%, var(--bezel-lo));
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,0.9),
    0 2px 0 rgba(255,255,255,0.05) inset,
    0 -30px 60px -20px rgba(0,0,0,0.7) inset;
  padding: clamp(10px, 1.8vmin, 22px);
  display: flex; flex-direction: column;
}
.bezel::before { /* screw-head corners */
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:
    radial-gradient(3px 3px at 18px 18px, rgba(0,0,0,.6), transparent 60%),
    radial-gradient(3px 3px at calc(100% - 18px) 18px, rgba(0,0,0,.6), transparent 60%),
    radial-gradient(3px 3px at 18px calc(100% - 18px), rgba(0,0,0,.6), transparent 60%),
    radial-gradient(3px 3px at calc(100% - 18px) calc(100% - 18px), rgba(0,0,0,.6), transparent 60%);
  pointer-events:none;
}

.screen {
  position: relative; flex: 1; min-height: 0;
  border-radius: clamp(8px, 1.4vmin, 16px);
  background:
    radial-gradient(130% 130% at 50% 45%, var(--bg-1) 60%, var(--bg-0) 100%);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.8),
    0 0 90px 8px rgba(0,0,0,0.6) inset;
  transform: perspective(1400px);
}

/* ---------- screen curvature ----------
   .pane holds everything the electron gun draws (text, scanlines, HUD,
   rain). The SVG filter barrel-distorts it: center bulges toward the
   viewer, corners pull in and round off like a real tube. Engines that
   can't run SVG filters on HTML (Safari) just render it flat. */
.pane { position: absolute; inset: 0; }
html[data-curve="on"] .pane { filter: url(#crt-curve); }

/* curved glass catches the room light near the top */
html[data-curve="on"] .glare {
  background:
    radial-gradient(42% 26% at 50% 3%, rgba(255,255,255,0.10), transparent 72%),
    radial-gradient(30% 40% at 12% 88%, rgba(255,255,255,0.035), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 30%);
}
/* pillow-shaped edge falloff to match the pulled-in corners */
html[data-curve="on"] .vignette {
  background:
    radial-gradient(115% 115% at 50% 50%, transparent 55%, rgba(0,0,0,0.5) 92%, rgba(0,0,0,0.75) 100%),
    radial-gradient(100% 100% at 50% 50%, transparent 68%, rgba(0,0,0,0.38) 100%);
}
html[data-curve="on"] .screen { border-radius: clamp(12px, 2vmin, 24px); }

.crt {
  position: absolute; inset: 0;
  padding: clamp(16px, 3vmin, 40px);
  padding-bottom: clamp(40px, 6vmin, 64px);   /* clear the status HUD */
  overflow-y: auto; overflow-x: hidden;
  color: var(--phos);
  text-shadow: 0 0 6px var(--phos-glow), 0 0 1px var(--phos-glow);
  font-size: var(--fs);
  line-height: 1.5;
  border-radius: 3vmin / 5vmin;
  scrollbar-width: thin;
  scrollbar-color: var(--phos-faint) transparent;
}
.crt::-webkit-scrollbar { width: 10px; }
.crt::-webkit-scrollbar-thumb {
  background: var(--phos-faint); border-radius: 10px;
  border: 3px solid transparent; background-clip: padding-box;
}
.crt::-webkit-scrollbar-track { background: transparent; }

/* ---------- in-screen status HUD ---------- */
.statusbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 18;
  display: flex; align-items: center; gap: 0;
  padding: 6px clamp(16px, 3vmin, 40px);
  font-size: clamp(9px, 0.62vw + 5px, 11.5px); letter-spacing: .06em;
  color: var(--phos-dim);
  background: linear-gradient(to top, color-mix(in srgb, var(--bg-0) 92%, transparent), transparent);
  /* 2px so the curved line straddles scanline bands instead of dashing */
  border-top: 2px solid color-mix(in srgb, var(--phos) 10%, transparent);
  text-shadow: 0 0 4px var(--phos-glow);
  user-select: none;
}
.sb-item { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.sb-item b { color: var(--phos); font-weight: 600; }
.sb-sep { color: var(--phos-faint); padding: 0 .8em; }
.sb-grow { flex: 1; }
.sb-on i { color: var(--phos); animation: pulse 2.4s ease-in-out infinite; font-style: normal; }
.sb-hint b { color: var(--accent); }
@media (max-width: 560px) {
  .sb-hint, .statusbar .sb-sep:nth-of-type(3) { display: none; }
  .statusbar { font-size: 9px; gap: 0; }
}

/* ---------- CRT overlays ---------- */
.scanlines {
  position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,var(--scan-op)) 3px,
    rgba(0,0,0,var(--scan-op)) 4px);
  mix-blend-mode: multiply;
  animation: roll 8s linear infinite;
}
@keyframes roll { from { background-position: 0 0; } to { background-position: 0 400px; } }

.vignette {
  position:absolute; inset:0; z-index:21; pointer-events:none;
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%),
    radial-gradient(100% 100% at 50% 50%, transparent 70%, rgba(0,0,0,0.35) 100%);
}
.glare {
  position:absolute; inset:0; z-index:22; pointer-events:none; opacity:.5;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 30%);
}

.rain {
  position:absolute; inset:0; width:100%; height:100%; z-index:15;
  pointer-events:none;
  opacity:0; transition: opacity .4s ease; mix-blend-mode: screen;
}
.rain.live { opacity: 1; }

/* flicker on the whole screen */
.screen::after {
  content:""; position:absolute; inset:0; z-index:23; pointer-events:none;
  background: var(--phos); opacity: 0; mix-blend-mode: overlay;
  animation: flicker 6s steps(1) infinite;
}
@keyframes flicker {
  0%,97%,100% { opacity: 0; }
  97.5% { opacity: 0.018; }
  98.5% { opacity: 0.05; }
  99.2% { opacity: 0.012; }
}

/* ---------- terminal text ---------- */
.term { white-space: pre-wrap; word-break: break-word; }
.line { display: block; }
.muted   { color: var(--phos-dim); }
.faint   { color: var(--phos-faint); }
.bright  { color: var(--accent); font-weight: 600; }
.warn    { color: var(--warn); }
.err     { color: var(--err); }
a, .link { color: var(--link); text-decoration: none; border-bottom: 1px dashed color-mix(in srgb, var(--link) 50%, transparent); }
a:hover, .link:hover { color: var(--accent); border-bottom-style: solid; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hr { color: var(--phos-faint); white-space: pre; }
.progress { color: var(--phos-dim); }
.ok   { color: var(--phos); }

.banner {
  /* 74 columns must fit; size off viewport with a cap. */
  font-family: var(--mono);
  font-size: min(1.9vw, 14px);
  font-weight: 700;
  line-height: 1.02; letter-spacing: 0;
  color: var(--phos); white-space: pre; margin: .3em 0 .5em;
  /* phosphor bloom + CRT color misconvergence */
  text-shadow:
    0 0 10px var(--phos-glow),
    0 0 22px color-mix(in srgb, var(--phos) 30%, transparent),
    -0.5px 0 0 rgba(255,60,80,0.5),
    0.5px 0 0 rgba(60,180,255,0.4);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  animation: converge 7s ease-in-out infinite;
}
@keyframes converge {
  0%,100% { text-shadow: 0 0 10px var(--phos-glow), 0 0 22px color-mix(in srgb, var(--phos) 30%, transparent), -0.5px 0 0 rgba(255,60,80,0.5), 0.5px 0 0 rgba(60,180,255,0.4); }
  50%     { text-shadow: 0 0 12px var(--phos-glow), 0 0 26px color-mix(in srgb, var(--phos) 35%, transparent), -1px 0 0 rgba(255,60,80,0.42), 1px 0 0 rgba(60,180,255,0.34); }
}
@media (prefers-reduced-motion: reduce) { .banner { animation: none; } }
.banner::-webkit-scrollbar { display: none; }

/* echoed command in history */
.echo .ps1 { color: var(--phos-dim); }
.echo .cmd { color: var(--accent); }

/* ---------- rendered page content (`cat`) ---------- */
.doc {
  display: block;
  margin: .5em 0 1em;
  padding: .6em 1em .8em;
  border-left: 2px solid var(--phos-faint);
  white-space: normal;
  animation: docin .35s ease;
  max-width: 88ch;
}
@keyframes docin { from { opacity: 0; } to { opacity: 1; } }
.doc h1, .doc h2, .doc h3, .doc h4 {
  color: var(--accent); line-height: 1.25;
  margin: 1em 0 .4em; font-weight: 700;
}
.doc h1 { font-size: 1.25em; margin-top: .3em; }
.doc h1::before { content: "# ";  color: var(--phos-faint); }
.doc h2 { font-size: 1.1em; }
.doc h2::before { content: "## "; color: var(--phos-faint); }
.doc h3 { font-size: 1em; }
.doc h3::before { content: "### "; color: var(--phos-faint); }
.doc p, .doc li { color: var(--phos); }
.doc strong { color: var(--warn); }
.doc em { color: var(--accent); font-style: normal; }
.doc code {
  color: var(--accent);
  background: color-mix(in srgb, var(--phos) 10%, transparent);
  padding: .1em .35em; border-radius: 3px; font-size: .92em;
}
.doc pre {
  background: color-mix(in srgb, var(--phos) 7%, transparent);
  border: 1px solid var(--phos-faint);
  padding: .7em .9em; border-radius: 4px;
  overflow-x: auto; line-height: 1.4;
}
.doc pre code { background: none; padding: 0; color: var(--phos); }
.doc blockquote {
  border-left: 3px solid var(--phos-dim);
  margin: 1em 0; padding: .2em 1em; color: var(--phos-dim); font-style: italic;
}
.doc hr { border: none; border-top: 1px dashed var(--phos-faint); margin: 1.2em 0; }
.doc table { border-collapse: collapse; margin: 1em 0; font-size: .92em; }
.doc th, .doc td { border: 1px solid var(--phos-faint); padding: .3em .6em; text-align: left; }
.doc th { color: var(--accent); }
.doc img {
  max-width: min(100%, 60ch); height: auto; display: block; margin: .8em 0;
  border: 1px solid var(--phos-faint); border-radius: 3px;
  /* images render as if drawn by the tube */
  filter: grayscale(1) brightness(.95) sepia(1) hue-rotate(var(--img-hue)) saturate(2.4);
  opacity: .92;
}

/* ---------- prompt / input ---------- */
.promptline {
  display: flex; align-items: baseline; flex-wrap: wrap;
  position: relative; margin-top: .15em;
}
.ps1 {
  color: var(--phos-dim); white-space: pre; flex: none;
  margin-right: .55ch;
}
.ps1 .u { color: var(--accent); }
.ps1 .h { color: var(--phos); }
.ps1 .p { color: var(--phos-dim); }
.inputwrap {
  position: relative; flex: 1 1 auto; min-width: 6ch;
  white-space: normal; word-break: break-word;
}
.typed, .rest { white-space: pre-wrap; }
.rest { color: var(--phos-faint); }   /* tab-completion ghost */
.caret {
  display: inline-block; width: 1ch; margin: 0 -1ch 0 0;
  background: var(--phos); color: var(--bg-0);
  box-shadow: 0 0 8px var(--phos-glow);
  animation: blink 1.05s steps(1) infinite;
  vertical-align: baseline;
}
.caret.hide { animation: none; background: transparent; box-shadow:none; }
@keyframes blink { 0%,50% { opacity:1; } 50.01%,100% { opacity:0; } }

/* the real input is invisible but focusable & on-screen (mobile keyboards) */
.realinput {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: transparent; border: 0; outline: 0;
  color: transparent; caret-color: transparent;
  font: inherit; padding: 0;
}

/* boot cursor block that types the banner */
.typecaret::after {
  content:"▋"; color: var(--phos); animation: blink 1s steps(1) infinite;
}

/* ---------- corner links ---------- */
.corner {
  position: fixed; z-index: 40;
  right: clamp(20px, 4vmin, 54px); bottom: clamp(16px, 3.4vmin, 46px);
  display: flex; align-items: center; gap: 12px;
}
.corner-link {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: color-mix(in srgb, var(--phos) 60%, #000);
  text-decoration: none; border: 0;
  background: rgba(4,10,7,.55); backdrop-filter: blur(2px);
  padding: 5px 10px; border-radius: 6px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--phos) 22%, transparent);
  transition: color .25s var(--curve), box-shadow .25s var(--curve);
}
.corner-link:hover { color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--phos) 55%, transparent), 0 0 22px -6px var(--phos-glow); }
.corner-tip {
  font-size: 10px; color: color-mix(in srgb, var(--phos) 40%, #000);
  letter-spacing: .04em; user-select: none;
}
.corner-tip b { color: color-mix(in srgb, var(--phos) 65%, #000); }

/* ---------- bezel foot ---------- */
.bezel-foot {
  display: flex; align-items: center; gap: 14px;
  padding: clamp(6px,1.2vmin,12px) clamp(8px,1.6vmin,18px) 2px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  color: rgba(255,255,255,.18); text-transform: uppercase; user-select:none;
}
.led {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--phos); box-shadow: 0 0 10px var(--phos-glow);
  animation: pulse 3.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:.55; } 50% { opacity:1; } }
.stamp { flex: 1; }
.knob {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a2f22, #120d08 70%);
  box-shadow: 0 1px 2px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04) inset;
}

/* ---------- responsive ---------- */
@media (max-width: 560px) {
  .bezel { margin: 6px; padding: 8px; }
  .bezel-foot .stamp { font-size: 8px; }
  :root { --scan-op: 0.22; }
  .corner { right: 10px; bottom: 10px; gap: 8px; flex-direction: column; align-items: flex-end; }
  .corner-link { font-size: 9px; }
  .corner-tip { display: none; }
  .banner { font-size: min(1.9vw, 10px); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .power.on { animation-duration: 1ms; }
  .scanlines, .screen::after, .led { animation: none; }
  .caret, .typecaret::after { animation: none; }
  .scanlines { opacity: .5; }
  .doc { animation: none; }
}