/* ── NEON TERMINAL NOIR ─────────────────────────────────────────────
   shared theme: index.html / oscp.html
   primary   #00f0ff  cyan
   accent    #ff2e88  magenta
   bg        #0a0a0c
────────────────────────────────────────────────────────────────── */
:root{
  --bg:      #0a0a0c;
  --cyan:    #00f0ff;
  --magenta: #ff2e88;
  --fg:      #b8fffc;
  --dim:     #3a5a5e;
  --panel:   rgba(0, 240, 255, 0.04);
  --glow:    0 0 6px rgba(0,240,255,.65), 0 0 22px rgba(0,240,255,.25);
  --glow-m:  0 0 6px rgba(255,46,136,.6),  0 0 22px rgba(255,46,136,.25);
  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}
/* inverted flavor, toggled with `neon` */
body.neon-b{
  --cyan:    #ff2e88;
  --magenta: #00f0ff;
  --fg:      #ffd3e2;
  --dim:     #5e3a4e;
  --panel:   rgba(255,46,136,.04);
  --glow:    0 0 6px rgba(255,46,136,.65), 0 0 22px rgba(255,46,136,.25);
  --glow-m:  0 0 6px rgba(0,240,255,.6),  0 0 22px rgba(0,240,255,.25);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.45;
  overflow:hidden;
}

/* ── full-viewport CRT overlays ─────────────────────────────────── */
body::before{ /* scanlines */
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:90;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0)   0px,
    rgba(0,0,0,0)   2px,
    rgba(0,0,0,.28) 3px,
    rgba(0,0,0,0)   4px
  );
  animation:flicker 6s infinite steps(1);
}
body::after{ /* radial vignette */
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:91;
  background:radial-gradient(
    ellipse at 50% 45%,
    rgba(0,0,0,0)       55%,
    rgba(0,0,0,.35)     82%,
    rgba(0,0,0,.75) 100%
  );
}
@keyframes flicker{
  0%,100% { opacity:.95; }
  7.1%   { opacity:.55; }
  7.4%   { opacity:.95; }
  7.6%   { opacity:.70; }
  7.9%   { opacity:.95; }
  38.2%  { opacity:.88; }
  38.5%  { opacity:.60; }
  38.7%  { opacity:.95; }
  71.9%  { opacity:.50; }
  72.1%  { opacity:.95; }
}

/* ── corner HUD ─────────────────────────────────────────────────── */
#hud{
  position:fixed;
  top:12px; left:14px;
  z-index:80;
  font-size:12px;
  letter-spacing:.12em;
  color:var(--cyan);
  text-shadow:var(--glow);
  user-select:none;
}
#hud .tag{ color:var(--magenta); text-shadow:var(--glow-m); }
#hud .up  { color:var(--dim); }
#hud .sep { color:var(--dim); margin:0 .5em; }

/* ── CRT window, center-left ────────────────────────────────────── */
#crt{
  position:fixed;
  bottom:5vh;      /* bottom-anchored + fixed height => logo headroom stays stable */
  left:50%;
  transform:translateX(-50%);
  width:min(860px, 74vw);
  height:76vh; /* fixed — logo above must never drift off-viewport on reflow */
  display:flex;
  flex-direction:column;
  background:radial-gradient(120% 140% at 50% 0%, rgba(0,240,255,.05), transparent 60%), var(--bg);
  border:2px solid var(--cyan);
  border-radius:10px;
  box-shadow:
    var(--glow),
    inset 0 0 34px rgba(0,240,255,.07);
  z-index:10;
}
#titlebar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
  padding:9px 14px;
  border-bottom:1px solid var(--dim);
  color:var(--cyan);
  text-shadow:var(--glow);
  font-size:13px;
  letter-spacing:.08em;
  user-select:none;
}
#titlebar .dot{
  width:9px; height:9px; border-radius:50%;
  border:1px solid var(--cyan);
  box-shadow:var(--glow);
}
#titlebar .dot.hot{ background:var(--magenta); border-color:var(--magenta); box-shadow:var(--glow-m); }
#titlebar .t{ margin-left:auto; color:var(--dim); }

#screen{
  flex:1 1 auto;
  overflow-y:auto;
  padding:16px 18px 18px;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:var(--dim) transparent;
}
#screen::-webkit-scrollbar{ width:8px; }
#screen::-webkit-scrollbar-thumb{ background:var(--dim); border-radius:4px; }

#screen .ln{ white-space:pre-wrap; word-break:break-word; }
#screen .ln.h2, #screen .ln.h3{
  color:var(--cyan);
  text-shadow:var(--glow);
  font-weight:bold;
}
#screen .ln.h3{ font-weight:normal; }
#screen .ln.hi{ color:var(--magenta); text-shadow:var(--glow-m); }
#screen .ln.dim{ color:var(--dim); }
#screen .ln.ok{ color:var(--cyan); }
#screen a{
  color:var(--cyan);
  text-decoration:none;
  text-shadow:var(--glow);
  border-bottom:1px dotted rgba(0,240,255,.4);
}
#screen a:hover{ color:var(--magenta); text-shadow:var(--glow-m); border-bottom-color:rgba(255,46,136,.6); }

/* ── prompt / input ─────────────────────────────────────────────── */
#promptline{ margin-top:2px; }
.prompt{
  color:var(--magenta);
  text-shadow:var(--glow-m);
}
.prompt .path{ color:var(--cyan); text-shadow:var(--glow); }
#typed{ color:var(--fg); }
#caret{
  display:inline-block;
  width:.62ch; height:1.15em;
  margin-left:2px;
  vertical-align:text-bottom;
  background:var(--cyan);
  box-shadow:var(--glow);
  animation:blink 1.06s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ── glitch / RGB-split ─────────────────────────────────────────── */
.glitch{
  position:relative;
  color:var(--magenta);
  animation:glitch-jerk .38s steps(2) 4;
}
.glitch::before,
.glitch::after{
  content:attr(data-t);
  position:absolute; left:0; top:0;
  width:100%;
  opacity:.85;
}
.glitch::before{
  color:#ff0040;
  text-shadow:-1px 0 rgba(255,0,64,.8);
  animation:glitch-a .38s steps(2) 4 forwards;
}
.glitch::after{
  color:#00e5ff;
  text-shadow:1px 0 rgba(0,229,255,.8);
  animation:glitch-b .38s steps(2) 4 forwards;
}
@keyframes glitch-jerk{
  0%  { transform:translate(0,0); }
  25% { transform:translate(2px,-1px) skewX(-2deg); }
  50% { transform:translate(-2px,1px); }
  75% { transform:translate(1px,0) skewX(1deg); }
  100%{ transform:translate(0,0); }
}
@keyframes glitch-a{
  0%  { transform:translate(-3px,0); }
  40% { transform:translate(3px,-1px); }
  100%{ transform:translate(-1px,0); opacity:0; }
}
@keyframes glitch-b{
  0%  { transform:translate(3px,0); }
  45% { transform:translate(-3px,1px); }
  100%{ transform:translate(1px,0); opacity:0; }
}

/* art layer: floating logo above the CRT, centered on it; swapped through
   cfg.images on `neon` */
#art{
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  margin-bottom:16px;
  max-height:14vh;
  max-width:70%;
  height:auto;
  pointer-events:none;
  opacity:.9;
  filter:drop-shadow(0 0 16px rgba(0,240,255,.35)) drop-shadow(0 0 42px rgba(0,240,255,.18));
  animation:floaty 7s ease-in-out infinite alternate;
  transition:opacity .18s ease;
}
body.neon-b #art{
  filter:drop-shadow(0 0 16px rgba(255,46,136,.35)) drop-shadow(0 0 42px rgba(255,46,136,.18));
}
#art.swap{ opacity:0; }
@keyframes floaty{
  from{ transform:translateX(-50%) translateY(-7px); }
  to  { transform:translateX(-50%) translateY(7px); }
}

@media (max-width:720px){
  #crt{ width:92%; height:78vh; bottom:4vh; }
  #art{ max-height:8vh; margin-bottom:10px; }
}