/* ============================================================
   NODEWORKS — main.css
   ダークな開発ツール風テーマ

   文字サイズは --ui-scale（設定で変更）に連動する変数を通す。
   **生の px を各所に書かない。** 変えるならここのトークンだけ。

   アイテム/設備の印は「絵文字 + そのアイテム色のリング」。
   色だけで識別させないための形。色は必ず名前・アイコンと一緒に出す。
   ============================================================ */
:root{
  color-scheme:dark;
  /* 既定の文字サイズ。1.0 だと小さすぎたので 1.3 を標準にしている
     （設定で変えられる。変えた値は localStorage に残る） */
  --ui-scale:1.3;

  /* 文字サイズ（設定の「UI の大きさ」で全部が一緒に動く） */
  --fs-xs:  calc(11px * var(--ui-scale));
  --fs-sm:  calc(12px * var(--ui-scale));
  --fs-md:  calc(13.5px * var(--ui-scale));
  --fs-lg:  calc(16px * var(--ui-scale));
  --fs-xl:  calc(20px * var(--ui-scale));
  --fs-2xl: calc(28px * var(--ui-scale));

  /* 窓が狭いときはキャンバスを潰さないよう、画面幅の割合で頭打ちにする
     （固定 px のままだと 1100px 幅で中央が 300px しか残らない） */
  --w-left:  min(calc(252px * var(--ui-scale)), 24vw);
  --w-right: min(calc(330px * var(--ui-scale)), 30vw);
  --h-top:   calc(58px * var(--ui-scale));

  --bg:#080a0d;
  --dot:rgba(125,155,185,.16);
  --dot2:rgba(125,175,210,.26);
  --panel:#0d1116;
  --panel-2:#12171d;
  --panel-3:#182028;
  --line:#1f2831;
  --line-2:#2b3743;
  --text:#d3dce5;
  --text-hi:#f2f7fb;
  --dim:#8493a1;
  --dim-2:#5b6975;
  --accent:#57c9f5;
  --accent-2:#2a7fa0;
  --ok:#68e0a0;
  --warn:#f0b45e;
  --err:#ef7676;
  --purple:#a78bfa;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif;
  --emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol",sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:var(--fs-sm);
  overflow:hidden;-webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
input,select,textarea,.selectable{user-select:text;-webkit-user-select:text}

button{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.05em;color:var(--text);
  background:var(--panel-3);border:1px solid var(--line-2);border-radius:5px;
  padding:6px 11px;cursor:pointer;transition:.15s}
button:hover{background:#212c36;border-color:#3b4b59;color:var(--text-hi)}
button:active{transform:translateY(1px)}
button.primary{border-color:var(--accent-2);color:#9fe0fb}
button.primary:hover{background:#123243;box-shadow:0 0 14px rgba(87,201,245,.16)}
button.danger{border-color:#5a2b2b;color:#f0a0a0}
button.danger:hover{background:#2b1717}
button.disabled{opacity:.45;cursor:not-allowed}
select{font-family:var(--mono);font-size:var(--fs-sm);background:#0c1116;color:var(--text-hi);
  border:1px solid var(--line-2);border-radius:5px;padding:5px 6px;width:100%;outline:none}
select:focus{border-color:var(--accent-2)}
input[type=number]{font-family:var(--mono);font-size:var(--fs-sm);background:#0c1116;color:var(--text-hi);
  border:1px solid var(--line-2);border-radius:5px;padding:4px 6px;width:62px;outline:none}
input[type=number]:focus{border-color:var(--accent-2)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#212c36;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#31404d}
.scroll{overflow:auto}
.muted{color:var(--dim)}

/* ---------------- アイテム/設備の印（絵文字＋色リング） ---------------- */
.mk{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:calc(26px * var(--ui-scale));height:calc(26px * var(--ui-scale));
  border-radius:5px;font-size:calc(14px * var(--ui-scale));line-height:1;
  font-family:var(--emoji);font-style:normal;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1.5px var(--c,#8a97a3),0 0 0 1px rgba(0,0,0,.4);
}
.mk-s{font-family:var(--emoji);font-style:normal;font-size:var(--fs-sm)}
.bicon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:calc(30px * var(--ui-scale));height:calc(30px * var(--ui-scale));
  border-radius:6px;font-size:calc(16px * var(--ui-scale));line-height:1;
  font-family:var(--emoji);font-style:normal;
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1.5px var(--c,#8a97a3),0 0 0 1px rgba(0,0,0,.4);
}
.bicon.big{width:calc(42px * var(--ui-scale));height:calc(42px * var(--ui-scale));font-size:var(--fs-xl)}

/* ---------------- レイアウト ---------------- */
#app{
  display:grid;height:100vh;
  grid-template-columns:var(--w-left) 1fr var(--w-right);
  /* 上のバーは中身が増えたら折り返して伸びる。固定の高さにすると
     窓を狭めたときに右端のボタンが切れて押せなくなる */
  grid-template-rows:auto 1fr;
  transition:grid-template-columns .15s ease;
  overflow:hidden;
}
#app.left-closed{grid-template-columns:0 1fr var(--w-right)}
#app.right-closed{grid-template-columns:var(--w-left) 1fr 0}
#app.left-closed.right-closed{grid-template-columns:0 1fr 0}
#topbar{grid-column:1/4;grid-row:1}
#left{grid-column:1;grid-row:2}
#viewport{grid-column:2;grid-row:2}
#right{grid-column:3;grid-row:2}

#left,#right{background:var(--panel);display:flex;flex-direction:column;min-height:0;min-width:0;
  overflow-wrap:anywhere;
  overflow:hidden;transition:opacity .18s ease}
#left{border-right:1px solid var(--line)}
#build-list,#inspector{width:100%;min-width:0;max-width:100%}
select,input[type=number],textarea{max-width:100%}
#right{border-left:1px solid var(--line)}
#app.left-closed #left,#app.right-closed #right{opacity:0;border-width:0;pointer-events:none}

.panel-title{
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.14em;color:var(--dim);
  padding:11px 14px 10px;border-bottom:1px solid var(--line);flex:none;white-space:nowrap;
}

/* パネル開閉のつまみ */
.edge-toggle{
  position:absolute;top:50%;transform:translateY(-50%);z-index:12;
  width:calc(18px * var(--ui-scale));height:calc(92px * var(--ui-scale));
  padding:0;border-radius:0;cursor:pointer;
  background:rgba(18,23,29,.9);border:1px solid var(--line-2);
  color:var(--dim);font-size:calc(14px * var(--ui-scale));line-height:1;
  display:flex;align-items:center;justify-content:center;
}
/* 見た目より広い当たり判定。18px の的は外しやすく、外すとキャンバスの
   ドラッグが始まってしまうので「押しても反応しない」に見えていた */
.edge-toggle::before{content:'';position:absolute;top:-10px;bottom:-10px;left:-10px;right:-10px}
.edge-toggle:hover{background:#1c252e;color:var(--text-hi)}
.edge-toggle:active{background:#24303b;color:var(--text-hi)}
.edge-toggle.left{left:0;border-left:none;border-radius:0 6px 6px 0}
.edge-toggle.right{right:0;border-right:none;border-radius:6px 0 0 6px}

/* ---------------- 上部バー ---------------- */
#topbar{
  display:flex;align-items:center;gap:12px;padding:5px 14px;
  min-height:var(--h-top);flex-wrap:wrap;row-gap:7px;
  background:linear-gradient(180deg,#111922,#0b0f14);
  border-bottom:1px solid var(--line);
  min-width:0;
}
.brand{font-family:var(--mono);font-size:var(--fs-md);letter-spacing:.16em;color:var(--text-hi);white-space:nowrap}
.brand .ver{color:var(--dim-2);font-size:var(--fs-xs);letter-spacing:.1em;margin-left:4px}

/* 電力メーター */
.power-meter{flex:0 1 auto;min-width:0;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.35;
  border:1px solid var(--line);border-radius:6px;padding:5px 10px;background:var(--panel-2);min-width:calc(150px * var(--ui-scale))}
.power-meter .pm-title{color:var(--dim-2);letter-spacing:.12em;font-size:var(--fs-xs)}
.power-meter .pm-rows{display:flex;align-items:baseline;gap:9px}
.power-meter .pm-row b{color:var(--text-hi);font-variant-numeric:tabular-nums}
.power-meter .pm-row i{color:var(--dim-2);font-style:normal;margin-left:3px}
.power-meter .pm-sat{margin-left:auto;font-size:var(--fs-sm)}
.power-meter.ok .pm-sat{color:var(--ok)}
.power-meter.warn .pm-sat{color:var(--warn)}
.power-meter.bad .pm-sat{color:var(--err)}
.power-meter.bad{border-color:rgba(239,118,118,.45)}
.power-meter.idle{opacity:.5}
.power-meter.idle .pm-sat{color:var(--dim-2)}

.top-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;
  flex:1 1 auto;margin-left:auto;min-width:0}
.research-status{flex:0 1 calc(180px * var(--ui-scale));min-width:calc(120px * var(--ui-scale));
  font-family:var(--mono);font-size:var(--fs-xs)}
.rs-name{color:var(--text-hi);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-name b{color:var(--accent)}
.rs-bar{height:3px;background:#1a222a;border-radius:2px;margin:4px 0;overflow:hidden}
.rs-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .3s}
.rs-detail{color:var(--dim);display:flex;gap:10px}
.rs-detail .rq{display:inline-flex;align-items:center;gap:3px;font-family:var(--emoji),var(--mono)}
.mini{font-family:var(--mono);text-align:right;line-height:1.2}
.mini .lbl{display:block;font-size:var(--fs-xs);letter-spacing:.08em;color:var(--dim-2)}
.mini .val{font-size:var(--fs-lg);color:var(--text-hi);font-variant-numeric:tabular-nums}
.speed-ctl{display:flex;gap:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:3px}
.sbtn{border:none;background:transparent;padding:5px 9px;color:var(--dim);border-radius:4px;font-size:var(--fs-sm)}
.sbtn:hover{background:#1a222a}
.sbtn.on{background:#15303d;color:#9fe0fb;box-shadow:inset 0 0 0 1px rgba(87,201,245,.3)}
.btns{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}

/* ---------------- 左：建設リスト ---------------- */
#build-list{flex:1;padding:10px;min-width:0}
.cat{margin-bottom:14px}
.cat-title{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.16em;color:var(--dim-2);
  padding:2px 4px 7px;border-bottom:1px dashed var(--line);margin-bottom:8px}
.bitem{
  border:1px solid var(--line);border-radius:6px;background:var(--panel-2);
  padding:8px 10px;margin-bottom:7px;cursor:grab;transition:.14s;overflow:hidden;
}
.bitem:hover{border-color:#3b4b59;background:var(--panel-3);transform:translateX(2px)}
.bitem:active{cursor:grabbing}
.bitem.armed{border-color:var(--accent);box-shadow:0 0 0 1px rgba(87,201,245,.3),0 0 18px rgba(87,201,245,.14)}
.bitem.capped{opacity:.42;cursor:not-allowed}
.bitem.capped:hover{transform:none;border-color:var(--line)}
.bitem.poor{opacity:.66}
.bi-head{display:flex;align-items:center;gap:8px;min-width:0;font-family:var(--mono);font-size:var(--fs-md);color:var(--text-hi)}
.bi-name{flex:1;min-width:0;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bi-count{color:var(--dim-2);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.bi-cost{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--dim)}
.bi-cost span{display:inline-flex;align-items:center;gap:3px;font-family:var(--emoji),var(--mono)}
.bi-cost .miss{color:var(--err)}
.bi-cost .free{color:var(--ok)}
.bi-cost .lock{color:var(--warn)}
.bi-cost .mult{color:var(--warn)}
.bi-cost .pw{color:var(--accent);margin-left:auto}
.bi-cost .pw.gen{color:var(--ok)}
.bi-cost.up{margin-top:8px}
.hint{flex:none;padding:11px 14px;border-top:1px solid var(--line);font-size:var(--fs-xs);
  color:var(--dim);line-height:1.7}

/* ---------------- キャンバス ---------------- */
#viewport{
  position:relative;overflow:hidden;cursor:default;
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.4px),
    radial-gradient(circle at 1px 1px, var(--dot2) 1.2px, transparent 1.8px);
  background-size:26px 26px,130px 130px;
}
#viewport.panning{cursor:grabbing}
#viewport.placing{cursor:copy}
#viewport.linking{cursor:crosshair}
/* **will-change を付けない。** 付けると倍率1で焼いた面を引き伸ばすので拡大時に文字がぼやける */
#world{position:absolute;left:0;top:0;transform-origin:0 0}
#nodes{position:absolute;left:0;top:0}
#links{position:absolute;overflow:visible;pointer-events:none;background:transparent}

/* 接続線 */
.link-base{fill:none;stroke-width:1.6;opacity:.34}
.link-flow{fill:none;stroke-width:2.6;stroke-dasharray:3 10;stroke-linecap:round;opacity:0;transition:opacity .35s}
.link.active .link-flow{opacity:.9}
.link.fluid .link-base{stroke-width:3;opacity:.3;stroke-dasharray:none}
.link.fluid .link-flow{stroke-width:4;stroke-dasharray:10 8}
.link-hit{fill:none;stroke:transparent;stroke-width:16;pointer-events:stroke;cursor:pointer}
.link.hover .link-base{opacity:1;stroke-width:2.6}
.link.hover .link-hit{stroke:rgba(239,118,118,.10)}
/* 線を消せるのは解体モードのときだけ。普通のときは「掴める物」に見せない */
.link-hit{cursor:default}
body.demolish .link-hit{cursor:crosshair}
body.demolish .link.hover .link-base{stroke:var(--err);opacity:1;stroke-width:3}
body.demolish .link.hover .link-hit{stroke:rgba(239,118,118,.22)}
.temp-link{fill:none;stroke-width:2;stroke-dasharray:6 6;opacity:.85}
/* 整列スナップの目安線。掴んでいるあいだだけ出す */
#snap-guides{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.snap-guide{position:absolute;background:var(--accent);opacity:.55;pointer-events:none}
.snap-guide.v{width:1px}
.snap-guide.h{height:1px}

/* ---------------- ノード ---------------- */
.node{
  position:absolute;left:0;top:0;width:240px;
  background:linear-gradient(180deg,#151d25 0%,#0f151b 100%);
  border:1px solid var(--line-2);border-radius:8px;
  box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.3);
  font-family:var(--mono);font-size:12px;
  transition:box-shadow .18s,border-color .18s;
}
.node:hover{border-color:#3b4b59}
.node.selected{border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(87,201,245,.4),0 8px 30px rgba(0,0,0,.6),0 0 34px rgba(87,201,245,.12)}
.node.dragging{opacity:.94;cursor:grabbing}

.nhead{display:flex;align-items:center;gap:7px;padding:7px 10px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,color-mix(in srgb,var(--bc) 22%,transparent),rgba(255,255,255,.015));
  border-radius:7px 7px 0 0}
.nicon{font-family:var(--emoji);font-style:normal;font-size:13px;line-height:1;flex:none;
  filter:drop-shadow(0 0 6px var(--bc))}
.ntitle{flex:1;font-size:12px;letter-spacing:.08em;color:var(--text-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npow{font-size:9.5px;color:var(--accent);white-space:nowrap}
.npow.gen{color:var(--ok)}
.nid{font-family:var(--mono);font-size:9.5px;color:var(--dim-2);white-space:nowrap}

.nbody{padding:9px 11px 5px}
.nsec{margin-bottom:9px}
.nlabel{font-size:9.5px;letter-spacing:.16em;color:var(--dim-2);margin-bottom:5px}
.nnote{font-size:11px;color:var(--accent);padding:0 0 7px;letter-spacing:.04em}
.nnote.dim{color:var(--dim-2)}
.nsel{font-size:11.5px}

/* 絵の出る選択肢（picker.js）。<select> だと option に画像を入れられないので置き換えた */
.picker{position:relative}
.pk-btn{display:flex;align-items:center;gap:6px;width:100%;padding:4px 6px;
  background:#0d1319;border:1px solid var(--line-2);border-radius:5px;
  color:var(--text);font-family:inherit;font-size:11.5px;text-align:left;cursor:pointer}
.pk-btn:hover{border-color:#3b4b59}
.pk-btn.empty{color:var(--dim-2)}
.pk-btn > span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-btn .ico{width:18px;height:18px;vertical-align:0;flex:none}
.pk-caret{color:var(--dim-2);font-size:9px;flex:none}
.picker.open .pk-btn{border-color:var(--accent)}
/* display を持たせているので [hidden] が効かない。明示的に消す
   （これが無いと一覧が開きっぱなしになる） */
.pk-pop[hidden]{display:none}
.pk-pop{position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:60;
  background:#0c1218;border:1px solid var(--line-2);border-radius:6px;
  box-shadow:0 10px 26px rgba(0,0,0,.6);padding:4px;max-height:250px;
  display:flex;flex-direction:column;gap:4px}
.pk-q{width:100%;padding:4px 6px;background:#070b0f;border:1px solid var(--line);
  border-radius:4px;color:var(--text);font-family:inherit;font-size:11.5px}
.pk-list{overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.pk-opt{display:flex;align-items:center;gap:6px;width:100%;padding:3px 5px;
  background:none;border:1px solid transparent;border-radius:4px;
  color:var(--text);font-family:inherit;font-size:11.5px;text-align:left;cursor:pointer}
.pk-opt > span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-opt .ico{width:18px;height:18px;vertical-align:0;flex:none}
.pk-opt:hover{background:#16222c;border-color:#2c3d4a}
.pk-opt.on{background:#123243;border-color:var(--accent-2);color:#cdeaf8}

.prow{position:relative;display:flex;align-items:center;gap:6px;height:22px;line-height:22px}
.prow .mk{width:16px;height:16px;font-size:10px}
.prow .pname{flex:1;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px}
.prow .pval{color:var(--text-hi);font-variant-numeric:tabular-nums;font-size:12px}
.prow.plain .pname{color:var(--dim)}

/* ポートは色が暗くても見えるように、必ず明るいリングを付ける */
.port{position:absolute;top:50%;margin-top:-6px;width:12px;height:12px;border-radius:50%;
  background:var(--pc,#57c9f5);border:2px solid #0b1016;
  box-shadow:0 0 0 1px rgba(255,255,255,.45);
  cursor:crosshair;z-index:4;transition:transform .12s,box-shadow .12s}
/* 液体のポートは四角。固体と一目で区別できるようにする */
.port.fluid{border-radius:2px;transform:rotate(45deg)}
.port.fluid:hover{transform:rotate(45deg) scale(1.4)}
.port.in{left:-15px}
.port.out{right:-15px}
.port:hover{transform:scale(1.5);box-shadow:0 0 0 1px #fff,0 0 14px var(--pc,#57c9f5)}
.port.connected{box-shadow:0 0 0 1px rgba(255,255,255,.75),0 0 10px var(--pc,#57c9f5)}
#viewport.linking .port.in{box-shadow:0 0 0 1px #fff,0 0 12px var(--pc)}
/* 入力ポートから逆向きに引いているときは、繋ぎ先になる出力ポートを光らせる */
#viewport.linking-back .port.in{box-shadow:0 0 0 1px rgba(255,255,255,.45)}
#viewport.linking-back .port.out{box-shadow:0 0 0 1px #fff,0 0 12px var(--pc)}

.nfoot{padding:7px 11px 9px;border-top:1px solid var(--line)}
.bar{height:4px;background:#161e25;border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.fmeta{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;gap:8px}
.frate{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fstatus{color:var(--dim);letter-spacing:.05em;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.fstatus .lamp{width:7px;height:7px;border-radius:50%;background:var(--dim-2);flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.5)}

/* ---- 状態色（ここが唯一の定義） ----
   GREEN  正常稼働
   YELLOW 出力詰まり（故障ではない待ち）
   RED    必要物が無くて止まっている（材料・パック・燃料・電力）
   GRAY   手動停止・未設定                                        */
.node[data-status="running"] .fstatus,
.node[data-status="researching"] .fstatus,
.node[data-status="generating"] .fstatus,
.node[data-status="assembling"] .fstatus,
.node[data-status="online"] .fstatus{color:var(--ok)}
.node[data-status="running"] .lamp,
.node[data-status="researching"] .lamp,
.node[data-status="generating"] .lamp,
.node[data-status="assembling"] .lamp,
.node[data-status="online"] .lamp{background:var(--ok);box-shadow:0 0 8px rgba(104,224,160,.8)}

.node[data-status="output-full"] .fstatus{color:var(--warn)}
.node[data-status="output-full"] .lamp{background:var(--warn);box-shadow:0 0 8px rgba(240,180,94,.8)}
.node[data-status="output-full"]{border-color:rgba(240,180,94,.42)}

.node[data-status="no-input"] .fstatus,
.node[data-status="no-science"] .fstatus,
.node[data-status="no-fuel"] .fstatus,
.node[data-status="no-power"] .fstatus{color:var(--err)}
.node[data-status="no-input"] .lamp,
.node[data-status="no-science"] .lamp,
.node[data-status="no-fuel"] .lamp,
.node[data-status="no-power"] .lamp{background:var(--err);box-shadow:0 0 8px rgba(239,118,118,.8)}
.node[data-status="no-input"],
.node[data-status="no-science"],
.node[data-status="no-fuel"],
.node[data-status="no-power"]{border-color:rgba(239,118,118,.42)}

.node[data-status="no-recipe"] .fstatus,
.node[data-status="no-research"] .fstatus,
.node[data-status="no-filter"] .fstatus,
.node[data-status="empty"] .fstatus,
.node[data-status="idle"] .fstatus,
.node[data-status="disabled"] .fstatus{color:var(--dim-2)}
.node[data-status="no-recipe"],
.node[data-status="no-filter"]{border-style:dashed}
.node[data-status="disabled"]{opacity:.72}
.node[data-status="launch-ready"] .fstatus{color:var(--purple)}
.node[data-status="launch-ready"] .lamp{background:var(--purple);box-shadow:0 0 10px rgba(167,139,250,.9)}
.node[data-status="running"] .bar i,
.node[data-status="researching"] .bar i{box-shadow:0 0 10px rgba(87,201,245,.5)}

/* ---------------- 解体モード ---------------- */
#demolish-overlay{position:absolute;inset:0;z-index:11;display:none;pointer-events:none}
body.demolish #demolish-overlay{display:block;background:rgba(200,40,40,.10);
  box-shadow:inset 0 0 0 2px rgba(239,90,90,.55),inset 0 0 90px rgba(200,30,30,.22)}
body.demolish #viewport{cursor:crosshair}
.dm-banner{position:absolute;left:50%;top:16px;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;white-space:nowrap;
  background:rgba(40,10,12,.94);border:1px solid rgba(239,90,90,.7);border-radius:8px;
  padding:9px 18px;font-family:var(--mono);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.dm-title{color:#ff8f8f;letter-spacing:.2em;font-size:var(--fs-md)}
.dm-sub{color:var(--dim);font-size:var(--fs-xs)}
.dm-key{color:#ffd0d0;font-size:var(--fs-xs);border:1px solid rgba(239,90,90,.5);border-radius:4px;padding:2px 8px}
body.demolish .node.demo-hover{border-color:#ff6b6b;
  box-shadow:0 0 0 2px rgba(255,107,107,.6),0 0 28px rgba(255,60,60,.35)}
body.demolish .node.demo-hover .nhead{background:linear-gradient(90deg,rgba(255,80,80,.28),rgba(255,255,255,.02))}

/* ---------------- 範囲選択モード ---------------- */
#boxselect-overlay{position:absolute;inset:0;z-index:11;display:none;pointer-events:none}
body.boxselect #boxselect-overlay{display:block;
  box-shadow:inset 0 0 0 2px rgba(87,201,245,.45)}
body.boxselect #viewport{cursor:crosshair}
.bs-banner{position:absolute;left:50%;top:16px;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;white-space:nowrap;
  background:rgba(10,28,38,.94);border:1px solid rgba(87,201,245,.6);border-radius:8px;
  padding:9px 18px;font-family:var(--mono);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.bs-title{color:#9fe0fb;letter-spacing:.2em;font-size:var(--fs-md)}
.bs-sub{color:var(--dim);font-size:var(--fs-xs)}
.bs-count{color:var(--text-hi);font-size:var(--fs-xs)}
.bs-key{color:#cdeaf8;font-size:var(--fs-xs);border:1px solid rgba(87,201,245,.45);
  border-radius:4px;padding:2px 8px}
/* ゴムバンドは viewport の座標で描く（world の transform を掛けない） */
#select-rect{position:absolute;display:none;z-index:12;pointer-events:none;
  border:1px solid rgba(87,201,245,.9);background:rgba(87,201,245,.10);border-radius:3px}
.node.picked{border-color:var(--accent-2);
  box-shadow:0 0 0 2px rgba(87,201,245,.5),0 8px 26px rgba(0,0,0,.5)}
.node.picked .nhead{background:linear-gradient(90deg,rgba(87,201,245,.22),rgba(255,255,255,.02))}

/* ---------------- 右：インスペクタ ---------------- */
#inspector{flex:1;padding:14px;font-size:var(--fs-sm);min-width:0}
#inspector .empty{color:var(--dim);line-height:1.9}
#inspector .empty .keys{color:var(--dim-2);font-family:var(--mono);font-size:var(--fs-xs);margin-top:14px;line-height:2}
.ins-head{display:flex;gap:10px;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.ins-title{font-family:var(--mono);font-size:var(--fs-md);letter-spacing:.08em;color:var(--text-hi)}
.ins-sub{font-size:var(--fs-xs);color:var(--dim);margin-top:3px;line-height:1.6}
.ins-sec{margin-bottom:14px}
.ins-label{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.16em;color:var(--dim-2);margin-bottom:7px}
.ins-rows{display:flex;flex-direction:column;gap:4px}
.ins-note{font-size:var(--fs-xs);color:var(--dim-2);margin-top:7px;line-height:1.6}
.formula{font-family:var(--mono);font-size:var(--fs-xs);line-height:2;color:var(--text);
  background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:9px 10px;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.formula .fi{display:inline-flex;align-items:center;gap:4px;font-family:var(--emoji),var(--mono)}
.formula .op{color:var(--dim-2);font-weight:400}
.formula .arrow{color:var(--accent)}
.irow{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--fs-sm);
  background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:5px 9px}
.irow .in{flex:1;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.irow .iv{color:var(--text-hi);font-variant-numeric:tabular-nums}
.irow .ic{color:var(--dim-2);font-size:var(--fs-xs)}
.crow{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:var(--fs-xs);
  background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:5px 8px}
.crow .dir{color:var(--accent)}
.crow .dir.out{color:var(--ok)}
.crow .cn{flex:1;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .ci{color:var(--text)}
.wrow{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--fs-xs);
  background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:5px 8px}
.wrow .wn{flex:1;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--emoji),var(--mono)}
.wrow .wpct{color:var(--accent);width:44px;text-align:right;font-variant-numeric:tabular-nums}
.xbtn{padding:1px 6px;font-size:var(--fs-xs);border-color:transparent;background:transparent;color:var(--dim-2)}
.xbtn:hover{color:var(--err);background:#241618}
.ins-actions{display:flex;gap:8px;margin-top:16px}
.ins-actions button{flex:1;padding:9px}
.wide-btn{width:100%;padding:11px;font-family:var(--emoji),var(--mono)}
.wide-btn.small{padding:7px;margin-top:7px}
/* <a> をボタンと同じ見た目にする（別ページへのリンク用） */
a.link-btn{display:block;box-sizing:border-box;text-align:center;text-decoration:none;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.05em;color:var(--text);
  background:var(--panel-3);border:1px solid var(--line-2);border-radius:5px;transition:.15s}
a.link-btn:hover{background:#212c36;border-color:#3b4b59;color:var(--text-hi)}
/* 戻せない操作。押し間違えないよう赤で、既定では控えめに出す */
.wide-btn.danger{margin-top:8px;border-color:#5a2626;color:#e79a9a}
.wide-btn.danger:hover{background:#3a1a1a;border-color:#8c3a3a;color:#ffd0d0}

/* ---------------- ゴースト / トースト ---------------- */
.ghost{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%);
  font-family:var(--emoji),var(--mono);font-size:var(--fs-sm);letter-spacing:.06em;color:var(--text-hi);
  background:rgba(16,22,28,.94);border:1px dashed var(--accent);border-radius:7px;
  padding:9px 14px;display:flex;align-items:center;gap:8px;
  box-shadow:0 0 26px rgba(87,201,245,.18)}
.ghost i{width:9px;height:9px;border-radius:3px}
.toast{position:fixed;left:50%;bottom:38px;transform:translate(-50%,14px);z-index:70;
  font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-hi);
  background:rgba(18,25,32,.97);border:1px solid var(--line-2);border-radius:7px;
  padding:11px 20px;opacity:0;pointer-events:none;transition:.24s;
  box-shadow:0 12px 34px rgba(0,0,0,.55)}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* オートセーブの小さな表示。邪魔しない位置に置く */
.save-flash{position:fixed;right:14px;bottom:14px;z-index:70;
  font-family:var(--mono);font-size:var(--fs-xs);color:var(--dim);
  background:rgba(18,25,32,.9);border:1px solid var(--line);border-radius:5px;
  padding:6px 12px;opacity:0;pointer-events:none;transition:opacity .2s}
.save-flash.show{opacity:1}

/* ---------------- 全画面パネル ---------------- */
.overlay{position:fixed;inset:0;z-index:80;display:none;
  background:rgba(5,7,9,.78);backdrop-filter:blur(4px)}
.overlay.open{display:flex;align-items:center;justify-content:center;animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.ov-inner{width:min(1180px,92vw);height:min(760px,88vh);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.7)}
.ov-inner.wide{width:96vw;height:94vh}
.ov-inner.narrow{width:min(560px,92vw);height:auto;max-height:86vh}
.ov-head{position:relative;padding:16px 22px;border-bottom:1px solid var(--line);background:var(--panel-2);flex:none}
.ov-title{font-family:var(--mono);font-size:var(--fs-lg);letter-spacing:.16em;color:var(--text-hi)}
.ov-sub{font-size:var(--fs-sm);color:var(--dim);margin-top:6px;max-width:80%}
.ov-close{position:absolute;right:18px;top:16px;font-size:var(--fs-md);padding:6px 12px}
.ov-body{flex:1;padding:20px 22px;min-height:0}

.tabs{display:flex;gap:6px;margin-top:12px}
.tabs button{padding:7px 16px;color:var(--dim);letter-spacing:.12em}
.tabs button.on{background:#15303d;color:#9fe0fb;border-color:var(--accent-2)}
.tabs button b{color:var(--warn);margin-left:6px}

/* ---------------- 統計 ---------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:22px}
.tile{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.t-label{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.14em;color:var(--dim-2)}
.t-value{font-family:var(--mono);font-size:var(--fs-xl);color:var(--text-hi);margin-top:8px;font-variant-numeric:tabular-nums}
.t-icon{font-family:var(--emoji);font-size:var(--fs-md)}
.sec{margin-bottom:26px}
.sec h3{font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.16em;color:var(--dim);
  margin:0 0 12px;font-weight:400;padding-bottom:8px;border-bottom:1px solid var(--line)}
.sec .none{color:var(--dim-2);font-family:var(--mono);font-size:var(--fs-sm);padding:10px 2px}
.sec .none.small{padding:4px 2px;font-size:var(--fs-xs)}

.stall{display:flex;flex-direction:column;gap:10px}
.stall-group{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--dim-2);
  border-radius:8px;padding:12px 14px}
.stall-group[data-status="output-full"]{border-left-color:var(--warn)}
.stall-group[data-status="no-input"],
.stall-group[data-status="no-science"],
.stall-group[data-status="no-fuel"],
.stall-group[data-status="no-power"]{border-left-color:var(--err)}
.sg-head{font-family:var(--mono);font-size:var(--fs-md);color:var(--text-hi);margin-bottom:9px;letter-spacing:.06em}
.sg-head b{color:var(--accent)}
.sg-list{display:flex;flex-wrap:wrap;gap:7px}
.sg-node{display:inline-flex;align-items:center;gap:6px;font-family:var(--emoji),var(--mono);font-size:var(--fs-xs);
  background:var(--panel-3);border:1px solid var(--line-2);border-radius:5px;padding:5px 9px;cursor:pointer;transition:.14s}
.sg-node:hover{border-color:var(--accent);color:var(--text-hi)}
.sg-more{color:var(--dim-2);font-family:var(--mono);font-size:var(--fs-xs);align-self:center}

table.stats{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:var(--fs-sm)}
table.stats th{text-align:right;color:var(--dim-2);font-weight:400;font-size:var(--fs-xs);letter-spacing:.14em;
  padding:9px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:1}
table.stats th.l,table.stats td.l{text-align:left}
table.stats td{padding:7px 12px;border-bottom:1px solid rgba(31,40,49,.6);color:var(--text)}
table.stats td.num{text-align:right;font-variant-numeric:tabular-nums}
table.stats td.name{color:var(--text-hi);white-space:nowrap}
table.stats td.name .mk{margin-right:9px;vertical-align:-4px}
table.stats td.pos{color:var(--ok)}
table.stats td.neg{color:var(--err)}
table.stats td.muted{color:var(--dim-2)}
table.stats tr:hover td{background:rgba(255,255,255,.02)}
.trend{white-space:nowrap}
.spark{vertical-align:middle}
.spark-base{stroke:var(--line-2);stroke-width:1}
.peak{color:var(--dim-2);font-size:var(--fs-xs);margin-left:10px}

/* ---------------- 保管 ---------------- */
.stgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(230px * var(--ui-scale)),1fr));gap:6px}
.strow{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--fs-sm);
  background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:5px 9px}
.strow .stname{flex:1;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strow .stamt{color:var(--text-hi);font-variant-numeric:tabular-nums}
.strow .stcap{color:var(--dim-2);font-size:var(--fs-xs)}
.strow .stdel{padding:1px 5px;font-family:var(--emoji);font-size:calc(10px * var(--ui-scale));
  color:#7d5c5c;background:none;border:1px solid transparent;border-radius:4px;cursor:pointer}
.strow .stdel:hover{border-color:#8c3a3a;color:#ffb3b3;background:#3a1a1a}
/* 捨てるボタンが無い行でも列の位置を揃えるための空き */
.strow .stdel.ghost{display:inline-block;width:calc(20px * var(--ui-scale));
  padding:0;border:none;background:none;pointer-events:none}
.hubcard{background:rgba(255,255,255,.015);border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;margin-bottom:10px}
.hubhead{display:flex;align-items:center;gap:10px;margin-bottom:9px;cursor:pointer;
  font-family:var(--emoji),var(--mono);font-size:var(--fs-md);color:var(--text-hi)}
.hubhead:hover .hubname{color:var(--accent)}
.hubhead .hubid{color:var(--dim-2);font-size:var(--fs-xs)}
.hubhead .hubcap{margin-left:auto;color:var(--dim-2);font-size:var(--fs-xs);font-family:var(--mono)}

/* ---------------- セーブスロット ---------------- */
.slot{border:1px solid var(--line);border-radius:10px;background:var(--panel-2);padding:14px 16px;margin-bottom:12px}
.slot.current{border-color:var(--accent-2);box-shadow:inset 0 0 0 1px rgba(87,201,245,.18)}
.slot.empty{opacity:.85;border-style:dashed}
.slot-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.slot-name{font-family:var(--mono);font-size:var(--fs-md);letter-spacing:.14em;color:var(--text-hi)}
.slot-cur{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent);
  border:1px solid var(--accent-2);border-radius:4px;padding:1px 7px}
.slot-meta{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;font-family:var(--mono);font-size:var(--fs-xs);
  color:var(--text);margin-bottom:12px}
.slot-meta i{color:var(--dim-2);font-style:normal;display:inline-block;min-width:calc(78px * var(--ui-scale))}
.slot-meta.empty{display:block;color:var(--dim-2)}
.slot-btns{display:flex;gap:8px}
.slot-btns button{flex:1;padding:9px}
.slot-note{font-size:var(--fs-xs);color:var(--warn);line-height:1.7;padding:10px 2px}

/* ---------------- 設定 ---------------- */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 0;border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:none}
.set-label{font-size:var(--fs-md);color:var(--text-hi)}
.seg{display:flex;gap:4px;background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:4px}
.seg button{border:none;background:transparent;color:var(--dim);padding:7px 14px;font-size:var(--fs-sm)}
.seg button:hover{background:#1a222a;transform:none}
.seg button.on{background:#15303d;color:#9fe0fb;box-shadow:inset 0 0 0 1px rgba(87,201,245,.3)}

/* ---------------- 研究 ---------------- */
/* 左：ツリー / 右：押したカードの中身 */
.tech-wrap{flex:1;display:flex;min-height:0}
.tech-tree{position:relative;flex:1;overflow:auto;padding:22px;min-width:0}
.tech-detail{flex:none;width:min(340px,30vw);border-left:1px solid var(--line);
  background:var(--panel-2);padding:16px;overflow-y:auto}
.td-empty{color:var(--dim-2);font-size:var(--fs-sm);line-height:1.8}
.td-head{border-left:3px solid var(--lc);padding-left:10px;margin-bottom:14px}
.td-title{font-family:var(--mono);font-size:var(--fs-md);color:var(--text-hi);
  letter-spacing:.04em;line-height:1.45;overflow-wrap:anywhere}
.td-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;
  font-family:var(--mono);font-size:calc(9.5px * var(--ui-scale));letter-spacing:.08em}
.td-tags span{padding:2px 7px;border:1px solid var(--line-2);border-radius:4px;color:var(--dim)}
.td-lane{color:var(--lc)!important;border-color:var(--lc)!important}
.td-state.done{color:var(--ok);border-color:rgba(104,224,160,.5)}
.td-state.current{color:var(--accent);border-color:rgba(87,201,245,.5)}
.td-sec{margin-bottom:13px}
.td-sec > i{display:block;font-style:normal;font-family:var(--mono);
  font-size:calc(9.5px * var(--ui-scale));letter-spacing:.12em;color:var(--dim-2);margin-bottom:5px}
.td-sec p{margin:0;font-size:var(--fs-sm);color:var(--text-hi);line-height:1.75;overflow-wrap:anywhere}
.td-sec p.dimp{color:var(--dim)}
.td-chips{display:flex;flex-wrap:wrap;gap:5px}
.td-chips span{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--text);
  background:#121a21;border:1px solid var(--line);border-radius:5px;padding:3px 7px}
.td-link{font-size:var(--fs-xs);padding:3px 8px}
.td-link.done{color:var(--ok);border-color:rgba(104,224,160,.35)}
.td-note{font-size:var(--fs-xs);color:var(--dim);line-height:1.7;
  border-top:1px dashed var(--line);padding-top:9px}
.td-note.ok{color:var(--ok)}
.td-note.lock{color:var(--warn)}

/* 研究キュー。右の欄の一番上に常駐させる（押した技術を見ても隠れないこと）。
   前提が未達のものも積めるので、そこは薄く出して「待ち」だと分かるようにする。 */
.td-queue{border:1px solid var(--line-2);border-radius:7px;background:#0d141a;
  padding:9px 10px;margin-bottom:14px}
.tq-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.tq-head > i{flex:1;font-style:normal;font-family:var(--mono);
  font-size:calc(9.5px * var(--ui-scale));letter-spacing:.12em;color:var(--dim-2)}
.tq-clear{font-size:var(--fs-xs);padding:2px 7px;color:var(--dim)}
.tq-empty{font-size:var(--fs-xs);color:var(--dim-2);line-height:1.7}
.tq-hint{font-size:var(--fs-xs);color:var(--dim-2);line-height:1.6;margin-top:6px}
.tq-row{display:flex;align-items:center;gap:5px;padding:2px 0}
.tq-row.locked .tq-name{color:var(--dim-2)}
.tq-row.now .tq-n{color:var(--accent)}
.tq-n{font-family:var(--mono);font-size:var(--fs-xs);color:var(--dim-2);
  width:calc(15px * var(--ui-scale));text-align:center;flex:none}
.tq-name{flex:1;min-width:0;text-align:left;background:none;border:none;padding:2px 4px;
  color:var(--text);font-family:var(--mono);font-size:var(--fs-xs);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:4px}
.tq-name:hover{background:#16222c;color:var(--text-hi);transform:none}
.tq-p{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent);flex:none}
.tq-btn{border:none;background:transparent;color:var(--dim-2);flex:none;
  padding:2px 4px;border-radius:4px;font-size:var(--fs-xs);line-height:1}
.tq-btn:hover{background:#16222c;color:var(--text-hi);transform:none}
.tq-btn.del:hover{color:var(--err)}

/* キューに積んだカードは、何番目かをカードの見出しに出す */
.tech.queued{border-color:rgba(143,168,255,.45)}
.tech.queued .t-state{color:#a9bcff}
.t-qn{font-family:var(--mono);font-size:calc(9px * var(--ui-scale));color:#0d141a;
  background:#8fa8ff;border-radius:9px;padding:0 5px;line-height:1.6;flex:none}

/* 上部バー：キューの残り本数 */
.rs-q{font-family:var(--mono);font-size:var(--fs-xs);color:#a9bcff;margin-left:6px;
  border:1px solid rgba(143,168,255,.4);border-radius:4px;padding:0 5px}

/* ロック中のカードも**背景は不透明のまま**にする。
   カード全体を半透明にすると、下の層の依存線が透けて「線がカードを貫く」ように見える。 */
.tech.locked{cursor:pointer;border-color:#1a2129}
.tech.locked .t-head,.tech.locked .t-state,.tech.locked .t-effect,.tech.locked .t-cost{opacity:.45}
.tech.locked .t-lane{opacity:.35}
.tech.done{border-color:rgba(104,224,160,.4);background:linear-gradient(180deg,#101a16,#0e1418)}
.tech.current{border-color:var(--accent);box-shadow:0 0 0 1px rgba(87,201,245,.35),0 0 26px rgba(87,201,245,.14)}
.tech.picked{border-color:#8fa8ff;box-shadow:0 0 0 2px rgba(143,168,255,.45),0 10px 30px rgba(0,0,0,.6);z-index:8}
/* **名前を省略しない。** 折り返して全部出す（切れて読めないのを止めるため） */
.t-name{font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-hi);letter-spacing:.03em;flex:1;
  line-height:1.4;overflow-wrap:anywhere}
.t-state{font-family:var(--mono);font-size:calc(9.5px * var(--ui-scale));letter-spacing:.08em;
  color:var(--dim-2);margin-top:4px}
.tech.done .t-state{color:var(--ok)}
.tech.current .t-state{color:var(--accent)}
.t-cost{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-xs);color:var(--text)}
.t-cost span{display:inline-flex;align-items:center;gap:5px}
.t-cost .mk{width:15px;height:15px;font-size:9px}
.t-cost.big{gap:12px;font-size:var(--fs-sm)}
.t-cost.big .mk{width:calc(20px * var(--ui-scale));height:calc(20px * var(--ui-scale))}
.t-bar{height:3px;background:#181f26;border-radius:2px;margin:8px 0 0;overflow:hidden}
.t-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.tech.done .t-bar i{background:var(--ok)}

/* ---------------- ロケット発射演出 ---------------- */
#launch-overlay{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0}
#launch-overlay.go{opacity:1}
.lo-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 75%,rgba(245,197,66,.28),transparent 60%);opacity:0}
#launch-overlay.go .lo-flash{animation:loflash 5s ease-out forwards}
@keyframes loflash{0%{opacity:0}8%{opacity:1}100%{opacity:0}}
.lo-rocket{position:absolute;left:50%;bottom:-80px;font-size:56px;color:#fff3d0;
  text-shadow:0 0 40px rgba(245,197,66,.9);transform:translateX(-50%);opacity:0}
#launch-overlay.go .lo-rocket{animation:lorocket 4.4s cubic-bezier(.4,0,.3,1) forwards}
@keyframes lorocket{0%{opacity:0;bottom:-80px}12%{opacity:1}100%{opacity:0;bottom:115%}}
.lo-text{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);text-align:center;opacity:0}
#launch-overlay.go .lo-text{animation:lotext 5s ease-out forwards}
@keyframes lotext{0%{opacity:0;letter-spacing:.5em}18%{opacity:1;letter-spacing:.26em}80%{opacity:1}100%{opacity:0}}
.lo-title{font-family:var(--mono);font-size:34px;letter-spacing:.26em;color:#fff;text-shadow:0 0 30px rgba(245,197,66,.8)}
.lo-num{font-family:var(--mono);font-size:62px;color:#f5c542;margin-top:8px;text-shadow:0 0 40px rgba(245,197,66,.6)}
.lo-note{font-family:var(--mono);font-size:14px;letter-spacing:.18em;color:var(--dim);margin-top:14px}

/* ---------------- DEBUG ---------------- */
#debug-panel{position:fixed;right:14px;top:calc(var(--h-top) + 14px);
  width:240px;z-index:75;display:none;
  background:rgba(13,17,22,.97);border:1px solid #3a2b12;border-radius:9px;
  box-shadow:0 16px 44px rgba(0,0,0,.6);font-family:var(--mono);font-size:var(--fs-xs)}
body.debug-on #debug-panel{display:block}
.dbg-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;
  border-bottom:1px solid #2a2113;color:var(--warn);letter-spacing:.18em;font-size:var(--fs-xs)}
.dbg-head button{padding:2px 7px}
.dbg-sec{padding:11px 12px;border-bottom:1px solid var(--line)}
.dbg-label{font-size:var(--fs-xs);letter-spacing:.16em;color:var(--dim-2);margin-bottom:7px}
.dbg-row{display:flex;gap:5px;margin-top:7px}
.dbg-row button{flex:1;padding:6px 3px}
.dbg-check{display:flex;align-items:center;gap:7px;color:var(--dim);cursor:pointer}

/* ============================================================
   v0.4 で足した物
   ・ツールチップ（最前面・カーソル判定を奪わない）
   ・ホットバー / チュートリアル / 工場ノード / 導線 / ドローン
   ・研究ツリーのレーン配置
   ============================================================ */

/* ---------------- ツールチップ ----------------
   **pointer-events:none を外さないこと。**
   吹き出しがカーソル判定を取ると、出す→隠すが交互に起きてちらつく。 */
#tip{
  position:fixed;left:0;top:0;z-index:9999;pointer-events:none;
  max-width:min(380px, 46vw);opacity:0;transform:translateY(-4px);
  transition:opacity .1s ease, transform .1s ease;
  background:rgba(10,14,19,.98);border:1px solid var(--line-2);border-radius:9px;
  box-shadow:0 18px 48px rgba(0,0,0,.72);padding:10px 12px;
  font-size:var(--fs-xs);line-height:1.55;color:var(--text);
}
#tip.show{opacity:1;transform:translateY(0)}
#tip .tp-head{display:flex;align-items:center;gap:7px;margin-bottom:7px;flex-wrap:wrap}
#tip .tp-name{font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-hi);letter-spacing:.03em}
#tip .tp-sub{font-family:var(--mono);font-size:calc(9.5px * var(--ui-scale));color:var(--dim-2);margin-left:auto}
#tip .tp-body{color:var(--dim);margin-bottom:6px}
#tip .tp-sec{margin-top:8px;border-top:1px dashed var(--line);padding-top:7px}
#tip .tp-label{font-family:var(--mono);font-size:calc(9.5px * var(--ui-scale));letter-spacing:.14em;color:var(--dim-2);margin-bottom:5px}
#tip .tp-formula{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-family:var(--mono);font-size:var(--fs-xs)}
#tip .tp-fi{display:inline-flex;align-items:center;gap:4px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:5px;padding:2px 6px}
#tip .tp-fi.dim{color:var(--dim-2)}
#tip .tp-formula b{color:var(--dim-2)}
#tip .tp-formula b.ar{color:var(--accent)}
#tip .tp-rline{margin-bottom:7px}
#tip .tp-rate{display:flex;gap:12px;margin-top:5px;font-family:var(--mono)}
#tip .tp-r{display:inline-flex;align-items:baseline;gap:5px;color:var(--text-hi)}
#tip .tp-r i{font-style:normal;color:var(--dim-2);font-size:calc(9.5px * var(--ui-scale));letter-spacing:.1em}
#tip .tp-r.low{color:var(--warn)}
#tip .tp-why{color:var(--dim-2);font-size:calc(10.5px * var(--ui-scale));margin-top:4px}
#tip .tp-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px;font-family:var(--mono);color:var(--dim)}
#tip .tp-chips{display:flex;flex-wrap:wrap;gap:5px}
#tip .tp-chip{display:inline-flex;align-items:center;gap:4px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:5px;padding:2px 6px;font-family:var(--mono)}
#tip .tp-chip.miss{border-color:#5a2b2b;color:#f0a0a0}
#tip .tp-chip.free{border-color:var(--accent-2);color:#9fe0fb}
#tip .tp-chip.dim{color:var(--dim-2)}
#tip .tp-more{color:var(--dim-2);font-family:var(--mono);margin-top:3px}
/* 「どの機械で作るのか」。レシピ式のすぐ下に置く */
#tip .tp-mach{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:4px 0 7px;
  font-family:var(--mono);font-size:var(--fs-xs)}
#tip .tp-mach > i{font-style:normal;color:var(--dim-2);letter-spacing:.12em;
  font-size:calc(9.5px * var(--ui-scale))}
#tip .tp-mach .bicon{width:calc(18px * var(--ui-scale));height:calc(18px * var(--ui-scale));
  font-size:calc(11px * var(--ui-scale))}

/* ---------------- ビューポートに浮く UI ----------------
   .ui-over が付いた物の上ではキャンバスのドラッグを始めない
   （pointerdown で preventDefault するとクリックが消えるため）。 */
.ui-over{z-index:14}

/* ---------------- ホットバー ---------------- */
.hotbar{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;gap:6px;z-index:14;max-width:calc(100% - 24px);
  background:rgba(13,17,22,.9);border:1px solid var(--line);border-radius:10px;padding:6px;
  box-shadow:0 12px 34px rgba(0,0,0,.45);
}
.hb-cell{
  /* 窓が狭いときは枠を縮めて9つとも必ず収める（はみ出して押せなくなるのを防ぐ） */
  position:relative;flex:1 1 auto;min-width:0;
  width:calc(78px * var(--ui-scale));max-width:calc(78px * var(--ui-scale));
  height:calc(58px * var(--ui-scale));
  border:1px solid var(--line-2);border-radius:7px;background:var(--panel-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  cursor:pointer;transition:.14s;overflow:hidden;
}
.hb-cell:hover{border-color:#3b4b59;background:#161d25}
.hb-cell.armed{border-color:var(--accent);box-shadow:inset 0 0 0 1px rgba(87,201,245,.4)}
.hb-cell.empty{border-style:dashed;opacity:.55}
.hb-cell.poor{border-color:#5a2b2b}
.hb-cell.poor .bicon{filter:grayscale(.6)}
.hb-cell.locked,.hb-cell.capped,.hb-cell.gone{opacity:.4}
.hb-cell.locked::after,.hb-cell.capped::after{
  content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,
  transparent 0 5px,rgba(255,255,255,.05) 5px 10px)}
.hb-key{position:absolute;left:4px;top:3px;font-family:var(--mono);
  font-size:calc(9px * var(--ui-scale));color:var(--dim-2)}
.hb-name{font-size:calc(9.5px * var(--ui-scale));color:var(--dim);max-width:95%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.hb-empty{color:var(--dim-2);font-size:var(--fs-lg)}
/* まだ何も登録していないときだけ出す使い方の1行 */
.hb-hint{position:absolute;left:0;right:0;bottom:calc(100% + 6px);text-align:center;
  font-size:var(--fs-xs);color:var(--dim);pointer-events:none;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* ---------------- チュートリアル ---------------- */
.tutorial{
  position:absolute;right:14px;top:14px;z-index:14;
  width:min(calc(310px * var(--ui-scale)), 44vw);
  max-width:calc(100% - 28px);max-height:calc(100% - 28px);overflow:auto;
  background:rgba(13,17,22,.95);border:1px solid var(--line-2);border-radius:10px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);display:none;overflow:hidden;
}
.tutorial.open{display:block}
.tut-head{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#141c25,#0e141a)}
.tut-title{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.14em;color:var(--text-hi)}
.tut-sub{font-size:calc(10px * var(--ui-scale));color:var(--dim-2);flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tut-count{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent)}
.tut-btn{padding:3px 7px;font-size:calc(9.5px * var(--ui-scale))}
.tut-list{padding:6px 0;max-height:44vh;overflow:auto}
.tut-step{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;
  padding:6px 11px;cursor:pointer;font-size:var(--fs-xs);color:var(--text)}
.tut-step:hover{background:#151c24}
.tut-mark{width:17px;height:17px;border-radius:50%;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:calc(9.5px * var(--ui-scale));color:var(--dim);flex:none}
.tut-step.done .tut-mark{border-color:var(--ok);color:#0b1410;background:var(--ok)}
.tut-step.done .tut-text{color:var(--dim-2);text-decoration:line-through}
.tut-more{color:var(--dim-2);font-family:var(--mono)}
.tut-detail{grid-column:1/4;color:var(--dim);font-size:calc(10.5px * var(--ui-scale));
  line-height:1.65;padding:6px 0 2px;border-top:1px dashed var(--line);margin-top:5px}
.tut-done{padding:9px 11px;border-top:1px solid var(--line);color:var(--ok);font-size:var(--fs-xs)}
/* 工場の編集バーが出ているあいだは、その下へ逃がす */
body.factory-edit .tutorial{top:calc(52px * var(--ui-scale))}

/* ---------------- 工場定義の編集バー ---------------- */
#factory-edit-bar{
  position:absolute;left:0;right:0;top:0;z-index:16;display:none;
  align-items:center;gap:10px;padding:8px 14px;
  background:linear-gradient(180deg,rgba(60,72,140,.94),rgba(30,36,72,.9));
  border-bottom:1px solid #6b7bd0;box-shadow:0 6px 26px rgba(0,0,0,.4);
}
body.factory-edit #factory-edit-bar{display:flex}
body.factory-edit #viewport{box-shadow:inset 0 0 0 2px rgba(143,168,255,.35)}
.fe-badge{font-family:var(--emoji);font-size:var(--fs-lg)}
.fe-title{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.16em;color:#e6ebff;white-space:nowrap}
.fe-name{font-family:var(--mono);font-size:var(--fs-sm);background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.2);border-radius:5px;color:#fff;padding:4px 8px;width:200px}
.fe-sub{font-size:calc(10.5px * var(--ui-scale));color:#c4cdf5;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fe-btn{background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.25);color:#e6ebff}
.fe-btn:hover{background:rgba(0,0,0,.5)}
/* 試運転中は「今は動いている」ことを見落とさせない（編集中は普段止まっているため） */
.fe-btn.on{background:rgba(104,224,160,.22);border-color:rgba(104,224,160,.6);color:#d6ffe9}
body.factory-trial #viewport{box-shadow:inset 0 0 0 2px rgba(104,224,160,.45)}
body.factory-trial #factory-edit-bar{background:linear-gradient(90deg,#1b3a2c,#1a2140)}

/* ---------------- ノード：導線と工場 ---------------- */
.prow .pflow{font-family:var(--mono);font-size:calc(9px * var(--ui-scale));color:var(--dim-2);
  margin-left:auto;padding-right:5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.prow.limited{background:rgba(240,180,94,.10);border-radius:4px}
.prow.limited .pflow{color:var(--warn)}
.node.factory .nhead{background:linear-gradient(180deg,#1a2140,#141a2c)}
.nver{font-family:var(--mono);font-size:calc(9px * var(--ui-scale));color:var(--dim-2);
  border:1px solid var(--line-2);border-radius:4px;padding:0 4px}
.nver.pending{color:var(--warn);border-color:rgba(240,180,94,.5);background:rgba(240,180,94,.12)}
.nstore{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0}
.nstore .sitem{display:inline-flex;align-items:center;gap:3px;font-family:var(--emoji),var(--mono);
  font-size:calc(10px * var(--ui-scale));background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.nstore .sitem b{font-family:var(--mono);color:var(--text-hi);font-weight:400}
/* ノードの上で搬出を切り替える。押した品目には出力ポートが生える */
.nstore .sitem.exporting{border-color:var(--accent-2);background:rgba(87,201,245,.10)}
.nstore .sitem .sx{border:none;background:transparent;color:var(--dim-2);cursor:pointer;
  font-size:calc(9px * var(--ui-scale));line-height:1;padding:1px 2px;border-radius:3px;font-family:var(--mono)}
.nstore .sitem .sx:hover{color:var(--text-hi);background:rgba(255,255,255,.10)}
.nstore .sitem .sx.on{color:var(--accent)}

/* ---------------- 補給ドローンの飛行 ---------------- */
.df-path{stroke-width:1.2;fill:none;stroke-dasharray:3 7;opacity:.5}
.df-dot circle{opacity:.9;filter:drop-shadow(0 0 6px rgba(255,255,255,.25))}
.df-label{font-family:var(--mono);font-size:10px;fill:#e8f0f6}

/* ---------------- インスペクタの追加部品 ---------------- */
.prow-ins{border:1px solid var(--line);border-radius:7px;padding:8px;margin-bottom:7px;background:var(--panel-2)}
.prow-ins.limited{border-color:rgba(240,180,94,.5);background:rgba(240,180,94,.07)}
.pi-head{display:flex;align-items:center;gap:6px}
.pi-tier{margin-left:auto;font-family:var(--mono);font-size:calc(9.5px * var(--ui-scale));color:var(--dim-2)}
.pi-meta{display:flex;align-items:baseline;gap:6px;margin:5px 0 7px;font-family:var(--mono);font-size:var(--fs-xs)}
.pi-rate{color:var(--text-hi);font-variant-numeric:tabular-nums}
.pi-cap{color:var(--dim-2)}
.pi-links{margin-left:auto;color:var(--dim)}
.pi-links.full{color:var(--warn)}
.bi-cost.inline{display:inline-flex;gap:6px;margin-left:6px}
.ins-note.lock{color:var(--warn);border-left:2px solid rgba(240,180,94,.5);padding-left:7px}
.ins-note.dim{color:var(--dim-2)}
.ins-check{display:flex;align-items:center;gap:7px;color:var(--dim);cursor:pointer;
  font-size:var(--fs-xs);margin-top:8px}
.ins-label.sm{margin-top:9px}
.hrow{display:flex;align-items:center;gap:6px;padding:3px 0}
.hrow .in{flex:1;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrow .iv{font-family:var(--mono);color:var(--text-hi);font-variant-numeric:tabular-nums}
.hrow .ic{font-family:var(--mono);color:var(--dim-2);font-size:var(--fs-xs)}
.hrow .tgl{padding:2px 7px;font-size:calc(9.5px * var(--ui-scale));color:var(--dim-2)}
.hrow .tgl.on{border-color:var(--accent-2);color:#9fe0fb;background:#123243}
.hrow .tgl.del{color:#7d5c5c;font-family:var(--emoji)}
.hrow .tgl.del:hover{border-color:#8c3a3a;color:#ffb3b3;background:#3a1a1a}
/* 搬出に指定した行は、出力ポートが生えていることが分かるように印を付ける */
.hrow.exporting .in{color:var(--text-hi)}
.hrow.exporting{background:linear-gradient(90deg,transparent,#12324333);border-radius:4px}
.hrow2{display:flex;align-items:center;gap:5px;padding:3px 0}
.hrow2 .in{flex:1;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-xs)}
.hrow2 .winput{width:60px}
.ins-warn{border:1px solid rgba(240,180,94,.4);background:rgba(240,180,94,.08);
  border-radius:7px;padding:9px;margin-top:8px}
.iw-title{font-family:var(--mono);font-size:var(--fs-xs);color:var(--warn);letter-spacing:.1em;margin-bottom:6px}
.iw-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-family:var(--mono);
  font-size:var(--fs-xs);color:var(--text);margin-bottom:4px}
.iw-line i{font-style:normal;color:var(--dim-2);letter-spacing:.08em}
.iw-line .miss{color:#f0a0a0}
.iw-line.danger{color:#f0a0a0}
.dbar{width:52px;height:4px;background:#181f26;border-radius:2px;overflow:hidden;flex:none}
.dbar i{display:block;height:100%;background:var(--accent)}
.upd{font-family:var(--mono);font-size:var(--fs-xs)}
.upd-row{display:flex;justify-content:space-between;padding:3px 0;color:var(--dim)}
.upd-row b{color:var(--text-hi)}
.upd-bar{height:5px;background:#181f26;border-radius:3px;overflow:hidden;margin:8px 0}
.upd-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.upd-notes{margin:7px 0;color:var(--dim);white-space:pre-wrap}
.upd-notes i{display:block;color:var(--dim-2);letter-spacing:.12em;margin-bottom:3px;font-style:normal}

/* ---------------- キー設定 ---------------- */
.set-row.col{flex-direction:column;align-items:stretch;gap:8px}
.keygroup{border:1px solid var(--line);border-radius:7px;padding:9px;margin-bottom:8px;background:var(--panel-2)}
.kg-title{font-family:var(--mono);font-size:calc(9.5px * var(--ui-scale));letter-spacing:.14em;
  color:var(--dim-2);margin-bottom:7px}
.krow{display:flex;align-items:center;gap:8px;padding:3px 0}
.krow .kn{flex:1;color:var(--dim);font-size:var(--fs-xs)}
.krow .kbtn{min-width:74px;text-align:center}
.krow .kbtn.active{border-color:var(--accent);color:#9fe0fb;background:#123243}
.krow .kreset{padding:3px 7px;color:var(--dim-2)}
.krow.bad .kbtn{border-color:#5a2b2b;color:#f0a0a0}
.kbad{font-family:var(--mono);font-size:calc(9.5px * var(--ui-scale));color:#f0a0a0}

/* ---------------- 工場ノードのパネル ---------------- */
.faccard{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px;background:var(--panel-2)}
.faccard.pending{border-color:rgba(240,180,94,.45)}
.fc-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.fc-name{font-family:var(--mono);font-size:var(--fs-md);color:var(--text-hi);flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-ver{font-family:var(--mono);font-size:var(--fs-xs);color:var(--dim-2)}
.fc-pend{font-family:var(--mono);font-size:var(--fs-xs);color:var(--warn);
  border:1px solid rgba(240,180,94,.4);border-radius:4px;padding:1px 6px}
.fc-io{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;
  background:#0c1116;border:1px solid var(--line);border-radius:8px;padding:9px;margin-bottom:9px}
.fc-side{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.fc-lab{display:block;width:100%;font-family:var(--mono);font-size:calc(9.5px * var(--ui-scale));
  letter-spacing:.12em;color:var(--dim-2);margin-bottom:3px}
.fc-item{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--text);
  background:var(--panel-3);border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.fc-arrow{color:var(--accent);font-size:var(--fs-lg)}
.fc-meta{display:flex;gap:14px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--dim);margin-bottom:7px}
.fc-meta b{color:var(--text-hi)}
.fc-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.fc-btns button{flex:1;min-width:96px}
.fc-ports{border-top:1px dashed var(--line);margin-top:10px;padding-top:9px}
.fc-pick{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.pick{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;font-family:var(--sans);
  font-size:var(--fs-xs);color:var(--dim)}
.pick.on{border-color:var(--accent-2);color:#9fe0fb;background:#123243}
/* 既定で公開になる口（中で繋ぎ終わっていないポート）に薄い印を付ける。
   手で切り替えたとき、どこが既定だったのか分かるようにするため。 */
.pick.auto{border-style:dashed}

.bitem.fac{border-left:2px solid #8fa8ff}
.htags{display:flex;flex-wrap:wrap;gap:5px;padding:5px 0 2px}
.htag{font-family:var(--mono),var(--emoji);font-size:calc(9.5px * var(--ui-scale));color:var(--dim);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.htag.out{color:#9fe0fb;border-color:var(--accent-2)}
.htag.tgt{color:var(--ok);border-color:rgba(104,224,160,.4)}
.htag.rsv{color:var(--warn);border-color:rgba(240,180,94,.4)}

/* ---------------- セーブ画面の追加 ---------------- */
.slot.old{opacity:.75;border-style:dashed}
.slot-bk{font-family:var(--mono);font-size:calc(9.5px * var(--ui-scale));color:var(--dim-2);margin-left:8px}
.slot-note.warn{color:var(--warn);font-size:var(--fs-xs);margin:6px 0}
.raw-export textarea{width:100%;height:120px;background:#0c1116;color:var(--text);
  border:1px solid var(--line-2);border-radius:6px;font-family:var(--mono);font-size:var(--fs-xs);padding:8px}
.notice-list{margin:6px 0 0;padding-left:20px;color:var(--dim);font-size:var(--fs-xs);line-height:1.9}

/* ---------------- 研究：レーン × Tier の配置 ----------------
   列 = Tier、行 = レーン。縦線は列と列のあいだの隙間だけを通るので
   カードと線が重ならない（研究パネルの読みやすさの要）。 */
.tech-grid{position:relative;z-index:2}
#tech-lines,#tech-lines-hi{position:absolute;left:22px;top:22px;pointer-events:none;background:transparent}
#tech-lines{z-index:1}
#tech-lines-hi{z-index:3}
#tech-lines path.tl,#tech-lines-hi path.tl{fill:none;stroke-width:1.7;opacity:.34;
  stroke-linejoin:round;stroke-linecap:round}
#tech-lines path.tl.far{stroke-dasharray:7 6;opacity:.22}
#tech-lines path.tl-arrow,#tech-lines-hi path.tl-arrow{fill:none;stroke-width:1.7;opacity:.34;
  stroke-linejoin:round;stroke-linecap:round}
#tech-lines-hi path.hi{opacity:1;stroke-width:3;stroke-dasharray:none;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.3))}
/* どれかに触れているあいだは、下の線を薄くして追いやすくする */
#tech-tree.focused #tech-lines path{opacity:.1}

.lane-band{position:absolute;left:0;border-top:1px dashed var(--line);
  border-left:3px solid var(--lc);
  background:linear-gradient(90deg,rgba(255,255,255,.028),transparent 42%);
  border-radius:6px;pointer-events:none;z-index:0}
.lane-name{display:inline-block;margin:7px 0 0 9px;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.18em;color:var(--lc);
  background:rgba(10,14,19,.85);border-radius:4px;padding:2px 7px;will-change:transform}
.tier-head{position:absolute;top:0;text-align:center;pointer-events:none;
  font-family:var(--mono);font-size:calc(9.5px * var(--ui-scale));letter-spacing:.14em;
  color:var(--dim-2);z-index:1}

.tech{position:absolute;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
  padding:11px 12px;cursor:pointer;z-index:5;transition:border-color .12s,box-shadow .12s}
.tech:hover{border-color:#485b6b;z-index:6}
.tech .t-lane{position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--lc)}
.t-head{display:flex;align-items:flex-start;gap:7px}
.t-tier{font-family:var(--mono);font-size:calc(9px * var(--ui-scale));color:var(--dim-2);
  border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;flex:none;margin-top:1px}
/* **効果は省略しない。**行数は中身に任せ、高さは描いてから実測して積む */
.t-effect{font-size:var(--fs-xs);color:var(--text-hi);line-height:1.6;margin:7px 0 8px;
  overflow-wrap:anywhere}

#tech-tree{cursor:grab}
#tech-tree.grabbing{cursor:grabbing;user-select:none}

/* ============================================================
   アイコン（assets/icons の 64x64 ドット絵）

   FG.itemIcon / FG.buildingIcon が <img class="ico"> を返すので、
   .mk / .bicon / .nicon の中でも、文章の中でも同じクラスで収まるようにする。
   **ドット絵なので image-rendering:pixelated を外さない**（ぼやける）。
   ドラッグでゴーストが出るとキャンバスの操作を邪魔するので掴めなくする。
   ============================================================ */
.ico{
  display:inline-block;flex:none;
  width:calc(22px * var(--ui-scale));height:calc(22px * var(--ui-scale));
  vertical-align:-.38em;object-fit:contain;
  image-rendering:pixelated;
  -webkit-user-drag:none;user-drag:none;pointer-events:none;
}
/* 印の中に入るときは枠いっぱいに（リングは残す） */
.mk > .ico,.bicon > .ico{width:94%;height:94%;vertical-align:0}
.nicon > .ico{width:calc(26px * var(--ui-scale));height:calc(26px * var(--ui-scale));vertical-align:0}
.mk-s > .ico{width:calc(20px * var(--ui-scale));height:calc(20px * var(--ui-scale))}
.hb-cell .bicon > .ico{width:92%;height:92%}
.ghost .ico{width:16px;height:16px}
/* 未解禁・素材不足のときは絵も一緒に沈める */
.bitem.poor .ico,.bitem.capped .ico{opacity:.55}
.tech.locked .ico{opacity:.6}

/* 上部バーと保管のボタンに使う UI アイコン */
.btn-ico{width:calc(18px * var(--ui-scale));height:calc(18px * var(--ui-scale));
  vertical-align:-.2em;margin-right:5px;image-rendering:pixelated;
  -webkit-user-drag:none;pointer-events:none}

/* ============================================================
   狭い窓での上部バー

   **切るのではなく、要らない物から順に落として折り返す。**
   固定の高さにして中身を切ると、右端のボタンが押せなくなる。
   ============================================================ */
@media (max-width:1800px){
  .mini{display:none}                     /* ロケット数と経過時間は統計で見られる */
  /* 上のバーだけ拡大率を戻す。ここは「見る物」ではなく「押す物」なので、
     大きいままだと段が増えてキャンバスを食う */
  #topbar{--ui-scale:1.05}
}
@media (max-width:1500px){
  #topbar .btns button{padding:6px 8px;font-size:0}   /* 文字を落として絵だけにする */
  #topbar .btns .btn-ico{margin-right:0}
  #btn-fit{font-size:var(--fs-xs);padding:6px 9px}    /* 絵の無いものは文字を残す */
  .brand .ver{display:none}
}
@media (max-width:1250px){
  .brand{font-size:0}
  .brand::before{content:'C8';font-size:var(--fs-lg);color:var(--text-hi)}
  .power-meter .pm-title{display:none}
  .research-status{flex-basis:calc(150px * var(--ui-scale))}
}