/* OMEN: a recovered phosphor display, not a modern command dashboard. */
* { box-sizing: border-box; }
:root {
  --bg: #060611; --bg-2: #111126; --fg: #bbb5f4;
  --fg-dim: #8983b8; --fg-faint: #45415f;
  --accent: #cfc5f6; --ok: #d2cbff; --warn: #f18e98;
  --scan-op: .16; --bar-h: 45px;
  --pad: clamp(18px, 3.4vw, 52px);
}
html[data-theme="green"] {
  --bg:#030a06; --bg-2:#09170e; --fg:#9be8b1; --fg-dim:#64a87a; --fg-faint:#345b40;
  --accent:#d8bd7a; --ok:#a6efbc; --warn:#f27c73;
}
html[data-theme="amber"] {
  --bg:#0b0803; --bg-2:#1c1508; --fg:#edc781; --fg-dim:#b18c4d; --fg-faint:#5c4728;
  --accent:#c4dbd2; --ok:#f2d59c; --warn:#f17c70;
}
html[data-theme="blue"] {
  --bg:#03080c; --bg-2:#09151f; --fg:#9bd4ed; --fg-dim:#659cb5; --fg-faint:#304f62;
  --accent:#dbc18b; --ok:#a9e0f4; --warn:#ef8b84;
}
html[data-theme="red"] {
  --bg:#0c0303; --bg-2:#1d0908; --fg:#f59c96; --fg-dim:#b96660; --fg-faint:#60332f;
  --accent:#e5c291; --ok:#ffb9a3; --warn:#ffd4cb;
}
html, body { height:100%; margin:0; overflow:hidden; background:#030307; }
body {
  font-family:Consolas, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
  color:var(--fg); -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  background:radial-gradient(ellipse at 50% 48%, #14131e, #030307 75%);
}
button, input { font:inherit; }
button:focus-visible { outline:2px solid var(--fg); outline-offset:7px; }
::selection { background:var(--fg-dim); color:var(--bg); text-shadow:none; }
/* The chassis disappears completely while powered off. */
.crt {
  position:fixed; inset:clamp(12px, 2.7vw, 40px);
  display:flex; flex-direction:column; visibility:hidden; opacity:0; overflow:hidden;
  border:11px solid #14141c; border-radius:24px;
  outline:1px solid #282733;
  box-shadow:0 0 0 3px #09090f, 0 0 0 4px #1e1d28,
             0 28px 90px #000, inset 0 0 60px #000;
  background:radial-gradient(ellipse at 45% 25%, var(--bg-2), var(--bg) 78%);
  transform-origin:50% 50%;
}
.crt::before {
  content:""; position:absolute; inset:0; z-index:23; border-radius:12px; pointer-events:none;
  box-shadow:inset 0 0 3px #000, inset 0 0 22px 7px #0009;
  border:1px solid #aaa4dd27;
}
body.powering .crt, body.powered .crt { opacity:1; visibility:visible; }
body.powering .crt { animation:crtOn .85s cubic-bezier(.2,.8,.25,1) both; }
@keyframes crtOn {
  0% { transform:scaleY(.003) scaleX(.5); filter:brightness(3); }
  30% { transform:scaleY(.008) scaleX(1); filter:brightness(2.5); }
  64% { transform:scale(1); filter:brightness(1.3); }
  100% { transform:scale(1); filter:brightness(1); }
}
/* Quiet, utilitarian chrome leaves the transcript in charge. */
.bar {
  flex:0 0 var(--bar-h); display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:0 var(--pad); font-size:10px; letter-spacing:.10em;
  color:var(--fg-dim); border-bottom:1px solid var(--fg-faint);
  background:#0003; user-select:none;
}
.bar-left { color:var(--fg); white-space:nowrap; }
.bar-right { display:flex; align-items:center; gap:12px; }
.led { width:4px; height:4px; border-radius:50%; opacity:.7; background:var(--fg-dim); }
#led-pwr { background:var(--fg); box-shadow:0 0 7px var(--fg); }
#led-net { background:var(--accent); animation:ledBlink 5.8s steps(1) infinite; }
#led-rec { background:var(--fg-dim); animation:ledBlink 7.3s steps(1) infinite; }
.led.dead { background:var(--fg-faint); opacity:.35; animation:none; box-shadow:none; }
@keyframes ledBlink { 0%,91%,96%,100% { opacity:.8; } 92%,95% { opacity:.18; } }
.clock { min-width:8ch; text-align:right; font-variant-numeric:tabular-nums; }
.bar-btn { color:var(--fg-dim); background:transparent; border:1px solid var(--fg-faint); padding:5px 8px; font-size:9px; letter-spacing:.07em; cursor:pointer; }
.bar-btn:hover { color:var(--fg); border-color:var(--fg-dim); }
.bar-btn[aria-pressed="true"] { color:var(--accent); }
.screen {
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:clamp(25px,4vh,48px) var(--pad) 32px;
  font-size:clamp(12px,1.1vw,15px); line-height:1.65;
  text-shadow:0 0 2px color-mix(in srgb, var(--fg) 25%, transparent), 0 0 12px color-mix(in srgb, var(--fg) 12%, transparent);
  scrollbar-width:thin; scrollbar-color:var(--fg-faint) transparent;
}
.screen::-webkit-scrollbar { width:5px; }
.screen::-webkit-scrollbar-thumb { background:var(--fg-faint); }
.screen::-webkit-scrollbar-track { background:transparent; }
.line { white-space:pre-wrap; overflow-wrap:anywhere; min-height:1.65em; }
.dim { color:var(--fg-dim); }
.dim2 { color:var(--fg-dim); opacity:.8; }
.accent { color:var(--accent); }
.ok { color:var(--ok); }
.warn { color:var(--warn); }
.banner { color:var(--fg); line-height:1.08; font-size:clamp(5px,1.2vw,12px); text-shadow:0 0 12px var(--fg-faint); }
.cmdline { color:var(--fg); margin-top:1em; }
.prompt-echo { color:var(--accent); }
.terminal-foot {
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  flex:0 0 34px; padding:0 var(--pad); border-top:1px solid var(--fg-faint);
  background:#0003; color:var(--fg-dim); font-size:9px; letter-spacing:.12em; user-select:none;
}
.foot-node { display:flex; align-items:center; gap:8px; }
.node-mark { width:5px; height:5px; background:var(--fg-dim); }
.signal-meter { display:flex; gap:3px; align-items:flex-end; height:9px; }
.signal-meter i { width:3px; height:3px; background:var(--fg-dim); }
.signal-meter i:nth-child(2) { height:4px; }
.signal-meter i:nth-child(3) { height:6px; }
.signal-meter i:nth-child(4) { height:8px; }
.signal-meter i:nth-child(5) { height:9px; opacity:.4; }
.signal-meter i:nth-child(6) { height:9px; opacity:.2; }
.input-line { display:none; align-items:baseline; gap:.8ch; margin-top:.4em; }
body.input-on .input-line { display:flex; }
.prompt { color:var(--accent); white-space:pre; flex:0 0 auto; }
.input-wrap { position:relative; min-width:0; flex:1 1 auto; display:flex; align-items:center; min-height:1.65em; overflow:hidden; }
.measure { position:absolute; left:0; top:0; visibility:hidden; white-space:pre; font:inherit; }
.mask { position:absolute; left:0; top:0; white-space:pre; font:inherit; color:var(--fg); pointer-events:none; }
.input-line.masked #input { color:transparent; text-shadow:none; }
#input { position:relative; flex:1 1 auto; width:100%; min-width:0; padding:0; margin:0; border:0; outline:0; background:transparent; color:var(--fg); font:inherit; text-shadow:inherit; caret-color:transparent; }
.cursor { position:absolute; left:0; top:50%; transform:translateY(-50%); width:.6em; height:1.1em; background:var(--fg); box-shadow:0 0 9px var(--fg-faint); animation:blink 1.15s steps(1) infinite; pointer-events:none; }
.cursor.typing { animation:none; opacity:1; }
@keyframes blink { 0%,55% { opacity:.9; } 56%,100% { opacity:0; } }
body.busy .cursor { animation:none; opacity:.3; }
/* Static texture + a very faint long-period phosphor sweep; no canvas loop. */
.scanlines { position:absolute; inset:0; pointer-events:none; z-index:20; background:repeating-linear-gradient(to bottom, transparent 0 2px, #0003 2px 3px); }
.vignette { position:absolute; inset:0; pointer-events:none; z-index:21; background:radial-gradient(ellipse at 50% 45%, transparent 45%, #0003 77%, #000a 100%); }
.flicker { position:absolute; inset:0; pointer-events:none; z-index:22; opacity:.09; background:repeating-linear-gradient(117deg, #ddd6ff06 0 1px, transparent 1px 4px),repeating-linear-gradient(23deg,#0003 0 1px,transparent 1px 3px); }
.sweep { position:absolute; left:0; right:0; top:-20%; height:20%; z-index:19; pointer-events:none; background:linear-gradient(transparent,#d6cfff04 80%,transparent); animation:phosphorSweep 18s linear infinite; }
@keyframes phosphorSweep { to { transform:translateY(650%); } }
/* The only visible object before power-on. */
.overlay { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background:#030307; transition:opacity .45s ease; }
.overlay.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.overlay-inner { display:grid; place-items:center; padding:20px; }
.power-btn {
  width:88px; height:88px; display:flex; align-items:center; justify-content:center;
  padding:0; border-radius:50%; border:1px solid #464257;
  color:#aaa1d0; background:radial-gradient(circle at 45% 35%,#211e2d,#0c0b11 73%);
  box-shadow:0 2px 3px #000,0 0 0 5px #07060a,0 0 0 6px #282431,inset 0 1px 1px #a196c533,inset 0 -5px 9px #000;
  cursor:pointer; transition:color .2s,border-color .2s,box-shadow .2s,transform .15s;
}
.power-btn:hover { color:#d8cbff; border-color:#9381bd; box-shadow:0 0 0 5px #07060a,0 0 0 6px #514563,0 0 45px #bca1ff12,inset 0 1px 1px #b6a0db44,inset 0 -5px 9px #000; }
.power-btn:active { transform:scale(.96); }
.power-icon { position:relative; width:25px; height:25px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; filter:drop-shadow(0 0 4px #b6a0db44); }
.power-icon::after { content:""; position:absolute; left:50%; top:-6px; width:2px; height:14px; background:currentColor; transform:translateX(-50%); }

/* ---------------- printed polaroids ---------------- */

.photo-line { padding: 6px 0 12px; }

.polaroid {
  display: inline-block;
  background: #efece1;
  padding: 12px 12px 6px;
  box-shadow: 0 14px 32px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.6);
  transform: rotate(-1.8deg);
  max-width: min(300px, 70vw);
  text-shadow: none;
  animation: printReveal var(--print-dur, 2200ms) linear both;
}

@keyframes printReveal {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.polaroid .frame {
  position: relative;
  overflow: hidden;
  background: #0b0b0b;
  line-height: 0;
}
.polaroid img { display: block; width: 100%; height: auto; }

.polaroid .cap {
  font-family: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 15px;
  line-height: 1.25;
  color: #2b2b2b;
  text-align: center;
  margin: 10px 4px 8px;
  min-height: 19px;
}

/* input is fully locked while the system works */
body.busy .cursor { animation: none; opacity: 0.3; }

/* ---------------- OMEN lockdown screen ---------------- */

.omen-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  font-family: inherit;
  color: #ff2f2f;
  background:
    radial-gradient(115% 90% at 50% 45%, rgba(130, 0, 0, 0.55), rgba(6, 0, 0, 0.98) 72%),
    #140000;
}
.omen-overlay.on { display: flex; animation: omenIn 0.45s ease both; }
@keyframes omenIn { from { opacity: 0 } to { opacity: 1 } }

/* red scanlines + breathing wash */
.omen-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 0, 0, 0.045) 0 2px,
    rgba(0, 0, 0, 0.28) 2px 3px
  );
}
.omen-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 40%, rgba(255,0,0,0.16), transparent 65%);
  animation: omenWash 3.6s ease-in-out infinite;
}
@keyframes omenWash { 0%, 100% { opacity: .35 } 50% { opacity: .8 } }

.omen-inner { position: relative; z-index: 1; padding: 24px; max-width: 94vw; }

.omen-eye {
  margin: 0 0 14px;
  white-space: pre;
  font-size: clamp(5px, 1.25vw, 12px);
  line-height: 1.04;
  color: #ff3131;
  text-shadow: 0 0 10px #ff0000, 0 0 28px rgba(190, 0, 0, 0.9);
}

.omen-title {
  font-size: clamp(34px, 9vw, 78px);
  line-height: 1;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: #ff3b3b;
  text-shadow: 0 0 14px #ff0000, 0 0 48px rgba(160, 0, 0, 0.95);
  animation: omenPulse 1.7s ease-in-out infinite;
}
@keyframes omenPulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.5 } }

.omen-sub {
  margin-top: 12px;
  font-size: clamp(10px, 2vw, 14px);
  letter-spacing: 0.14em;
  color: #b04a4a;
}

.omen-unlock { display: none; margin-top: clamp(20px, 5vh, 52px); }
.omen-overlay.reveal .omen-unlock { display: block; }

.omen-unlock-label {
  font-size: 12px;
  letter-spacing: 0.24em;
  color: #ff5a5a;
  margin-bottom: 12px;
}

#omen-code {
  font: inherit;
  font-size: clamp(12px, 2.2vw, 15px);
  letter-spacing: 0.18em;
  text-align: center;
  width: min(380px, 78vw);
  padding: 9px 12px;
  color: #ff6b6b;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid #7d1c1c;
  outline: none;
  caret-color: #ff3b3b;
}
#omen-code:focus { border-color: #ff3b3b; box-shadow: 0 0 16px rgba(255, 0, 0, 0.4); }

.omen-error {
  min-height: 17px;
  margin-top: 11px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #ff8a8a;
}

/* ---------------- terminal meltdown (glitch) ---------------- */

body.glitching .crt {
  animation: glitchShake 0.085s steps(2, end) infinite;
}
@keyframes glitchShake {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4px, 1px); }
  40%  { transform: translate(3px, -2px); }
  60%  { transform: translate(-2px, 2px); }
  80%  { transform: translate(4px, -1px); }
  100% { transform: translate(0, 0); }
}

body.glitching .screen {
  filter: saturate(2.2) contrast(1.3);
  animation: chroma 0.14s steps(1) infinite;
}
@keyframes chroma {
  0%   { text-shadow: 3px 0 rgba(255,0,60,.95), -3px 0 rgba(0,255,255,.85), 0 0 8px currentColor; }
  50%  { text-shadow: -4px 0 rgba(255,0,60,.95), 4px 0 rgba(0,255,255,.85), 0 0 8px currentColor; }
  100% { text-shadow: 2px 0 rgba(255,0,60,.9), -2px 0 rgba(0,255,255,.8), 0 0 8px currentColor; }
}

body.glitching::after {
  content: "";
  position: fixed;
  inset: -10% 0;
  z-index: 199;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,0,60,0) 0 6px,
      rgba(255,0,60,.42) 6px 9px,
      rgba(255,0,60,0) 9px 24px),
    radial-gradient(120% 100% at 50% 50%, rgba(255,0,0,.22), rgba(120,0,0,.5));
  animation: glitchBars 0.19s steps(3) infinite;
}
@keyframes glitchBars {
  0%   { transform: translateY(0) }
  33%  { transform: translateY(-11px) }
  66%  { transform: translateY(16px) }
  100% { transform: translateY(0) }
}


@media(max-width:620px) {
 :root { --pad:17px; --bar-h:42px; }
 .crt { inset:8px; border-width:6px; border-radius:15px; }
 .bar { gap:8px; font-size:9px; letter-spacing:.03em; }
 .bar-left { font-size:0; }
 .bar-left::before { content:"OMEN"; font-size:10px; letter-spacing:.15em; }
 .bar-left .dim { display:none; }
 .bar-right { gap:10px; }
 #led-rec { display:none; }
 .screen { padding-top:24px; line-height:1.6; }
 .line { min-height:1.6em; }
 .terminal-foot { font-size:8px; gap:8px; letter-spacing:.04em; }
 .signal-meter { display:none; }
 .polaroid { max-width:min(300px,80vw); }
 .omen-inner { padding:16px; }
}
@media(max-width:360px) { .clock { display:none; } .foot-node { display:none; } }
@media(prefers-reduced-motion:reduce) {
 *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
 body.glitching .screen { filter:none; }
 body.glitching::after { display:none; }
 .sweep { display:none; }
 .cursor { opacity:.8; }
}