/* ============================================================
   SIGNAL//LOST — station K-47 terminal
   phosphor: #33ff66 · amber: #ffb000 · hot: #ff6b4a
   ============================================================ */

:root{
  --phos:      #33ff66;
  --phos-dim:  #23a352;
  --phos-faint:#14572e;
  --amber:     #ffb000;
  --hot:       #ff6b4a;
  --bg:        #020604;
  --screen-bg: #04120a;
  --fs:        21px;
  --glow:      0 0 6px rgba(51,255,102,.38), 0 0 1px rgba(51,255,102,.9);
  --glow-amber:0 0 6px rgba(255,176,0,.35);
}

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

::selection{ background:rgba(51,255,102,.28); color:#d8ffe6; text-shadow:none; }

a:focus-visible{ outline:1px dashed var(--phos-dim); outline-offset:3px; }

html,body{ height:100%; }

body{
  background: radial-gradient(120% 90% at 50% 10%, #0a0f0b 0%, var(--bg) 55%, #000 100%);
  color: var(--phos);
  font-family: 'VT323', 'Courier New', monospace;
  display:flex; flex-direction:column;
  overflow:hidden;
  -webkit-font-smoothing: none;
}

/* ---------- bezel + screen ---------- */

#crt-wrap{
  flex:1; display:flex; align-items:stretch; justify-content:center;
  padding: clamp(10px, 2.2vh, 26px) clamp(10px, 2.5vw, 34px) 6px;
  min-height:0;
}

#crt{
  position:relative;
  flex:1; max-width:1180px;
  background:#0b0d0b;
  border-radius: 34px;
  padding: clamp(10px, 1.6vw, 20px);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.06),
    inset 0 -3px 6px rgba(0,0,0,.9),
    0 18px 60px rgba(0,0,0,.85),
    0 0 0 1px #000;
  min-height:0; min-width:0;
  display:flex;
}

#screen{
  position:relative;
  flex:1;
  min-width:0;
  background:
    radial-gradient(130% 100% at 50% 42%, #082014 0%, var(--screen-bg) 52%, #010805 100%);
  border-radius: 22px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.75),
    inset 0 0 8px rgba(0,0,0,.9);
  min-height:0;
}

/* glass sheen + curvature illusion */
.crt-glass{
  position:absolute; inset: clamp(10px,1.6vw,20px);
  border-radius:22px; pointer-events:none; z-index:6;
  background:
    radial-gradient(90% 34% at 50% -6%, rgba(190,255,215,.075) 0%, transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.42) 0%, transparent 7%, transparent 93%, rgba(0,0,0,.42) 100%),
    linear-gradient(0deg, rgba(0,0,0,.5) 0%, transparent 5%, transparent 95%, rgba(0,0,0,.35) 100%);
}

.scanlines{
  position:absolute; inset: clamp(10px,1.6vw,20px);
  border-radius:22px; pointer-events:none; z-index:5;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,.28) 2px, rgba(0,0,0,.28) 4px
  );
  mix-blend-mode:multiply;
}

.rollbar{
  position:absolute; left:clamp(10px,1.6vw,20px); right:clamp(10px,1.6vw,20px);
  top:clamp(10px,1.6vw,20px); bottom:clamp(10px,1.6vw,20px);
  border-radius:22px; pointer-events:none; z-index:5; overflow:hidden;
}
.rollbar::before{
  content:""; position:absolute; left:0; right:0; height:140px;
  background:linear-gradient(to bottom, transparent, rgba(120,255,170,.045), transparent);
  animation: roll 9s linear infinite;
}
@keyframes roll{ 0%{ top:-160px; } 100%{ top:110%; } }

.vignette{
  position:absolute; inset:clamp(10px,1.6vw,20px);
  border-radius:22px; pointer-events:none; z-index:7;
  background: radial-gradient(105% 88% at 50% 50%, transparent 52%, rgba(0,0,0,.34) 82%, rgba(0,0,0,.72) 100%);
}

.flicker{
  position:absolute; inset:clamp(10px,1.6vw,20px);
  border-radius:22px; pointer-events:none; z-index:8;
  background:#9dffc0; opacity:0; mix-blend-mode:overlay;
  animation: flick 4.2s steps(1) infinite;
}
@keyframes flick{
  0%,100%{opacity:0} 3%{opacity:.022} 4%{opacity:0} 9%{opacity:.014} 10%{opacity:0}
  41%{opacity:.03} 42%{opacity:0} 63%{opacity:.012} 64%{opacity:0} 87%{opacity:.02} 88%{opacity:0}
}

/* ---------- status bar ---------- */

#statusbar{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.35em 1.6em;
  padding: 14px 30px 10px;
  font-size: 17px;
  letter-spacing:.06em;
  color: var(--phos-dim);
  border-bottom:1px dashed rgba(51,255,102,.28);
  text-shadow: 0 0 5px rgba(51,255,102,.25);
  z-index:2; flex-shrink:0;
  user-select:none;
}
#statusbar b{ color:var(--phos); font-weight:400; text-shadow:var(--glow); }
.st-id{ color:var(--phos); text-shadow:var(--glow); }
.st-sig{ margin-left:auto; white-space:nowrap; }
.sigmeter{ display:inline-flex; align-items:center; gap:2px; vertical-align:-1px; }
.sigmeter i{
  display:inline-block; width:6px; height:11px;
  background:var(--phos); box-shadow:0 0 5px rgba(51,255,102,.5);
}
.sigmeter i.off{ background:rgba(51,255,102,.13); box-shadow:none; }
.sigmeter.low i{ background:var(--amber); box-shadow:0 0 5px rgba(255,176,0,.5); }
.sigmeter.low i.off{ background:rgba(255,176,0,.12); box-shadow:none; }
.sigmeter.dead i{ background:var(--hot); box-shadow:0 0 5px rgba(255,107,74,.5); }
.sigmeter.dead i.off{ background:rgba(255,107,74,.12); box-shadow:none; }
#st-band.warnband{ color:var(--amber); text-shadow:var(--glow-amber); }

/* phosphor burn-in, bottom-right of the tube */
#screen::after{
  content:"NAS·MMU · REEL 1984/0117";
  position:absolute; right:28px; bottom:12px; z-index:4;
  font-size:14px; letter-spacing:.26em;
  color:rgba(120,255,170,.085);
  pointer-events:none; user-select:none;
}

/* ---------- feed ---------- */

#feed{
  flex:1; overflow-y:auto; overflow-x:hidden;
  min-width:0;
  overflow-wrap: break-word;
  padding: 26px 34px 120px;
  font-size: var(--fs);
  line-height:1.42;
  text-shadow: var(--glow);
  scrollbar-width: thin;
  scrollbar-color: rgba(51,255,102,.35) transparent;
  outline:none;
  z-index:1;
  overscroll-behavior: contain;
}
#feed::-webkit-scrollbar{ width:7px; }
#feed::-webkit-scrollbar-thumb{ background:rgba(51,255,102,.3); border-radius:4px; }

#feed > *{ max-width: 76ch; }

/* text roles */
.dim   { color:var(--phos-dim); text-shadow:0 0 4px rgba(51,255,102,.18); }
.faint { color:var(--phos-faint); text-shadow:none; }
.amber { color:var(--amber); text-shadow:var(--glow-amber); }
.hot   { color:var(--hot); text-shadow:0 0 6px rgba(255,107,74,.4); }
.bright{ color:#b8ffce; text-shadow:0 0 8px rgba(150,255,190,.55); }
.blk   { color:var(--phos-faint); text-shadow:none; letter-spacing:-1px; }

.diagline{ font-size:17px; letter-spacing:.05em; margin:2px 0; }
.diagline, .resp{ white-space:pre-wrap; }
.gap-s{ height:.65em; } .gap-m{ height:1.5em; } .gap-l{ height:2.6em; }

/* log entries */
.log{ margin: 1.8em 0 .4em; }
.log-head{
  color:var(--amber); text-shadow:var(--glow-amber);
  letter-spacing:.08em; margin-bottom:.7em;
  border-left:3px solid rgba(255,176,0,.5);
  padding-left:.8em;
}
.log-body p{ margin: 0 0 .85em; }
.log-body{ white-space: pre-wrap; }

/* title card */
.title-card{ margin: 1.6em 0 .6em; user-select:none; }
.title-main{
  font-size: clamp(44px, 7.2vw, 92px);
  line-height:.95; letter-spacing:.02em;
  color:var(--phos);
  text-shadow: var(--glow), 0 0 24px rgba(51,255,102,.28);
}
.title-sub{
  margin-top:.55em; font-size: clamp(16px, 1.8vw, 22px);
  letter-spacing:.28em; color:var(--phos-dim);
}
.title-rule{ margin:.9em 0 0; color:var(--phos-faint); letter-spacing:0; font-size:16px; }

/* rgb-split glitch text */
.rgbsplit{ position:relative; display:inline-block; }
.rgbsplit::before, .rgbsplit::after{
  content:attr(data-text); position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:screen;
}
.rgbsplit::before{ color:rgba(255,40,90,.75); animation: split-r 3.8s steps(2) infinite; }
.rgbsplit::after { color:rgba(40,170,255,.75); animation: split-b 3.8s steps(2) infinite; }
@keyframes split-r{ 0%,88%,100%{transform:translate(0)} 90%{transform:translate(-3px,1px)} 93%{transform:translate(2px,0)} 96%{transform:translate(-1px,-1px)} }
@keyframes split-b{ 0%,88%,100%{transform:translate(0)} 90%{transform:translate(3px,-1px)} 93%{transform:translate(-2px,1px)} 96%{transform:translate(1px,1px)} }

/* cursor */
.cursor{
  display:inline-block; width:.55em; height:1em;
  background:var(--phos); vertical-align:-.12em; margin-left:1px;
  box-shadow: var(--glow);
  animation: blink 1.06s steps(1) infinite;
}
@keyframes blink{ 0%,55%{opacity:1} 56%,100%{opacity:0} }
.cursor.amberc{ background:var(--amber); box-shadow:var(--glow-amber); }
/* carriage tick: keystroke lands the cursor solid with a brief phosphor flare */
.cursor.tick{
  animation: blink 1.06s steps(1) infinite, keytick .16s ease-out 1;
}
@keyframes keytick{
  0%{ box-shadow: 0 0 12px rgba(180,255,210,.95), 0 0 3px rgba(51,255,102,1); background:#c9ffdc; }
  100%{ box-shadow: var(--glow); background:var(--phos); }
}

/* advance hint */
#advance-hint{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding: 34px 34px 18px;
  text-align:center; font-size:16px; letter-spacing:.22em;
  color:var(--phos-dim); text-shadow:0 0 5px rgba(51,255,102,.25);
  background:linear-gradient(to top, rgba(2,10,6,.92) 30%, transparent);
  pointer-events:none; user-select:none;
  transition:opacity .35s;
}
#advance-hint.hidden{ opacity:0; }
.hint-arrow{ display:inline-block; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* hidden mobile keyboard catcher */
#kbd{
  position:absolute; bottom:4px; left:4px; width:2px; height:2px;
  opacity:0; border:none; background:transparent; color:transparent;
  z-index:0; pointer-events:none;
}

/* ---------- prompt ---------- */
.promptline{ margin-top:1.1em; }
.ps1{ color:var(--amber); text-shadow:var(--glow-amber); margin-right:.55em; }
.inbuf{ color:#b8ffce; text-shadow:0 0 8px rgba(150,255,190,.5); }
.resp{ margin:.55em 0 .2em; }
.resp .cmd-echo{ color:var(--phos-dim); }
.entity{
  color:#c9ffdc; letter-spacing:.14em;
  text-shadow:0 0 10px rgba(150,255,190,.7), 0 0 30px rgba(51,255,102,.35);
}

/* ---------- ghost interference ---------- */
#ghost{
  position:absolute; inset:0; z-index:9; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  font-size: clamp(52px, 10vw, 130px); letter-spacing:.1em;
  color:rgba(200,255,220,.0); text-align:center;
  opacity:0;
}
#ghost.show{
  animation: ghostflash .62s steps(3) forwards;
  color:rgba(200,255,220,.85);
  text-shadow: -4px 0 rgba(255,40,90,.6), 4px 0 rgba(40,170,255,.6), 0 0 40px rgba(150,255,190,.5);
}
@keyframes ghostflash{
  0%{opacity:0} 8%{opacity:.9; transform:translate(0)} 30%{opacity:.15; transform:translate(-6px,2px)}
  45%{opacity:.8; transform:translate(4px,-2px)} 70%{opacity:.25; transform:translate(0)}
  100%{opacity:0}
}

/* screen-wide glitch states */
#screen.glitching #feed, #screen.glitching #statusbar{
  animation: aberr .5s steps(4) 1;
}
@keyframes aberr{
  0%{ text-shadow:-3px 0 rgba(255,40,90,.8), 3px 0 rgba(40,170,255,.8); transform:translateX(0); }
  25%{ text-shadow:3px 0 rgba(255,40,90,.8), -3px 0 rgba(40,170,255,.8); transform:translateX(-3px); }
  50%{ text-shadow:-2px 0 rgba(255,40,90,.8), 2px 0 rgba(40,170,255,.8); transform:translateX(3px) skewX(.6deg); }
  75%{ text-shadow:2px 0 rgba(255,40,90,.8), -2px 0 rgba(40,170,255,.8); transform:translateX(-1px); }
  100%{ transform:translateX(0); }
}
#screen.glitching-hard #feed, #screen.glitching-hard #statusbar{
  animation: hardglitch .16s steps(2) infinite;
}
#screen.glitching-hard .flicker{ animation-duration:.9s; }
@keyframes hardglitch{
  0%{ transform:translate(-4px,1px) skewX(1.2deg); text-shadow:-4px 0 rgba(255,40,90,.9), 4px 0 rgba(40,170,255,.9); clip-path: inset(0 0 0 0); }
  50%{ transform:translate(4px,-2px); text-shadow:4px 0 rgba(255,40,90,.9), -4px 0 rgba(40,170,255,.9); clip-path: inset(2% 0 1% 0); }
  100%{ transform:translate(-1px,0); clip-path: inset(0 0 3% 0); }
}

/* ---------- footer ---------- */
#site-footer{
  flex-shrink:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:.35em .7em;
  padding: 9px 16px 13px;
  font-size:15px; letter-spacing:.08em;
  color:#5fa87c;
}
#site-footer a{ color:#7ddc9e; text-decoration:underline; text-underline-offset:3px; }
#site-footer a:hover{ color:#b8ffce; text-shadow:0 0 8px rgba(150,255,190,.5); }
.fdot{ color:#2c5c40; }

/* ---------- boot overlay flash ---------- */
#screen.poweron::before{
  content:""; position:absolute; inset:0; z-index:10; pointer-events:none;
  background:#dfffe9;
  animation: poweron 1s ease-out forwards;
}
@keyframes poweron{
  0%{ opacity:.9; transform:scaleY(.004); }
  25%{ opacity:.7; transform:scaleY(.05); }
  60%{ opacity:.25; transform:scaleY(1); }
  100%{ opacity:0; transform:scaleY(1); }
}

/* ============ guide page ============ */
.guide #feed{ padding-bottom:48px; }
.guide-doc{ max-width:74ch; }
.guide-doc h1{
  font-size: clamp(34px,5vw,58px); font-weight:400; line-height:1;
  margin: .6em 0 .25em; color:var(--phos);
  text-shadow: var(--glow), 0 0 22px rgba(51,255,102,.25);
}
.guide-doc h2{
  font-size: clamp(21px,2.4vw,26px); font-weight:400;
  color:var(--amber); text-shadow:var(--glow-amber);
  margin: 1.7em 0 .5em; letter-spacing:.06em;
}
.guide-doc p{ margin:0 0 .9em; }
.guide-doc ul{ margin:0 0 1em 1.1em; }
.guide-doc li{ margin:.25em 0; }
.guide-doc code{
  font-family:inherit; color:#b8ffce; background:rgba(51,255,102,.09);
  padding:0 .35em; border-radius:3px;
}
.guide-doc a{ color:#7ddc9e; text-underline-offset:3px; }
.guide-doc a:hover{ color:#b8ffce; }
.shotrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:1em 0 1.4em; }
.shotrow figure{ margin:0; }
.shotrow img{
  width:100%; display:block; border:1px solid rgba(51,255,102,.35);
  border-radius:6px; filter:saturate(1.08) brightness(1.35);
}
.shotrow figcaption{ font-size:15px; color:var(--phos-dim); margin-top:.4em; letter-spacing:.06em; }
.backlink{ display:inline-block; margin:1.6em 0 0; }

/* ---------- responsive ---------- */
@media (max-width: 720px){
  :root{ --fs: 17px; }
  #crt-wrap{ padding: 8px 8px 4px; }
  #crt{ border-radius:20px; padding:8px; }
  #screen{ border-radius:13px; }
  .crt-glass,.scanlines,.vignette,.flicker,.rollbar{ inset:8px; border-radius:13px; }
  #statusbar{ font-size:13.5px; gap:.2em .95em; padding:10px 16px 8px; }
  .st-temp{ display:none; }
  .st-tape{ display:none; }
  #screen::after{ right:14px; bottom:8px; font-size:11px; }
  #feed{ padding: 18px 16px 110px; }
  .diagline{ font-size:14px; }
  .log-head{ font-size:16px; }
  #advance-hint{ font-size:13px; letter-spacing:.14em; padding:30px 14px 14px; }
  #site-footer{ font-size:12.5px; padding:7px 10px 10px; }
  .shotrow{ grid-template-columns:1fr; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .flicker, .rollbar::before, .hint-arrow{ animation:none !important; }
  .rgbsplit::before,.rgbsplit::after{ animation:none !important; opacity:.25; }
  .cursor{ animation:none; }
  #ghost.show{ animation:none; opacity:.55; transition:opacity .4s; }
  #screen.glitching #feed, #screen.glitching #statusbar,
  #screen.glitching-hard #feed, #screen.glitching-hard #statusbar{ animation:none; }
  #screen.poweron::before{ animation:none; opacity:0; }
}