/* 星穹拓荒 Stellar Frontier — 全息HUD风格 (深空#0B1026 / 星云紫#7B5EA7 / 能量青#35E0D6) */
:root{
  --space:#0B1026; --purple:#7B5EA7; --cyan:#35E0D6; --orange:#FF8A3D; --red:#E8465A; --green:#7DD871;
  --glass:rgba(16,22,52,.72); --glass2:rgba(20,28,64,.55); --line:rgba(53,224,214,.28);
  --txt:#DDE6FF; --dim:#8A97C7; --fs:14px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:var(--space);color:var(--txt);
  font-family:"Source Han Sans SC","Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif;font-size:var(--fs)}
body.fs1{--fs:16px} body.fs2{--fs:18px}
canvas#game-canvas{position:fixed;inset:0;display:block;touch-action:none;cursor:crosshair}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
b{font-weight:700}

/* ---------- 通用 ---------- */
.screen{position:fixed;inset:0;z-index:30}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:12px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 24px rgba(53,224,214,.08), inset 0 0 40px rgba(53,224,214,.03)}
.btn{display:block;width:100%;padding:13px 18px;margin:8px 0;border:1px solid var(--line);border-radius:10px;
  background:rgba(53,224,214,.06);color:var(--txt);font-size:16px;text-align:left;transition:.15s;position:relative}
.btn:hover:not(:disabled){background:rgba(53,224,214,.16);border-color:var(--cyan);box-shadow:0 0 14px rgba(53,224,214,.25)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-primary{border-color:rgba(53,224,214,.6);background:linear-gradient(90deg,rgba(53,224,214,.18),rgba(123,94,167,.22));
  text-align:center;font-size:18px;font-weight:700;letter-spacing:2px}
.btn-note{display:block;font-size:12px;color:var(--dim);margin-top:3px;letter-spacing:0;font-weight:400}
.btn-small{width:auto;display:inline-block;padding:9px 16px;font-size:14px;text-align:center}
.menu-row{display:flex;gap:10px;margin-top:14px}
.menu-row .btn-small{flex:1;white-space:nowrap;padding:9px 8px;font-size:13px}
.dim{color:var(--dim)}

/* ---------- 主菜单 ---------- */
#screen-menu,#screen-sandbox{background:radial-gradient(ellipse at 50% 120%,#1a1140 0%,var(--space) 60%)}
#menu-canvas,#menu-canvas2{position:absolute;inset:0;width:100%;height:100%}
.menu-inner{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;z-index:2}
.menu-inner.narrow{align-items:stretch;max-width:460px;margin:0 auto}
.menu-title-wrap{text-align:center;margin-bottom:34px;animation:fadeDown .8s}
.menu-sub{letter-spacing:10px;color:var(--cyan);font-size:13px;opacity:.85}
.menu-title{font-size:64px;font-weight:900;letter-spacing:14px;text-indent:14px;
  background:linear-gradient(180deg,#fff 20%,var(--cyan) 60%,var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(53,224,214,.35);margin:6px 0}
.menu-slogan{color:var(--dim);letter-spacing:6px;font-size:14px}
.menu-buttons{width:340px;max-width:92vw;animation:fadeUp .8s}
.menu-footer{position:absolute;bottom:16px;color:var(--dim);font-size:13px;letter-spacing:1px}
.screen-title{font-size:26px;letter-spacing:6px;margin-bottom:18px;color:#fff;text-shadow:0 0 18px rgba(53,224,214,.4)}
.form-row{margin:14px 0;display:flex;flex-direction:column;gap:6px}
.form-row label{color:var(--dim);font-size:13px}
.form-row input[type=text]{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--txt);font-size:15px;outline:none}
.form-row input[type=range]{width:100%;accent-color:var(--cyan)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1}}

/* ---------- 星图 ---------- */
#screen-galaxy{background:var(--space)}
#galaxy-canvas{position:absolute;inset:0;width:100%;height:100%}
.galaxy-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;padding:12px 16px;gap:14px;z-index:2}
.galaxy-station{font-size:18px;letter-spacing:3px;color:#fff}
.galaxy-seed{margin-left:auto;color:var(--dim);font-size:12px}
.galaxy-panel{position:absolute;right:16px;top:64px;bottom:16px;width:300px;max-width:44vw;padding:16px;overflow-y:auto;z-index:2}
.panel-title{font-size:18px;font-weight:700;letter-spacing:1px}
.planet-type{color:var(--cyan);font-size:13px;margin:2px 0 10px}
.radar-wrap{display:flex;justify-content:center;margin-bottom:6px}
.env-list{margin:8px 0 12px}
.env-item{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:12px}
.env-item span{width:56px;color:var(--dim)}
.env-bar{flex:1;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.env-bar i{display:block;height:100%;border-radius:3px}
.env-val{width:26px;text-align:right}
.goal-box{border:1px solid rgba(123,94,167,.5);border-radius:10px;padding:10px 12px;margin-bottom:12px;background:rgba(123,94,167,.12)}
.goal-title{color:var(--purple);font-size:12px;letter-spacing:2px;margin-bottom:4px}
.goal-desc{font-size:13px;line-height:1.5}
.scan-hint{margin-top:10px;font-size:11px;color:var(--dim);text-align:center}
.site-cards{display:flex;gap:12px;margin:16px 0;flex-wrap:wrap;justify-content:center}
.site-card{flex:1;min-width:200px;max-width:260px;border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--glass2);transition:.15s;cursor:pointer}
.site-card:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 6px 20px rgba(53,224,214,.2)}
.site-card h4{margin-bottom:8px;color:var(--cyan)}
.site-card ul{list-style:none;font-size:12px;color:var(--dim);line-height:1.9}

/* ---------- 档案 ---------- */
.archive-inner{height:100%;max-width:860px;margin:0 auto;padding:20px;display:flex;flex-direction:column}
.archive-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.archive-stats{color:var(--dim);font-size:13px;flex:1}
.archive-tabs{display:flex;gap:8px;margin:14px 0}
.atab{padding:8px 18px;border:1px solid var(--line);border-radius:8px;font-size:14px;color:var(--dim)}
.atab.active{color:var(--cyan);border-color:var(--cyan);background:rgba(53,224,214,.1)}
.archive-body{flex:1;overflow-y:auto;padding:14px}
.legacy-item{display:flex;align-items:center;gap:12px;padding:10px;border-bottom:1px solid rgba(255,255,255,.06)}
.legacy-item .li-ico{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;font-size:19px;
  border:1px solid var(--line);border-radius:9px;background:rgba(53,224,214,.06)}
.legacy-item .li-mid{flex:1}
.legacy-item .li-name{font-weight:700}
.legacy-item .li-desc{font-size:12px;color:var(--dim)}
.li-buy{border:1px solid var(--line);border-radius:8px;padding:7px 13px;font-size:13px;color:var(--cyan);white-space:nowrap}
.li-buy:hover:not(:disabled){background:rgba(53,224,214,.15)}
.li-buy:disabled{opacity:.4}
.li-owned{color:var(--green);border-color:rgba(125,216,113,.4)}
.achv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.achv-card{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:11px 13px;background:rgba(0,0,0,.2)}
.achv-card.ok{border-color:rgba(125,216,113,.45);background:rgba(125,216,113,.06)}
.achv-card .a-name{font-weight:700;font-size:14px}
.achv-card .a-desc{font-size:12px;color:var(--dim);margin-top:3px}
.achv-card .a-time{font-size:11px;color:var(--green);margin-top:4px}
.achv-card:not(.ok) .a-name{color:var(--dim)}
.rank-row{display:flex;gap:12px;padding:9px 6px;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px;align-items:center}
.rank-row .rk{width:34px;color:var(--cyan);font-weight:700}
.rank-row .rr-name{flex:1;color:var(--dim);font-size:12px}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none}
#hud .glass,#hud button,#hud .res{pointer-events:auto}
.res-bar{position:absolute;top:10px;left:10px;display:flex;gap:2px;padding:6px 8px;flex-wrap:wrap;max-width:64vw}
.res{display:flex;align-items:center;gap:7px;padding:3px 9px;border-radius:8px;transition:.2s;position:relative}
.res:hover{background:rgba(255,255,255,.06)}
.res-ico{font-style:normal;font-size:16px;width:20px;text-align:center}
.ico-ore{color:var(--orange)} .ico-org{color:var(--green)} .ico-nrg{color:#FFE066}
.ico-rsh{color:var(--cyan)} .ico-pop{color:#9FB4FF} .ico-mor{color:#F0A6FF}
.res b{font-size:14px;display:block;line-height:1.05}
.res span{font-size:10px;color:var(--dim)}
.res.flash-up b{color:var(--green)} .res.flash-dn b{color:var(--red)}
.top-center{position:absolute;top:10px;left:50%;transform:translateX(-50%);text-align:center;width:min(420px,46vw)}
.goal-bar{display:flex;align-items:center;gap:9px;padding:8px 14px}
.goal-label{font-size:12px;color:var(--cyan);white-space:nowrap;letter-spacing:1px}
.goal-progress{flex:1;height:8px;background:rgba(255,255,255,.09);border-radius:4px;overflow:hidden}
.goal-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--purple),var(--cyan));border-radius:4px;transition:width .4s;box-shadow:0 0 8px var(--cyan)}
.goal-val{font-size:12px;white-space:nowrap}
.hud-sub{margin-top:5px;font-size:12px;color:var(--dim);text-shadow:0 1px 4px #000}
.threat-num{color:var(--orange)}
.top-right{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.speed-ctrl{display:flex;gap:2px;padding:4px}
.spd{padding:7px 11px;border-radius:7px;font-size:13px;color:var(--dim)}
.spd.active{color:#04121a;background:var(--cyan);box-shadow:0 0 10px rgba(53,224,214,.5)}
.spd:hover{color:var(--txt)} .spd.active:hover{color:#04121a}
.alert-bar{display:flex;align-items:center;gap:8px;padding:9px 14px;border-color:rgba(255,138,61,.5);color:var(--orange);font-size:14px;animation:pulse 1s infinite}
.alert-bar.crisis{border-color:rgba(232,70,90,.6);color:var(--red)}
.alert-ico{font-size:16px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.event-ticker{position:absolute;top:118px;right:10px;width:250px;padding:10px 12px;font-size:12px;line-height:1.7;color:var(--dim);max-height:180px;overflow-y:auto}
.event-ticker .tk{border-left:2px solid var(--purple);padding-left:8px;margin-bottom:6px}
.event-ticker .tk.warn{border-color:var(--orange)} .event-ticker .tk.crisis{border-color:var(--red);color:#ffb0ba}
.minimap-wrap{position:absolute;left:10px;bottom:10px;padding:5px;border-radius:8px}
#minimap{display:block;border-radius:5px}
.dock{position:absolute;right:10px;bottom:10px;display:flex;gap:4px;padding:6px}
.dock-btn{position:relative;width:74px;height:66px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--dim);transition:.15s}
.dock-btn i{font-style:normal;font-size:21px;line-height:1}
.dock-btn span{font-size:12px}
.dock-btn:hover,.dock-btn.on{color:var(--cyan);background:rgba(53,224,214,.1)}
.dock-btn.warn i{color:var(--cyan)}
.dock-btn.warn{animation:pulse 1.2s infinite;color:var(--cyan)}
.dot{position:absolute;top:7px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 6px var(--orange)}
.tut-panel{position:absolute;left:10px;top:76px;width:250px;padding:12px 14px}
.tut-title{color:var(--cyan);font-size:13px;letter-spacing:2px;margin-bottom:8px}
.tut-item{font-size:12.5px;padding:4px 0;color:var(--dim);display:flex;gap:8px}
.tut-item.cur{color:var(--txt)} .tut-item.done{color:var(--green);opacity:.7}
.tut-item .ti{flex:none}
.brownout{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);padding:10px 20px;color:var(--orange);
  border-color:rgba(255,138,61,.5);font-size:15px;animation:pulse .8s infinite}

/* ---------- 侧面板 ---------- */
.side-panel{position:absolute;right:10px;bottom:92px;width:340px;max-width:calc(100vw - 20px);max-height:min(560px,calc(100vh - 200px));display:flex;flex-direction:column;z-index:25;
  animation:slideIn .2s}
.side-panel.wide-panel{width:min(760px,calc(100vw - 20px))}
@keyframes slideIn{from{opacity:0;transform:translateY(14px)}to{opacity:1}}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.panel-head .panel-title{font-size:15px}
.x{width:28px;height:28px;border-radius:7px;color:var(--dim);font-size:14px}
.x:hover{color:var(--red);background:rgba(232,70,90,.12)}
.build-cats{display:flex;gap:4px;padding:8px 10px 0;flex-wrap:wrap}
.bcat{padding:6px 12px;border-radius:7px;font-size:12.5px;color:var(--dim);border:1px solid transparent}
.bcat.active{color:var(--cyan);border-color:var(--line);background:rgba(53,224,214,.08)}
.build-list{overflow-y:auto;padding:8px 10px 12px}
.build-item{display:flex;gap:11px;padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:10px;margin-bottom:7px;cursor:pointer;transition:.13s;background:rgba(0,0,0,.16)}
.build-item:hover:not(.lock){border-color:var(--cyan);background:rgba(53,224,214,.06)}
.build-item.lock{opacity:.45;cursor:not-allowed}
.build-item.sel{border-color:var(--cyan);background:rgba(53,224,214,.12)}
.bi-ico{width:44px;height:44px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:21px;
  background:rgba(53,224,214,.07);border:1px solid rgba(53,224,214,.2)}
.bi-mid{flex:1;min-width:0}
.bi-name{font-weight:700;font-size:14px}
.bi-desc{font-size:11.5px;color:var(--dim);margin:2px 0}
.bi-cost{font-size:11.5px}
.bi-cost .no{color:var(--red)} .bi-cost .ok{color:var(--green)}
.tech-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:10px;overflow-y:auto}
@media(max-width:760px){.tech-cols{grid-template-columns:repeat(2,1fr)}}
.tech-col h5{font-size:12.5px;text-align:center;padding:6px 0;border-radius:7px;margin-bottom:7px;letter-spacing:2px}
.tech-item{border:1px solid rgba(255,255,255,.09);border-radius:9px;padding:8px 9px;margin-bottom:7px;font-size:12px;cursor:pointer;transition:.12s;background:rgba(0,0,0,.18)}
.tech-item:hover:not(.done):not(.lock){border-color:var(--cyan)}
.tech-item .t-name{font-weight:700;font-size:12.5px}
.tech-item .t-desc{color:var(--dim);font-size:11px;margin:3px 0}
.tech-item .t-cost{font-size:11px;color:var(--cyan)}
.tech-item.done{border-color:rgba(125,216,113,.5);background:rgba(125,216,113,.08);cursor:default}
.tech-item.done .t-name{color:var(--green)}
.tech-item.lock{opacity:.4;cursor:not-allowed}
.tech-item.avail{border-color:rgba(53,224,214,.4)}
.tech-item.next{border-color:var(--cyan);box-shadow:0 0 10px rgba(53,224,214,.25)}
.log-list{overflow-y:auto;padding:10px 12px;font-size:12.5px}
.log-item{padding:6px 0 6px 12px;border-left:2px solid var(--purple);margin-bottom:8px;color:var(--dim)}
.log-item b{color:var(--txt)}
.log-item.warn{border-color:var(--orange)} .log-item.crisis{border-color:var(--red)}
.log-item .lt{font-size:10.5px;opacity:.6;display:block}

/* ---------- 建筑详情 ---------- */
#info-body{padding:12px 14px;overflow-y:auto;font-size:13px;line-height:1.7}
#info-body .kv{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(255,255,255,.08);padding:4px 0}
#info-body .kv b{color:var(--cyan)}
.info-btns{display:flex;gap:8px;margin-top:12px}
.danger-btn{border-color:rgba(232,70,90,.5)!important;color:#ff9aa8!important}
.hp-bar{height:7px;background:rgba(255,255,255,.09);border-radius:4px;overflow:hidden;margin:6px 0}
.hp-bar i{display:block;height:100%;border-radius:4px;transition:width .3s}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;z-index:60;background:rgba(4,7,20,.62);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.modal-box{width:min(430px,92vw);padding:22px 24px;animation:popIn .22s;max-height:86vh;overflow-y:auto}
.modal-box.wide{width:min(680px,94vw)}
/* 说明弹窗：内容高于屏幕时"开始拓荒"按钮会被挤出盒子裁掉 →
   玩家关不掉弹窗 → 对局一直暂停 → 看起来就是"什么都不能动、人傻站着"。
   改成纵向 flex：标题/页签/按钮固定，只有正文滚动，按钮永远可见可点。 */
#help-modal .modal-box{display:flex;flex-direction:column;max-height:min(88vh,780px);overflow:hidden;}
#help-modal .modal-title,
#help-modal .help-tabs,
#help-modal .modal-box > .btn{flex:0 0 auto;}
#help-modal .help-body{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch;}
@media (max-height:680px){
  #help-modal .modal-box{max-height:94vh;padding:16px 18px;}
  #help-modal .help-tabs{margin-bottom:8px;}
  #help-modal .help-body{font-size:12.5px;line-height:1.75;}
  /* 其它弹窗同理：盒子太高时从顶部排版并允许整页滚动，避免按钮被裁 */
  .modal{align-items:flex-start;overflow-y:auto;padding:14px 0;}
  .modal-box{max-height:none;margin:auto 0;}
}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1}}
.modal-tag{display:inline-block;font-size:11px;letter-spacing:3px;color:var(--orange);border:1px solid rgba(255,138,61,.45);padding:2px 10px;border-radius:20px;margin-bottom:10px}
.modal-tag.good{color:var(--cyan);border-color:rgba(53,224,214,.45)}
.modal-title{font-size:20px;font-weight:800;margin-bottom:10px;letter-spacing:1px}
.modal-sub{color:var(--dim);font-size:13px;margin-bottom:14px}
.modal-body{font-size:14px;line-height:1.8;color:#c6d2f5;margin-bottom:16px}
.modal-body .quote{border-left:2px solid var(--purple);padding-left:12px;color:var(--dim);font-size:13px;margin:10px 0}
.modal-opts{display:flex;flex-direction:column;gap:9px}
.opt-btn{text-align:left;padding:12px 15px;border:1px solid var(--line);border-radius:10px;background:rgba(53,224,214,.05);font-size:14px;transition:.14s;line-height:1.5}
.opt-btn:hover{background:rgba(53,224,214,.14);border-color:var(--cyan)}
.opt-btn .o-note{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.opt-btn.danger{border-color:rgba(232,70,90,.4)}
.opt-btn.danger:hover{background:rgba(232,70,90,.12);border-color:var(--red)}

/* ---------- 结算 ---------- */
.screen.settle{background:rgba(5,8,22,.8);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:70}
.settle-box{width:min(480px,94vw);max-height:92vh;overflow-y:auto;padding:30px 34px;text-align:center;animation:popIn .35s}
.settle-rank{width:92px;height:92px;margin:0 auto 12px;border-radius:50%;font-size:52px;font-weight:900;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--cyan);color:var(--cyan);text-shadow:0 0 24px var(--cyan);box-shadow:0 0 40px rgba(53,224,214,.35), inset 0 0 24px rgba(53,224,214,.12)}
.settle-rank.dead{border-color:var(--red);color:var(--red);text-shadow:0 0 24px var(--red);box-shadow:0 0 40px rgba(232,70,90,.35)}
.settle-title{font-size:26px;font-weight:900;letter-spacing:4px;margin-bottom:4px}
.settle-sub{color:var(--dim);font-size:13px;margin-bottom:18px}
.settle-rows{text-align:left;margin-bottom:14px}
.settle-rows .srow{display:flex;justify-content:space-between;padding:6px 2px;font-size:13.5px;border-bottom:1px dashed rgba(255,255,255,.09)}
.settle-rows .srow b{color:var(--cyan)}
.settle-legacy{font-size:15px;color:#FFE066;margin:10px 0}
.settle-legacy b{font-size:22px;text-shadow:0 0 14px rgba(255,224,102,.5)}
.settle-new-achv{margin:8px 0}
.settle-new-achv .na{display:inline-block;margin:3px;padding:5px 12px;font-size:12px;border:1px solid rgba(125,216,113,.5);border-radius:18px;color:var(--green)}
.settle-btns{display:flex;gap:10px;margin-top:16px}
.settle-btns .btn{margin:0}

/* ---------- 暂停/跃迁 ---------- */
#pause-cover{position:fixed;inset:0;z-index:40;background:rgba(6,9,24,.45);display:flex;align-items:center;justify-content:center;pointer-events:none}
.pause-text{font-size:30px;letter-spacing:10px;color:var(--cyan);text-align:center;text-shadow:0 0 26px rgba(53,224,214,.6);animation:pulse 1.6s infinite}
.pause-text span{display:block;font-size:12px;letter-spacing:2px;color:var(--dim);margin-top:10px;text-shadow:none}
#warp-fx{position:fixed;inset:0;z-index:80;background:radial-gradient(circle,#0B1026 0%,#030512 100%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.warp-text{font-size:26px;letter-spacing:12px;color:var(--cyan);z-index:2;text-shadow:0 0 30px var(--cyan);animation:pulse 1s infinite}
.warp-lines{position:absolute;inset:-20%;background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(53,224,214,.16) 46px 48px);
  animation:warpmove .5s linear infinite;filter:blur(1px)}
@keyframes warpmove{from{transform:translateX(0) scaleY(1)}50%{transform:translateX(-40px) scaleY(1.4)}to{transform:translateX(-94px) scaleY(2.2)}}

/* ---------- Toast ---------- */
#toasts{position:fixed;top:130px;left:50%;transform:translateX(-50%);z-index:65;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{padding:9px 20px;border-radius:22px;background:rgba(16,22,52,.9);border:1px solid var(--line);font-size:13.5px;animation:toastIn .25s;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.toast.warn{border-color:rgba(255,138,61,.5);color:#ffc39a}
.toast.crisis{border-color:rgba(232,70,90,.6);color:#ffb0ba}
.toast.good{color:var(--green);border-color:rgba(125,216,113,.45)}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1}}

/* ---------- 设置 ---------- */
.settings-list{margin:14px 0 18px}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.09);font-size:14px}
.tgl{min-width:52px;padding:6px 0;border-radius:8px;border:1px solid var(--line);color:var(--dim)}
.tgl.on{color:#04121a;background:var(--cyan);border-color:var(--cyan);font-weight:700}
.seg{display:flex;gap:4px}
.seg button{padding:5px 11px;border:1px solid var(--line);border-radius:7px;font-size:12px;color:var(--dim)}
.seg button.active{color:var(--cyan);border-color:var(--cyan);background:rgba(53,224,214,.1)}
.help-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.htab{padding:7px 13px;border:1px solid var(--line);border-radius:8px;font-size:13px;color:var(--dim);transition:.13s}
.htab:hover{color:var(--txt)}
.htab.active{color:var(--cyan);border-color:var(--cyan);background:rgba(53,224,214,.1)}
.help-body{font-size:13.5px;line-height:1.9;color:#c6d2f5;margin-bottom:14px;max-height:52vh;overflow-y:auto;padding-right:4px}
.help-body b{color:var(--cyan)}
.help-body p{margin:7px 0}
.help-body h4{color:#B49AE0;margin:12px 0 4px;font-size:14px;letter-spacing:2px}
.help-body table{width:100%;border-collapse:collapse;margin:8px 0}
.help-body td{padding:7px 8px;border-bottom:1px dashed rgba(255,255,255,.09);vertical-align:top;font-size:12.8px}
.help-body td:first-child{white-space:nowrap;color:var(--txt);font-weight:700}
.help-body .kbd{display:inline-block;padding:1px 7px;border:1px solid var(--line);border-radius:5px;background:rgba(0,0,0,.3);font-size:11.5px;margin:0 1px}
.h-row{display:flex;gap:10px;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.07)}
.h-row .h-ico{width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:rgba(53,224,214,.06);font-size:15px}
.h-row .h-mid{flex:1;min-width:0}
.h-row b{font-size:13.5px;color:var(--txt)!important}
.h-row .h-cost{font-size:11.5px;color:#FFE066;margin-left:8px}
.h-row p{font-size:12px;color:var(--dim);margin:2px 0 0}

/* 色弱模式：警示橙→亮黄，危机红→蓝紫 */
body.cbmode{--orange:#FFD53D;--red:#7FA8FF}
body.cbmode .alert-bar,body.cbmode .modal-tag{color:var(--orange)}
body.cbmode .settle-rank.dead{border-color:var(--red);color:var(--red)}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(53,224,214,.25);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

@media(max-width:820px){
  .res-bar{max-width:calc(100vw - 16px);top:auto;bottom:84px;left:8px;padding:4px 5px}
  .res{padding:2px 6px}.res span{display:none}
  .minimap-wrap{display:none}
  .top-center{width:min(320px,52vw);left:auto;right:8px;transform:none;top:56px}
  .galaxy-panel{width:min(300px,60vw)}
  .event-ticker{top:auto;bottom:150px;right:8px;width:200px}
  /* 手机上也保留"教学任务"面板：压缩成左上角一张可滚动的小卡片，
     而不是直接 display:none —— 新手在手机上原本完全看不到任何引导。
     纯信息展示，设为不可点以免挡住操作。 */
  .tut-panel{
    display:block!important;
    left:8px;top:56px;width:min(232px,58vw);
    padding:8px 10px;max-height:32vh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    pointer-events:none;
  }
  .tut-panel .panel-title{font-size:12.5px;margin-bottom:4px}
  .tut-item{font-size:11px;padding:2px 0;line-height:1.5}
  .menu-title{font-size:44px;letter-spacing:9px}
}

/* ============================================================
   美术升级层（后置覆盖，不改动上方任何规则）
   统一：深空玻璃拟态 = 分层渐变底 + inset 内高光 + 1px 顶部亮边 + 柔和多层外阴影
   ============================================================ */
:root{
  --hl:rgba(180,240,255,.55);          /* 顶部亮边 */
  --ink-sh:0 10px 34px rgba(0,0,0,.55);
}

/* ---------- 面板 / 玻璃 ---------- */
.glass{
  background:
    linear-gradient(180deg,rgba(38,52,104,.80) 0%,rgba(16,22,52,.86) 42%,rgba(9,12,32,.90) 100%);
  border:1px solid rgba(96,150,220,.30);
  border-radius:14px;
  box-shadow:
    0 10px 34px rgba(0,0,0,.55),
    0 0 0 1px rgba(6,10,26,.7),
    inset 0 1px 0 var(--hl),
    inset 0 0 44px rgba(53,224,214,.05);
  position:relative;
}
/* 上面 .glass 的 position:relative 是给 ::before 高光层做定位基准用的，
   但它会覆盖掉这些元素原本的 position:absolute（同优先级、它在文件更后面），
   导致侧边面板 / 底部按钮条 / 资源条 / 小地图 / 教学面板 / 星图面板 的布局全部散掉。
   这里用双类选择器显式还原，位置数值仍在各自的原始规则里。 */
.side-panel.glass,
.galaxy-panel.glass,
.res-bar.glass,
.event-ticker.glass,
.minimap-wrap.glass,
.dock.glass,
.tut-panel.glass,
.brownout.glass{position:absolute;}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(420px 90px at 50% -30%,rgba(120,190,255,.14),transparent 70%),
    linear-gradient(90deg,rgba(53,224,214,.05),transparent 30%,transparent 70%,rgba(123,94,167,.07));
}
.glass > *{position:relative;z-index:1}

/* ---------- 按钮 ---------- */
.btn{
  border:1px solid rgba(96,150,220,.32);
  border-radius:11px;
  background:
    linear-gradient(180deg,rgba(72,110,180,.28) 0%,rgba(28,40,84,.42) 45%,rgba(14,20,48,.50) 100%);
  box-shadow:
    0 6px 18px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(200,240,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.32);
  transition:transform .14s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.btn:hover:not(:disabled){
  transform:translateY(-2px);
  border-color:rgba(120,240,230,.75);
  background:
    linear-gradient(180deg,rgba(96,220,215,.34) 0%,rgba(34,86,120,.46) 45%,rgba(14,26,56,.55) 100%);
  box-shadow:
    0 12px 28px rgba(0,0,0,.5),
    0 0 22px rgba(53,224,214,.30),
    inset 0 1px 0 rgba(230,255,255,.45);
}
.btn:active:not(:disabled){transform:translateY(0) scale(.985)}
.btn:disabled{filter:saturate(.4)}
.btn-primary{
  border-color:rgba(120,240,230,.62);
  background:
    linear-gradient(180deg,rgba(120,235,225,.36) 0%,rgba(56,120,180,.42) 48%,rgba(90,64,150,.46) 100%);
  text-shadow:0 0 14px rgba(120,240,230,.55);
  box-shadow:
    0 10px 30px rgba(0,0,0,.5),
    0 0 26px rgba(53,224,214,.30),
    inset 0 1px 0 rgba(235,255,255,.55);
}
.btn-primary::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.65;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.16) 48%,transparent 66%);
  background-size:260% 100%;animation:btnSheen 3.6s linear infinite;
}
@keyframes btnSheen{0%{background-position:130% 0}100%{background-position:-30% 0}}

/* ---------- 进度条 ---------- */
.goal-progress,.env-bar{box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.goal-fill,.env-bar i{
  background:linear-gradient(180deg,rgba(190,255,250,.95),rgba(53,224,214,.85) 45%,rgba(24,140,150,.95));
  box-shadow:0 0 12px rgba(53,224,214,.55),inset 0 1px 0 rgba(255,255,255,.65);
}

/* ---------- 资源条 ---------- */
.res-bar{
  background:
    linear-gradient(180deg,rgba(34,46,96,.82),rgba(12,17,44,.86));
  border:1px solid rgba(96,150,220,.26);
  border-radius:13px;
  box-shadow:0 8px 26px rgba(0,0,0,.5),inset 0 1px 0 var(--hl);
}
.res b{text-shadow:0 0 10px rgba(120,200,255,.35)}
.res.flash-up b{text-shadow:0 0 12px rgba(125,216,113,.7)}
.res.flash-dn b{text-shadow:0 0 12px rgba(232,70,90,.7)}

/* ---------- 卡片 / 站点 / 档案 ---------- */
.site-card,.achv-card,.legacy-item,.rank-row{
  background:linear-gradient(180deg,rgba(44,60,118,.55),rgba(16,22,52,.62));
  border:1px solid rgba(96,150,220,.24);
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.42),inset 0 1px 0 rgba(200,240,255,.22);
  transition:transform .16s ease,box-shadow .18s ease,border-color .18s ease;
}
.site-card:hover,.achv-card:hover,.legacy-item:hover{
  transform:translateY(-2px);
  border-color:rgba(120,240,230,.55);
  box-shadow:0 14px 30px rgba(0,0,0,.5),0 0 20px rgba(53,224,214,.22),inset 0 1px 0 rgba(230,255,255,.35);
}
.achv-card.ok{border-color:rgba(255,224,102,.5);box-shadow:0 6px 20px rgba(0,0,0,.42),0 0 18px rgba(255,224,102,.18),inset 0 1px 0 rgba(255,245,200,.35)}

/* ---------- 标签页 ---------- */
.atab{border-radius:9px;transition:.16s}
.atab.active{
  background:linear-gradient(180deg,rgba(120,235,225,.30),rgba(40,90,140,.36));
  box-shadow:0 0 16px rgba(53,224,214,.28),inset 0 1px 0 rgba(235,255,255,.45);
}

/* ---------- 标题发光 ---------- */
.panel-title,.galaxy-station,.goal-title{
  text-shadow:0 0 16px rgba(53,224,214,.42),0 1px 0 rgba(0,0,0,.6);
}

/* ---------- 全屏极细颗粒，消除大片纯色 ---------- */
#hud::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;z-index:9999;
  background-image:radial-gradient(rgba(255,255,255,.9) .5px,transparent .5px);
  background-size:3px 3px;
}

/* ============================================================
   P1 功能新增层（批次二）：教学后建议目标链 / 缺电标注 /
   里程碑存档销毁提示 —— 全部使用独立新类名，
   严禁给 .glass 等公共类添加定位属性（历史事故教训）
   ============================================================ */

/* ---------- 教学后「建议目标」链 ---------- */
#tut-title-bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tut-close{flex:none;width:20px;height:20px;line-height:1;border-radius:6px;color:var(--dim);font-size:11px;pointer-events:auto}
.tut-close:hover{color:var(--red);background:rgba(232,70,90,.16)}
.tut-item.sug-hint{display:block;font-size:10.5px;opacity:.72;padding-top:2px;line-height:1.5}
.tut-item.done.sug-done{animation:sugFade 2.6s forwards}
@keyframes sugFade{0%,45%{opacity:1}100%{opacity:0}}
/* 隐藏教学/建议面板：需压过手机端媒体查询里 .tut-panel 的 display:block!important */
#hud .tut-panel.tut-hide{display:none!important}

/* ---------- 电力赤字标注（角标 + 缺电建筑列表） ---------- */
.res i.ns-badge{position:absolute;top:-5px;right:-2px;min-width:15px;height:15px;line-height:15px;padding:0 3px;
  font-style:normal;font-size:10px;font-weight:700;text-align:center;border-radius:8px;
  background:var(--red);color:#fff;box-shadow:0 0 8px rgba(232,70,90,.75);animation:pulse 1s infinite}
.res.starving b{color:var(--red)}
.ns-list{position:absolute;left:10px;z-index:21;max-width:min(320px,60vw);padding:8px 12px;font-size:12px;line-height:1.7;
  color:#ffc39a;background:rgba(16,22,52,.88);border:1px solid rgba(255,138,61,.5);border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);pointer-events:none}
.ns-list b{color:var(--orange)}

/* ---------- 里程碑存档销毁提示（一次性横幅 + 倒计时角标） ---------- */
.ms-banner{position:absolute;top:84px;left:50%;transform:translateX(-50%);z-index:26;pointer-events:none;
  max-width:92vw;text-align:center;padding:10px 20px;font-size:13.5px;color:#FFE066;
  background:rgba(16,22,52,.9);border:1px solid rgba(255,224,102,.55);border-radius:12px;
  box-shadow:0 6px 24px rgba(0,0,0,.5);animation:msIn .35s}
.ms-banner b{color:#fff}
.ms-banner.fadeout{opacity:0;transition:opacity .6s}
@keyframes msIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.save-timer{display:flex;align-items:center;gap:6px;padding:7px 12px;font-size:12.5px;color:#FFE066;white-space:nowrap;
  background:rgba(16,22,52,.85);border:1px solid rgba(255,224,102,.45);border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.4);animation:pulse 1.6s infinite}
.save-timer b{font-size:14px;color:#fff}