:root{
  --bg:#0b0d11; --panel:rgba(20,22,27,.82); --panel2:rgba(26,29,35,.86);
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.14);
  --txt:#ece5d8; --muted:#a49c8d; --faint:#7c7466;
  --acc:#d9a05b; --acc2:#c07f35; --acc-soft:rgba(217,160,91,.14);
  --ok:#7fbf7a; --serif:"Songti SC","STSong","Noto Serif SC","Noto Serif CJK SC","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:14px}
body{user-select:none}
canvas#scene{position:fixed;inset:0;display:block;touch-action:none}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,transparent 58%,rgba(0,0,0,.38) 100%)}
button{font-family:var(--sans);color:var(--txt);background:none;border:none;cursor:pointer}
.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 36px rgba(0,0,0,.4)}
.hidden{display:none!important}

/* ---------- 顶栏 ---------- */
#topbar{position:fixed;top:0;left:0;right:0;height:58px;display:flex;align-items:center;gap:20px;padding:0 18px;background:linear-gradient(180deg,rgba(11,13,17,.9),rgba(11,13,17,.55) 70%,transparent);border-bottom:1px solid rgba(255,255,255,.05);z-index:30}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:34px;height:34px;border-radius:10px;border:1px solid var(--acc);color:var(--acc);font-family:var(--serif);font-size:19px;display:flex;align-items:center;justify-content:center;background:var(--acc-soft)}
.brand b{font-family:var(--serif);font-size:17px;letter-spacing:2px;font-weight:600}
.brand span{display:block;font-size:10px;color:var(--muted);letter-spacing:1px;margin-top:1px}
.nav{display:flex;gap:4px;margin-left:6px}
.nav button{font-size:12.5px;color:var(--muted);padding:7px 12px;border-radius:9px;letter-spacing:.5px}
.nav button:hover,.nav button.on{color:var(--txt);background:rgba(255,255,255,.06)}
.nav button.on{color:var(--acc)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.crumb{font-size:11.5px;color:var(--muted);letter-spacing:.5px}
.crumb b{color:var(--txt);font-weight:500}
.live{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);border:1px solid var(--line);padding:5px 11px;border-radius:99px;letter-spacing:1px}
.live i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 2.2s infinite}
@keyframes pulse{50%{opacity:.35}}
#btn-help{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);color:var(--muted);font-size:14px}
#btn-help:hover{color:var(--acc);border-color:var(--acc)}

/* ---------- 左侧视点面板 ---------- */
#panel-viewpoints{position:fixed;left:16px;top:72px;width:238px;max-height:calc(100vh - 210px);display:flex;flex-direction:column;z-index:20;overflow:hidden}
.pv-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.pv-head b{font-size:13px;letter-spacing:2px}
.pv-head span{font-size:10.5px;color:var(--acc)}
.pv-head-r{margin-left:auto;display:flex;align-items:center;gap:7px}
#pv-list{overflow-y:auto;padding:8px;flex:1;scrollbar-width:thin;scrollbar-color:rgba(217,160,91,.38) transparent}
#pv-list::-webkit-scrollbar{width:6px}
#pv-list::-webkit-scrollbar-track{background:transparent;margin:3px 0}
#pv-list::-webkit-scrollbar-button{display:none}
#pv-list::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(217,160,91,.5),rgba(192,127,53,.5));border-radius:99px;border:2px solid transparent;background-clip:padding-box}
#pv-list::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(217,160,91,.85),rgba(192,127,53,.85));background-clip:padding-box}
.pv-cat{font-size:10px;color:var(--faint);letter-spacing:2.5px;padding:10px 8px 5px}
.pv-item{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:10px;border-left:2px solid transparent;position:relative}
.pv-item+.pv-item{margin-top:1px}
.pv-item:hover{background:rgba(255,255,255,.05)}
.pv-item.on{background:var(--acc-soft);border-left-color:var(--acc)}
.pv-item b{display:block;font-size:13px;font-weight:500;color:var(--txt)}
.pv-item span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;letter-spacing:.5px}
.pv-item.on b{color:var(--acc)}

/* ---------- 右侧图层面板 ---------- */
#panel-settings{position:fixed;right:16px;top:72px;width:206px;padding:14px 16px;z-index:20}
.ps-title{font-size:13px;letter-spacing:2px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.ps-title i{font-style:normal;font-size:10px;color:var(--faint);letter-spacing:1px}
.ps-row{margin-bottom:13px}
.ps-row>label{font-size:11px;color:var(--muted);letter-spacing:1.5px;display:block;margin-bottom:7px}
.seg{display:flex;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.seg button{flex:1;font-size:11.5px;padding:6px 0;border-radius:8px;color:var(--muted);letter-spacing:1px}
.seg button.on{background:var(--acc-soft);color:var(--acc)}
.sw{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--txt);padding:5px 0;cursor:pointer;letter-spacing:.5px}
.sw input{display:none}
.sw-ui{width:34px;height:19px;border-radius:99px;background:rgba(0,0,0,.4);border:1px solid var(--line2);position:relative;flex:none;transition:.2s}
.sw-ui::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:var(--muted);transition:.2s}
.sw input:checked+.sw-ui{background:var(--acc-soft);border-color:var(--acc)}
.sw input:checked+.sw-ui::after{left:16px;background:var(--acc)}
.ps-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:10px;color:var(--faint);line-height:1.7;letter-spacing:.5px}
.ps-title-r{margin-left:auto;display:flex;align-items:center;gap:8px}

/* ---------- 侧栏 收起 / 展开 ---------- */
#panel-viewpoints,#panel-settings{transition:transform .42s cubic-bezier(.22,.9,.32,1)}
.pv-collapse,.ps-collapse{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid transparent;color:var(--faint);transition:.2s}
.pv-collapse:hover,.ps-collapse:hover{color:var(--acc);border-color:rgba(217,160,91,.4);background:var(--acc-soft)}
.pv-toggle,.ps-toggle{display:none;position:fixed;top:72px;z-index:21;font-size:11.5px;letter-spacing:2px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 14px;backdrop-filter:blur(12px);align-items:center;gap:7px;transition:.25s}
.pv-toggle{left:16px}.ps-toggle{right:16px}
.pv-toggle:hover,.ps-toggle:hover{color:var(--acc);border-color:rgba(217,160,91,.45);background:var(--acc-soft)}
.pv-toggle svg,.ps-toggle svg{flex:none}
@media (min-width:921px){
  #panel-viewpoints.collapsed{transform:translateX(calc(-100% - 26px));pointer-events:none}
  #panel-settings.collapsed{transform:translateX(calc(100% + 26px));pointer-events:none}
  body.pv-collapsed .pv-toggle,body.ps-collapsed .ps-toggle{display:flex;animation:toggle-in .32s cubic-bezier(.2,.9,.3,1.2)}
  @keyframes toggle-in{from{opacity:0;transform:translateY(-6px)}}
}

/* ---------- 视图信息卡 ---------- */
#view-card{position:fixed;left:16px;bottom:96px;width:308px;padding:16px 18px;z-index:15;pointer-events:none}
.vc-badge{display:inline-block;font-size:10px;letter-spacing:2px;color:var(--acc);border:1px solid rgba(217,160,91,.4);border-radius:99px;padding:3px 10px;margin-bottom:10px}
#vc-title{font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:3px;line-height:1.25}
.vc-meta{display:flex;align-items:center;gap:9px;margin:8px 0 9px;font-size:12px;color:var(--muted);letter-spacing:1px}
.vc-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--faint)}
#vc-desc{font-size:12.5px;color:var(--muted);line-height:1.75}
.vc-tags{margin-top:11px;display:flex;gap:6px;flex-wrap:wrap}
.vc-tags i{font-style:normal;font-size:10px;color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:2.5px 8px;letter-spacing:1px}

/* ---------- 底部工具栏 ---------- */
#toolbar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px;z-index:25;border-radius:16px;max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none}
#toolbar::-webkit-scrollbar{display:none}
.tb-btn{display:flex;align-items:center;gap:7px;font-size:12.5px;letter-spacing:1px;padding:9px 14px;border-radius:11px;border:1px solid transparent;color:var(--muted);white-space:nowrap;background:rgba(255,255,255,.04)}
.tb-btn:hover{color:var(--txt);background:rgba(255,255,255,.08)}
.tb-btn.on{color:var(--acc);border-color:rgba(217,160,91,.45);background:var(--acc-soft)}
.tb-main{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a1408;font-weight:600;border:none}
.tb-main:hover{filter:brightness(1.1);color:#1a1408}
.tb-rate{display:flex;align-items:center;gap:3px;padding:4px 8px 4px 10px;border-radius:11px;background:rgba(0,0,0,.28);border:1px solid var(--line)}
.tb-rate .tb-label{font-size:10px;color:var(--faint);letter-spacing:2px;margin-right:4px}
.tb-rate button{font-size:11px;padding:5px 7px;border-radius:7px;color:var(--muted)}
.tb-rate button.on{color:var(--acc);background:var(--acc-soft)}
.tb-account{display:flex;align-items:center;gap:6px}
.tb-stat{font-size:10px;color:var(--faint);letter-spacing:1px;padding:0 8px;white-space:nowrap}
.tb-stat b{color:var(--muted);font-weight:500}

/* ---------- 提示 / 准星 / 情境按钮 ---------- */
#toast{position:fixed;top:78px;left:50%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--panel2);border:1px solid var(--line2);border-radius:99px;padding:9px 20px;font-size:12.5px;letter-spacing:1px;color:var(--txt);box-shadow:0 8px 28px rgba(0,0,0,.45);backdrop-filter:blur(12px);animation:tin .35s cubic-bezier(.2,.9,.3,1.2)}
.toast.acc{border-color:rgba(217,160,91,.5);color:var(--acc)}
@keyframes tin{from{opacity:0;transform:translateY(-10px) scale(.94)}}
#crosshair{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;z-index:12;pointer-events:none;mix-blend-mode:difference}
#crosshair::before,#crosshair::after{content:"";position:absolute;background:#fff}
#crosshair::before{left:7px;top:0;width:2px;height:16px}
#crosshair::after{top:7px;left:0;height:2px;width:16px}
#prompt{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);z-index:22;display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line2);border-radius:99px;padding:8px 18px;font-size:12.5px;letter-spacing:1px;backdrop-filter:blur(12px);box-shadow:0 8px 26px rgba(0,0,0,.4)}
#prompt kbd{font-family:var(--sans);font-size:11px;background:var(--acc-soft);border:1px solid rgba(217,160,91,.5);color:var(--acc);border-radius:6px;padding:2px 8px;letter-spacing:1px}
#ctx-btn{position:fixed;bottom:96px;right:22px;z-index:22;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a1408;font-weight:600;font-size:12.5px;letter-spacing:1.5px;padding:11px 20px;border-radius:99px;box-shadow:0 10px 30px rgba(192,127,53,.35)}
#ctx-btn:hover{filter:brightness(1.1)}
#hover-tip{position:fixed;z-index:40;pointer-events:none;background:rgba(10,12,16,.88);border:1px solid var(--line2);border-radius:8px;padding:5px 11px;font-size:11.5px;letter-spacing:1px;color:var(--txt);display:none;white-space:nowrap}

/* ---------- 加载页 ---------- */
#loader{position:fixed;inset:0;z-index:100;background:#0b0d11;display:flex;align-items:center;justify-content:center;transition:opacity .7s}
#loader.out{opacity:0;pointer-events:none}
.lo-inner{text-align:center}
.lo-mark{width:58px;height:58px;margin:0 auto 20px;border:1px solid var(--acc);border-radius:16px;color:var(--acc);font-family:var(--serif);font-size:28px;display:flex;align-items:center;justify-content:center;background:var(--acc-soft);animation:lo 2.4s infinite}
@keyframes lo{50%{box-shadow:0 0 26px rgba(217,160,91,.35)}}
.lo-title{font-family:var(--serif);font-size:26px;letter-spacing:5px;margin-bottom:8px}
.lo-sub{font-size:11.5px;color:var(--muted);letter-spacing:2.5px;margin-bottom:26px}
.lo-bar{width:240px;height:3px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;margin:0 auto}
#lo-fill{height:100%;width:0;background:linear-gradient(90deg,var(--acc2),var(--acc));border-radius:3px;transition:width .35s}
#lo-step{font-size:10.5px;color:var(--faint);letter-spacing:2px;margin-top:14px}

/* ---------- 帮助弹窗 ---------- */
#help{position:fixed;inset:0;z-index:90;background:rgba(5,6,9,.66);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.help-card{width:600px;max-width:92vw;max-height:86vh;overflow-y:auto;padding:26px 28px}
.help-card h2{font-family:var(--serif);font-size:20px;letter-spacing:3px;margin-bottom:4px}
.help-card .hs{font-size:11px;color:var(--muted);letter-spacing:2px;margin-bottom:20px}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin-bottom:20px}
.hg{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--muted);line-height:1.6}
.hg kbd{flex:none;font-family:var(--sans);font-size:11px;min-width:52px;text-align:center;background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:6px;padding:2px 7px;color:var(--txt)}
.help-note{font-size:11.5px;color:var(--faint);line-height:1.9;border-top:1px solid var(--line);padding-top:16px;letter-spacing:.5px}
.help-note b{color:var(--muted)}
#help-close{position:absolute;top:18px;right:22px;font-size:20px;color:var(--muted);width:36px;height:36px;border-radius:10px;border:1px solid var(--line)}
#help-close:hover{color:var(--acc)}

/* ---------- 移动端 ---------- */
@media (max-width:920px){
  .nav{display:none}
  #panel-viewpoints{transform:translateX(-115%);transition:transform .35s cubic-bezier(.2,.8,.3,1);max-height:calc(100vh - 260px)}
  #panel-viewpoints.open{transform:none}
  #panel-settings{transform:translateX(115%);transition:transform .35s cubic-bezier(.2,.8,.3,1)}
  #panel-settings.open{transform:none}
  .pv-toggle,.ps-toggle{display:flex;align-items:center;gap:7px;top:60px}
  /* 剧情模式 HUD 激活时（顶部通栏），呼出按钮移至侧边中部避免遮挡 */
  body:has(#g-hud:not(.gone)) .pv-toggle,body:has(#g-hud:not(.gone)) .ps-toggle{top:50%;transform:translateY(-50%)}
  body:has(#g-hud:not(.gone)) #panel-viewpoints,body:has(#g-hud:not(.gone)) #panel-settings{top:184px}
  #view-card{width:calc(100vw - 130px);bottom:88px;padding:12px 14px}
  #vc-title{font-size:20px;letter-spacing:2px}
  #vc-desc{display:none}
  #topbar{height:52px;padding:0 12px;gap:10px}
  .brand span{display:none}
  .live{display:none}
  #toolbar{bottom:12px;gap:6px;padding:7px}
  .tb-btn{padding:8px 11px;font-size:12px}
  #prompt{bottom:80px}
  #ctx-btn{bottom:80px;right:14px;padding:9px 15px}
}