:root{
  --bg:#05070d; --panel:#0b1220ee; --panel2:#111c2f;
  --cyan:#35e0e8; --cyan-d:#0e6d78; --amber:#ffb347; --red:#ff5555;
  --green:#7dff8a; --grid:#1d3a52; --txt:#c9e6ee; --dim:#5f7d8c;
  --gold:#ffd166; --purple:#b48cff;
  --font:'Segoe UI',system-ui,sans-serif;
  --mono:'Consolas','Courier New',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}
input,textarea{-webkit-user-select:text;user-select:text;cursor:text}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:var(--font);cursor:default}
canvas#game{position:fixed;inset:0;display:block;image-rendering:pixelated}

.hidden{display:none !important}
.screen{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center}

/* ============ BOOT ============ */
#boot{background:radial-gradient(ellipse at 50% 30%,#0c1730 0%,#05070d 70%);overflow:hidden}
#boot::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:44px 44px;opacity:.13;transform:perspective(340px) rotateX(62deg) translateY(30%);transform-origin:center bottom}
.boot-inner{position:relative;z-index:2;text-align:center;animation:fadeUp 1s ease}
.boot-logo h1{font-size:74px;letter-spacing:16px;font-weight:800;margin:6px 0 -6px;
  background:linear-gradient(180deg,#eafcff,#35e0e8 55%,#0e6d78);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px #35e0e880)}
.boot-logo h2{font-size:26px;letter-spacing:22px;color:var(--amber);text-shadow:0 0 14px #ffb34766;margin-left:16px}
.boot-sub{margin-top:14px;color:var(--dim);letter-spacing:5px;font-size:13px}
.boot-menu{margin-top:44px;display:flex;flex-direction:column;gap:14px;width:300px;margin-left:auto;margin-right:auto}
.boot-btn{position:relative;padding:14px 18px;font-size:16px;letter-spacing:3px;color:var(--cyan);
  background:linear-gradient(90deg,#0e1c30,#0b1420);border:1px solid var(--cyan-d);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  cursor:pointer;transition:.15s;text-transform:uppercase}
.boot-btn:hover:not(:disabled){background:linear-gradient(90deg,#12324a,#0e2135);color:#eafcff;box-shadow:0 0 20px #35e0e844;transform:translateX(4px)}
.boot-btn:disabled{opacity:.35;cursor:not-allowed}
.boot-btn.small{padding:9px 14px;font-size:13px}
.mode-sub{display:block;font-size:10px;color:var(--dim);letter-spacing:1px;margin-top:4px;text-transform:none}

/* 创造物品库 */
#creativeGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
#creativeGrid .slot{aspect-ratio:1}

/* 存档管理 */
#saveList{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto}
.save-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#0c1826;border:1px solid #1d3a52;transition:.12s}
.save-row:hover{border-color:var(--cyan-d);background:#122438}
.save-row .sv-icon{font-size:22px;filter:drop-shadow(0 0 6px #35e0e866)}
.save-row .sv-info{flex:1;min-width:0}
.save-row .sv-name{font-size:14px;color:var(--txt);letter-spacing:1px}
.save-row .sv-meta{font-size:11px;color:var(--dim);font-family:var(--mono);margin-top:3px}
.save-row .sv-meta .cr{color:var(--purple)}
.save-row .sv-btn{font-size:12px;padding:6px 14px;background:#12324a;border:1px solid var(--cyan-d);color:var(--cyan);cursor:pointer;letter-spacing:2px}
.save-row .sv-btn:hover{background:#1a4260;color:#fff}
.save-row .sv-btn.danger{border-color:#5a2430;color:#ff7777;padding:6px 9px}
.save-row .sv-btn.danger:hover{background:var(--red);color:#fff;border-color:var(--red)}
.save-empty{text-align:center;color:var(--dim);padding:26px;font-size:13px;letter-spacing:2px}
.boot-tip{margin-top:34px;color:var(--dim);font-style:italic;font-size:14px;min-height:20px}
.boot-ver{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#2c3f4b;font-size:11px;letter-spacing:3px}
.scanline{position:absolute;left:0;right:0;height:120px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,#35e0e80c,transparent);animation:scan 6s linear infinite}
@keyframes scan{0%{top:-120px}100%{top:100%}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* spinning logo cube */
.logo-cube{width:70px;height:70px;margin:0 auto 30px;position:relative;transform-style:preserve-3d;animation:spin 7s linear infinite}
.lc{position:absolute;width:70px;height:70px;border:2px solid var(--cyan);background:#35e0e814;box-shadow:inset 0 0 18px #35e0e844}
.lc.f{transform:translateZ(35px)}.lc.b{transform:translateZ(-35px)}
.lc.l{transform:rotateY(90deg) translateZ(35px)}.lc.r{transform:rotateY(-90deg) translateZ(35px)}
.lc.t{transform:rotateX(90deg) translateZ(35px);background:#ffb34718;border-color:var(--amber)}
.lc.d{transform:rotateX(-90deg) translateZ(35px)}
@keyframes spin{from{transform:rotateX(-20deg) rotateY(0)}to{transform:rotateX(-20deg) rotateY(360deg)}}

/* ============ LOADING ============ */
#loading{background:#05070d}
.load-box{width:440px;text-align:center}
.load-title{font-size:20px;letter-spacing:4px;color:var(--cyan);margin-bottom:18px}
.load-bar{height:16px;border:1px solid var(--cyan-d);background:#0a1420;clip-path:polygon(6px 0,100% 0,100% 100%,0 100%,0 6px);overflow:hidden}
.load-fill{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--cyan),var(--cyan) 8px,#26b6be 8px,#26b6be 16px);box-shadow:0 0 16px #35e0e8;transition:width .2s}
.load-flavor{margin-top:12px;color:var(--dim);font-family:var(--mono);font-size:13px;letter-spacing:2px}

/* ============ PANELS ============ */
.panel{position:fixed;z-index:150;top:50%;left:50%;transform:translate(-50%,-50%) scale(.96);
  width:min(760px,92vw);max-height:88vh;background:var(--panel);border:1px solid var(--cyan-d);
  backdrop-filter:blur(6px);box-shadow:0 0 0 1px #000,0 20px 60px #000a,inset 0 0 60px #0a1a2a80;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  display:flex;flex-direction:column;animation:pop .18s ease forwards}
.panel.wide{width:min(1040px,95vw)}
@keyframes pop{to{transform:translate(-50%,-50%) scale(1)}}
.panel-head{display:flex;align-items:center;gap:12px;padding:12px 18px;
  background:linear-gradient(90deg,#12283c,#0b1522);border-bottom:1px solid var(--cyan-d);
  font-size:15px;letter-spacing:3px;color:var(--cyan);text-transform:uppercase}
.head-info{margin-left:auto;color:var(--amber);font-size:13px;letter-spacing:1px}
.pclose{margin-left:auto;width:26px;height:26px;background:#1a2b3d;border:1px solid var(--cyan-d);color:var(--cyan);cursor:pointer;font-size:13px}
.pclose:hover{background:var(--red);color:#fff;border-color:var(--red)}
.panel-body{padding:16px;overflow:auto}
.panel-body::-webkit-scrollbar{width:8px}
.panel-body::-webkit-scrollbar-thumb{background:var(--cyan-d)}

/* help */
.help-body{display:flex;gap:20px}
.help-col{flex:1}
.help-col h3{color:var(--amber);letter-spacing:2px;margin-bottom:8px;font-size:14px;border-bottom:1px solid #ffb34733;padding-bottom:4px}
.help-col p{font-size:13px;color:var(--txt);margin:6px 0;line-height:1.5}
.help-col b{color:var(--cyan);font-family:var(--mono)}

/* ============ INVENTORY ============ */
.inv-body{display:flex;gap:18px}
.inv-left{flex:1.3}.inv-right{flex:1;border-left:1px solid #1d3a52;padding-left:16px}
.inv-sec{color:var(--amber);letter-spacing:2px;font-size:12px;margin:4px 0 8px;text-transform:uppercase}
.slot-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-bottom:14px}
.slot{position:relative;aspect-ratio:1;background:#0c1826;border:1px solid #24405a;cursor:pointer;transition:.1s;
  display:flex;align-items:center;justify-content:center}
.slot:hover{border-color:var(--cyan);background:#122438;box-shadow:inset 0 0 12px #35e0e833}
.slot.sel{border-color:var(--amber);box-shadow:0 0 12px #ffb34766,inset 0 0 10px #ffb34733}
.slot canvas,.slot img{width:82%;height:82%;image-rendering:pixelated;pointer-events:none}
.slot .cnt{position:absolute;right:2px;bottom:0;font-size:12px;font-family:var(--mono);color:#fff;text-shadow:1px 1px 2px #000,0 0 3px #000;font-weight:bold}
.inv-hint{font-size:11px;color:var(--dim);margin-top:2px}
.inv-bottom{display:flex;align-items:center;gap:8px;margin-top:4px}
#trashSlot{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;background:#1a0e12;border:1px solid #5a2c33;cursor:pointer;user-select:none;transition:all .12s}
#trashSlot:hover{border-color:var(--red);background:#2a1116;box-shadow:0 0 8px #ff555544}
#trashSlot.flash{background:#5a1c22;border-color:var(--red);box-shadow:0 0 14px #ff5555aa}
#craftTabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.ctab{padding:4px 10px;font-size:11px;background:#12212f;border:1px solid #24405a;color:var(--dim);cursor:pointer;letter-spacing:1px}
.ctab.on{background:#12324a;color:var(--cyan);border-color:var(--cyan-d)}
#craftList{display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow:auto}
.recipe{display:flex;align-items:center;gap:10px;padding:7px 9px;background:#0c1826;border:1px solid #1d3a52;cursor:pointer;transition:.1s}
.recipe:hover{background:#122438;border-color:var(--cyan-d)}
.recipe.locked{opacity:.4;filter:grayscale(1);cursor:not-allowed}
.recipe .ricon{width:34px;height:34px;flex-shrink:0}
.recipe .ricon canvas{width:100%;height:100%;image-rendering:pixelated}
.recipe .rinfo{flex:1;min-width:0}
.recipe .rname{font-size:13px;color:var(--txt)}
.recipe .rcost{font-size:11px;color:var(--dim);font-family:var(--mono);margin-top:2px}
.recipe .rcost .ok{color:var(--green)}.recipe .rcost .no{color:var(--red)}
.recipe .rbtn{font-size:11px;padding:4px 10px;background:#12324a;border:1px solid var(--cyan-d);color:var(--cyan)}

/* ============ MACHINE ============ */
.mach-flow{display:flex;align-items:center;justify-content:center;gap:18px;padding:14px;flex-wrap:wrap}
.mslot{width:60px;height:60px;background:#0c1826;border:1px solid #24405a;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mslot canvas{width:80%;height:80%;image-rendering:pixelated}
.mslot .cnt{position:absolute;right:2px;bottom:0;font-size:12px;color:#fff;text-shadow:1px 1px 2px #000;font-family:var(--mono)}
.mslot .lbl{position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:10px;color:var(--dim)}
.marrow{color:var(--cyan);font-size:22px;animation:pulseArrow 1.2s infinite}
@keyframes pulseArrow{0%,100%{opacity:.4}50%{opacity:1;text-shadow:0 0 10px var(--cyan)}}
.mprog{height:10px;background:#0a1420;border:1px solid #24405a;margin:6px 40px;overflow:hidden}
.mprog div{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--green));box-shadow:0 0 10px #35e0e8}
.mrecipe-pick{display:grid;grid-template-columns:repeat(auto-fill,52px);gap:6px;padding:10px}
.mrp{width:52px;height:52px;background:#0c1826;border:1px solid #24405a;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mrp:hover{border-color:var(--cyan)}
.mrp.on{border-color:var(--amber);box-shadow:0 0 10px #ffb34766}
.mrp canvas{width:80%;height:80%;image-rendering:pixelated}
.mstat{text-align:center;font-size:12px;color:var(--dim);margin:8px}
.mstat .warn{color:var(--red)}
.mfuel{display:flex;align-items:center;gap:8px;justify-content:center;margin:8px;font-size:12px;color:var(--amber)}

/* ============ TECH TREE ============ */
.tech-body{padding:0}
#techCanvasWrap{position:relative;width:100%;height:62vh;overflow:auto;background:
  radial-gradient(circle at 30% 20%,#0d1c30,#070c14);
  background-image:linear-gradient(#12283c55 1px,transparent 1px),linear-gradient(90deg,#12283c55 1px,transparent 1px);
  background-size:40px 40px}
#techLines{position:absolute;top:0;left:0;width:1400px;height:900px;pointer-events:none}
#techNodes{position:absolute;top:0;left:0;width:1400px;height:900px}
.tnode{position:absolute;width:118px;padding:8px;background:#0c1826;border:1px solid #24405a;cursor:pointer;transition:.15s;text-align:center}
.tnode:hover{border-color:var(--cyan);box-shadow:0 0 16px #35e0e844;z-index:5}
.tnode.done{border-color:var(--green);background:#0d2016}
.tnode.avail{border-color:var(--amber);box-shadow:0 0 12px #ffb34733}
.tnode.locked{opacity:.5;filter:grayscale(.6)}
.tnode .ticon{width:38px;height:38px;margin:0 auto 4px}
.tnode .ticon canvas{width:100%;height:100%;image-rendering:pixelated}
.tnode .tname{font-size:11px;color:var(--txt);line-height:1.2;min-height:26px}
.tnode .tcost{font-size:10px;color:var(--amber);font-family:var(--mono);margin-top:3px}
.tnode .tdone{color:var(--green);font-size:10px}

/* ============ TRADE ============ */
.trade-body{display:flex;gap:18px}
.trade-col{flex:1}
.trade-col h3{color:var(--amber);letter-spacing:2px;font-size:13px;margin-bottom:10px;border-bottom:1px solid #ffb34733;padding-bottom:5px}
.trade-row{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#0c1826;border:1px solid #1d3a52;margin-bottom:5px}
.trade-row .ricon{width:30px;height:30px}.trade-row .ricon canvas{width:100%;height:100%;image-rendering:pixelated}
.trade-row .tnm{flex:1;font-size:12px}
.trade-row .prc{font-family:var(--mono);font-size:12px;color:var(--gold);width:54px;text-align:right}
.trade-row .tqty{font-size:11px;color:var(--dim);width:44px;text-align:right}
.tbtn{font-size:11px;padding:3px 8px;background:#12324a;border:1px solid var(--cyan-d);color:var(--cyan);cursor:pointer}
.tbtn:hover{background:#12324a;color:#fff}
.tbtn.sell{border-color:var(--amber);color:var(--amber)}
.talkbox{font-size:12px;color:var(--txt);font-style:italic;line-height:1.5;background:#0a1420;padding:10px;border-left:2px solid var(--cyan);min-height:60px}

/* ============ PAUSE ============ */
.pause-body{display:flex;flex-direction:column;gap:12px;width:280px}
.pause-vol{margin-top:10px;font-size:12px;color:var(--dim);display:flex;align-items:center;gap:8px}
.pause-vol input{flex:1}

/* ============ SETTINGS ============ */
.settings-body{display:flex;flex-direction:column;gap:14px;width:360px}
.set-row{display:flex;align-items:center;gap:10px;font-size:12px}
.set-label{width:96px;color:var(--dim);flex-shrink:0}
.set-row input[type=range]{flex:1}
.set-val{width:110px;text-align:right;color:var(--cyan);font-size:11px}
.set-opts{display:flex;gap:6px;flex:1}
.set-opts button{flex:1;font-size:12px;padding:6px 0;background:#0a1420;border:1px solid var(--cyan-d);color:var(--dim);cursor:pointer;font-family:var(--font)}
.set-opts button:hover{color:var(--cyan)}
.set-opts button.on{background:#12324a;color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 8px #35e0e844}
.set-hint{font-size:11px;color:var(--dim);line-height:1.5;border-left:2px solid var(--cyan-d);padding-left:8px}

/* ============ NET ============ */
.net-body{display:flex;flex-direction:column;gap:10px;width:420px}
.net-tabs{display:flex;gap:6px}
.net-tabs button{flex:1;font-size:12px;padding:6px 0;background:#0a1420;border:1px solid var(--cyan-d);color:var(--dim);cursor:pointer;font-family:var(--font)}
.net-tabs button.on{background:#12324a;color:var(--cyan);border-color:var(--cyan)}
.net-step{font-size:12px;color:var(--txt);margin-top:4px;line-height:1.5}
.net-code{width:100%;height:56px;background:#060c14;border:1px solid var(--cyan-d);color:#8fb8c9;font:10px Consolas,monospace;padding:6px;resize:none;box-sizing:border-box}
.net-addr{flex:1;background:#060c14;border:1px solid var(--cyan-d);color:var(--txt);font:13px Consolas,monospace;padding:6px 8px}
.net-btns{display:flex;gap:8px}
.net-btns .boot-btn{flex:1}
.net-hint{font-size:11px;color:var(--dim);line-height:1.5;border-left:2px solid var(--cyan-d);padding-left:8px}

/* ============ HUD ============ */
#hud{position:fixed;inset:0;z-index:40;pointer-events:none;font-family:var(--font)}
#crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:22px;height:22px}
#crosshair::before,#crosshair::after{content:'';position:absolute;background:#eafcffcc;box-shadow:0 0 4px #35e0e8}
#crosshair::before{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
#crosshair::after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}
#crosshair span{position:absolute;inset:6px;border:1px solid #35e0e888;border-radius:50%}

#vitals{position:absolute;top:16px;left:16px;width:230px}
.vital-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.vital-row.small{margin-bottom:3px}
.vlabel{font-size:10px;letter-spacing:2px;color:var(--dim);width:32px}
.segbar{flex:1;height:12px;display:flex;gap:2px}
.segbar i{flex:1;background:#12324a;box-shadow:inset 0 0 3px #000;display:block;transition:.2s}
.segbar i.on{background:linear-gradient(90deg,#35e0e8,#8ff);box-shadow:0 0 6px #35e0e8}
.segbar.hp i.on{background:linear-gradient(90deg,#ff6b6b,#ffb3b3);box-shadow:0 0 6px #ff5555}
.thinbar{flex:1;height:6px;background:#12324a;overflow:hidden}
.thinbar>div{height:100%;transition:.2s}
#barO2{background:linear-gradient(90deg,#5bc0ff,#c9f0ff);box-shadow:0 0 6px #5bc0ff}
#barHaz{background:linear-gradient(90deg,#ffb347,#ffe0a0);box-shadow:0 0 6px #ffb347}
#barLaser{background:linear-gradient(90deg,#ff6a4d,#ffc2b3);box-shadow:0 0 6px #ff6a4d}

/* 世界标记（飞船/矿物） */
#markers{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.wmark{position:absolute;transform:translate(-50%,-100%);text-align:center;font-family:var(--mono);
  font-size:11px;letter-spacing:1px;white-space:nowrap;text-shadow:0 1px 3px #000}
.wmark .wm-ic{display:block;font-size:16px;line-height:1;filter:drop-shadow(0 0 6px currentColor);animation:markPulse 2s infinite}
.wmark .wm-tx{display:block;margin-top:2px;background:#0a142099;padding:1px 6px;border-radius:2px}
.wmark.ship{color:var(--cyan)}
.wmark.mate{color:var(--green)}
.wmark.beacon{color:var(--gold)}
.wmark.beacon .wm-ic{animation:none}
.wmark.edge .wm-tx{display:none}
@keyframes markPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.25);opacity:1}}

/* 充能面板 */
#chargeList{display:flex;flex-direction:column;gap:5px}
.charge-row{display:flex;align-items:center;gap:8px;padding:5px 8px;background:#0c1826;border:1px solid #1d3a52}
.charge-row canvas{width:22px;height:22px;image-rendering:pixelated}
.charge-row .ch-name{font-size:11px;color:var(--txt);width:58px}
.charge-row .ch-bar{flex:1;height:7px;background:#12324a;overflow:hidden}
.charge-row .ch-bar div{height:100%;background:linear-gradient(90deg,var(--cyan),#8ff);transition:.2s}
.charge-row .ch-btn{font-size:10px;padding:3px 8px;background:#12324a;border:1px solid var(--cyan-d);color:var(--cyan);cursor:pointer;white-space:nowrap}
.charge-row .ch-btn:disabled{opacity:.35;cursor:not-allowed}
.charge-row .ch-btn:hover:not(:disabled){background:#1a4260;color:#fff}
.hazicon{font-size:12px;width:16px}
#envInfo{margin-top:8px;font-size:11px;color:var(--dim);font-family:var(--mono);line-height:1.6;
  background:#0a142088;padding:6px 8px;border-left:2px solid var(--cyan-d)}

#quests{position:absolute;top:16px;right:16px;width:250px;background:#0a1420cc;border:1px solid var(--cyan-d);
  border-right:3px solid var(--cyan);padding:8px 10px;clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px))}
.q-head{font-size:11px;letter-spacing:2px;color:var(--cyan);margin-bottom:6px}
.q-item{font-size:12px;color:var(--txt);margin:5px 0;display:flex;gap:6px;line-height:1.35}
.q-item .qbox{color:var(--dim)}
.q-item.done{color:var(--green);text-decoration:line-through;opacity:.7}
.q-item.done .qbox{color:var(--green)}
.q-item .qp{color:var(--amber);font-family:var(--mono);font-size:11px}
.q-guide{margin-top:8px;padding-top:6px;border-top:1px dashed #1d3a52;font-size:11px;color:var(--dim);line-height:1.6}
.q-guide b{color:var(--cyan);font-family:var(--mono)}

#pickups{position:absolute;bottom:130px;left:20px;display:flex;flex-direction:column-reverse;gap:4px}
.pickup{display:flex;align-items:center;gap:8px;background:#0a1420cc;border-left:2px solid var(--cyan);
  padding:4px 10px 4px 6px;font-size:13px;animation:pickIn .3s ease;color:var(--txt)}
.pickup canvas{width:22px;height:22px;image-rendering:pixelated}
.pickup .pn{color:var(--gold);font-family:var(--mono)}
@keyframes pickIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}

#interactHint{position:absolute;bottom:150px;left:50%;transform:translateX(-50%);
  background:#0a1420dd;border:1px solid var(--cyan-d);padding:8px 16px;font-size:14px;color:var(--txt);letter-spacing:1px}
#interactHint b{display:inline-block;min-width:22px;text-align:center;background:var(--cyan);color:#04121a;
  padding:1px 6px;border-radius:3px;font-family:var(--mono);margin-right:6px;font-weight:bold}

#bigMsg{position:absolute;top:32%;left:50%;transform:translateX(-50%);text-align:center;
  font-size:30px;letter-spacing:6px;color:var(--cyan);text-shadow:0 0 20px #35e0e8;animation:bigIn .5s ease}
#bigMsg small{display:block;font-size:15px;letter-spacing:3px;color:var(--amber);margin-top:8px}
@keyframes bigIn{from{opacity:0;transform:translate(-50%,-20px) scale(.9)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

#hotbarWrap{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
#jetpackBar{width:280px;height:4px;background:#12324a;overflow:hidden;opacity:0;transition:.3s}
#jetpackBar.show{opacity:1}
#jetFill{height:100%;width:100%;background:linear-gradient(90deg,#ffb347,#ffe0a0);box-shadow:0 0 8px #ffb347}
#hotbar{display:flex;gap:5px;pointer-events:auto}
#itemLabel{min-height:20px;font-size:15px;letter-spacing:2px;color:#eafcff;text-shadow:0 0 8px #35e0e8,0 1px 3px #000;
  opacity:0;transition:opacity .35s;pointer-events:none;text-align:center}
#itemLabel.show{opacity:1;transition:opacity .08s}
.hslot.laser{border-color:#c9641a55;background:#160f0acc}
.hslot.laser.sel{border-color:var(--amber);box-shadow:0 0 14px #ffb34788;transform:translateY(-4px)}
.hslot.laser canvas{width:82%;height:82%;image-rendering:pixelated;pointer-events:none}
.hslot{position:relative;width:54px;height:54px;background:#0a1420cc;border:1px solid #24405a;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.1s}
.hslot:hover{border-color:var(--cyan-d)}
.hslot.sel{border-color:var(--amber);box-shadow:0 0 14px #ffb34766;transform:translateY(-4px)}
.hslot canvas{width:80%;height:80%;image-rendering:pixelated;pointer-events:none}
.hslot .cnt{position:absolute;right:3px;bottom:1px;font-size:12px;color:#fff;text-shadow:1px 1px 2px #000,0 0 3px #000;font-family:var(--mono);font-weight:bold}
.hslot .num{position:absolute;left:3px;top:1px;font-size:10px;color:var(--dim);font-family:var(--mono)}
#powerInfo{position:absolute;right:-140px;bottom:0;font-size:12px;color:var(--amber);display:flex;align-items:center;gap:4px;font-family:var(--mono)}
.pw-ic{filter:drop-shadow(0 0 4px #ffb347)}

#spaceHud{position:absolute;inset:0}
#speedo{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);text-align:center;color:var(--cyan)}
.sp-label{font-size:10px;letter-spacing:3px;color:var(--dim)}
#speedVal{font-size:38px;font-family:var(--mono);text-shadow:0 0 14px #35e0e8;line-height:1}
.sp-unit{font-size:11px;color:var(--dim)}
#pulseHint{position:absolute;bottom:40px;right:60px;font-size:13px;color:var(--amber);font-family:var(--mono)}
#targetInfo{position:absolute;top:70px;left:50%;transform:translateX(-50%);text-align:center;
  border:1px solid var(--cyan-d);padding:6px 20px;background:#0a142088;color:var(--cyan);font-size:13px}
#tritiumInfo{position:absolute;bottom:40px;left:60px;color:var(--cyan);font-family:var(--mono);font-size:14px}

#creditHud{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-family:var(--mono);
  font-size:16px;color:var(--gold);text-shadow:0 0 10px #ffd16688;background:#0a142088;padding:4px 18px;
  border:1px solid #ffd16644;border-radius:2px}
#clockHud{position:absolute;bottom:16px;right:16px;font-family:var(--mono);font-size:12px;color:var(--dim);text-align:right}

/* fader / effects */
#fader{position:fixed;inset:0;z-index:90;background:#000;opacity:0;pointer-events:none;transition:opacity .6s}
#fader.show{opacity:1}
/* 大气再入摩擦光效 */
#reentryFx{position:fixed;inset:0;z-index:45;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(ellipse at 50% 120%,#ff8c2a66 0%,#ff5a1a33 30%,transparent 60%),
             radial-gradient(ellipse at 50% -20%,#ff6a2a44 0%,transparent 45%),
             radial-gradient(ellipse at center,transparent 55%,#ff7a2a55 100%)}
#reentryFx.show{opacity:1;animation:reentryFlicker .12s infinite}
@keyframes reentryFlicker{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
#atmoTint{position:fixed;inset:0;z-index:44;pointer-events:none;opacity:0}

/* ============ RPG 对话框 ============ */
#dialogBox{position:fixed;left:50%;bottom:14vh;transform:translateX(-50%);z-index:60;
  width:min(680px,84vw);background:#060d16f2;border:1px solid var(--cyan-d);border-radius:6px;
  padding:14px 18px 12px;box-shadow:0 8px 40px #000c,0 0 24px #35e0e822;cursor:pointer;
  animation:dlgIn .18s ease}
@keyframes dlgIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%)}}
#dialogBox.hidden{display:none}
.dlg-name{display:inline-block;font-family:var(--font);font-size:13px;color:var(--amber);
  border:1px solid #c9963f66;background:#1a140a;padding:3px 10px;border-radius:3px;
  margin-top:-26px;margin-bottom:8px;box-shadow:0 2px 10px #000a}
.dlg-text{font-size:15px;line-height:1.8;color:#dff4f7;min-height:54px;text-shadow:0 1px 3px #000}
.dlg-next{text-align:right;font-size:11px;font-family:var(--mono);color:var(--dim);margin-top:6px;
  animation:dlgBlink 1s infinite}
@keyframes dlgBlink{0%,100%{opacity:.9}50%{opacity:.3}}
#vignette{position:fixed;inset:0;z-index:39;pointer-events:none;box-shadow:inset 0 0 200px #000a}
#damageFlash{position:fixed;inset:0;z-index:38;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,#ff000000 70%);transition:.1s}
#damageFlash.hit{background:radial-gradient(ellipse at center,transparent 30%,#ff0000aa 90%)}

#tooltip{position:fixed;z-index:200;background:#060d16f0;border:1px solid var(--cyan-d);padding:8px 10px;
  font-size:12px;max-width:240px;pointer-events:none;line-height:1.5}
#tooltip .tt-name{color:var(--cyan);font-size:13px;margin-bottom:3px}
#tooltip .tt-cat{color:var(--amber);font-size:10px;letter-spacing:1px;text-transform:uppercase}
#tooltip .tt-desc{color:var(--dim);margin-top:4px;font-style:italic}
#dragGhost{position:fixed;z-index:210;width:44px;height:44px;pointer-events:none;opacity:.85}
#dragGhost canvas{width:100%;height:100%;image-rendering:pixelated}

.flash{animation:flashk .4s}
@keyframes flashk{0%,100%{filter:none}50%{filter:brightness(2.2)}}

/* ============ 星球地图 ============ */
.map-body{display:flex;gap:12px;padding:12px}
#mapView{flex:1.6;min-width:0;position:relative}
#mapCanvas{width:100%;display:block;border:1px solid var(--cyan-d);background:#04080c;border-radius:4px;cursor:grab}
#mapCanvas:active{cursor:grabbing}
#mapTip{position:absolute;z-index:5;pointer-events:none;background:#060d16f0;border:1px solid var(--cyan);
  color:#dff4f7;font-size:12px;font-family:var(--font);padding:4px 9px;border-radius:3px;white-space:nowrap;
  box-shadow:0 2px 12px #000a}
#mapTip.hidden{display:none}
#mapSide{flex:1;display:flex;flex-direction:column;gap:8px;min-width:220px}
.map-hint{font-size:11px;font-family:var(--mono);color:var(--dim)}
.map-sec{font-size:12px;color:var(--cyan);border-bottom:1px solid var(--cyan-d);padding-bottom:4px}
#mapAddForm{display:flex;flex-direction:column;gap:6px;background:#0a1420;border:1px solid var(--cyan-d);padding:8px;border-radius:4px}
#mapAddForm.hidden{display:none}
.map-form-title{font-size:11px;font-family:var(--mono);color:var(--amber)}
#mapMarkName{background:#060d16;border:1px solid var(--cyan-d);color:#dff4f7;padding:6px 8px;font-family:var(--font);font-size:12px;outline:none}
#mapMarkName:focus{border-color:var(--cyan)}
.map-scope{display:flex;gap:6px}
.map-scope button{flex:1;font-size:11px;padding:5px 0;background:#0a1420;border:1px solid var(--cyan-d);color:var(--dim);cursor:pointer;font-family:var(--font)}
.map-scope button.on{background:#12324a;color:var(--cyan);border-color:var(--cyan)}
#mapMarkList{flex:1;overflow-y:auto;max-height:26vh;display:flex;flex-direction:column;gap:4px}
.map-mark-row{display:flex;align-items:center;gap:6px;background:#0a1420;border:1px solid #1a2f3f;padding:5px 8px;border-radius:3px;font-size:12px}
.map-mark-row .mm-name{flex:1;color:#dff4f7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-mark-row .mm-pos{font-family:var(--mono);font-size:10px;color:var(--dim)}
.map-mark-row button{background:#0d1c2a;border:1px solid var(--cyan-d);color:var(--dim);font-size:10px;padding:3px 6px;cursor:pointer;font-family:var(--font)}
.map-mark-row button:hover{color:var(--cyan);border-color:var(--cyan)}
.map-mark-row .mm-del:hover{color:#ff6a5e;border-color:#ff6a5e}
.map-empty{font-size:11px;color:var(--dim);text-align:center;padding:10px 0}
.map-legend2{font-size:10px;font-family:var(--mono);color:var(--dim);line-height:1.7}

/* ============ 星系地图（NMS 高级星图：全屏沉浸布局） ============ */
#galaxyPanel{width:100vw;max-width:100vw;height:100vh;max-height:100vh;top:0;left:0;
  transform:none;animation:none;clip-path:none;background:#04060c}
#galaxyPanel .panel-body.galaxy-body{position:relative;display:block;padding:0;overflow:hidden;flex:1}
#galMap{position:absolute;inset:0;height:auto;flex:none;border:none;
  background:radial-gradient(ellipse at 42% 38%,#0d1830 0%,#04060c 78%)}
#galMap canvas{position:absolute;inset:0;display:block}
.g3d-label{position:absolute;transform:translate(-50%,6px);pointer-events:none;white-space:nowrap;
  font-size:11px;font-family:var(--mono);color:var(--dim);text-shadow:0 1px 4px #000;z-index:2}
.g3d-label.cur{color:var(--cyan)}
.g3d-label.home{color:#b48cff}
.g3d-label.sel{color:var(--amber)}
#galMap::before{content:'';position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:radial-gradient(#ffffff22 1px,transparent 1px),radial-gradient(#ffffff11 1px,transparent 1px);
  background-size:60px 60px,23px 23px;background-position:0 0,11px 7px}
#galMap::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px);background-size:100% 3px;
  box-shadow:inset 0 0 140px rgba(0,0,0,.75)}
#galTopHud{position:absolute;top:12px;left:16px;z-index:5;display:flex;flex-direction:column;gap:10px;pointer-events:none}
#galRegion{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:1px;line-height:1.8;text-shadow:0 1px 4px #000}
#galRegion b{color:var(--cyan);font-size:15px;letter-spacing:3px;font-weight:normal;text-shadow:0 0 10px #35e0e866}
#galModes{display:flex;gap:6px;flex-wrap:wrap;pointer-events:auto}
.gal-mode{padding:4px 12px;font-size:11px;font-family:var(--mono);letter-spacing:1px;cursor:pointer;
  background:rgba(10,22,36,.78);border:1px solid #1d3a52;color:var(--dim);transition:.12s;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.gal-mode:hover{color:#cfeaf2;border-color:var(--cyan-d)}
.gal-mode.on{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 10px #35e0e833,inset 0 0 10px #35e0e81a}
#galLegend{position:absolute;left:16px;bottom:12px;z-index:5;pointer-events:none;
  font-size:10px;font-family:var(--mono);color:var(--dim);line-height:1.9;text-shadow:0 1px 3px #000}
#galLegend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
#galCtrl{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:5;pointer-events:none;
  font-size:10px;font-family:var(--mono);color:var(--dim);letter-spacing:1px;text-shadow:0 1px 3px #000;
  padding:5px 14px;background:rgba(6,12,20,.6);border:1px solid #14283a}
#galTip{position:absolute;z-index:6;pointer-events:none;transform:translate(16px,12px);white-space:nowrap;
  padding:6px 10px;background:rgba(6,14,24,.92);border:1px solid var(--cyan-d);border-left:3px solid var(--cyan);
  font-size:11px;font-family:var(--mono);color:#cfeaf2}
#galTip .tclass{color:var(--amber)}
#galInfo{position:absolute;top:14px;right:14px;bottom:14px;width:min(360px,34vw);max-height:none;z-index:5;overflow:auto;
  flex:none;min-width:0;padding:16px;backdrop-filter:blur(5px);
  background:linear-gradient(165deg,rgba(7,15,26,.9),rgba(9,19,32,.84));border:1px solid var(--cyan-d);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
#galInfo::-webkit-scrollbar{width:6px}
#galInfo::-webkit-scrollbar-thumb{background:var(--cyan-d)}
.gal-detail h3{color:var(--amber);letter-spacing:2px;font-size:16px;margin-bottom:4px}
.gal-detail .gd-seed{font-size:10px;color:#2c3f4b;font-family:var(--mono);margin-bottom:10px}
.gd-visited{display:inline-block;margin-left:8px;padding:1px 8px;font-size:10px;letter-spacing:1px;
  border:1px solid #3fae5a;color:#7dff8a;vertical-align:2px}
.gd-meta{margin:10px 0 12px;padding:6px 0;border-top:1px solid #16324a;border-bottom:1px solid #16324a}
.gd-row{display:flex;justify-content:space-between;gap:10px;padding:4px 2px;font-size:12px;font-family:var(--mono)}
.gd-row .lb{color:var(--dim);flex-shrink:0}
.gd-row b{color:#cfeaf2;font-weight:normal;text-align:right}
.gal-planet{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#0c1826cc;border:1px solid #1d3a52;margin-bottom:5px;font-size:12px}
.gal-planet .gp-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}
.gal-planet .gp-biome{margin-left:auto;color:var(--dim);font-size:11px}
.gal-warp-btn{width:100%;margin-top:12px;padding:12px;font-size:14px;letter-spacing:3px;
  background:linear-gradient(90deg,#2d1b4d,#1a0f2e);border:1px solid var(--purple);color:var(--purple);cursor:pointer;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:.15s}
.gal-warp-btn:hover:not(:disabled){background:linear-gradient(90deg,#3d2566,#241540);color:#e0d0ff;box-shadow:0 0 18px #b48cff44}
.gal-warp-btn:disabled{opacity:.35;cursor:not-allowed}

/* ============ NMS 风格背包界面（覆盖层：面板/格子/徽章/飞船栏）============ */
#invPanel{background:linear-gradient(160deg,rgba(8,14,22,.96),rgba(10,20,30,.94));
  border:1px solid rgba(255,255,255,.22);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 24px 80px rgba(0,0,0,.7);
  backdrop-filter:blur(6px)}
#invPanel .panel-head{background:linear-gradient(90deg,rgba(255,255,255,.10),transparent 65%);
  border-bottom:1px solid rgba(255,255,255,.18);text-transform:uppercase;letter-spacing:.18em}
#invPanel .panel-head::before{content:'';display:inline-block;width:10px;height:22px;background:#ffb347;
  margin-right:10px;clip-path:polygon(0 0,100% 12%,100% 100%,0 88%)}
#invPanel .slot-grid{gap:8px}
#invPanel .slot{background:linear-gradient(145deg,rgba(30,46,60,.85),rgba(14,24,34,.9));
  border:1px solid rgba(255,255,255,.16);border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
#invPanel .slot:hover{border-color:#fff;background:linear-gradient(145deg,rgba(64,92,112,.9),rgba(24,40,54,.95));
  box-shadow:0 0 14px rgba(255,255,255,.28),inset 0 0 14px rgba(53,224,232,.18);transform:scale(1.05);z-index:2}
#invPanel .slot.sel{border-color:#ffb347;box-shadow:0 0 16px #ffb34788,inset 0 0 12px #ffb34733}
#invPanel .slot .cnt{right:4px;bottom:2px;font-size:12px;color:#e8f6ff;text-shadow:0 1px 3px #000,0 0 6px #35e0e866}
#shipSect{margin-top:14px;padding:12px;border:1px solid rgba(255,255,255,.18);border-radius:4px;
  background:linear-gradient(160deg,rgba(16,26,38,.85),rgba(8,16,24,.9))}
#shipSect h3{margin:0 0 6px;text-transform:uppercase;letter-spacing:.14em;font-size:14px}
#shipSect h3::before{content:'';display:inline-block;width:8px;height:16px;background:#35e0e8;
  margin-right:8px;clip-path:polygon(0 0,100% 12%,100% 100%,0 88%)}
#shipSect .slot-grid{grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:0}
#shipSect .slot{aspect-ratio:1;background:linear-gradient(145deg,rgba(24,40,52,.85),rgba(10,20,30,.9));
  border:1px solid rgba(53,224,232,.35);border-radius:3px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:11px;color:#cfe8f0;text-align:center;padding:2px}
#shipSect .slot:hover{border-color:#35e0e8;box-shadow:0 0 12px rgba(53,224,232,.4);transform:scale(1.05)}
#shipSect .slot .num{position:absolute;right:4px;bottom:2px;font-size:12px;color:#ffd94d;text-shadow:0 1px 3px #000}
#shipSect .slot small{overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.15}
/* ---- 背包分页（NMS 双页签 + 座驾全息预览）---- */
#invTabs{display:flex;gap:6px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:0}
.invtab{appearance:none;border:1px solid rgba(255,255,255,.2);border-bottom:none;background:rgba(16,28,40,.7);
  color:#9ab8c4;font:inherit;font-size:13px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  padding:9px 22px;clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);transition:.15s}
.invtab:hover{color:#fff;background:rgba(30,50,66,.85)}
.invtab.on{color:#0a1016;background:linear-gradient(180deg,#ffb347,#e89a30);border-color:#ffb347;
  font-weight:bold;box-shadow:0 -2px 14px #ffb34755}
#invShipTab.hidden,#invSuitTab.hidden{display:none}
#shipPrevWrap{position:relative;margin-bottom:10px}
#shipPrevCanvas{width:100%;height:auto;display:block;border:1px solid rgba(53,224,232,.35);border-radius:4px;
  background:radial-gradient(ellipse at 50% 68%,rgba(24,60,72,.85) 0%,rgba(6,12,20,.95) 70%),
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(53,224,232,.04) 5px 6px)}
#shipPrevWrap::after{content:'HOLOGRAPHIC SCAN · 全息投影';position:absolute;right:10px;top:8px;
  font-size:10px;letter-spacing:.22em;color:rgba(53,224,232,.6);font-family:monospace;pointer-events:none}
/* 敌舰出屏指示箭头（NMS 式屏缘方位标） */
.enemyArrow{position:fixed;z-index:80;color:#ff5a4a;font-size:26px;pointer-events:none;
  text-shadow:0 0 10px #ff5a4acc,0 0 22px #ff5a4a66,0 1px 3px #000;
  animation:eaPulse .9s ease-in-out infinite alternate;user-select:none}
@keyframes eaPulse{from{opacity:.55}to{opacity:1}}
/* 曲速目标锁定标记：方框 + 名称/距离；出屏时紫色屏缘箭头 */
.warpBox{position:fixed;z-index:78;width:56px;height:56px;transform:translate(-50%,-50%);pointer-events:none;overflow:visible;clip-path:unset;
  border:1.5px solid rgba(180,140,255,.9);box-shadow:0 0 14px rgba(180,140,255,.5),inset 0 0 10px rgba(180,140,255,.18);
  clip-path:polygon(0 0,18px 0,18px 2px,2px 2px,2px 18px,0 18px, 0 0,
    100% 0,100% 18px,calc(100% - 2px) 18px,calc(100% - 2px) 2px,calc(100% - 18px) 2px,calc(100% - 18px) 0,
    100% 0,100% 100%,calc(100% - 18px) 100%,calc(100% - 18px) calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) calc(100% - 18px),100% calc(100% - 18px),
    100% 100%,0 100%,0 calc(100% - 18px),2px calc(100% - 18px),2px calc(100% - 2px),18px calc(100% - 2px),18px 100%,0 100%)}
.warpAim{position:fixed;left:50%;top:50%;z-index:79;transform:translate(-50%,26px);pointer-events:none;white-space:nowrap;
  font-size:12px;color:#c9a8ff;text-shadow:0 1px 3px #000,0 0 8px rgba(180,140,255,.6);font-family:var(--mono,monospace)}
.warpArrow{color:#b58aff;text-shadow:0 0 10px #b58affcc,0 0 22px #b58aff66,0 1px 3px #000}