/* ============================================================
   dao · 官网2 —— 常驻指挥台布局(开发遵守文档 §二 截图布局)
   左信息板 + 右竖排导航列; 点列右侧原地展开工作区, 列压缩留边缘。
   ============================================================ */

body{ overflow:hidden; height:100vh; display:flex; flex-direction:column; }

/* ============ 顶部命令条 ============ */
.topbar{
  flex:none; height:54px; z-index:60;
  display:flex; align-items:center; gap:24px;
  padding:0 clamp(14px,2.4vw,28px);
  background:linear-gradient(rgba(14,13,11,.95), rgba(14,13,11,.86));
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand .seal{ width:28px; height:28px; filter:drop-shadow(0 0 8px var(--sig-glow)); }
.brand .brand-name{ font-family:var(--f-disp); font-weight:700; font-size:16px; letter-spacing:.06em; }
.topbar-meters{ display:flex; gap:20px; margin-left:8px; }
.topbar-meters b{ color:var(--sig); font-weight:600; }
.topbar-right{ margin-left:auto; font-variant-numeric:tabular-nums; }

/* ============ 指挥台主体: 左信息板 + 右(导航列+工作区) ============ */
#cmd{ flex:1; display:flex; min-height:0; }

/* ---- 左信息板 42% ---- */
#infoboard{
  flex:0 0 42%; display:flex; flex-direction:column; gap:18px;
  padding:clamp(20px,3vw,40px) clamp(18px,2.6vw,36px);
  border-right:1px solid var(--line);
  background:linear-gradient(160deg, var(--ink-900), var(--ink-950));
  overflow-y:auto;
}
.ib-hero .ib-title{ font-family:var(--f-disp); font-weight:900; font-size:clamp(30px,3.4vw,44px); line-height:1.12; letter-spacing:.02em; margin:0 0 10px; }
.ib-hero .ib-title em{ font-style:normal; color:var(--sig); }
.ib-sub{ color:var(--tx-dim); font-size:13.5px; line-height:1.8; margin:0 0 14px; max-width:46ch; }
.ib-chips{ display:flex; flex-wrap:wrap; gap:8px; }

.ib-spirit .hud b{ color:var(--sig); }
.ib-spirit .spirit-track{ margin-top:7px; height:5px; background:var(--ink-800); border:1px solid var(--line); overflow:hidden; }
.ib-spirit .spirit-fill{ display:block; height:100%; width:67%; background:linear-gradient(90deg, var(--gold-700), var(--sig)); box-shadow:0 0 8px var(--sig-glow); transition:width var(--t-mid); }

.ib-seal{ display:flex; justify-content:center; padding:6px 0; }
.ib-seal img{ width:clamp(84px,9vw,130px); filter:drop-shadow(0 0 20px var(--sig-glow)); animation:sealPulse 6s var(--ease) infinite; }
@keyframes sealPulse{ 0%,100%{ filter:drop-shadow(0 0 10px var(--sig-glow)); } 50%{ filter:drop-shadow(0 0 26px var(--sig-glow)); } }

.ib-type{ min-height:2.2em; font-family:var(--f-read); font-size:clamp(15px,1.6vw,19px); color:var(--tx); letter-spacing:.03em; text-align:center; }
.tw-cursor{ color:var(--sig); animation:twBlink 1s steps(2) infinite; }
@keyframes twBlink{ 50%{ opacity:0; } }

.ib-meters{ display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; padding:12px 14px; border:1px solid var(--line); background:var(--ink-900); }
.ib-meters .hud{ font-size:var(--fs-2xs); }

.ib-block-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.ib-link{ font-family:var(--f-hud); font-weight:600; font-size:var(--fs-2xs); letter-spacing:.18em; color:var(--sig); text-transform:uppercase; transition:letter-spacing var(--t-fast); }
.ib-link:hover{ letter-spacing:.28em; }

.ib-chain{ display:flex; align-items:center; }
.ib-node{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:none; }
.ib-node-dot{ width:12px; height:12px; border-radius:50%; background:var(--ink-800); border:2px solid var(--sig); box-shadow:0 0 6px var(--sig-glow); }
.ib-node.boss .ib-node-dot{ background:var(--red); border-color:var(--red); }
.ib-node-name{ font-family:var(--f-disp); font-weight:700; font-size:13px; }
.ib-edge{ flex:1; height:1px; background:linear-gradient(90deg, var(--sig-dim), var(--line)); margin:0 4px 16px; }

.ib-clsrow{ display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; }
.ib-cls{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px 6px; border:1px solid var(--line); background:var(--ink-900); transition:border-color var(--t-fast), transform var(--t-fast); overflow:hidden; }
.ib-cls:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.ib-cls img{ width:100%; height:74px; object-fit:contain; object-position:bottom; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.ib-cls-name{ font-family:var(--f-disp); font-weight:700; font-size:12px; letter-spacing:.04em; }

.ib-day{ display:flex; align-items:baseline; gap:12px; padding:8px 2px; border-top:1px solid var(--line); transition:background var(--t-fast); }
.ib-day:hover{ background:var(--ink-850); }
.ib-day-date{ flex:none; width:44px; font-size:12px; color:var(--sig); }
.ib-day-theme{ flex:1; font-size:13px; color:var(--tx); }
.ib-day-n{ flex:none; font-size:var(--fs-2xs); color:var(--tx-faint); }

/* ---- 右侧: 导航列 + 工作区 ---- */
#navside{ flex:1; position:relative; display:flex; min-width:0; }

/* 进模块后: 左信息板整体隐藏, 工作区独占(开发遵守文档 §二 其余列压缩) */
body.in-module #infoboard{ display:none; }
body.in-module #navside{ flex:1; }

/* 竖排导航列(默认铺满右侧, 斜切) */
#navcols{
  flex:1; position:relative; display:flex; z-index:5;
  transform:skewX(-8deg);
  transition:flex var(--t-slow);
}
.navcol{
  position:relative; flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  cursor:pointer; overflow:hidden; border-left:1px solid var(--line);
  background:transparent; color:var(--tx);
  transition:flex var(--t-slow), background var(--t-fast);
  animation:colIn .7s var(--ease) both; animation-delay:calc(.1s + var(--i) * .12s);
}
@keyframes colIn{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:none;} }
.navcol > *{ transform:skewX(8deg); }
.navcol-zh{ display:flex; flex-direction:column; align-items:center; gap:2px; font-family:var(--f-disp); font-weight:700; font-size:clamp(24px,2.8vw,38px); line-height:1.2; transition:color var(--t-fast), text-shadow var(--t-fast), letter-spacing var(--t-fast); }
.navcol-zh i{ font-style:normal; }
.navcol-en{ font-family:var(--f-hud); font-weight:600; font-size:var(--fs-xs); letter-spacing:.32em; color:var(--tx-faint); text-transform:uppercase; writing-mode:vertical-rl; transition:color var(--t-fast); }
.navcol:hover{ background:linear-gradient(180deg, transparent, var(--sig-bg) 50%, transparent); }
.navcol:hover .navcol-zh{ color:var(--sig); text-shadow:0 0 18px var(--sig-glow); letter-spacing:.12em; }
.navcol:hover .navcol-en{ color:var(--sig); }
.navcol.on .navcol-zh{ color:var(--sig); text-shadow:0 0 18px var(--sig-glow); }
.navcol.on{ background:linear-gradient(180deg, transparent, var(--sig-bg) 50%, transparent); }

.navcol-divider{ position:absolute; top:0; bottom:0; width:1px; left:calc((100% / 4) * (var(--i) + 1)); background:linear-gradient(180deg, transparent, var(--sig-dim), transparent); animation:divGrow .9s var(--ease) both; animation-delay:calc(.3s + var(--i) * .15s); pointer-events:none; }
@keyframes divGrow{ from{ transform:scaleY(0); opacity:0; } to{ transform:scaleY(1); opacity:.7; } }

/* 各列专属小剧场(hover) */
.navcol-scene{ position:absolute; inset:0; pointer-events:none; transform:skewX(8deg); display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:11px; color:var(--sig-dim); opacity:0; transition:opacity var(--t-fast); }
.navcol:hover .navcol-scene{ opacity:1; }
.navcol[data-scene="log"] .navcol-scene::before{ content:"✓ 棋盘立体化\A ✓ 技能全量\A ✓ 宝箱系统\A ✓ 主动技\A · 持续进行"; white-space:pre; text-align:left; line-height:2.1; position:absolute; top:24%; left:50%; transform:translateX(-50%); }
.navcol[data-scene="board"] .navcol-scene{ background-image:linear-gradient(var(--sig-dim) 1px, transparent 1px), linear-gradient(90deg, var(--sig-dim) 1px, transparent 1px); background-size:16px 16px; background-position:center; mask-image:radial-gradient(circle at center, #000 0%, transparent 70%); }
.navcol[data-scene="board"] .navcol-scene::after{ content:"◆"; position:absolute; color:var(--sig); font-size:14px; animation:piece 2s var(--ease) infinite; }
@keyframes piece{ 0%{ transform:translate(-24px,-24px);} 50%{ transform:translate(24px,24px);} 100%{ transform:translate(-24px,-24px);} }
.navcol[data-scene="scan"] .navcol-scene{ background:repeating-linear-gradient(45deg, var(--sig-bg) 0 6px, transparent 6px 12px); mask-image:linear-gradient(180deg, transparent, #000, transparent); animation:cardscan 2.2s linear infinite; }
@keyframes cardscan{ from{ background-position:0 -60px; } to{ background-position:0 60px; } }
.navcol[data-scene="frame"] .navcol-scene{ background:linear-gradient(var(--sig-bg), var(--sig-bg)) 30% 30%/28px 36px no-repeat, linear-gradient(var(--sig-bg), var(--sig-bg)) 70% 34%/28px 36px no-repeat, linear-gradient(var(--sig-bg), var(--sig-bg)) 40% 62%/28px 36px no-repeat, linear-gradient(var(--sig-bg), var(--sig-bg)) 66% 66%/28px 36px no-repeat; animation:blinds 2.4s var(--ease) infinite; }
@keyframes blinds{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }

/* 沙盘返回列(默认隐藏, 进模块后显示) */
.navcol-home{ display:none; }
body.in-module .navcol-home{ display:flex; }

/* ---- 工作区(默认收起, 点列原地展开) ---- */
#stage{
  flex:0 0 0; min-width:0; overflow:hidden; overflow-y:auto; position:relative;
  opacity:0; transition:flex var(--t-slow), opacity var(--t-mid);
}
#stage.open{ flex:1 1 auto; opacity:1; }
/* 进模块后: 导航列压缩到右缘(保持竖排迷你) */
body.in-module #navcols{ flex:0 0 clamp(56px, 6vw, 80px); flex-direction:column; transform:none; }
body.in-module .navcol{ flex:1 1 0; gap:8px; border-left:none; border-top:1px solid var(--line); }
body.in-module .navcol > *{ transform:none; }
body.in-module .navcol .navcol-en{ display:none; }
body.in-module .navcol .navcol-zh{ font-size:clamp(15px,1.5vw,20px); }
body.in-module .navcol-scene{ display:none; }
body.in-module .navcol-divider{ display:none; }
body.in-module .navcol-home{ border-top:none; }

.ws{ display:none; min-height:100%; animation:wsIn var(--t-mid); }
.ws.on{ display:block; }
@keyframes wsIn{ from{ opacity:0; transform:translateX(20px); } to{ opacity:1; transform:none; } }
.ws-inner{ max-width:1080px; margin:0 auto; padding:clamp(20px,3vw,40px) clamp(18px,3vw,40px) 40px; }

.site-foot{ border-top:1px solid var(--line); margin-top:8px; padding:18px clamp(18px,3vw,40px) 26px; }

@media (prefers-reduced-motion:reduce){
  .navcol, .navcol-divider{ animation:none; opacity:1; transform:none; }
  #stage, #navcols{ transition:none; }
  .ws.on{ animation:none; }
  .ib-seal img{ animation:none; }
}