/* ASYNC // KV31 MAINFRAME TERMINAL
   Period 1990. Contained CRT panel. Calm, legible, hand-styled. No frameworks. */

:root {
  --phos: #cdd86a;          /* legible backrooms phosphor */
  --phos-dim: #8d9648;
  --phos-bright: #eaf29a;
  --amber: #e8c33a;
  --hazmat: #f4e400;
  --red: #d65046;
  --bg: #07080a;
  --panel: #0c0e09;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background:
    radial-gradient(140% 100% at 50% 0%, #15170f 0%, #0a0b08 55%, #050604 100%);
  overflow: hidden;
  font-family: "VT323", "Courier New", monospace;
  color: var(--phos);
}

/* ---- full-screen terminal ---- */
#crt {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(130% 120% at 50% 40%, #11140c 0%, #0a0c07 65%, #050604 100%),
    var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* gentle, STATIC scanlines (no animation = no jitter) */
#crt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0.16) 4px
  );
}
/* glass vignette — heavier corners fake the curved-tube falloff */
#crt::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 59;
  box-shadow:
    inset 0 0 9vw 1vw rgba(0,0,0,0.55),
    inset 0 0 24vw 8vw rgba(0,0,0,0.35);
}

/* CRT glass: faint screen reflection + a slow refresh band drifting down */
#crtfx {
  position: absolute;
  inset: 0;
  z-index: 58;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(205,216,106,0.05), transparent 55%),
    radial-gradient(140% 130% at 50% 50%, transparent 60%, rgba(0,0,0,0.18) 100%);
}
#crtfx::after {
  content: "";
  position: absolute;
  left: 0; right: 0; height: 30%;
  top: -30%;
  background: linear-gradient(to bottom, transparent, rgba(220,230,150,0.035), transparent);
  animation: refresh 7s linear infinite;
}
@keyframes refresh { 0% { top: -30%; } 100% { top: 100%; } }

/* faint STATIC analog grain (no motion = no jitter) */
#grain {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 57;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- power-on gate ---- */
#gate {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: radial-gradient(120% 120% at 50% 42%, #0e110a 0%, #07080500 70%), var(--bg);
  text-align: center;
}
#gate.off { display: none; }
#gate-logo {
  width: 72px; height: auto; margin-bottom: 20px;
  filter: invert(1) sepia(1) saturate(2) hue-rotate(35deg) brightness(0.9);
  opacity: 0.65;
}
#gate-title { font-size: 19px; letter-spacing: 5px; color: var(--phos-dim); }
#gate-sub { font-size: 14px; letter-spacing: 4px; color: var(--phos-dim); margin-top: 6px; opacity: 0.7; }
#gate-key {
  margin-top: 54px;
  font-size: 16px; letter-spacing: 3px; color: var(--phos);
  animation: blink 1.15s steps(1) infinite;
}

/* ---- BIOS boot badge (period upper-right OEM/compliance mark) ---- */
#bootbadge {
  position: absolute;
  top: 3.4vh; right: 3.6vw;
  z-index: 25;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px double var(--phos-dim);
  color: var(--phos);
  font-size: 14px; letter-spacing: 2px; line-height: 1.05;
  text-align: right;
}
#bootbadge img {
  width: 34px; height: auto;
  filter: invert(1) sepia(1) saturate(2.4) hue-rotate(8deg) brightness(1.05);
}
#bootbadge span { color: var(--phos-dim); font-size: 12px; letter-spacing: 3px; }

/* POST text */
.bios { color: var(--phos-bright); }
.ok { color: var(--phos-bright); }
#memc { color: var(--phos-bright); }

/* ---- live instrument status strip (bottom) ---- */
#statusbar {
  position: relative; z-index: 20; flex: 0 0 auto;
  display: flex; align-items: center; gap: 26px;
  padding: 8px 3.6vw;
  border-top: 1px solid rgba(44,48,24,0.45);
  font-size: 14px; letter-spacing: 1.5px;
  color: var(--phos);
}
#statusbar .sk { color: var(--phos-dim); margin-right: 5px; }
#statusbar .sb-right { margin-left: auto; color: var(--phos-dim); }
#statusbar .red { color: var(--red); }
#statusbar .haz { color: var(--hazmat); }

/* ---- floating REC indicator (no bar, no border) — hidden until booted ---- */
#rec {
  position: absolute;
  top: 16px; right: 20px;
  z-index: 30;
  display: none;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--red);
  text-shadow: 0 0 6px rgba(214,80,70,.5);
  pointer-events: none;
}
#rec .dim { color: var(--phos-dim); }
.rec .dot { animation: pulse 1.6s ease-in-out infinite; display: inline-block; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ---- screen body ---- */
#screen {
  position: relative;
  z-index: 15;
  flex: 1 1 auto;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2c3018 transparent;
  padding: 3.2vh 3.6vw 8px;
  font-size: 21px;
  line-height: 1.42;
  letter-spacing: 0.3px;
  /* phosphor bloom + constant RGB fringing (chromatic aberration) */
  text-shadow:
    0 0 2px rgba(205,216,106,0.45),
    -0.6px 0 0.5px rgba(214,80,70,0.35),
    0.6px 0 0.5px rgba(90,150,200,0.30);
  filter: blur(0.35px) contrast(1.05) brightness(1.05);
}
#screen::-webkit-scrollbar { width: 8px; }
#screen::-webkit-scrollbar-thumb { background: #2c3018; border-radius: 4px; }

.line { white-space: pre-wrap; word-break: break-word; }
.dim { color: var(--phos-dim); }
.bright { color: var(--phos-bright); }
.amber { color: var(--amber); }
.haz { color: var(--hazmat); }
.red { color: var(--red); text-shadow: 0 0 5px rgba(214,80,70,.5); }
.b { letter-spacing: 1px; }
.lnk {
  color: var(--phos-bright);
  text-decoration: none;
  border-bottom: 1px dotted var(--phos-dim);
  cursor: pointer;
}
.lnk:hover { color: #fff; border-bottom-color: var(--phos-bright); }
.scan {
  display: block;
  max-width: 320px; width: 60%;
  margin: 8px 0 10px;
  border: 1px solid var(--phos-dim);
  filter: grayscale(0.4) contrast(1.1) brightness(0.95) sepia(0.25) hue-rotate(30deg) saturate(0.8);
}
.scan.tall { max-width: 260px; }

/* boot logo — small, in the document flow, calm */
#logo {
  width: 74px; height: auto; display: block; margin: 4px 0 14px;
  filter: invert(1) sepia(1) saturate(2.2) hue-rotate(35deg) brightness(1)
          drop-shadow(0 0 5px rgba(205,216,106,.45));
}

/* ---- prompt (pinned in panel) ---- */
#prompt {
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 11px 3.6vw;
  border-top: 1px solid rgba(44,48,24,0.6);
  background: transparent;
  font-size: 21px;
  text-shadow:
    0 0 2px rgba(205,216,106,0.45),
    -0.6px 0 0.5px rgba(214,80,70,0.35),
    0.6px 0 0.5px rgba(90,150,200,0.30);
  filter: blur(0.35px) brightness(1.05);
}
#ps1 { color: var(--phos-bright); white-space: nowrap; }
#mirror { color: var(--phos-bright); white-space: pre; }
#caret2 { color: var(--phos-bright); }
@keyframes blink { 50% { opacity: 0; } }
#cmd { position: absolute; left: -9999px; opacity: 0; }


/* ---- effects: only during endgame ---- */
#screen.aberrate { animation: ab 0.16s infinite; }
@keyframes ab {
  0%{text-shadow:-1px 0 rgba(214,80,70,.6), 1px 0 rgba(74,140,195,.6)}
  100%{text-shadow:1px 0 rgba(214,80,70,.6), -1px 0 rgba(74,140,195,.6)}
}

/* CRT power-on: abrupt flash + flicker, no smooth wipe */
#poweron {
  position: fixed; inset: 0; z-index: 99; background: #d3da82;
  pointer-events: none; opacity: 0;
}
#poweron.on { animation: poweron 0.5s ease-out forwards; }
@keyframes poweron {
  0%   { opacity: 0.5; }
  100% { opacity: 0; }
}

#breach {
  position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0;
  background: var(--hazmat); mix-blend-mode: multiply;
}
#breach.on { animation: breach 2.6s steps(8) forwards; }
@keyframes breach { 0%{opacity:0} 20%{opacity:.7} 35%{opacity:.1} 55%{opacity:.85} 100%{opacity:.3} }

#jumpscare {
  position: fixed; inset: 0; z-index: 95; display: none;
  background: #000 center/cover no-repeat;
  filter: contrast(1.3) saturate(1.2);
}
#jumpscare.on { display: block; animation: js 0.09s steps(2) infinite; }
@keyframes js { 0%{transform:scale(1.02)} 100%{transform:scale(1.06) translate(-1%,1%)} }

#watermark { display: none; }
.sr { position: absolute; left: -9999px; }