/* ==================================================================
   THE SIMPLER TIMES — the website that is very aware you are viewing
   it. Full-screen 1990s portal on the game's amber phosphor palette
   (255,176,32 on warm black). No monitor: it is the screen.
   ================================================================== */

:root{
  --bg:#060400;          /* BG (6,4,0)           */
  --panel:#0e0902;       /* PANEL (14,9,2)       */
  --panel2:#150e04;
  --line:#201406;        /* LINE (32,20,6)       */
  --line-bright:#32200a; /* LINE_BRIGHT (50,32,10) */
  --amber:#ffb020;       /* TEXT (255,176,32)    */
  --amber-bright:#ffd660;/* TEXT_BRIGHT (255,214,96) */
  --amber-soft:#ffcf7d;
  --amber-dim:#7a4c0e;   /* DIM (122,76,14)      */
  --green:#00dc00;       /* emblem               */
  --red:#ff3c3c;         /* entity accent        */
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --vt:'VT323',ui-monospace,monospace;
}

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

html,body{height:100%}

body{
  background:var(--bg);
  color:var(--amber);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.55;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:none;
  text-shadow:0 0 1px rgba(255,176,32,.35);
}
body.custom-cursor{cursor:none}

a{color:var(--amber);text-decoration:none}
a:hover{color:var(--amber-bright)}
::selection{background:var(--amber);color:#1a0f00}

.hidden{display:none !important}
.red{color:var(--red)}
.hl{color:var(--amber-bright);text-shadow:0 0 8px rgba(255,176,32,.5)}
.dim{color:var(--amber-dim)}
.blink{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------------------------------------------------------------
   Boot sequence (full screen, it boots itself)
   --------------------------------------------------------------- */
.boot{
  position:fixed;inset:0;z-index:50;background:var(--bg);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.2rem,4vw,3rem) clamp(1.2rem,6vw,6rem);
}
.boot-log{
  font-family:var(--mono);
  font-size:clamp(.75rem,1.4vw,1rem);
  color:var(--amber);
  text-shadow:0 0 6px rgba(255,176,32,.55);
  white-space:pre-wrap;
  height:100%;overflow:hidden;
}
.boot-prompt{
  margin-top:1.4rem;color:var(--amber-bright);
  font-family:var(--vt);font-size:clamp(1rem,2vw,1.4rem);
  letter-spacing:.12em;animation:blink 1s steps(1) infinite;
}

/* ---------------------------------------------------------------
   Offline (the power button is only a plea)
   --------------------------------------------------------------- */
.offline{
  position:fixed;inset:0;z-index:49;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
}
.offline span{
  color:var(--amber-dim);font-family:var(--vt);letter-spacing:.2em;
  font-size:clamp(.85rem,2vw,1.2rem);animation:blink 2s steps(1) infinite;
}

/* ---------------------------------------------------------------
   OS shell — a full-screen 1990s portal
   --------------------------------------------------------------- */
.os{
  flex:1;display:flex;flex-direction:column;min-height:0;
  animation:os-in .5s ease;
}
.os.jittering{animation:winjitter .22s linear}
@keyframes os-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes winjitter{
  0%{transform:translate(0,0)}20%{transform:translate(-2px,1px)}
  40%{transform:translate(2px,-1px)}60%{transform:translate(-1px,-2px)}
  80%{transform:translate(1px,2px)}100%{transform:translate(0,0)}
}

.sitehead{
  flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap;
  border-bottom:1px solid var(--line);background:var(--panel);
  padding:.45rem clamp(1rem,3vw,2rem);
}
.brand{
  font-family:var(--vt);font-weight:400;
  font-size:clamp(1.05rem,2.4vw,1.5rem);letter-spacing:.14em;
  color:var(--amber-bright);white-space:nowrap;
}
.brand .dim{color:var(--amber-dim)}

.menubar{display:flex;flex-wrap:wrap;gap:.1rem;justify-content:flex-end}
.menu-link{
  font-family:var(--vt);font-size:clamp(.95rem,1.7vw,1.2rem);
  letter-spacing:.1em;color:var(--amber-dim);
  padding:.2rem .65rem;border:1px solid transparent;white-space:nowrap;
  transition:color .15s,background .15s;
}
.menu-link:hover{color:var(--amber-bright);background:rgba(255,176,32,.08)}
.menu-link.active{
  color:var(--amber-bright);background:rgba(255,176,32,.12);
  box-shadow:inset 0 -2px 0 var(--amber);
}
.menu-link.kb-target{border-color:var(--amber);color:var(--amber-bright);background:rgba(255,176,32,.08)}
.menu-link.ext{opacity:.6}
.menu-link.ext:hover{opacity:1;color:var(--amber-bright)}

.views{
  flex:1;min-height:0;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line-bright) var(--bg);
}
.views::-webkit-scrollbar{width:10px;background:var(--bg)}
.views::-webkit-scrollbar-thumb{background:var(--line-bright);border:2px solid var(--bg)}

.view{display:none;max-width:880px;margin:0 auto;padding:clamp(1.2rem,3.5vw,2.6rem) clamp(1.2rem,5vw,2.6rem)}
.view.active{display:block;animation:view-in .3s ease}
@keyframes view-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.statusbar{
  flex:0 0 auto;display:flex;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--line);background:var(--panel);
  padding:.28rem clamp(1rem,3vw,2rem);
  font-family:var(--vt);font-size:clamp(.78rem,1.4vw,.95rem);
  letter-spacing:.08em;color:var(--amber-dim);
}
.statusbar .sb-l{color:var(--amber)}
.statusbar .sb-r{white-space:nowrap}

/* ---------------------------------------------------------------
   Power button (a plea in the corner)
   --------------------------------------------------------------- */
.power-btn{
  position:fixed;right:clamp(.8rem,2vw,1.6rem);bottom:clamp(.8rem,2vw,1.6rem);
  z-index:96;cursor:none;
  width:clamp(30px,4vw,40px);height:clamp(30px,4vw,40px);border-radius:50%;
  border:1px solid var(--line-bright);font-size:1rem;line-height:1;
  color:var(--amber-dim);background:var(--panel);
  box-shadow:0 2px 6px rgba(0,0,0,.6);
  transition:color .2s,border-color .2s,box-shadow .2s;
}
.power-btn.on{
  color:var(--amber-bright);border-color:var(--amber);
  box-shadow:0 0 12px rgba(255,176,32,.3);
}
.power-btn:active{transform:translateY(1px)}

/* ---------------------------------------------------------------
   Glitch flash / signal loss / toast / cursor
   --------------------------------------------------------------- */
.glitch-flash{
  position:fixed;inset:0;z-index:90;background:var(--amber);
  mix-blend-mode:exclusion;opacity:0;pointer-events:none;
}
.glitch-flash.go{animation:gflash .12s linear}
@keyframes gflash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

.signal-screen{
  position:fixed;inset:0;z-index:95;background:#000;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.signal-text{
  font-family:var(--vt);font-size:clamp(2rem,8vw,5rem);letter-spacing:.3em;
  color:var(--amber);text-shadow:0 0 20px rgba(255,176,32,.5);
  animation:blink 1s steps(1) infinite;
}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:96;pointer-events:none;
  background:var(--panel);border:1px solid var(--amber);color:var(--amber);
  font-family:var(--vt);font-size:clamp(.9rem,2vw,1.2rem);letter-spacing:.12em;
  padding:.4rem 1.2rem;box-shadow:0 0 20px rgba(255,176,32,.25);
}
.toast.go{animation:toast 3.2s ease forwards}
@keyframes toast{
  0%{opacity:0;transform:translate(-50%,8px)}
  8%{opacity:1;transform:translate(-50%,0)}
  85%{opacity:1}
  100%{opacity:0}
}

/* instant-tracking custom cursor — no lag, no steps() */
.cursor{
  position:fixed;z-index:99;pointer-events:none;
  font-size:1.05rem;line-height:1;color:var(--amber-bright);
  text-shadow:0 0 6px rgba(255,176,32,.6);
  transform:translate(-1px,-1px);
}
.cursor.warped{transition:left .45s steps(8),top .45s steps(8)}

/* ---------------------------------------------------------------
   View content
   --------------------------------------------------------------- */
.section-title{
  font-family:var(--vt);font-weight:400;letter-spacing:.08em;
  font-size:clamp(1.4rem,3vw,2rem);color:var(--amber-bright);margin-bottom:1rem;
}
.section-sub{color:var(--amber-dim);font-size:.85rem;margin-bottom:1.6rem;max-width:640px}
.subsection-title{
  font-family:var(--vt);font-weight:400;letter-spacing:.1em;
  font-size:clamp(1.1rem,2.2vw,1.5rem);color:var(--amber);margin:1.8rem 0 .8rem;
}
.copy p{margin-bottom:.9rem;max-width:640px;color:var(--amber-soft)}
.copy .about-quote{margin-top:1.4rem;color:var(--amber-bright);font-family:var(--vt);font-size:1.3rem}

.feature-list{list-style:none;display:grid;gap:.6rem;max-width:660px}
.feature-list li{position:relative;padding-left:1.1rem;font-size:.9rem;color:var(--amber-soft)}
.feature-list li::before{content:"▸";position:absolute;left:0;color:var(--red)}

.disk-label{
  margin-top:2rem;border:1px dashed var(--line-bright);background:var(--panel);
  padding:1rem 1.2rem;max-width:660px;
}
.dl-title{font-family:var(--vt);letter-spacing:.16em;color:var(--amber-bright);margin-bottom:.6rem;font-size:1.05rem}
.disk-label p{font-size:.85rem;color:var(--amber-soft);margin-top:.4rem}
.disk-label.warn p{margin-top:.5rem}
.disk-label .red{color:var(--red)}

.glitch-title{
  font-family:var(--vt);font-weight:400;
  font-size:clamp(2.4rem,8vw,5.6rem);
  letter-spacing:.06em;line-height:1;color:var(--amber-bright);
  text-shadow:0 0 18px rgba(255,176,32,.5);
  position:relative;margin:.2rem 0 .6rem;
}
.glitch-title::before,.glitch-title::after{
  content:attr(data-text);position:absolute;inset:0;opacity:.7;
}
.glitch-title::before{color:var(--red);transform:translate(2px,0);z-index:-1}
.glitch-title::after{color:var(--green);transform:translate(-2px,0);z-index:-2}
.glitch-title.erupt{animation:titlejitter .18s steps(2) 3}
@keyframes titlejitter{
  0%{transform:translate(0)}25%{transform:translate(-3px,1px)}
  50%{transform:translate(3px,-1px)}75%{transform:translate(-2px,-2px)}
  100%{transform:translate(0)}
}

.tagline{font-size:clamp(.95rem,1.8vw,1.15rem);color:var(--amber-soft);max-width:640px;margin-bottom:1.4rem}

.ascii-disk{margin:1rem 0;color:var(--amber-dim);font-size:clamp(.5rem,1.15vw,.78rem);line-height:1.25}
.ascii-disk pre{white-space:pre;display:inline-block;animation:diskhum 4s ease-in-out infinite}
@keyframes diskhum{50%{opacity:.65}}

.intro{max-width:640px;color:var(--amber-soft);margin-bottom:1.8rem}

.home-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}
.foot-note{color:var(--amber-dim);font-size:.8rem;letter-spacing:.06em}

/* ---------------------------------------------------------------
   Buttons (1990s bevel, amber)
   --------------------------------------------------------------- */
.btn{
  display:inline-block;cursor:none;
  font-family:var(--vt);font-size:clamp(1rem,2vw,1.3rem);letter-spacing:.1em;
  padding:.45rem 1.3rem;border:1px solid var(--line-bright);
  background:var(--panel);color:var(--amber);
  box-shadow:2px 2px 0 #000, inset 0 0 0 1px rgba(255,176,32,.1);
  transition:background .15s,color .15s,box-shadow .15s,transform .06s;
}
.btn:hover{background:rgba(255,176,32,.12);color:var(--amber-bright)}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000}
.btn-primary{background:var(--amber);color:#1a0f00;box-shadow:2px 2px 0 #000, 0 0 14px rgba(255,176,32,.35)}
.btn-primary:hover{background:var(--amber-bright);color:#1a0f00}
.btn-ghost{border-style:dashed}

/* ---------------------------------------------------------------
   Bulletin
   --------------------------------------------------------------- */
.bulletin{
  display:grid;gap:.35rem;max-width:680px;
  font-family:var(--mono);font-size:clamp(.72rem,1.5vw,.9rem);
}
.bullet-line{opacity:0;animation:linein .25s ease forwards;white-space:pre-wrap}
@keyframes linein{from{opacity:0}to{opacity:1}}
.bullet-line .ts{color:var(--amber-dim);margin-right:.8rem}
.bullet-line.corrupt{color:var(--red)}
.bullet-line.new{color:var(--amber-bright)}
.bullet-line .tag{color:var(--amber)}

/* ---------------------------------------------------------------
   Inbox
   --------------------------------------------------------------- */
.inbox{display:grid;gap:1.1rem;max-width:480px;margin-bottom:1.6rem}
.inbox-label{display:grid;gap:.35rem;font-family:var(--vt);font-size:1.1rem;letter-spacing:.12em;color:var(--amber)}
.inbox-label input{
  background:var(--panel);border:1px solid var(--line-bright);color:var(--amber-bright);
  font-family:var(--mono);font-size:.95rem;padding:.5rem .7rem;outline:none;
  text-shadow:0 0 5px rgba(255,176,32,.4);
}
.inbox-label input:focus{border-color:var(--amber);box-shadow:0 0 12px rgba(255,176,32,.3)}
.inbox-label input::placeholder{color:var(--amber-dim)}

.reply{border:1px solid var(--line);background:var(--panel);max-width:640px;padding:1rem 1.2rem}
.reply-from{font-family:var(--vt);color:var(--amber-bright);letter-spacing:.12em;margin-bottom:.6rem;font-size:1.05rem}
.reply pre{white-space:pre-wrap;color:var(--amber-soft);font-size:.85rem}
.reply.typing pre::after{content:"▌";color:var(--amber);animation:blink .8s steps(1) infinite}

/* ---------------------------------------------------------------
   Download
   --------------------------------------------------------------- */
.os-detect{
  display:inline-flex;align-items:center;gap:.8rem;
  border:1px solid var(--line);background:var(--panel);
  padding:.45rem 1rem;margin-bottom:1.4rem;
}
.od-label{font-family:var(--vt);color:var(--amber-dim);letter-spacing:.12em}
.od-value{font-family:var(--vt);color:var(--amber-bright);letter-spacing:.1em;font-size:1.15rem}

.platforms{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem;max-width:900px;margin-bottom:2rem}
.platform-card{
  border:1px solid var(--line-bright);background:var(--panel);
  padding:1.1rem;display:grid;gap:.9rem;align-content:start;
  box-shadow:inset 0 0 30px rgba(0,0,0,.4);
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.platform-card:hover{border-color:var(--amber);box-shadow:0 0 24px rgba(255,176,32,.15)}
.pc-head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.pc-name{font-family:var(--vt);font-size:1.25rem;letter-spacing:.08em;color:var(--amber-bright)}
.pc-ext{font-family:var(--vt);color:var(--amber-dim);font-size:.85rem}
.platform-card p{font-size:.78rem;color:var(--amber-dim)}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width:760px){
  .sitehead{justify-content:center;text-align:center}
  .menubar{justify-content:center;flex-wrap:wrap;gap:.15rem}
  .menu-link{padding:.3rem .45rem;font-size:clamp(.68rem,2.6vw,.85rem)}
  .statusbar{flex-direction:column;gap:.2rem}
  .statusbar .sb-r{white-space:normal;line-height:1.7;text-align:center;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
  .dos{top:2vh;width:96vw;max-height:95vh}
  .dos-out{max-height:78vh}
  .dos-head{cursor:default}
  input[type="text"],input:not([type]),textarea{font-size:16px !important}
  .statusbar{padding-bottom:max(.4rem,env(safe-area-inset-bottom))}
  .sitehead{padding-top:max(.5rem,env(safe-area-inset-top))}
  .home-actions{flex-direction:column;align-items:stretch}
  .home-actions .btn{text-align:center}
}

/* ---------- Mobile: no zoom-jumps, big tap targets, phone-friendly windows ---------- */
html{
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
body{overscroll-behavior:none}
pre{max-width:100%;overflow-x:auto}
a,button,input,textarea,select,.menu-link,.console-btn,.ambience-status,.power-btn,.fb-row,.shot,.t-entry,.btn{
  touch-action:manipulation;
}
a,button{outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .ascii-disk,.glitch-title.erupt,.os.jittering{animation:none !important}
}

/* ---------------------------------------------------------------
   Cursor — a press/hover variant, and it has hands of its own.
   A soft light follows it, so hovering is something you can feel.
   --------------------------------------------------------------- */
 .cursor{transition:transform .05s ease,color .1s ease}
 .cursor.hover{transform:translate(-1px,-1px) scale(1.35);color:var(--amber-bright);text-shadow:0 0 10px rgba(255,176,32,.95)}
 .cursor.pressed{transform:translate(0,0) scale(.72);color:var(--red);text-shadow:0 0 8px rgba(255,60,60,.8)}
 .cursor.hide{opacity:0}
 /* the reticle — a ring that draws itself when you hover something clickable */
 .cursor::before{
   content:"";position:absolute;left:50%;top:50%;
   width:22px;height:22px;margin:-11px 0 0 -11px;
   border:1px solid var(--amber);border-radius:50%;
   opacity:0;transform:scale(.4);
   transition:opacity .14s ease,transform .14s ease;
   mix-blend-mode:screen;
 }
 .cursor.hover::before{opacity:.85;transform:scale(1)}
 .cursor.pressed::before{opacity:.95;transform:scale(.62);border-color:var(--red)}
 /* an inner dot so the reticle reads even over bright text */
 .cursor::after{
   content:"";position:absolute;left:50%;top:50%;
   width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
   background:var(--amber-bright);border-radius:50%;
   mix-blend-mode:difference;
 }

 /* The site owns the mouse. The native cursor NEVER appears over
    interactive elements — the reticle above is the only indicator,
    and it grows into a ring so hover state is something you feel. */
 body.custom-cursor,
 body.custom-cursor *{cursor:none !important}

.cursor-light{
  position:fixed;left:0;top:0;width:280px;height:280px;
  border-radius:50%;pointer-events:none;z-index:90;
  background:radial-gradient(circle,rgba(255,176,32,.10) 0%,rgba(255,176,32,.03) 38%,transparent 66%);
  mix-blend-mode:screen;
  transform:translate(-50%,-50%);
  transition:opacity .25s ease;
}
body:not(.custom-cursor) .cursor-light{display:none}

.menu-link{transition:color .15s,background .15s,border-color .15s,text-shadow .15s}
.menu-link:hover{color:var(--amber-bright);background:rgba(255,176,32,.08);text-shadow:0 0 10px rgba(255,176,32,.6);border-color:rgba(255,176,32,.35)}

.view p{transition:color .2s,text-shadow .2s}
.view p:hover{color:var(--amber-bright);text-shadow:0 0 6px rgba(255,176,32,.4)}
.view li{transition:color .2s,text-shadow .2s}
.view li:hover{color:var(--amber-bright);text-shadow:0 0 6px rgba(255,176,32,.4)}
.view h1,.view h2,.view h3{transition:color .2s,text-shadow .2s}
.view h1:hover,.view h2:hover,.view h3:hover{color:var(--amber-bright);text-shadow:0 0 10px rgba(255,176,32,.5)}

/* ---------------------------------------------------------------
   THE ARCHIVE — a chronology of the disk
   --------------------------------------------------------------- */
.timeline{
  max-width:720px;border-left:1px solid var(--line-bright);
  margin:1.4rem 0 1.6rem .4rem;padding-left:0;
  display:grid;gap:0;
}
.t-entry{
  position:relative;padding:.4rem 0 1.4rem 1.6rem;
  border-bottom:1px dashed var(--line);
}
.t-entry:last-child{border-bottom:0}
.t-year{
  position:absolute;left:-.9rem;top:.55rem;
  width:1.7rem;height:1.7rem;line-height:1.55rem;text-align:center;
  background:var(--bg);border:1px solid var(--line-bright);
  font-family:var(--vt);font-size:.8rem;color:var(--amber-bright);
  transform:rotate(0);box-shadow:0 0 8px rgba(255,176,32,.12);
}
.t-body p{font-size:.86rem;color:var(--amber);max-width:60ch}
.t-title{font-family:var(--vt);font-weight:400;font-size:1.05rem;letter-spacing:.08em;color:var(--amber-bright);margin-bottom:.25rem}
.t-entry code{color:var(--amber-bright);background:rgba(255,176,32,.08);padding:.05rem .3rem;font-size:.82rem}

/* ---------------------------------------------------------------
   Statusbar console button + ambience tag
   --------------------------------------------------------------- */
.console-btn{
  font-family:var(--mono);font-size:.85rem;letter-spacing:.06em;
  color:var(--amber);background:var(--panel);border:1px solid var(--line-bright);
  padding:.05rem .5rem;cursor:none;
  transition:color .15s,border-color .15s,box-shadow .15s;
}
.console-btn:hover{color:var(--amber-bright);border-color:var(--amber);box-shadow:0 0 10px rgba(255,176,32,.25)}
.ambience-status{color:var(--amber-dim);cursor:none}
.ambience-status.on{color:var(--amber);text-shadow:0 0 6px rgba(255,176,32,.4)}
.ambience-status.off{color:var(--line-bright)}

/* tiny equalizer — bounces while ambience is playing */
.amb-icon{display:inline-flex;align-items:flex-end;gap:2px;width:13px;height:11px;opacity:.3;transition:opacity .25s;color:var(--amber)}
.amb-icon i{display:block;width:3px;height:30%;background:currentColor;border-radius:1px;animation:amb-bounce 1.1s ease-in-out infinite}
.amb-icon i:nth-child(2){animation-delay:.16s}
.amb-icon i:nth-child(3){animation-delay:.32s}
.amb-icon.playing{opacity:1}
.amb-icon:not(.playing) i{animation-play-state:paused}
@keyframes amb-bounce{0%,100%{height:25%}50%{height:100%}}

/* ---------------------------------------------------------------
   THE FILES — the disk's directory
   --------------------------------------------------------------- */
.filebrowser{
  border:1px solid var(--line-bright);background:var(--panel);
  max-width:680px;margin-bottom:1.2rem;
  box-shadow:inset 0 0 30px rgba(0,0,0,.4);
}
.fb-path{
  font-family:var(--vt);letter-spacing:.12em;color:var(--amber-bright);
  border-bottom:1px solid var(--line);padding:.45rem .9rem;font-size:1rem;
}
.fb-list{display:grid}
.fb-row{
  display:flex;gap:1rem;align-items:baseline;cursor:none;
  padding:.4rem .9rem;border-bottom:1px solid var(--line);
  font-size:.85rem;color:var(--amber-soft);
  transition:background .15s,color .15s;
}
.fb-row:last-child{border-bottom:none}
.fb-row:hover{background:rgba(255,176,32,.08);color:var(--amber-bright)}
.fb-name{font-family:var(--vt);letter-spacing:.1em;color:var(--amber);min-width:150px}
.fb-row:hover .fb-name{color:var(--amber-bright)}
.fb-size{color:var(--amber-dim);min-width:60px;font-size:.75rem}
.fb-tag{color:var(--amber-dim);font-size:.75rem;margin-left:auto}
.fb-row.locked .fb-name{color:var(--red)}
.fb-row.locked:hover{background:rgba(255,60,60,.07)}
.fb-row.denied{animation:fbdeny .3s steps(2)}
@keyframes fbdeny{25%{transform:translate(-3px,0)}75%{transform:translate(3px,0)}}
.fb-read{
  border-top:1px solid var(--line-bright);background:var(--panel);
  padding:.9rem;
}
.fb-title{font-family:var(--vt);color:var(--amber-bright);letter-spacing:.12em;margin-bottom:.5rem;font-size:1rem}
.fb-body{white-space:pre-wrap;color:var(--amber-soft);font-size:.85rem;line-height:1.7;min-height:2em}
.fb-body.typing::after{content:"▌";color:var(--amber);animation:blink .8s steps(1) infinite}

/* ---------------------------------------------------------------
   SCREENSHOTS — the disk, on disk
   --------------------------------------------------------------- */
.shots{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.2rem;max-width:980px;
}
.shot{
  border:1px solid var(--line-bright);background:var(--panel);cursor:none;
  padding:.5rem .5rem .7rem;
  box-shadow:inset 0 0 30px rgba(0,0,0,.4);
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.shot:hover{border-color:var(--amber);box-shadow:0 0 24px rgba(255,176,32,.15);transform:translateY(-3px)}
.shot img{width:100%;display:block;image-rendering:pixelated;filter:sepia(.25) contrast(1.05)}
.shot figcaption{
  font-family:var(--vt);color:var(--amber-dim);letter-spacing:.12em;
  font-size:.85rem;padding:.5rem .2rem 0;text-align:center;
}
.shot:hover figcaption{color:var(--amber)}

.lightbox{
  position:fixed;inset:0;z-index:98;background:rgba(2,1,0,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;padding:clamp(1rem,4vw,3rem);
}
.lightbox img{max-width:92vw;max-height:74vh;image-rendering:pixelated;filter:sepia(.25) contrast(1.05);box-shadow:0 0 40px rgba(255,176,32,.2)}
.lb-cap{font-family:var(--vt);color:var(--amber);letter-spacing:.14em;text-align:center;max-width:720px}
.lb-close{
  border:1px solid var(--line-bright);background:var(--panel);color:var(--amber);
  font-family:var(--vt);letter-spacing:.12em;font-size:1rem;padding:.4rem 1.1rem;
}
.lb-close:hover{color:var(--amber-bright);border-color:var(--amber)}

/* ---------------------------------------------------------------
   TRANSIT — the sites melt into each other (to THE QUESTION GAME).
   Amber drains down, green floods up; then the questions boot.
   --------------------------------------------------------------- */
.transit{
  position:fixed;inset:0;z-index:200;overflow:hidden;
  background:rgba(4,4,4,.55);color:var(--amber);
  font-family:var(--mono);
  opacity:0;pointer-events:none;
  display:flex;flex-direction:column;
  transition:opacity .3s ease;
}
.transit.go{opacity:1;pointer-events:auto}
.transit .hidden{display:none !important}

.melt-up,.melt-down{
  position:absolute;left:0;right:0;z-index:1;pointer-events:none;
}
.melt-up{
  bottom:0;height:0;
  background:linear-gradient(to top,#00dc00 0%,rgba(0,220,0,.55) 55%,rgba(0,220,0,0) 100%);
  box-shadow:0 0 60px rgba(0,220,0,.35);
}
.melt-down{
  top:0;height:0;
  background:linear-gradient(to bottom,#ffb020 0%,rgba(255,176,32,.5) 55%,rgba(255,176,32,0) 100%);
  box-shadow:0 0 60px rgba(255,176,32,.3);
}
.transit.merging .melt-up{height:100%;transition:height 2.6s cubic-bezier(.6,.05,.4,1)}
.transit.merging .melt-down{height:100%;transition:height 2.6s cubic-bezier(.6,.05,.4,1)}
.transit.merged .melt-down{opacity:0;transition:opacity 1.2s ease}
.transit.merged .melt-up{filter:brightness(1.25)}

.melt-drip{
  position:absolute;z-index:2;width:2px;pointer-events:none;
  background:linear-gradient(to bottom,#ffb020,rgba(255,176,32,0));
  animation:drip 2.6s ease-in forwards;
}
.melt-drip.green{
  background:linear-gradient(to bottom,#00dc00,rgba(0,220,0,0));
}
@keyframes drip{from{height:0;opacity:1}to{height:90vh;opacity:0}}

.transit-q{
  position:absolute;top:-40px;left:-40px;pointer-events:none;
  font-family:var(--vt);font-size:2rem;line-height:1;
  color:var(--green,#00dc00);text-shadow:0 0 12px rgba(0,220,0,.7);
  opacity:0;
}
.transit-q.active{opacity:1}

/* SIGNAL INTERRUPTED — the link drops; static + CRT, 0 to 100, then redirect */
.sig-overlay{
  position:fixed;inset:0;z-index:210;overflow:hidden;
  background:#000;color:var(--amber);
  font-family:var(--mono);
  opacity:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .2s ease;
}
.sig-overlay.go{opacity:1;pointer-events:auto}
.sig-overlay.arrive{z-index:60;transition:opacity .35s ease}
.sig-overlay .hidden{display:none !important}
.sig-static{position:absolute;inset:0;width:100%;height:100%;opacity:.55;filter:grayscale(1) contrast(1.1)}
.sig-crt{
  position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px),
    radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);
  animation:sig-flicker .12s steps(2) infinite;
}
@keyframes sig-flicker{0%{opacity:.86}50%{opacity:1}100%{opacity:.9}}
.sig-inner{
  position:relative;z-index:2;text-align:center;
  padding:1.5rem;text-shadow:0 0 12px rgba(255,176,32,.45);
}
.sig-title{
  font-family:var(--vt);font-size:clamp(1.7rem,5.5vw,3.4rem);
  letter-spacing:.2em;color:var(--amber);
  animation:sig-flicker .16s steps(2) infinite;
}
.sig-sub{
  margin-top:1.1rem;font-size:clamp(.85rem,1.8vw,1.1rem);
  letter-spacing:.14em;color:var(--amber-dim);
}
.sig-pct{
  margin-top:1.4rem;font-family:var(--vt);
  font-size:clamp(1.4rem,4vw,2.4rem);color:#ffd660;
  animation:sig-flicker .1s steps(3) infinite;
}

/* the source site explodes — a clean flash and shards, then the signal drops */
.explode-flash{
  position:fixed;inset:0;z-index:205;pointer-events:none;background:#fff;
  opacity:0;animation:explode-flash .7s ease-out forwards;
}
@keyframes explode-flash{0%{opacity:0}12%{opacity:.95}100%{opacity:0}}
.explode-frag{
  position:fixed;top:50%;left:50%;z-index:205;pointer-events:none;
  width:4px;height:4px;opacity:0;
  transform:translate(-50%,-50%) translate(0,0) rotate(0);
  animation:explode-frag .75s cubic-bezier(.15,.6,.3,1) forwards;
}
@keyframes explode-frag{
  0%{opacity:1;transform:translate(-50%,-50%) translate(0,0) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--rot))}
}
body.exploding{filter:brightness(2.1) saturate(0);transition:filter .1s steps(2)}

/* ---------------------------------------------------------------
   DOS CONSOLE — COMMAND.COM. Type ` or press A:\>_ to open.
   It gives you the prompt. It does not give you permission.
   --------------------------------------------------------------- */
.dos{
  position:fixed;top:8vh;left:50%;transform:translateX(-50%);
  width:min(680px,94vw);max-height:82vh;z-index:150;
  display:flex;flex-direction:column;
  background:rgba(6,4,0,.97);font-family:var(--mono);font-size:clamp(.8rem,1.5vw,.98rem);
  color:var(--amber);opacity:0;pointer-events:none;
  border:1px solid var(--line-bright);
  box-shadow:0 0 0 1px rgba(255,176,32,.12),0 18px 60px rgba(0,0,0,.7);
  transition:opacity .2s ease;
}
.dos.go{opacity:1;pointer-events:auto}
.dos.dragging{transform:none;transition:none;cursor:grabbing}
.dos-head{
  flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.4rem .7rem;border-bottom:1px solid var(--line-bright);
  background:var(--panel);color:var(--amber-bright);
  font-family:var(--vt);letter-spacing:.1em;font-size:clamp(.8rem,1.5vw,.95rem);
  cursor:grab;user-select:none;
}
.dos-head-r{display:flex;align-items:center;gap:.6rem;color:var(--amber-dim)}
.dos-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dos-close{
  flex:0 0 auto;width:1.5rem;height:1.5rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  color:var(--amber);border:1px solid var(--line-bright);
  font-size:.85rem;cursor:pointer;
  transition:color .15s,background .15s,border-color .15s;
}
.dos-close:hover{color:#fff;background:rgba(255,176,32,.15);border-color:var(--amber)}
.dos-out{
  flex:1;overflow-y:auto;padding:.6rem .8rem;line-height:1.55;
  white-space:pre-wrap;min-height:8rem;max-height:58vh;
  scrollbar-width:thin;scrollbar-color:var(--line-bright) var(--bg);
}
.dos-out::-webkit-scrollbar{width:10px;background:var(--bg)}
.dos-out::-webkit-scrollbar-thumb{background:var(--line-bright);border:2px solid var(--bg)}
.dos-line{
  flex:0 0 auto;display:flex;align-items:center;gap:.4rem;
  padding:.5rem .8rem .7rem;border-top:1px solid var(--line);
}
.dos-prompt{color:var(--amber-bright);text-shadow:0 0 6px rgba(255,176,32,.5)}
.dos-input{
  flex:1;background:transparent;border:0;outline:0;
  color:var(--amber);font-family:var(--mono);font-size:1em;caret-color:var(--amber);
}
.dos-input::selection{background:var(--amber);color:#1a0f00}
.dos-in{color:var(--amber-bright)}
.dos-in .dos-echo{color:var(--amber-dim)}
.dos-ok{color:#ffb020}
.dos-err{color:var(--red);text-shadow:0 0 6px rgba(255,60,60,.4)}
.dos-sys{color:var(--amber-dim)}
.dos-green{color:#00dc00;text-shadow:0 0 6px rgba(0,220,0,.4)}

/* ---------------------------------------------------------------
   Vault link (revealed after it notices you)
   --------------------------------------------------------------- */
.menu-link.vault-link{color:var(--red);border-color:rgba(255,60,60,.3)}
.menu-link.vault-link:hover{color:#ff8080;background:rgba(255,60,60,.08)}
.bulletin .bullet-line .ts{padding-right:.8rem}

@media (prefers-reduced-motion:reduce){
  .transit-q,.fb-row.denied,.melt-drip{animation:none !important}
  .transit.merging .melt-up,.transit.merging .melt-down{transition:none !important;height:100%}
  .sig-crt,.sig-title,.sig-pct,.explode-frag{animation:none !important}
  .explode-frag{opacity:0 !important}
  .explode-flash{display:none}
  body.exploding{filter:none}
}

/* neptune productions imprint → hub link */
.nep-link{color:inherit;text-decoration:none;cursor:pointer}
.nep-link:hover{text-decoration:underline}

/* ---------------------------------------------------------------
   CRT / STATIC LAYER
   The screen it is pretending to be. Amber phosphor, not green.
   Everything here is pointer-events:none. At z-index 98 it sits
   above the OS chrome (50) and the signal screen (95) but below the
   reticle (99), DOS (150), boot transition (200) and signal overlay
   (210). It ties the lightbox (98) and wins, being later in the DOM.
   --------------------------------------------------------------- */
.crt{
  position:fixed;inset:0;z-index:98;pointer-events:none;
  overflow:hidden;
  animation:crt-flicker 7s linear infinite;
  transition:opacity .35s ease;
}
@keyframes crt-flicker{
  0%,100%{opacity:1}
  5%{opacity:.965} 6%{opacity:1}
  31%{opacity:.98} 32%{opacity:1}
  57%{opacity:.955} 58%{opacity:1}
  79%{opacity:.985} 80%{opacity:1}
}
.crt-scanlines{
  position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0 2px, rgba(0,0,0,.30) 2px 4px);
}
.crt-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0,0,0,.55) 88%, rgba(0,0,0,.8) 100%),
    linear-gradient(rgba(255,176,32,.022), rgba(255,176,32,.022));
  animation:vignette-breathe 8.5s ease-in-out infinite;
}
@keyframes vignette-breathe{
  0%,100%{opacity:.62}
  50%{opacity:1}
}
/* screen, not overlay: the palette is near-black (06 04 00) and overlay
   preserves blacks, so grain drawn in overlay blend would be invisible. */
.crt-grain{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.6;mix-blend-mode:screen;
}
.crt-ash{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.6;mix-blend-mode:screen;
}
.crt-beam{
  position:absolute;left:0;right:0;top:-24vh;height:22vh;
  background:linear-gradient(to bottom,
    transparent, rgba(255,176,32,.035) 42%, rgba(255,176,32,.10) 50%,
    rgba(255,176,32,.035) 58%, transparent);
  animation:beam 9.5s linear infinite;
  will-change:transform;
}
@keyframes beam{0%{transform:translateY(0)}100%{transform:translateY(190vh)}}
.crt-sweep{
  position:absolute;left:0;right:0;top:-30vh;height:30vh;
  background:linear-gradient(to bottom,
    transparent 0%, rgba(255,220,160,.018) 46%, rgba(255,220,160,.045) 50%,
    rgba(255,220,160,.018) 54%, transparent 100%);
  animation:sweep 15s linear infinite;
  will-change:transform;
}
@keyframes sweep{0%{transform:translateY(0)}100%{transform:translateY(150vh)}}

/* a hard vertical jump — fired on every view change and on interference */
.crt.roll{animation:crt-roll .42s steps(6)}
@keyframes crt-roll{
  0%{transform:translateY(0)}
  20%{transform:translateY(-7px)}
  40%{transform:translateY(5px)}
  60%{transform:translateY(-3px)}
  80%{transform:translateY(2px)}
  100%{transform:translateY(0)}
}

/* CRT off — the layers are hidden and the frame loops are stopped in JS */
body.no-crt .crt{opacity:0;animation:none;pointer-events:none}
body.no-crt .crt canvas{visibility:hidden}

/* ---------------------------------------------------------------
   Reveal on scroll — the site assembles itself as you read it.
   Toggled off entirely for reduced-motion and when JS has not run.
   --------------------------------------------------------------- */
.reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s ease,transform .55s ease;
}
.reveal.in{opacity:1;transform:none}

/* ---------------------------------------------------------------
   CRT tag in the status bar
   --------------------------------------------------------------- */
.fx-tag{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--line-bright);background:none;border:1px solid transparent;
  padding:0 .2rem;transition:color .2s,border-color .2s,text-shadow .2s;
}
.fx-tag.on{
  color:var(--amber);text-shadow:0 0 6px rgba(255,176,32,.45);
  border-color:rgba(255,176,32,.18);
}
.fx-tag.on:hover{color:var(--amber-bright);text-shadow:0 0 10px rgba(255,176,32,.75)}
.fx-tag:hover{border-color:rgba(255,176,32,.4)}

@media (prefers-reduced-motion:reduce){
  .crt{animation:none}
  .crt-vignette,.crt-beam,.crt-sweep{animation:none}
  .crt-beam,.crt-sweep{opacity:0}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}
/* phones: keep scanlines + vignette + grain, drop the moving layers */
@media (max-width:640px){
  .crt-beam{display:none}
  .crt-sweep{animation-duration:26s}
  .crt-ash{opacity:.4}
}