/* 第二大脑 · 时光之城 v2.0「星语」 — 场景 / HUD / 时间轴 / 抽屉 / 图例 / 科幻视觉
   契约：CONTRACT_V2.md §1（token）/ §7（科幻视觉）。CSP 严格：无内联 style 属性、无外链。 */

/* ---------- 设计 token（§1 严格；末尾附 v1 兼容别名） ---------- */
:root{
  --bg:#030712; --bg2:#071026; --panel:rgba(8,17,38,.86);
  --line:rgba(51,225,255,.18); --line2:rgba(51,225,255,.34);
  --ink:#dbeafe; --dim:#7f9bc4; --dim2:#546b91;
  --cyan:#33e1ff; --green:#3df9a8; --amber:#ffc34d; --red:#ff5a75; --purple:#b79cff;
  --ok:var(--green); --info:var(--cyan); --warn:var(--amber); --alert:var(--red); --story:var(--purple);
  --glow:0 0 24px rgba(51,225,255,.45);
  /* v1 兼容别名（ui.css / 历史规则仍可引用） */
  --txt:var(--ink); --txt-dim:var(--dim);
  --panel2:rgba(14,34,68,.58); --cyan-dim:#178db8;
  --mono:Consolas,'Courier New',monospace;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--txt);
  font-family:'Microsoft YaHei','PingFang SC',sans-serif;
  font-size:14px; line-height:1.5; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--cyan);text-decoration:none}

/* ---------- 全屏 grid ---------- */
#stage{
  position:fixed; inset:0;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  grid-template-columns:1fr;
}

/* ---------- 顶栏 ---------- */
#top{
  display:flex; align-items:center; gap:14px;
  padding:10px 16px;
  background:linear-gradient(180deg,rgba(6,16,34,.95),rgba(6,16,34,.72));
  border-bottom:1px solid var(--line);
  z-index:20;
}
#topTitle{display:flex;flex-direction:column;line-height:1.25;min-width:0}
#cityName{font-size:17px;font-weight:700;letter-spacing:.5px;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 0 12px rgba(51,225,255,.35)}
#citySub{font-size:11px;color:var(--txt-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topStats{margin-left:auto;display:flex;gap:18px;flex:none}
.stat{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.stat b{font-family:var(--mono);font-size:18px;color:var(--cyan);
  text-shadow:0 0 12px rgba(51,225,255,.35)}
.stat i{font-style:normal;font-size:11px;color:var(--txt-dim)}

/* ---------- 视口 ---------- */
#viewport{position:relative;overflow:hidden;background:var(--bg)}
#scene{display:block;width:100%;height:100%;touch-action:none}

/* ---------- 科幻叠加层 #fx（§7：扫描线 + 暗角，纯 CSS，W3 建节点） ---------- */
#fx{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(51,225,255,.05) 0 1px, rgba(0,0,0,0) 1px 3px);
}
#fx::before{   /* 暗角 */
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.55));
}
#fx::after{    /* 缓慢下移的亮线 */
  content:''; position:absolute; left:0; right:0; top:-140px; height:140px;
  background:linear-gradient(180deg,
    rgba(51,225,255,0) 0%, rgba(51,225,255,.10) 45%,
    rgba(51,225,255,.20) 50%, rgba(51,225,255,.10) 55%, rgba(51,225,255,0) 100%);
  animation:scanSweep 8s linear infinite;
}
@keyframes scanSweep{ 0%{top:-140px} 100%{top:100%} }

/* 浮层通用 */
#hud,#legend,#hint{position:absolute;z-index:10;pointer-events:none}
#hud{top:14px;left:16px;max-width:min(60vw,520px)}
#hudDate{
  font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:1px;
  color:var(--cyan);text-shadow:0 0 18px rgba(51,225,255,.45);line-height:1.1;
}
#hudLine{
  margin-top:6px;font-size:14px;color:var(--txt);
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:8px 12px;backdrop-filter:blur(6px);max-width:min(60vw,520px);
  box-shadow:inset 0 0 18px rgba(51,225,255,.10);
}
#hudEma{margin-top:6px;font-family:var(--mono);font-size:12px;color:var(--txt-dim)}
#btnEnter{
  pointer-events:auto;margin-top:12px;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  color:var(--bg);background:var(--cyan);
  border:none;border-radius:8px;padding:8px 18px;
  box-shadow:0 0 0 1px rgba(51,225,255,.5),0 6px 20px rgba(51,225,255,.28);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
#btnEnter:hover{transform:translateY(-1px);background:#5fe9ff}
#btnEnter:active{transform:translateY(0)}
#btnEnter.on{background:var(--amber);box-shadow:0 0 0 1px rgba(255,195,77,.5),0 6px 20px rgba(255,195,77,.28)}

/* 图例 */
#legend{left:16px;bottom:16px;display:flex;gap:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:7px 12px;backdrop-filter:blur(6px);font-size:12px;color:var(--txt-dim)}
.lg{display:flex;align-items:center;gap:6px}
.lg i{width:10px;height:10px;border-radius:2px;display:inline-block;background:var(--txt-dim)}
.sev-ok i,.lg.sev-ok i{background:var(--green)}
.sev-info i,.lg.sev-info i{background:var(--cyan)}
.sev-warn i,.lg.sev-warn i{background:var(--amber)}
.sev-alert i,.lg.sev-alert i{background:var(--red)}
.sev-story i,.lg.sev-story i{background:var(--purple)}

/* 提示 */
#hint{right:16px;bottom:16px;font-size:12px;color:var(--txt-dim);
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:7px 12px;backdrop-filter:blur(6px)}

/* ---------- 先知条 #oracle（§7：顶部 HUD 下方·青色玻璃条，W3 建节点，默认隐藏） ---------- */
#oracle{
  position:absolute; top:14px; left:50%;
  transform:translateX(-50%) translateY(-6px);
  z-index:12; display:flex; align-items:center; gap:8px;
  max-width:min(92vw,640px);
  padding:8px 14px; border-radius:10px;
  background:var(--panel); border:1px solid var(--line2);
  box-shadow:var(--glow), inset 0 0 18px rgba(51,225,255,.12);
  backdrop-filter:blur(8px);
  color:var(--ink); font-size:12.5px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
#oracle.on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
#oracleIcon{font-size:14px;line-height:1;color:var(--cyan);flex:none;
  text-shadow:0 0 10px rgba(51,225,255,.55)}
#oracleText{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 色调文字沿用语义色（HUD 日期 / 抽屉） */
#hudDate.sev-ok{color:var(--green);text-shadow:0 0 18px rgba(61,249,168,.45)}
#hudDate.sev-info{color:var(--cyan);text-shadow:0 0 18px rgba(51,225,255,.45)}
#hudDate.sev-warn{color:var(--amber);text-shadow:0 0 18px rgba(255,195,77,.45)}
#hudDate.sev-alert{color:var(--red);text-shadow:0 0 18px rgba(255,90,117,.45)}

/* ---------- 时间轴 ---------- */
#axis{
  position:relative;z-index:20;
  padding:10px 16px 12px;
  background:linear-gradient(0deg,rgba(6,16,34,.95),rgba(6,16,34,.72));
  border-top:1px solid var(--line);
}
#axisTrack{
  position:relative;height:26px;margin-bottom:4px;
  background:var(--panel2);border:1px solid var(--line);border-radius:6px;
  overflow:hidden;
}
.axisTick{
  position:absolute;top:0;bottom:0;width:2px;
  background:var(--txt-dim);opacity:.35;
}
.axisTick.wk{opacity:.6}
.axisDay{
  position:absolute;top:0;bottom:0;width:4px;transform:translateX(-1px);
  background:var(--cyan);border-radius:1px;opacity:.9;
}
.axisDay.sev-ok{background:var(--green)}
.axisDay.sev-info{background:var(--cyan)}
.axisDay.sev-warn{background:var(--amber)}
.axisDay.sev-alert{background:var(--red)}
.axisCursor{
  position:absolute;top:-3px;bottom:-3px;width:2px;background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.8);transform:translateX(-1px);
}
#axisRange{
  width:100%;margin:0;appearance:none;-webkit-appearance:none;
  background:transparent;cursor:pointer;
}
#axisRange::-webkit-slider-runnable-track{
  height:8px;border-radius:4px;background:linear-gradient(90deg,var(--line2),var(--cyan-dim));
}
#axisRange::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;margin-top:-5px;
  width:18px;height:18px;border-radius:50%;background:var(--cyan);
  border:2px solid var(--bg);box-shadow:0 0 12px rgba(51,225,255,.8);
}
#axisRange::-moz-range-track{height:8px;border-radius:4px;background:var(--line2)}
#axisRange::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--cyan);
  border:2px solid var(--bg);box-shadow:0 0 12px rgba(51,225,255,.8);
}

/* ---------- 页脚 ---------- */
#foot{
  z-index:20;font-size:11px;color:var(--txt-dim);
  text-align:center;padding:6px 16px;
  background:rgba(3,7,18,.95);border-top:1px solid var(--line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- 右侧详情抽屉 ---------- */
#panel{
  position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);z-index:30;
  background:var(--panel);backdrop-filter:blur(12px);
  border-left:1px solid var(--line2);
  padding:20px 18px 30px;overflow-y:auto;
  transform:translateX(102%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow:-18px 0 40px rgba(0,0,0,.5);
}
#panel.open{transform:translateX(0)}
#panelClose{
  position:absolute;top:12px;right:14px;width:32px;height:32px;
  font-size:20px;line-height:1;cursor:pointer;color:var(--txt-dim);
  background:transparent;border:1px solid var(--line);border-radius:8px;
}
#panelClose:hover{color:var(--txt);border-color:var(--line2)}

#panelDate{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--cyan)}
#panelDate.sev-ok{color:var(--green)}
#panelDate.sev-info{color:var(--cyan)}
#panelDate.sev-warn{color:var(--amber)}
#panelDate.sev-alert{color:var(--red)}
#panelLine{font-size:13px;color:var(--txt);margin:6px 0 16px;
  border-left:3px solid var(--line2);padding-left:10px}

.block-title{font-size:11px;letter-spacing:2px;color:var(--txt-dim);
  text-transform:uppercase;margin:18px 0 8px;
  border-bottom:1px solid var(--line);padding-bottom:4px}

/* 6 维条形 */
.bar{margin-bottom:9px}
.bar-head{display:flex;justify-content:space-between;font-size:12px;margin-bottom:3px}
.bar-name{color:var(--txt)}
.bar-val{font-family:var(--mono);color:var(--txt-dim)}
.bar-track{height:8px;border-radius:4px;background:var(--panel2);
  border:1px solid var(--line);overflow:hidden}
.bar-fill{height:100%;border-radius:4px;background:var(--cyan);
  transition:width .3s ease}
.bar-fill.sev-ok{background:var(--green)}
.bar-fill.sev-info{background:var(--cyan)}
.bar-fill.sev-warn{background:var(--amber)}
.bar-fill.sev-alert{background:var(--red)}

/* 巡检摘要 */
.inspect-line{font-size:12px;color:var(--txt-dim);margin:3px 0;
  font-family:var(--mono);display:flex;justify-content:space-between;gap:10px}
.inspect-line b{color:var(--txt);font-weight:600}

/* 故事 */
.story-item{font-size:12px;color:var(--txt);margin:6px 0;padding:8px 10px;
  background:var(--panel2);border:1px solid var(--line);border-radius:6px}
.story-src{font-family:var(--mono);font-size:10px;color:var(--cyan-dim);
  text-transform:uppercase;margin-right:6px}

/* 故事碑命中：当日故事区置顶高亮（紫色脉冲） */
#panelStory.focus{
  border:1px solid var(--purple);border-radius:10px;padding:4px 12px 12px;
  background:rgba(30,22,56,.6);
  animation:storyPulse 1.8s ease-in-out infinite;
}
#panelStory.focus .block-title{color:var(--purple);border-bottom-color:var(--purple)}
@keyframes storyPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(183,156,255,.35),0 0 24px rgba(183,156,255,.18)}
  50%{box-shadow:0 0 0 1px rgba(183,156,255,.6),0 0 34px rgba(183,156,255,.42)}
}

/* 趋势外推卡 */
.fc{font-size:12px;margin:8px 0;padding:10px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--line)}
.fc-top{display:flex;justify-content:space-between;align-items:baseline}
.fc-key{font-weight:600;color:var(--txt)}
.fc-trend{font-family:var(--mono);color:var(--txt-dim)}
.fc-eta{margin-top:4px;color:var(--txt-dim)}
.fc-advice{margin-top:4px;color:var(--cyan)}
.fc.sev-warn{border-color:var(--amber)}
.fc.sev-alert{border-color:var(--red)}

.empty{font-size:12px;color:var(--txt-dim);font-style:italic}

/* ---------- 响应式：手机竖屏 → 底部抽屉 ---------- */
@media (max-width:720px){
  #citySub{display:none}
  #hudDate{font-size:24px}
  #hudLine{font-size:12.5px}
  #hud{max-width:78vw}
  #hudLine{max-width:78vw}
  #hint{display:none}
  #legend{gap:10px;font-size:11px;padding:6px 10px}
  #foot{font-size:10px}

  #oracle{top:auto;bottom:76px;max-width:94vw;font-size:12px}

  #panel{
    top:auto;left:0;right:0;bottom:0;width:auto;height:66vh;
    border-left:none;border-top:1px solid var(--line2);
    border-radius:16px 16px 0 0;
    transform:translateY(102%);
  }
  #panel.open{transform:translateY(0)}
}