/* 芯片漫游 · UI */
:root{
  --bg:#05080d;
  --ink:#dbe7f2;
  --muted:#7d90a4;
  --line:rgba(120,170,220,.18);
  --glass:rgba(10,18,28,.78);
  --accent:#4db8ff;
  --accent2:#ffcf5a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font:13px/1.5 "Segoe UI","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
button,select,input{font:inherit;color:inherit}
.hidden{display:none !important}
.sep{opacity:.3;margin:0 7px}
.muted{color:var(--muted)}

/* ── 载入 ── */
#boot{position:fixed;inset:0;z-index:50;display:grid;place-items:center;
  background:radial-gradient(1200px 700px at 50% 35%,#0b1726 0%,#04070c 70%)}
#boot.gone{opacity:0;pointer-events:none;transition:opacity .9s ease}
.boot-card{width:min(92vw,470px);padding:34px 36px;border:1px solid var(--line);
  border-radius:16px;background:rgba(8,14,22,.72);backdrop-filter:blur(8px);
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.boot-title{font-size:30px;letter-spacing:.22em;font-weight:600;
  background:linear-gradient(92deg,#7fd8ff,#4db8ff 40%,#ffcf5a);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.boot-sub{color:var(--muted);margin:6px 0 22px;letter-spacing:.06em}
.boot-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4db8ff,#ffcf5a);
  transition:width .3s ease}
.boot-msg{margin:10px 0 20px;color:var(--muted);font-size:12px;min-height:18px}
.boot-form{display:flex;gap:12px;align-items:flex-end}
.boot-form label{flex:1;color:var(--muted);font-size:12px}
.boot-form input{display:block;width:100%;margin-top:6px;padding:9px 11px;border-radius:8px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);letter-spacing:.14em}
.boot-form button{padding:10px 26px;border-radius:8px;border:1px solid rgba(77,184,255,.5);
  background:linear-gradient(180deg,rgba(77,184,255,.28),rgba(77,184,255,.12));
  color:#dff1ff;cursor:pointer;letter-spacing:.2em}
.boot-form button:disabled{opacity:.35;cursor:progress}
.boot-form button:not(:disabled):hover{background:rgba(77,184,255,.4)}
.boot-tip{margin-top:18px;color:#5f7386;font-size:11.5px;line-height:1.8}
.boot-tip b{color:#9fc4de;font-weight:600}

/* ── 顶栏 ── */
#topbar{position:fixed;top:0;left:0;right:0;height:52px;z-index:20;display:flex;
  align-items:center;gap:18px;padding:0 16px;
  background:linear-gradient(180deg,rgba(4,8,14,.9),rgba(4,8,14,0));pointer-events:none}
#topbar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;min-width:260px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:#4db8ff;
  box-shadow:0 0 12px 3px rgba(77,184,255,.6)}
.brand .t1{font-size:14px;font-weight:600;letter-spacing:.04em}
.brand .t2{font-size:11px;color:var(--muted)}
.modes{display:flex;gap:6px;margin:0 auto}
.modes button{padding:6px 14px;border-radius:7px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer}
.modes button:hover{color:var(--ink)}
.modes button.on{color:#eaf6ff;border-color:rgba(77,184,255,.55);
  background:rgba(77,184,255,.16);box-shadow:0 0 18px rgba(77,184,255,.18) inset}
.stat{font-size:11.5px;color:var(--muted);min-width:180px;text-align:right}

/* ── 面板 ── */
.panel{position:fixed;z-index:15;width:252px;border:1px solid var(--line);border-radius:12px;
  background:var(--glass);backdrop-filter:blur(10px);overflow:hidden;
  box-shadow:0 16px 46px rgba(0,0,0,.5)}
#left{left:12px;top:62px;bottom:52px}
#right{right:12px;top:62px;bottom:52px;width:322px}
.panel .ph{padding:9px 12px;font-size:12px;letter-spacing:.1em;color:#9fc4de;
  border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.panel .ph2{padding:12px 12px 6px;font-size:11px;letter-spacing:.1em;color:#7fa8c8;
  border-top:1px solid var(--line);margin-top:10px}
.panel .fold{width:20px;height:20px;line-height:16px;border-radius:5px;border:1px solid var(--line);
  background:transparent;color:var(--muted);cursor:pointer;padding:0}
.panel .pb{padding:10px 12px 14px;overflow-y:auto;height:calc(100% - 36px)}
.panel.folded .pb{display:none}
.panel.folded{bottom:auto !important}
.pb::-webkit-scrollbar{width:7px}
.pb::-webkit-scrollbar-thumb{background:rgba(120,170,220,.22);border-radius:4px}
.row{margin:9px 0}
.row label{display:flex;justify-content:space-between;color:var(--muted);font-size:11.5px}
.row label b{color:#bcd6ea;font-weight:500}
.row input[type=range]{width:100%;margin-top:5px;accent-color:#4db8ff}
.row select{width:100%;margin-top:5px;padding:5px 7px;border-radius:6px;border:1px solid var(--line);
  background:rgba(255,255,255,.04)}
.row.chk label{justify-content:flex-start;gap:8px;cursor:pointer;color:#a9bfd2}
.row.chk input{accent-color:#4db8ff}
.hint{color:#5f7386;font-size:11px;line-height:1.6;margin:2px 0 10px}
.segbtns{display:flex;gap:4px;margin-top:5px;width:100%}
.segbtns button{flex:1;padding:5px 0;border-radius:6px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;font-size:11.5px}
.segbtns button.on{color:#eaf6ff;border-color:rgba(77,184,255,.55);background:rgba(77,184,255,.16)}
#layerList li.na{opacity:.28}
#ver{max-width:150px;padding:3px 6px;border-radius:6px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);font-size:11px;margin-right:8px}

/* 叠层列表 */
#layerList{list-style:none;margin:8px 0 0;padding:0}
#layerList li{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;cursor:pointer}
#layerList li:hover{background:rgba(255,255,255,.04)}
#layerList li.off{opacity:.34}
#layerList .sw{width:12px;height:12px;border-radius:3px;flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset}
#layerList .nm{font-size:11.5px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#layerList .yy{font-size:10px;color:#5f7386;font-variant-numeric:tabular-nums}

/* 模块列表 */
#blockList{list-style:none;margin:0 0 10px;padding:0}
#blockList li{padding:7px 9px;border-radius:8px;border:1px solid transparent;cursor:pointer;
  display:flex;align-items:center;gap:9px}
#blockList li:hover{background:rgba(255,255,255,.05)}
#blockList li.on{border-color:rgba(77,184,255,.45);background:rgba(77,184,255,.12)}
#blockList .bd{width:8px;height:8px;border-radius:50%;flex:none}
#blockList .bn{font-size:12.5px}
#blockList .bc{font-size:10.5px;color:var(--muted)}
#blockInfo{border-top:1px solid var(--line);padding-top:10px}
.bi-name{font-size:14px;font-weight:600}
.bi-chap{font-size:11px;color:var(--accent2);margin:2px 0 7px}
.bi-note{font-size:11.5px;color:#9fb4c6;line-height:1.75}
.bi-focus{margin:8px 0 0;padding-left:16px;color:#7fa8c8;font-size:11.5px;line-height:1.8}
#scope{width:100%;height:110px;border-radius:8px;background:rgba(0,0,0,.45);
  border:1px solid var(--line);margin-top:6px}

/* 元件卡片 */
#card{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:18;width:330px;
  border:1px solid rgba(77,184,255,.35);border-radius:12px;background:var(--glass);
  backdrop-filter:blur(10px);box-shadow:0 16px 46px rgba(0,0,0,.55)}
.c-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;
  border-bottom:1px solid var(--line);color:#9fc4de;font-size:12px;letter-spacing:.08em}
.c-head button{background:none;border:none;color:var(--muted);font-size:17px;cursor:pointer;line-height:1}
.c-body{padding:8px 12px 12px}
.kv{display:flex;justify-content:space-between;padding:3px 0;font-size:12px}
.kv span{color:var(--muted)}
.kv b{font-weight:500;font-variant-numeric:tabular-nums}

/* HUD */
#hud{position:fixed;left:0;right:0;bottom:0;height:40px;z-index:16;display:flex;
  align-items:center;justify-content:space-between;padding:0 18px;font-size:11.5px;
  color:#8fa8bd;background:linear-gradient(0deg,rgba(4,8,14,.85),rgba(4,8,14,0));
  pointer-events:none;font-variant-numeric:tabular-nums}
#hudMode{color:var(--accent)}
.hud-c{color:#c9dcec}

/* 色条 */
#cbar{margin-top:12px}
#cbarC{width:100%;height:14px;border-radius:3px;display:block}
.cbl{display:flex;justify-content:space-between;color:#5f7386;font-size:10.5px;margin-top:3px}

/* 仿真 iframe */
#simwrap{position:fixed;right:346px;bottom:48px;z-index:14;width:520px;height:360px;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#000;
  box-shadow:0 18px 50px rgba(0,0,0,.6)}
#simwrap iframe{width:100%;height:100%;border:0;display:block}
/* 收起时只是透明 —— 绝不能 display:none，否则 iframe 里的 rAF 被浏览器冻结，仿真就停了 */
#simwrap.collapsed{opacity:0;pointer-events:none}

@media (max-width:1180px){
  #right{width:280px}
  #simwrap{right:12px;bottom:300px;width:420px;height:300px}
}

/* ── 小地图 ── */
#map{width:100%;height:190px;border-radius:9px;background:rgba(0,0,0,.42);
  border:1px solid var(--line);display:block;cursor:pointer}
.maphint{color:#5f7386;font-size:10.5px;margin:5px 0 10px;text-align:center}

/* ── 巡讲字幕条 ── */
#chainBar{position:fixed;left:50%;bottom:58px;transform:translateX(-50%);z-index:19;
  width:min(74vw,760px);padding:12px 16px;border-radius:12px;
  border:1px solid rgba(77,184,255,.32);background:rgba(8,15,24,.88);
  backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.6);
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:4px 14px}
.cb-step{grid-column:1;font-size:12px;color:#9fc4de;display:flex;gap:10px;align-items:baseline}
.cb-step b{color:var(--accent2);font-variant-numeric:tabular-nums}
.cb-say{grid-column:1;font-size:13.5px;line-height:1.7;color:#dceaf5}
.cb-act{grid-column:2;grid-row:1/3;display:flex;gap:6px;align-items:center}
.cb-act button{width:30px;height:30px;border-radius:7px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:#a9c4d8;cursor:pointer;font-size:12px;padding:0}
.cb-act button:hover{background:rgba(77,184,255,.2);color:#eaf6ff}