/* ============================================================
   像素海商 3D · 16-bit 复古界面（640x400 逻辑分辨率）
   规则：纯色填充 / 直角面板 / 2px 硬边框 / 无渐变无圆角无模糊
        硬偏移投影 / 像素字体 / 低饱和浅底 + 高饱和强调色
   ============================================================ */
:root{
  --ink:#3a3530; --ink-soft:#6b6257;
  --paper:#ece4cf; --paper-hi:#f6efdc; --paper-dim:#ddd2b4;
  --gold:#dfa72e; --red:#cc4a3c; --green:#3f9253; --blue:#2f7fc1;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#1e1b18}
body{display:flex;align-items:center;justify-content:center;
  font-family:"Fusion Pixel 12px Proportional Simplified Chinese","Zpix","SimSun",monospace;
  -webkit-user-select:none;user-select:none;color:var(--ink)}
.hidden{display:none!important}

#stage{position:relative}
#game3d{width:100%;height:100%;display:block;image-rendering:pixelated}

/* UI 逻辑分辨率 640x400，由 JS 设 zoom 整数放大 */
#ui{position:absolute;left:0;top:0;width:640px;height:400px;
  font-size:12px;line-height:1.5;image-rendering:pixelated}

/* ---------- 基础元件 ---------- */
.ppanel{background:var(--paper);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.pbtn{font-family:inherit;font-size:12px;color:var(--ink);cursor:pointer;
  background:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  padding:5px 14px;line-height:1.35}
.pbtn:hover{background:var(--paper-hi)}
.pbtn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.pbtn:disabled{opacity:.4;cursor:default;transform:none;box-shadow:3px 3px 0 var(--ink)}
.pbtn.primary{background:var(--gold)}
.pbtn.blue{background:var(--blue);color:#fff}
.pbtn.red{background:var(--red);color:#fff}
.pbtn.green{background:var(--green);color:#fff}
.pbtn.small{font-size:11px;padding:3px 10px;box-shadow:2px 2px 0 var(--ink)}
.pbtn.on{background:var(--ink);color:var(--paper)}
.tag{font-size:10px;padding:1px 5px;border:1px solid currentColor;line-height:1.4}
.tag.prod{color:var(--green)} .tag.dem{color:var(--red)} .tag.info{color:var(--blue)}
.money{color:#a3742a}
.sep{flex:1}
.bar{height:12px;border:2px solid var(--ink);background:#cfc4a6;position:relative}
.bar i{display:block;height:100%;background:var(--green)}
.bar.low i{background:var(--red)}
.bar.cd i{background:var(--gold)}
.k{display:inline-block;min-width:22px;text-align:center;background:var(--paper-dim);
  border:1px solid var(--ink);padding:0 4px;font-size:11px}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--paper-dim)}
::-webkit-scrollbar-thumb{background:var(--ink-soft);border:2px solid var(--paper-dim)}

/* ---------- 顶部 HUD ---------- */
#hud{position:absolute;left:6px;right:6px;top:6px;display:flex;gap:8px;align-items:stretch;
  pointer-events:none;z-index:10}
.chip{pointer-events:auto;display:flex;align-items:center;gap:6px;white-space:nowrap;
  padding:4px 10px;font-size:12px;box-shadow:3px 3px 0 var(--ink)}
.chip .lab{color:var(--ink-soft);font-size:11px}
#hp-bar{width:90px}
#hud .pbtn{white-space:nowrap}

/* ---------- 战斗信息条 / 靠港提示 ---------- */
#combat-chip{position:absolute;top:44px;left:50%;transform:translateX(-50%);z-index:12;
  display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:12px}
#combat-chip .bar{width:110px}
#combat-chip .bar.cd{width:80px}
#cb-hint{color:var(--red)}
#dock-prompt{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);z-index:12;
  padding:6px 16px;font-size:13px}

#keys-hint{position:absolute;left:6px;bottom:6px;z-index:5;pointer-events:none;
  font-size:11px;color:#e8e2cf;background:rgba(58,53,48,.75);padding:3px 8px}
#toasts{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column-reverse;gap:6px;align-items:center;pointer-events:none}
.toast{font-size:12px;background:var(--paper);border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);padding:4px 14px;animation:tpop .18s steps(3)}
.toast.warn{background:var(--red);color:#fff;border-color:var(--ink)}
.toast.good{background:var(--green);color:#fff}
@keyframes tpop{from{transform:translateY(8px)}to{transform:none}}

/* ---------- 覆盖层 & 通用面板 ---------- */
.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(30,27,24,.55)}
.panel-head{display:flex;align-items:center;gap:8px;padding:6px 10px;
  background:var(--ink);color:var(--paper)}
.panel-head b{font-size:14px}
.panel-head .tag{color:var(--gold);border-color:var(--gold)}
.panel-head .pbtn{box-shadow:1px 1px 0 var(--gold)}

/* ---------- 标题画面 ---------- */
#title-screen{flex-direction:column;gap:0;background:rgba(30,27,24,.18)}
#title-box{display:flex;flex-direction:column;align-items:center;gap:16px;padding:30px 60px;text-align:center}
#title-box h1{font-size:46px;color:var(--gold);text-shadow:4px 4px 0 var(--ink);letter-spacing:8px}
#title-box .sub{font-size:13px;color:var(--ink-soft);letter-spacing:3px}
#title-box .menu{display:flex;flex-direction:column;gap:12px;margin-top:6px}
#title-box .menu .pbtn{width:200px;padding:7px 0;font-size:14px}
#title-ver{font-size:11px;color:var(--ink-soft)}

/* ---------- 港口面板 ---------- */
#port-panel{width:380px}
#port-panel .body{padding:14px}
.pp-name{font-size:17px;margin-bottom:3px}
.pp-flavor{font-size:12px;color:var(--ink-soft);margin-bottom:12px}
.pp-wallet{display:flex;gap:18px;font-size:12px;background:var(--paper-dim);
  border:2px solid var(--ink);padding:5px 10px;margin-bottom:14px}
.pp-builds{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bld{display:flex;gap:10px;align-items:center;text-align:left;padding:10px 12px;
  background:var(--paper);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer;
  font-family:inherit;font-size:12px;color:var(--ink)}
.bld:hover{background:var(--paper-hi)}
.bld:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.bld canvas{width:28px;height:28px;image-rendering:pixelated}
.bld .bt{font-size:14px} .bld .bd{font-size:10px;color:var(--ink-soft)}
.bld.wide{grid-column:1 / -1;justify-content:center}

/* ---------- 集市 ---------- */
#market-panel{width:628px;height:392px;display:flex;flex-direction:column}
.mk-body{flex:1;display:flex;min-height:0}
.mk-left{width:230px;border-right:2px solid var(--ink);overflow-y:auto;background:var(--paper)}
.mk-right{flex:1;display:flex;flex-direction:column;padding:10px 12px;gap:8px;min-width:0}
.good-row{display:grid;grid-template-columns:12px 1fr auto auto auto;gap:6px;align-items:center;
  padding:4px 8px;border-bottom:1px solid var(--paper-dim);cursor:pointer;font-size:12px}
.good-row:hover{background:var(--paper-hi)}
.good-row.sel{background:#f3e3ae;box-shadow:inset 4px 0 0 var(--gold)}
.good-row .dot{width:10px;height:10px;border:1px solid var(--ink)}
.good-row .pr{font-weight:bold}
.good-row .own{color:var(--blue);font-size:11px}
.good-row .d-up{color:var(--red)} .good-row .d-dn{color:var(--green)}
.mk-chart-wrap{position:relative}
#mk-chart{width:100%;height:150px;image-rendering:pixelated;display:block}
.mk-note{font-size:10px;color:var(--ink-soft)}
.mk-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:2px}
.mk-actions .grp{display:flex;gap:6px;align-items:center}
.mk-actions .grp .lab{font-size:12px;color:var(--ink-soft)}
.mk-cargo{font-size:12px;color:var(--ink-soft)}
.mk-cargo b{color:var(--ink)}

/* ---------- 消息铺 ---------- */
#rumor-panel{width:430px}
#rumor-panel .body{padding:14px;display:flex;flex-direction:column;gap:10px}
.rumor-ev{font-size:12px;color:var(--ink-soft);border-left:4px solid var(--gold);padding-left:8px}
.route-card{border:2px solid var(--ink);background:var(--paper-hi);padding:7px 10px;font-size:12px}
.route-card .rk{color:var(--gold);font-weight:bold;margin-right:5px}
.route-card .arr{color:var(--blue);padding:0 4px}
.route-card .prof{color:var(--red);font-weight:bold}
.route-card .sub{font-size:10px;color:var(--ink-soft);margin-top:2px}
#rumor-empty{font-size:12px;color:var(--ink-soft);text-align:center;padding:16px 0}

/* ---------- 科技树 ---------- */
#tech-panel{width:628px;height:392px;display:flex;flex-direction:column}
.tech-tabs{display:flex;gap:8px;padding:8px 10px 0}
.tech-body{flex:1;display:flex;min-height:0}
.tech-main{flex:1;display:flex;min-height:0}
#tech-tree{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:10px}
.branch{display:grid;grid-template-columns:1fr 14px 1fr 14px 1fr 14px 1fr;align-items:stretch}
.branch .arrow{align-self:center;text-align:center;color:var(--ink-soft);font-size:11px}
.node{border:2px solid var(--ink);background:var(--paper);padding:6px 8px;font-size:11px;
  min-height:52px;position:relative;margin-right:2px}
.node .nm{font-size:12px}
.node .ef{color:var(--green);font-size:10px}
.node .cost{color:#a3742a;position:absolute;right:5px;bottom:3px;font-size:10px}
.node.done{background:var(--green);color:#fff}
.node.done .ef,.node.done .cost{color:#dfead2}
.node.avail{background:#f3e3ae;cursor:pointer}
.node.avail:hover{background:#f9edb9}
.node.locked{opacity:.45}
.node.sel{outline:3px solid var(--gold)}
#tech-stats{width:150px;border-left:2px solid var(--ink);padding:10px;font-size:11px;
  display:flex;flex-direction:column;gap:4px;background:var(--paper-dim)}
#tech-stats .st{display:flex;justify-content:space-between}
#tech-stats h4{font-size:12px;margin-bottom:3px}
#tech-stats .title{color:var(--gold)}
#tech-desc{font-size:11px;color:var(--ink-soft);min-height:30px;border-top:2px solid var(--ink);
  padding:8px 10px;background:var(--paper)}

/* ---------- 海图 ---------- */
#map-panel{width:628px;height:392px;display:flex;flex-direction:column}
.map-body{flex:1;display:flex;min-height:0}
#mapcv{image-rendering:pixelated;display:block;cursor:grab}
#mapcv.placing{cursor:crosshair}
.map-side{width:126px;border-left:2px solid var(--ink);background:var(--paper-dim);
  display:flex;flex-direction:column;gap:6px;padding:8px;font-size:11px}
.map-side .pbtn{white-space:nowrap;font-size:11px;width:100%;text-align:center}
.map-side h4{font-size:12px;margin-top:2px}
.marker-row{display:flex;align-items:center;gap:4px;font-size:11px;background:var(--paper);
  border:1px solid var(--ink);padding:2px 4px;white-space:nowrap}
.marker-row .pbtn{margin-left:auto;width:auto}
.map-legend{font-size:10px;color:var(--ink-soft);line-height:1.7;margin-top:auto}

/* ---------- 帮助 ---------- */
#help-panel{width:500px}
#help-panel .body{padding:14px 16px;font-size:12px;max-height:330px;overflow-y:auto}
#help-panel h4{font-size:13px;color:var(--blue);margin:10px 0 4px}
#help-panel h4:first-child{margin-top:0}
#help-panel li{margin-left:18px;margin-bottom:4px}