@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');
:root{--g:#00ff9d;--b:#00d4ff;--r:#ff2a6d;--p:#bd00ff;--c:#05d9e8;--a:#ff9f1c;--bg:#0a0a0f}
*{margin:0;padding:0;box-sizing:border-box}
body{background:#000;overflow:hidden;font-family:'Share Tech Mono',monospace;height:100vh;width:100vw;color:var(--g)}
#game{width:100vw;height:100vh;background:var(--bg);position:relative;overflow:hidden;display:flex;flex-direction:column}
#grid{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(var(--g)1px,transparent 1px),linear-gradient(90deg,var(--g)1px,transparent 1px);background-size:50px 50px;opacity:.03;pointer-events:none;z-index:1;animation:gm 20s linear infinite}
@keyframes gm{0%{background-position:0 0}100%{background-position:50px 50px}}
.crt::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(rgba(18,16,16,0)50%,rgba(0,0,0,.3)50%);background-size:100% 3px;pointer-events:none;z-index:20}
.scan{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,157,.02)2px,rgba(0,255,157,.02)4px);pointer-events:none;z-index:19}
.vig{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.7)100%);pointer-events:none;z-index:18}
#matrix{position:absolute;inset:0;width:100%;height:100%;opacity:.16;pointer-events:none;z-index:2;mix-blend-mode:screen;transition:opacity .5s}
#matrix.active{opacity:.42}
#interference{position:absolute;inset:0;pointer-events:none;z-index:21;opacity:0;background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(255,42,109,.09) 8px,transparent 10px),linear-gradient(transparent 48%,rgba(255,255,255,.22) 50%,transparent 52%);mix-blend-mode:screen}
#interference.active{animation:interf .35s steps(2) 2}
@keyframes interf{0%,100%{opacity:0}30%,70%{opacity:.72;transform:translateX(-8px)}50%{opacity:.3;transform:translateX(7px)}}
@keyframes ga{0%{transform:translate(0)}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,3px)}80%{transform:translate(2px,-3px)}100%{transform:translate(0)}}
.glitch{animation:ga .4s ease-in-out}
#header{padding:12px 24px;background:rgba(10,15,25,.85);border-bottom:2px solid var(--g);display:flex;justify-content:space-between;align-items:center;z-index:10;font-family:'Orbitron',sans-serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;box-shadow:0 0 20px rgba(0,255,157,.1);position:relative}
#header::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--g),transparent);animation:sh 3s linear infinite}
@keyframes sh{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.hl,.hr{display:flex;gap:24px;align-items:center}
.hud{display:flex;align-items:center;gap:8px}
.hlbl{color:rgba(0,255,157,.5);font-size:10px}
.hval{color:var(--g);font-weight:700;text-shadow:0 0 10px rgba(0,255,157,.5)}
.sd{width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 12px var(--g);animation:pd 2s infinite}
@keyframes pd{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.sd.warn{background:var(--r)!important;box-shadow:0 0 12px var(--r)!important;animation:pw .5s infinite!important}
@keyframes pw{0%,100%{opacity:1}50%{opacity:.2}}
#tw{flex:1;display:flex;flex-direction:column;padding:20px;z-index:10;position:relative;min-height:0}
#out{flex:1;overflow-y:auto;padding:20px;font-size:15px;line-height:1.7;min-height:0;background:rgba(5,5,10,.6);border:1px solid rgba(0,255,157,.15);border-radius:4px;font-family:'Share Tech Mono',monospace}
#out::-webkit-scrollbar{width:6px}
#out::-webkit-scrollbar-track{background:#0a0a0f}
#out::-webkit-scrollbar-thumb{background:var(--g);border-radius:3px}
.ln{margin-bottom:6px;white-space:pre-wrap;word-wrap:break-word;padding-left:8px;border-left:2px solid transparent;transition:all .2s}
.ln:hover{background:rgba(0,255,157,.03)}
.ln.cmd{color:var(--a);border-left-color:var(--a);font-weight:bold;text-shadow:0 0 5px rgba(255,159,28,.3)}
.ln.err{color:var(--r);border-left-color:var(--r);text-shadow:0 0 5px rgba(255,42,109,.3)}
.ln.ok{color:var(--g);border-left-color:var(--g);text-shadow:0 0 5px rgba(0,255,157,.3)}
.ln.ai{color:var(--p);border-left-color:var(--p);font-style:italic;text-shadow:0 0 8px rgba(189,0,255,.4);animation:af 3s infinite}
@keyframes af{0%,90%,100%{opacity:1}95%{opacity:.7}}
.ln.echo{color:var(--c);border-left-color:var(--c);font-style:italic;text-shadow:0 0 5px rgba(5,217,232,.3)}
.ln.warn{color:var(--r);border-left-color:var(--r);font-weight:bold;text-shadow:0 0 10px rgba(255,42,109,.5);animation:wp 2s infinite}
@keyframes wp{0%,100%{text-shadow:0 0 10px rgba(255,42,109,.5)}50%{text-shadow:0 0 20px rgba(255,42,109,.8)}}
.ln.sys{color:var(--b);border-left-color:var(--b);text-shadow:0 0 5px rgba(0,212,255,.2)}
.ln.ascii{font-family:'Share Tech Mono',monospace;font-size:15px;line-height:1.2;color:var(--g);text-shadow:0 0 10px rgba(0,255,157,.3);letter-spacing:1px}
.ln.div{color:rgba(0,255,157,.3);letter-spacing:3px}
.ln.secret{color:var(--a);border-left-color:var(--a);text-shadow:0 0 20px rgba(255,159,28,.5);animation:secretPulse 2s infinite}
@keyframes secretPulse{0%,100%{text-shadow:0 0 20px rgba(255,159,28,.5)}50%{text-shadow:0 0 40px rgba(255,159,28,.8)}}
.ln.legend{color:#ffd700;border-left-color:#ffd700;text-shadow:0 0 20px rgba(255,215,0,.3)}
.ln.ghost{color:#f5f5ff;border-left-color:#f5f5ff;text-shadow:0 0 12px rgba(245,245,255,.55);animation:ghostFade 4s ease-in-out}
@keyframes ghostFade{0%,100%{opacity:.3}35%,65%{opacity:1}}
#ia{padding:16px 24px;background:rgba(10,15,25,.85);border-top:2px solid var(--g);display:flex;align-items:center;gap:12px;z-index:10;position:relative;box-shadow:0 0 20px rgba(0,255,157,.05);flex-shrink:0}
#ia::before{content:'';position:absolute;top:-2px;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--g),transparent);animation:sh 3s linear infinite reverse}
#prompt{color:var(--a);font-weight:bold;font-family:'Orbitron',sans-serif;font-size:13px;letter-spacing:1px;text-shadow:0 0 10px rgba(255,159,28,.3);white-space:nowrap}
#ci{background:transparent;border:none;outline:none;color:var(--g);font-family:'Share Tech Mono',monospace;font-size:16px;flex:1;caret-color:var(--g);text-shadow:0 0 5px rgba(0,255,157,.3)}
#ci::placeholder{color:rgba(0,255,157,.2)}
.cur{display:inline-block;width:12px;height:20px;background:var(--g);box-shadow:0 0 10px var(--g);animation:bc 1s step-end infinite;vertical-align:middle}
@keyframes bc{0%,100%{opacity:1}50%{opacity:0}}
#boot{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px}
#bt{font-family:'Share Tech Mono',monospace;font-size:16px;color:var(--g);max-width:800px;line-height:1.5;text-shadow:0 0 5px rgba(0,255,157,.3);white-space:pre-wrap}
#ly{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;z-index:90;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .5s}
#ly.active{opacity:1;pointer-events:all}
.lyt{font-family:'Orbitron',sans-serif;font-size:64px;color:var(--r);text-shadow:0 0 40px rgba(255,42,109,.6);margin-bottom:20px;letter-spacing:8px;font-weight:900;animation:lp 1s ease-in-out infinite}
@keyframes lp{0%,100%{text-shadow:0 0 40px rgba(255,42,109,.6)}50%{text-shadow:0 0 60px rgba(255,42,109,.9)}}
.lys{font-family:'Orbitron',sans-serif;font-size:22px;color:var(--g);letter-spacing:4px;text-transform:uppercase}
#md{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.92);z-index:80;display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(5px)}
#md.active{opacity:1;pointer-events:all}
.mbx{background:linear-gradient(135deg,rgba(10,15,25,.95),rgba(5,5,15,.95));border:2px solid var(--g);padding:40px;max-width:650px;width:90%;box-shadow:0 0 30px rgba(0,255,157,.2),inset 0 0 30px rgba(0,255,157,.05);position:relative;overflow:hidden}
.mbx::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--g),var(--c),var(--g));animation:sh 2s linear infinite}
.mt{color:var(--r);font-size:28px;margin-bottom:20px;font-family:'Orbitron',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:3px;text-shadow:0 0 20px rgba(255,42,109,.5)}
.mtx{color:var(--g);line-height:1.8;margin-bottom:25px;white-space:pre-wrap;font-size:15px;text-shadow:0 0 5px rgba(0,255,157,.2)}
.mcs{display:flex;flex-direction:column;gap:12px}
.mc{background:rgba(0,255,157,.05);border:1px solid var(--g);color:var(--g);padding:14px 24px;cursor:pointer;font-family:'Orbitron',sans-serif;font-size:13px;text-align:left;transition:all .3s;text-transform:uppercase;letter-spacing:2px;position:relative;overflow:hidden}
.mc::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,255,157,.1),transparent);transition:left .3s}
.mc:hover::before{left:100%}
.mc:hover{background:rgba(0,255,157,.1);border-color:var(--c);color:var(--c);box-shadow:0 0 20px rgba(0,255,157,.2);transform:translateX(5px)}
#ach{position:absolute;top:90px;right:-400px;background:linear-gradient(135deg,rgba(10,15,25,.95),rgba(5,5,15,.95));border:2px solid var(--a);padding:20px 25px;border-radius:4px;z-index:50;transition:right .6s cubic-bezier(.68,-.55,.265,1.55);max-width:320px;box-shadow:0 0 30px rgba(255,159,28,.2)}
#ach.show{right:24px}
.at{color:var(--a);font-weight:900;margin-bottom:8px;font-family:'Orbitron',sans-serif;font-size:14px;letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 10px rgba(255,159,28,.3)}
.ad{color:var(--g);font-size:13px;font-family:'Share Tech Mono',monospace}
.cor{position:absolute;width:20px;height:20px;border:2px solid var(--g);z-index:15;pointer-events:none}
.cor.tl{top:10px;left:10px;border-right:none;border-bottom:none}
.cor.tr{top:10px;right:10px;border-left:none;border-bottom:none}
.cor.bl{bottom:10px;left:10px;border-right:none;border-top:none}
.cor.br{bottom:10px;right:10px;border-left:none;border-top:none}
.hid{display:none!important}
#audioToggle{position:absolute;bottom:20px;right:20px;z-index:60;background:rgba(10,15,25,.8);border:1px solid var(--g);color:var(--g);padding:8px 14px;font-family:'Orbitron',sans-serif;font-size:11px;cursor:pointer;letter-spacing:2px;transition:all .3s;border-radius:4px}
#audioToggle:hover{background:rgba(0,255,157,.1);box-shadow:0 0 20px rgba(0,255,157,.2)}

/* ===== WEGO WIKI EXTERNAL KNOWLEDGE ACCESS ===== */
/* Anything rendered with these classes is presenting REAL data pulled from
   wiki.wego.gg — visually distinct (cyan/boxed) from DarkSide's own magenta/
   amber in-universe fiction so the two are never mistaken for each other. */
.wk-box{font-family:'Share Tech Mono',monospace;color:var(--b);white-space:pre;line-height:1.5;text-shadow:0 0 6px rgba(0,212,255,.35);margin-bottom:4px}
.ln.wk-hdr{color:var(--b);border-left-color:var(--b);text-shadow:0 0 8px rgba(0,212,255,.4)}
.ln.wk-fact{color:#eafcff;border-left-color:var(--b);background:rgba(0,212,255,.04)}
.ln.wk-meta{color:rgba(0,212,255,.55);border-left-color:rgba(0,212,255,.3);font-size:13px}
.ln.wk-link{color:var(--c);border-left-color:var(--c)}
.ln.wk-link a{color:var(--c);text-decoration:underline;text-underline-offset:3px}
.ln.wk-link a:hover{color:#fff;text-shadow:0 0 10px var(--c)}
.ln.wk-miss{color:rgba(255,255,255,.55);border-left-color:rgba(255,255,255,.25);font-style:italic}
.ln.wk-status-live{color:var(--g);border-left-color:var(--g)}
.ln.wk-status-cache{color:var(--a);border-left-color:var(--a)}
.ln.wk-status-down{color:var(--r);border-left-color:var(--r)}
.wk-bar{display:inline-block;color:var(--b);letter-spacing:1px}

@media(max-width:768px){
  #header{font-size:10px;padding:8px 12px}
  #out{font-size:13px;padding:12px}
  .lyt{font-size:36px}
  .mt{font-size:20px}
  #audioToggle{bottom:10px;right:10px;font-size:9px;padding:5px 10px}
  #quickbar{display:flex}
}

/* ===== WHISPER NETWORK GRAPH ===== */
#netgraph{position:absolute;inset:0;background:rgba(2,2,6,.94);z-index:70;opacity:0;pointer-events:none;transition:opacity .35s;backdrop-filter:blur(3px)}
#netgraph.active{opacity:1;pointer-events:all}
#netgraph canvas{width:100%;height:100%;display:block;cursor:crosshair}
.netgraph-title{position:absolute;top:18px;left:24px;font-family:'Orbitron',sans-serif;font-size:14px;letter-spacing:4px;color:var(--g);text-shadow:0 0 12px rgba(0,255,157,.4)}
.netgraph-hint{position:absolute;bottom:18px;left:24px;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1px;color:rgba(0,255,157,.5)}

/* ===== SSH SESSION MODE ===== */
#ia.ssh-mode{border-top-color:var(--c);box-shadow:0 0 20px rgba(5,217,232,.15)}
#ia.ssh-mode #prompt{color:var(--c);text-shadow:0 0 10px rgba(5,217,232,.4)}
#ia.ssh-mode #ci{color:var(--c);caret-color:var(--c)}
#ia.ssh-danger{border-top-color:var(--r)}
#ia.ssh-danger #prompt{color:var(--r);text-shadow:0 0 10px rgba(255,42,109,.5)}

/* Network node-type output tagging — visually distinct from BOTH the
   station's own fiction (magenta/amber) and real wiki data (cyan-boxed),
   so a player can always tell "which system is talking." */
.ln.net-hdr{color:#7fffe0;border-left-color:#7fffe0;text-shadow:0 0 8px rgba(127,255,224,.4)}
.ln.net-file{color:#d8fff5;border-left-color:#3ad}
.ln.net-dir{color:#9be8ff;border-left-color:#38a}
.ln.net-err{color:var(--r);border-left-color:var(--r)}
.ln.net-danger{color:var(--r);border-left-color:var(--r);animation:wp 1.6s infinite}
.ln.net-nami{color:var(--p);border-left-color:var(--p);font-style:italic}
.ln.net-watcher{color:#ff2a6d;border-left-color:#ff2a6d;letter-spacing:1px;animation:secretPulse 1.4s infinite}

/* ===== MOBILE QUICK COMMAND BAR ===== */
#quickbar{display:none;gap:6px;padding:8px 10px;background:rgba(10,15,25,.9);border-top:1px solid rgba(0,255,157,.25);overflow-x:auto;flex-shrink:0;-webkit-overflow-scrolling:touch}
#quickbar button{flex:0 0 auto;background:rgba(0,255,157,.06);border:1px solid rgba(0,255,157,.35);color:var(--g);font-family:'Share Tech Mono',monospace;font-size:12px;padding:8px 12px;border-radius:4px;white-space:nowrap}
#quickbar button:active{background:rgba(0,255,157,.2)}