:root{--g:#39ff14;--gd:#1a8c0a;--gg:0 0 8px #39ff14,0 0 18px #39ff1455;--c:#00d4ff;--gold:#ffd700;--r:#ff4444;--or:#ff8800;--bg:#060806;--tbg:#000;--pb:#0b110b;--bd:#162816;--dm:#3d6b3d;--mm:#7ab87a}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--g);font-family:'Share Tech Mono',monospace;overflow:hidden}
/* BOOT */
#boot{position:fixed;inset:0;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;cursor:pointer}
.blogo{font-family:'Orbitron',monospace;font-weight:900;font-size:clamp(32px,7vw,80px);color:var(--g);text-shadow:var(--gg);letter-spacing:.08em;margin-bottom:32px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{text-shadow:var(--gg)}50%{text-shadow:0 0 20px #39ff14,0 0 40px #39ff14aa}}
#blog{width:min(560px,88vw);font-family:'VT323',monospace;font-size:clamp(15px,2.5vw,20px);color:#39ff14;line-height:1.7}
#blog .bl{opacity:0;animation:fi .05s forwards}
@keyframes fi{to{opacity:1}}
#bprompt{color:var(--dm);margin-top:16px;font-size:14px;animation:blink 1s infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
/* APP */
#app{display:none;height:100vh;flex-direction:column}
/* HEADER */
#hdr{display:flex;align-items:center;gap:12px;padding:7px 14px;background:var(--pb);border-bottom:1px solid var(--bd);flex-shrink:0;flex-wrap:wrap}
.logo{font-family:'Orbitron',monospace;font-weight:900;font-size:17px;color:var(--g);text-shadow:var(--gg);letter-spacing:.18em}
.logo span{color:var(--c)}
.hbtn{padding:4px 10px;background:transparent;border:1px solid var(--dm);color:var(--dm);font-family:'Orbitron',monospace;font-size:10px;letter-spacing:.1em;cursor:pointer;border-radius:3px;transition:all .2s}
.hbtn:hover{border-color:var(--g);color:var(--g)}
.hstats{display:flex;gap:10px;margin-left:auto;align-items:center;flex-wrap:wrap}
.stat{display:flex;align-items:center;gap:5px;background:#080e08;border:1px solid var(--bd);padding:3px 9px;border-radius:3px;font-size:12px}
.stat .v{color:var(--gold);font-family:'Orbitron',monospace;font-weight:700;transition:color .3s}
.stat .v.pop{color:var(--g);text-shadow:var(--gg)}
.xpbar{width:70px;height:5px;background:#0a120a;border:1px solid var(--bd);border-radius:3px;overflow:hidden}
.xpfill{height:100%;background:linear-gradient(90deg,var(--gold),#ff9900);border-radius:3px;transition:width .5s}
/* MAIN */
#main{display:flex;flex:1;overflow:hidden}
/* WORLD MAP */
#wmap{display:none;flex-direction:column;align-items:center;padding:24px 16px;overflow-y:auto;width:100%}
.wmt{font-family:'Orbitron',monospace;font-size:clamp(22px,4vw,38px);font-weight:900;text-shadow:var(--gg);margin-bottom:6px;letter-spacing:.1em}
.wms{color:var(--dm);font-size:13px;margin-bottom:28px}
.ww{width:min(920px,100%)}
.wsec{margin-bottom:28px}
.wn{font-family:'Orbitron',monospace;font-size:11px;font-weight:700;letter-spacing:.18em;padding-bottom:8px;margin-bottom:12px;border-bottom:1px solid #081808;display:flex;justify-content:space-between;align-items:center}
.db{font-size:10px;padding:2px 7px;border-radius:10px;font-family:'Share Tech Mono',monospace;letter-spacing:0}
.d1{background:#0a1a0a;color:var(--g);border:1px solid var(--gd)}
.d2{background:#1a1000;color:var(--gold);border:1px solid #5a4000}
.d3{background:#1a0a00;color:var(--or);border:1px solid #5a3000}
.d4{background:#1a0000;color:var(--r);border:1px solid #5a0000}
.lvls{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.lc{background:var(--pb);border:1px solid var(--bd);padding:11px 12px;cursor:pointer;transition:all .2s;border-radius:4px;position:relative}
.lc:hover:not(.locked){border-color:var(--g);box-shadow:0 0 12px #39ff1422;transform:translateY(-2px)}
.lc.locked{opacity:.3;cursor:not-allowed}
.lc.done{border-color:#1a4a1a;background:#080e08}
.lc.done::after{content:'✓';position:absolute;top:6px;right:8px;color:var(--g);font-size:13px}
.ln{font-size:10px;color:var(--dm);font-family:'Orbitron',monospace;margin-bottom:3px}
.lname{font-size:12px;color:var(--g);margin-bottom:4px}
.lcmd{font-family:'VT323',monospace;font-size:16px;color:var(--c);word-break:break-all}
.lxp{font-size:11px;color:var(--gold);margin-top:3px}
/* GAME SCREEN */
#gs{display:none;flex:1;overflow:hidden}
.gl{display:grid;grid-template-columns:305px 1fr;height:100%}
@media(max-width:680px){.gl{grid-template-columns:1fr;grid-template-rows:auto 1fr}}
/* MISSION PANEL */
#mp{background:var(--pb);border-right:1px solid var(--bd);display:flex;flex-direction:column;overflow:hidden}
@media(max-width:680px){#mp{border-right:none;border-bottom:1px solid var(--bd);max-height:220px;overflow-y:auto}}
.mh{padding:10px 14px;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center}
.mw{font-family:'Orbitron',monospace;font-size:10px;letter-spacing:.1em}
.ml{font-size:10px;color:var(--dm)}
.mb{padding:14px;flex:1;overflow-y:auto}
.mt{font-family:'Orbitron',monospace;font-size:14px;font-weight:700;color:var(--g);margin-bottom:10px;line-height:1.3}
.mbr{font-size:11px;color:var(--mm);line-height:1.65;margin-bottom:12px}
.mo{background:#060c06;border:1px solid var(--bd);border-left:3px solid var(--g);padding:9px 11px;margin-bottom:10px;border-radius:0 3px 3px 0}
.mol{font-size:10px;color:var(--dm);letter-spacing:.15em;margin-bottom:3px}
.mot{font-size:11px;color:var(--g)}
.mcw{margin-bottom:10px}
.mcl{font-size:10px;color:var(--dm);letter-spacing:.12em;margin-bottom:4px}
.mct{display:inline-block;background:#000;border:1px solid var(--bd);padding:3px 10px;font-family:'VT323',monospace;font-size:16px;color:var(--c);word-break:break-all;line-height:1.4}
.pd{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.pdot{width:7px;height:7px;border-radius:50%;background:#0a120a;border:1px solid #1a2a1a}
.pdot.done{background:var(--g);border-color:var(--g)}
.pdot.cur{background:var(--gold);border-color:var(--gold)}
.hs{padding:12px 14px;border-top:1px solid var(--bd);flex-shrink:0}
.hb2{width:100%;padding:7px;background:#060e14;border:1px solid #0a2030;color:var(--c);font-family:'Share Tech Mono',monospace;font-size:12px;cursor:pointer;transition:all .2s;border-radius:3px}
.hb2:hover{background:#0a1e30;box-shadow:0 0 8px #00d4ff33}
#hdisp{margin-top:8px;padding:9px;background:#030810;border:1px solid #0a1e2e;font-size:11px;color:var(--c);line-height:1.5;border-radius:3px;display:none}
.hcost{font-size:10px;color:#ff7733;margin-top:3px}
/* STEPS */
.msteps{margin-bottom:10px}
.mstep{display:flex;align-items:flex-start;gap:7px;padding:3px 0;font-size:11px;color:var(--dm);line-height:1.4}
.mstep.done{color:var(--g)}.mstep.cur{color:var(--gold)}
.msi{font-size:12px;flex-shrink:0;margin-top:1px}
/* TERMINAL */
#tp{display:flex;flex-direction:column;background:var(--tbg);position:relative;overflow:hidden}
#tp::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:10;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,65,.012) 2px,rgba(0,255,65,.012) 4px)}
#tp::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:11;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.35) 100%)}
.tbar{display:flex;align-items:center;padding:7px 12px;background:#060606;border-bottom:1px solid #0f0f0f;flex-shrink:0;position:relative;z-index:20}
.tds{display:flex;gap:5px;margin-right:10px}
.td{width:9px;height:9px;border-radius:50%}
.td.r{background:#ff5f57}.td.y{background:#febc2e}.td.g{background:#28c840}
.ttl{font-family:'VT323',monospace;font-size:15px;color:#2a3a2a}
#tout{flex:1;overflow-y:auto;padding:14px;font-family:'VT323',monospace;font-size:20px;line-height:1.4;position:relative;z-index:5;scroll-behavior:smooth}
#tout::-webkit-scrollbar{width:3px}#tout::-webkit-scrollbar-track{background:#000}#tout::-webkit-scrollbar-thumb{background:#1a3a1a}
.ol{margin-bottom:1px;word-break:break-all}
.ol.cmd{color:#39ff14}.ol.cmd::before{content:'$ ';color:var(--dm)}
.ol.res{color:#b8d8b8}.ol.err{color:var(--r)}.ol.sys{color:var(--dm)}
.ol.ok{color:var(--g);text-shadow:var(--gg)}.ol.hint{color:var(--c)}.ol.warn{color:var(--or)}
.inr{display:flex;align-items:center;padding:7px 14px;border-top:1px solid #0a0a0a;background:#000;flex-shrink:0;position:relative;z-index:20}
.prm{font-family:'VT323',monospace;font-size:20px;color:var(--dm);white-space:nowrap;margin-right:4px}
.prm span{color:var(--g)}
#ci{flex:1;background:transparent;border:none;outline:none;color:var(--g);font-family:'VT323',monospace;font-size:20px;caret-color:var(--g)}
#mqb{display:none;padding:5px 7px;background:#070707;border-top:1px solid #0a0a0a;gap:5px;flex-wrap:wrap;position:relative;z-index:20}
@media(max-width:680px){#mqb{display:flex}}
.qk{padding:5px 9px;background:#0f0f0f;border:1px solid #1a1a1a;color:#666;font-family:'Share Tech Mono',monospace;font-size:11px;cursor:pointer;border-radius:3px;transition:all .15s;user-select:none}
.qk:active{background:#0a1a0a;border-color:var(--g);color:var(--g)}
/* COMPLETION */
#cov{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:500;display:none;align-items:center;justify-content:center}
.cbox{text-align:center;padding:36px 32px;border:2px solid var(--g);box-shadow:0 0 50px #39ff1433,inset 0 0 30px #39ff1408;background:#000;max-width:440px;width:92%;animation:gi .5s forwards}
@keyframes gi{0%{transform:skewX(8deg) scale(.88);opacity:0}20%{transform:skewX(-4deg) scale(1.04);opacity:1}45%{transform:skewX(2deg)}65%{transform:skewX(-1deg)}100%{transform:skewX(0) scale(1)}}
.ct{font-family:'Orbitron',monospace;font-size:clamp(18px,5vw,28px);font-weight:900;color:var(--g);text-shadow:var(--gg);margin-bottom:6px;animation:fl .1s 4}
@keyframes fl{0%,100%{opacity:1}50%{opacity:.2}}
.cbdg{font-size:52px;margin:14px 0;animation:bp .5s .3s both}
@keyframes bp{0%{transform:scale(0) rotate(-15deg)}70%{transform:scale(1.2) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.cxp{font-family:'Orbitron',monospace;font-size:26px;color:var(--gold);margin:12px 0}
.cmsg{color:var(--mm);font-size:12px;margin:6px 0;line-height:1.5}
.cnx{color:var(--dm);font-size:11px;margin-bottom:6px}
.cbtn{margin-top:18px;padding:10px 28px;background:transparent;border:2px solid var(--g);color:var(--g);font-family:'Orbitron',monospace;font-size:13px;font-weight:700;letter-spacing:.1em;cursor:pointer;transition:all .2s}
.cbtn:hover{background:var(--g);color:#000;box-shadow:var(--gg)}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#1a3a1a}