/* =====================================================================
   S.G.C. MAINFRAME — terminal / CRT theme
   ===================================================================== */
:root{
  --bg:#020608;
  --bg2:#04121a;
  --phos:#46f2c0;          /* primary phosphor (teal-green) */
  --phos-dim:#1f8f76;
  --amber:#ffb454;
  --cyan:#48d8ff;
  --red:#ff3b3b;
  --ink:#9fe9d8;
  --panel:rgba(8,28,34,.82);
  --panel-line:rgba(72,216,255,.28);
  --glow:0 0 6px rgba(70,242,192,.55);
  --font:"Share Tech Mono",ui-monospace,Consolas,monospace;
  --font-disp:"Orbitron",var(--font);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:
    radial-gradient(circle at 50% -10%, #06222e 0%, var(--bg) 55%, #000 100%);
  color:var(--phos);
  font-family:var(--font);
  font-size:15px;
  overflow:hidden;
  letter-spacing:.3px;
  text-shadow:0 0 2px rgba(70,242,192,.35);
  cursor:crosshair;
}
.hidden{display:none !important}
.dim{color:var(--phos-dim);text-shadow:none}
.blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* --- CRT FX ---------------------------------------------------------- */
#crt{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,.22) 3px, rgba(0,0,0,.22) 3px);
  mix-blend-mode:multiply;
}
#vignette{
  position:fixed;inset:0;z-index:9001;pointer-events:none;
  background:radial-gradient(ellipse at center,
    transparent 55%, rgba(0,0,0,.55) 100%);
}
#flicker{
  position:fixed;inset:0;z-index:9002;pointer-events:none;
  background:rgba(70,242,192,.025);
  animation:flick 7s infinite steps(40);
}
@keyframes flick{0%,97%{opacity:.4}98%{opacity:.05}99%{opacity:.7}100%{opacity:.4}}

.screen{position:fixed;inset:0;z-index:10}

/* --- BOOT ------------------------------------------------------------ */
#boot{padding:26px 32px;overflow:hidden}
#boot-log{
  margin:0;white-space:pre-wrap;word-break:break-word;
  font-size:14px;line-height:1.5;color:var(--phos);
}
#boot-cursor{display:inline-block;color:var(--phos)}

/* --- LOGIN ----------------------------------------------------------- */
#login{display:grid;place-items:center}
.login-frame{
  width:min(440px,92vw);padding:34px 34px 22px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  box-shadow:0 0 40px rgba(0,0,0,.7), inset 0 0 60px rgba(72,216,255,.05);
  text-align:center;backdrop-filter:blur(2px);
  animation:bootin .5s ease both;
}
@keyframes bootin{from{opacity:0;transform:translateY(8px) scale(.98)}}
.gate-badge{width:96px;height:96px;margin:0 auto 8px}
.brand{
  font-family:var(--font-disp);font-weight:900;font-size:25px;margin:4px 0 2px;
  color:#dffaf2;letter-spacing:3px;text-shadow:0 0 12px rgba(72,216,255,.6);
}
.brand-sub{font-size:11px;color:var(--cyan);letter-spacing:1.5px;margin-bottom:14px}
.login-warn{
  font-size:10px;color:var(--red);border:1px dashed rgba(255,59,59,.5);
  padding:5px;margin-bottom:18px;letter-spacing:.5px;
}
#login-form{text-align:left}
#login-form label{display:block;font-size:11px;color:var(--cyan);margin:10px 0 4px;letter-spacing:1px}
#login-form input{
  width:100%;padding:10px 12px;background:#02141a;border:1px solid var(--panel-line);
  color:var(--phos);font-family:var(--font);font-size:15px;outline:none;
}
#login-form input:focus{border-color:var(--phos);box-shadow:var(--glow)}
#login-btn{
  margin-top:18px;width:100%;padding:11px;cursor:pointer;
  background:linear-gradient(180deg,#0a3340,#062028);
  border:1px solid var(--phos);color:var(--phos);
  font-family:var(--font-disp);font-weight:700;letter-spacing:2px;font-size:13px;
  transition:.15s;
}
#login-btn:hover{background:var(--phos);color:#031318;box-shadow:var(--glow)}
.login-msg{min-height:18px;font-size:12px;margin-top:10px;text-align:center}
.login-msg.err{color:var(--red)}
.login-msg.ok{color:var(--phos)}
.login-foot{font-size:9px;color:var(--phos-dim);margin-top:16px;letter-spacing:1px}

/* --- DESKTOP --------------------------------------------------------- */
#topbar{
  position:fixed;top:0;left:0;right:0;height:30px;z-index:50;
  display:flex;align-items:center;gap:14px;padding:0 14px;
  background:linear-gradient(180deg,#06212b,#03141a);
  border-bottom:1px solid var(--panel-line);font-size:12px;
}
.topbar-brand{font-family:var(--font-disp);font-weight:700;color:var(--cyan);letter-spacing:2px}
#topbar-status{margin-left:auto}
#topbar-clock{font-variant-numeric:tabular-nums;color:var(--ink)}
.alert-pill{
  color:#fff;background:var(--red);padding:1px 8px;font-weight:700;letter-spacing:1px;
  animation:blink 1s steps(2) infinite;border-radius:2px;
}

#taskbar{
  position:fixed;bottom:0;left:0;right:0;min-height:42px;z-index:50;
  display:flex;flex-wrap:wrap;align-items:stretch;gap:0;
  background:linear-gradient(0deg,#06212b,#03141a);
  border-top:1px solid var(--panel-line);
}
.task-btn{
  display:flex;align-items:center;gap:7px;padding:0 16px;cursor:pointer;
  border-right:1px solid rgba(72,216,255,.14);color:var(--ink);
  font-size:12px;letter-spacing:1px;background:transparent;transition:.12s;
  font-family:var(--font);
}
.task-btn:hover{background:rgba(72,216,255,.12);color:var(--phos)}
.task-btn.locked{color:#4a6a72;cursor:not-allowed}
.task-btn.locked:hover{background:rgba(255,59,59,.08)}
.task-btn.active{background:rgba(70,242,192,.16);color:#dffaf2;box-shadow:inset 0 -2px 0 var(--phos)}
.task-ico{font-size:15px}

/* --- WINDOWS --------------------------------------------------------- */
#windows{position:fixed;inset:30px 0 42px 0;z-index:20}
.win{
  position:absolute;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--panel-line);
  box-shadow:0 12px 40px rgba(0,0,0,.6), inset 0 0 60px rgba(72,216,255,.04);
  min-width:300px;min-height:160px;backdrop-filter:blur(2px);
  animation:winopen .14s ease both;
}
@keyframes winopen{from{opacity:0;transform:scale(.985)}}
.win-bar{
  display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:grab;
  background:linear-gradient(180deg,#0a3340,#052028);
  border-bottom:1px solid var(--panel-line);user-select:none;
}
.win-bar:active{cursor:grabbing}
.win-title{font-family:var(--font-disp);font-weight:500;font-size:12px;letter-spacing:1.5px;color:var(--cyan)}
.win-ico{font-size:14px}
.win-dots{margin-left:auto;display:flex;align-items:center;gap:8px}
.win-dot{width:13px;height:13px;border-radius:50%;cursor:pointer;border:1px solid rgba(0,0,0,.4);
  display:grid;place-items:center;font-size:10px;line-height:1;color:rgba(0,0,0,.55)}
.win-dot.min{background:var(--amber)}
.win-dot.close{background:var(--red)}
.win-dot::after{opacity:0;transition:.1s}
.win-dot.min::after{content:"\2013"}   /* – */
.win-dot.close::after{content:"\00d7"}  /* × */
.win-bar:hover .win-dot::after{opacity:1}
.win-dot:hover{filter:brightness(1.25)}
.win-body{flex:1;overflow:auto;padding:14px}
.win-body::-webkit-scrollbar{width:10px}
.win-body::-webkit-scrollbar-thumb{background:rgba(72,216,255,.3)}
.win-body::-webkit-scrollbar-track{background:transparent}

/* generic content bits */
h2.sec{font-family:var(--font-disp);color:var(--cyan);font-size:14px;letter-spacing:2px;
  margin:0 0 12px;border-bottom:1px solid var(--panel-line);padding-bottom:6px}
.row{border:1px solid rgba(72,216,255,.16);padding:10px 12px;margin-bottom:10px;background:rgba(2,18,24,.5)}
.row:hover{border-color:var(--phos)}
.row .rid{color:var(--amber);font-size:11px;letter-spacing:1px}
.row .rtitle{color:#dffaf2;margin:2px 0}
.row .rmeta{color:var(--phos-dim);font-size:11px}
.row pre{white-space:pre-wrap;margin:8px 0 0;color:var(--ink);font-size:13px;line-height:1.5}
.tag{display:inline-block;font-size:10px;padding:1px 6px;border:1px solid;letter-spacing:1px;margin-left:6px}
.tag.enc{color:var(--amber);border-color:var(--amber)}
.tag.anom{color:var(--red);border-color:var(--red);animation:blink 1.4s steps(2) infinite}
.tag.flag{color:var(--red);border-color:var(--red)}
.locked-note{color:var(--red);border:1px dashed rgba(255,59,59,.5);padding:14px;text-align:center;letter-spacing:1px}

/* --- TERMINAL -------------------------------------------------------- */
.term{display:flex;flex-direction:column;height:100%;font-size:14px}
.term-out{flex:1;overflow:auto;white-space:pre-wrap;word-break:break-word;line-height:1.5}
.term-out .u{color:var(--cyan)}        /* user echo */
.term-out .e{color:var(--red)}
.term-out .ok{color:var(--phos)}
.term-out .a{color:var(--amber)}
.term-out::-webkit-scrollbar{width:8px}
.term-out::-webkit-scrollbar-thumb{background:rgba(72,216,255,.3)}
.term-in{display:flex;align-items:center;gap:8px;border-top:1px solid var(--panel-line);padding-top:8px;margin-top:6px}
.term-in .ps{color:var(--phos);white-space:nowrap}
.term-in input{flex:1;background:transparent;border:none;outline:none;color:var(--phos);font-family:var(--font);font-size:14px}

/* --- AI CHAT --------------------------------------------------------- */
.chat{display:flex;flex-direction:column;height:100%}
.chat-log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;padding-right:4px}
.bub{max-width:86%;padding:9px 12px;font-size:13px;line-height:1.45;border:1px solid}
.bub.ai{align-self:flex-start;border-color:var(--panel-line);background:rgba(72,216,255,.06);color:var(--ink)}
.bub.me{align-self:flex-end;border-color:var(--phos);background:rgba(70,242,192,.08);color:var(--phos)}
.bub .who{font-size:10px;letter-spacing:1px;opacity:.7;display:block;margin-bottom:3px}
.chat-in{display:flex;gap:8px;margin-top:10px}
.chat-in input{flex:1;background:#02141a;border:1px solid var(--panel-line);color:var(--phos);
  font-family:var(--font);font-size:13px;padding:8px;outline:none}
.chat-in input:focus{border-color:var(--phos)}
.chat-in button{padding:0 14px;background:#0a3340;border:1px solid var(--phos);color:var(--phos);cursor:pointer;font-family:var(--font)}
.chat-in button:hover{background:var(--phos);color:#031318}

/* --- GATE CONTROL ---------------------------------------------------- */
.gate-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;height:100%}
@media(max-width:740px){.gate-wrap{grid-template-columns:1fr}}
.gate-stage{display:flex;align-items:center;justify-content:center;position:relative}
#gate-svg{width:100%;max-width:360px;filter:drop-shadow(0 0 14px rgba(72,216,255,.25))}
.gate-panel{display:flex;flex-direction:column;gap:8px;overflow:auto}
.gate-readout{border:1px solid var(--panel-line);padding:8px;font-size:12px;min-height:42px;background:#02141a;color:var(--ink)}
.gate-readout b{color:var(--amber)}
.glyph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.glyph{
  font-size:10px;padding:6px 4px;border:1px solid rgba(72,216,255,.2);
  background:#02141a;color:var(--ink);cursor:pointer;text-align:center;
  letter-spacing:.5px;transition:.1s;line-height:1.2;
}
.glyph:hover{border-color:var(--phos);color:var(--phos)}
.glyph.sel{background:var(--phos);color:#031318;border-color:var(--phos)}
.glyph.po{color:var(--amber);border-color:var(--amber)}
.gate-btns{display:flex;gap:8px;margin-top:4px}
.gate-btns button{flex:1;padding:9px;font-family:var(--font-disp);font-weight:700;letter-spacing:1px;
  border:1px solid var(--phos);background:#0a3340;color:var(--phos);cursor:pointer;font-size:12px}
.gate-btns button:hover{background:var(--phos);color:#031318}
.gate-btns button.warn{border-color:var(--amber);color:var(--amber)}
.gate-btns button.warn:hover{background:var(--amber);color:#031318}

/* chevrons */
.chev{fill:#0a2730;stroke:var(--panel-line);stroke-width:1;transition:.2s}
.chev.lock{fill:var(--red);stroke:#ff8a8a;filter:drop-shadow(0 0 6px var(--red))}
.gate-inner-ring{transition:transform .6s cubic-bezier(.4,0,.2,1)}
.event-horizon{opacity:0;transition:opacity .6s}
.event-horizon.on{opacity:1}

/* --- OVERRIDE -------------------------------------------------------- */
.override{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;padding-top:6px}
.override h2{font-family:var(--font-disp);color:var(--red);letter-spacing:3px;margin:0}
.checks{width:100%;max-width:420px;text-align:left}
.chk{padding:8px 10px;border:1px solid rgba(72,216,255,.18);margin-bottom:7px;display:flex;gap:10px;align-items:center}
.chk .b{font-size:16px}
.chk.on{border-color:var(--phos);color:var(--phos)}
.chk.off{color:var(--phos-dim)}
.override input{width:100%;max-width:420px;padding:11px;background:#1a0606;border:1px solid var(--red);
  color:#ffb4b4;font-family:var(--font);text-align:center;letter-spacing:2px;font-size:15px;outline:none}
.override .exec{max-width:420px;width:100%;padding:13px;font-family:var(--font-disp);font-weight:900;
  letter-spacing:3px;background:#2a0808;border:1px solid var(--red);color:var(--red);cursor:pointer;font-size:14px}
.override .exec:hover:not(:disabled){background:var(--red);color:#fff;box-shadow:0 0 18px var(--red)}
.override .exec:disabled{opacity:.4;cursor:not-allowed}
.override .msg{min-height:18px;font-size:12px}

/* --- ENDGAME --------------------------------------------------------- */
#endgame{background:#000;display:grid;place-items:center;z-index:200}
#endgame-log{
  width:min(820px,92vw);white-space:pre-wrap;line-height:1.6;font-size:15px;
  color:var(--phos);text-shadow:0 0 8px rgba(70,242,192,.5);
}

/* --- TOASTS ---------------------------------------------------------- */
#toast-wrap{position:fixed;top:40px;right:14px;z-index:8000;display:flex;flex-direction:column;gap:8px}
.toast{
  background:var(--panel);border-left:3px solid var(--phos);padding:10px 14px;
  font-size:12px;color:var(--ink);max-width:320px;box-shadow:0 6px 20px rgba(0,0,0,.5);
  animation:toastin .25s ease both;
}
.toast.alert{border-left-color:var(--red);color:#ffb4b4}
.toast .tt{color:var(--phos);font-weight:bold;display:block;margin-bottom:2px;letter-spacing:1px}
.toast.alert .tt{color:var(--red)}
@keyframes toastin{from{opacity:0;transform:translateX(30px)}}

/* =====================================================================
   BREACH / ACCESS GATEWAY
   ===================================================================== */
#gateway{display:grid;place-items:center;overflow:auto;padding:18px}

/* pre-auth investigative terminal — absolute, fills the #gateway screen */
.preauth{position:absolute;inset:0;padding:16px 22px;display:flex}
.preauth .term{flex:1;height:100%;font-size:14px}
.preauth .term-in{border-top:1px solid var(--panel-line)}
.preauth .ps{color:var(--phos);white-space:nowrap}
.preauth .term-in input{font-size:14px}

/* access-granted splash (centered in #gateway) */
.gw-frame{display:grid;place-items:center;width:100%;height:100%}
.gw-grant{text-align:center;animation:bootin .45s ease both;padding:18px 0}
.gw-grant-gate{width:90px;margin:0 auto 12px}
.gw-grant h1{font-family:var(--font-disp);color:var(--phos);letter-spacing:5px;text-shadow:var(--glow);margin:6px 0}
.gw-grant p{color:var(--ink);margin:6px 0}

/* ICE TRACE HUD (flagged sessions) */
#ice{position:fixed;top:30px;left:0;right:0;height:28px;z-index:49;
  display:flex;align-items:center;gap:12px;padding:0 14px;
  background:linear-gradient(180deg,#2a0808,#150404);border-bottom:1px solid var(--red);
  font-size:11px;letter-spacing:1px}
.ice-label{color:var(--red);font-weight:bold;white-space:nowrap;animation:blink 1.2s steps(2) infinite}
.ice-track{flex:1;height:10px;background:#1a0606;border:1px solid rgba(255,59,59,.5);overflow:hidden}
.ice-fill{height:100%;width:0;background:linear-gradient(90deg,#7a1010,var(--red));transition:width .25s linear}
.ice-time{font-variant-numeric:tabular-nums;color:#ffd0d0;min-width:46px;text-align:right}
#ice.crit{animation:redpulse 1s ease-in-out infinite}
#ice.crit .ice-time{color:#fff;font-weight:bold}
#ice.crit .ice-label{color:#fff}
body.flagged #windows{top:58px}

/* LOSE / trace-complete overlay */
#lose{background:#0a0000;display:grid;place-items:center;z-index:300}
#lose-log{width:min(760px,92vw);white-space:pre-wrap;line-height:1.6;font-size:15px;
  color:var(--red);text-shadow:0 0 8px rgba(255,59,59,.5)}

/* red-alert body state */
body.alert{animation:redpulse 1.6s ease-in-out infinite}
@keyframes redpulse{50%{box-shadow:inset 0 0 200px rgba(255,59,59,.18)}}
body.alert #vignette{background:radial-gradient(ellipse at center,transparent 45%,rgba(120,0,0,.5) 100%)}

/* =====================================================================
   CONSOLE (Act 2) — status / comms patch / morse / systems / endings
   ===================================================================== */
.intro{white-space:pre-wrap;color:var(--ink);font-size:13px;line-height:1.55;margin:0 0 12px;
  border-left:2px solid var(--panel-line);padding-left:10px}
.statgrid{display:flex;flex-direction:column;gap:4px}
.statline{display:flex;justify-content:space-between;border-bottom:1px solid rgba(72,216,255,.12);padding:5px 2px;font-size:13px}
.statline span{color:var(--cyan);letter-spacing:1px}
.b-ok{color:var(--phos)} .b-bad{color:var(--red)}

/* comms patch */
.patch{margin-top:14px;border-top:1px solid var(--panel-line);padding-top:12px}
.patch label{display:block;font-size:11px;color:var(--cyan);letter-spacing:1px;margin-bottom:6px}
.patch input{width:120px;padding:9px;background:#02141a;border:1px solid var(--panel-line);color:var(--phos);font-family:var(--font);font-size:15px;outline:none}
.patch input:focus{border-color:var(--phos)}
.patch button{margin-left:8px;padding:9px 14px;background:#0a3340;border:1px solid var(--phos);color:var(--phos);cursor:pointer;font-family:var(--font)}
.patch button:hover{background:var(--phos);color:#031318}
.patch .rmeta{margin-top:10px}
.bub .who{font-weight:bold}

/* diagnostics morse */
.morse{margin-top:10px;display:flex;align-items:center;gap:12px;font-size:17px;letter-spacing:3px;color:var(--amber);
  background:#02141a;border:1px solid rgba(255,180,84,.3);padding:11px;overflow-x:auto;white-space:nowrap}
.led{width:12px;height:12px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber);flex:none;animation:ledblink 1.3s steps(1) infinite}
@keyframes ledblink{0%,42%{opacity:1}43%,100%{opacity:.12}}

/* systems control */
.sysgrp{margin-bottom:12px;border:1px solid var(--panel-line);padding:10px;background:rgba(2,18,24,.4)}
.sysh{font-family:var(--font-disp);font-size:11px;letter-spacing:2px;color:var(--cyan);margin-bottom:8px}
.sysbtn{display:block;width:100%;text-align:left;margin-bottom:6px;padding:10px 12px;cursor:pointer;
  background:#02141a;border:1px solid var(--panel-line);color:var(--ink);font-family:var(--font);font-size:13px;letter-spacing:.5px;transition:.1s}
.sysbtn:last-child{margin-bottom:0}
.sysbtn:hover{border-color:var(--phos);color:var(--phos)}
.sysbtn.on{border-color:var(--phos);color:var(--phos);background:rgba(70,242,192,.1)}
.sysbtn.danger{border-color:rgba(255,59,59,.45);color:#ffb4b4}
.sysbtn.danger:hover{border-color:var(--red);background:rgba(255,59,59,.1);color:#fff}
.sysbtn.armed{border-color:var(--amber);color:var(--amber)}
.sysbtn.confirm{background:var(--red);color:#fff;border-color:var(--red);animation:blink 1s steps(2) infinite}

/* endings */
#endgame.tone-good #endgame-log{color:var(--phos);text-shadow:0 0 8px rgba(70,242,192,.5)}
#endgame.tone-grim #endgame-log{color:var(--amber);text-shadow:0 0 8px rgba(255,180,84,.4)}
#endgame.tone-bad  #endgame-log{color:var(--red);text-shadow:0 0 8px rgba(255,59,59,.5)}
.restart-btn{margin-top:18px;padding:11px 20px;background:#0a1a20;border:1px solid currentColor;color:inherit;
  font-family:var(--font);cursor:pointer;letter-spacing:2px}
.restart-btn:hover{background:currentColor;color:#000}

/* fan disclaimer (boot screen only) */
.disclaimer{position:absolute;bottom:12px;left:0;right:0;text-align:center;
  font-size:10px;letter-spacing:.5px;color:var(--phos-dim);opacity:.7;padding:0 16px}

/* tactical retake (embedded FIRE TEAM mission) */
#tactical{position:fixed;inset:0;z-index:250;background:#000}
#tac-frame{width:100%;height:100%;border:0;display:block}
.tac-load{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:#000;
  color:var(--phos);font-family:var(--font-disp);letter-spacing:3px;font-size:14px;
  text-shadow:var(--glow);text-align:center;padding:24px}

/* inline vector icons (replace emoji) */
.ic{width:1.05em;height:1.05em;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-0.16em}
.task-ico{display:inline-flex}.task-ico .ic{width:1em;height:1em}
.win-ico .ic{width:.95em;height:.95em}
h2.sec .ic{vertical-align:-0.2em;margin-right:2px}