/* 锋与天气三维模拟系统 · HUD 样式 */
:root {
  --cyan: #4fc3f7;
  --amber: #ffd54f;
  --text: #dfe8ff;
  --text-dim: #9fb8e8;
  --mono: Consolas, "SF Mono", monospace;
}
* { box-sizing: border-box; }
.panel {
  background: rgba(8, 18, 38, 0.88);
  border: 1px solid #1e3a6e;
  border-radius: 10px;
  backdrop-filter: blur(6px);
}
.p-title {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--cyan);
  margin-bottom: 8px;
  border-left: 3px solid var(--cyan);
  padding-left: 8px;
}

/* 顶栏 */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 56px;
  display: flex; align-items: center; gap: 24px; padding: 0 18px; z-index: 100;
  background: linear-gradient(180deg, rgba(5,11,24,.9), rgba(5,11,24,0));
}
.brand { font-size: 17px; font-weight: bold; letter-spacing: 1px; }
.brand small { display: block; font-size: 9px; letter-spacing: 4px; color: var(--text-dim); font-weight: normal; }
#cam-switch { margin-left: auto; display: flex; background: rgba(8,18,38,.85); border: 1px solid #1e3a6e; border-radius: 8px; overflow: hidden; }
.cam-btn { background: transparent; border: none; color: var(--text-dim); padding: 8px 18px; font-size: 13px; cursor: pointer; }
.cam-btn.active { background: var(--cyan); color: #04203a; font-weight: bold; border-radius: 7px; }
.hint { font-size: 11px; color: var(--text-dim); opacity: .7; }

/* 左侧场景导航 */
#scene-nav {
  position: fixed; top: 76px; left: 16px; width: 210px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
}
.scene-btn {
  padding: 12px; font-size: 14px; text-align: center; letter-spacing: 2px;
  background: rgba(8,18,38,.88); color: var(--text); border: 1px solid #1e3a6e;
  border-radius: 8px; cursor: pointer; transition: all .15s;
}
.scene-btn:hover { border-color: var(--cyan); }
.scene-btn.active { background: var(--cyan); color: #04203a; font-weight: bold; }

/* 图例 / 城镇观测 / 场景说明 */
#legend { position: fixed; top: 76px; right: 16px; width: 218px; padding: 12px 14px; z-index: 100; }
.lg-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); margin: 7px 0; }
.chip { width: 20px; height: 11px; border-radius: 2px; display: inline-block; }
.scale-note { margin-top: 6px; font-size: 10px; color: var(--text-dim); opacity: .7; font-family: var(--mono); }

#town-panel { position: fixed; right: 16px; bottom: 96px; width: 246px; padding: 12px 14px; z-index: 100; }
.obs-row { display: flex; justify-content: space-between; font-size: 12px; margin: 6px 0; color: var(--text-dim); }
.obs-row b { font-family: var(--mono); font-weight: normal; }
.v-temp { color: #ff8a5c; } .v-pres { color: #6ea8ff; }
#obs-curve { width: 100%; height: 110px; margin-top: 6px; background: rgba(4,10,24,.5); border-radius: 4px; }
.obs-legend { display: flex; gap: 10px; font-size: 10px; margin-top: 4px; }
.obs-legend .k.temp { color: #ff8a5c; } .obs-legend .k.pres { color: #6ea8ff; } .obs-legend .k.now { color: var(--text-dim); }

#scene-desc {
  position: fixed; left: 16px; bottom: 96px; width: 300px;
  padding: 10px 14px; z-index: 100; font-size: 12px; line-height: 1.7;
}
#scene-desc b { color: var(--cyan); display: block; margin-bottom: 3px; font-size: 13px; }
#scene-desc span { color: var(--text-dim); }

/* 底部控制 */
#bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 84px; z-index: 100;
  display: flex; align-items: center; gap: 18px; padding: 0 18px;
  background: linear-gradient(0deg, rgba(5,11,24,.95), rgba(5,11,24,.75));
}
.play-group { display: flex; gap: 6px; }
.ctl {
  width: 42px; height: 42px; border-radius: 8px; border: 1px solid #1e3a6e;
  background: rgba(8,18,38,.9); color: var(--text); font-size: 15px; cursor: pointer;
}
.ctl.wide { width: 48px; font-family: var(--mono); }
.ctl.accent { background: var(--cyan); color: #04203a; font-weight: bold; }
.timeline { flex: 1; position: relative; padding-top: 34px; }
#timeline { width: 100%; }
#tl-marks { position: absolute; top: 0; left: 0; right: 0; height: 34px; }
.tl-mark { position: absolute; transform: translateX(-50%); text-align: center; }
.tl-dot { display: block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #2a4a8a; background: #0a1424; margin: 0 auto 2px; }
.tl-mark.mid .tl-dot { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 8px rgba(79,195,247,.7); }
.tl-name { display: block; font-size: 11px; color: var(--text); white-space: nowrap; }
.tl-mark.mid .tl-name { color: var(--cyan); }
.tl-sub { display: block; font-size: 9px; color: var(--text-dim); opacity: .7; white-space: nowrap; }

#field-switch { display: flex; gap: 8px; }
.field-btn {
  width: 86px; height: 54px; border-radius: 8px; border: 1px solid #1e3a6e;
  background: rgba(8,18,38,.9); color: var(--text); font-size: 13px; cursor: pointer;
}
.field-btn.accent { background: var(--cyan); color: #04203a; font-weight: bold; }

#toast-box { position: fixed; right: 16px; bottom: 96px; z-index: 900; }
#selftest-overlay {
  position: fixed; top: 70px; right: 260px; z-index: 9999; display: none;
  max-width: 460px; max-height: 70vh; overflow: auto; padding: 10px 14px;
  background: rgba(4,10,24,.94); border: 1px solid #2a4a8a; border-radius: 8px;
  font: 12px/1.6 Consolas, monospace; color: #cfe0ff; white-space: pre-wrap;
}

/* ── 场探针读数卡 ── */
#probe-card {
  position: fixed; left: 16px; bottom: 96px; width: 236px; padding: 10px 14px; z-index: 110;
}
#probe-card .pb-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--amber); letter-spacing: 1px;
  border-left: 3px solid var(--amber); padding-left: 8px; margin-bottom: 6px;
}
#probe-card .pb-head b { cursor: pointer; color: var(--text-dim); padding: 0 4px; }
#probe-card .pb-head b:hover { color: #fff; }

/* ── 影院模式：隐藏全部 HUD，仅留场景与退出提示 ── */
#cinema-hint {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 120;
  font-size: 13px; letter-spacing: 3px; color: var(--text-dim);
  background: rgba(8,18,38,.55); border: 1px solid #1e3a6e; border-radius: 20px; padding: 8px 22px;
}
body.cinema #topbar, body.cinema #scene-nav, body.cinema #legend, body.cinema #town-panel,
body.cinema #scene-desc, body.cinema #bottombar, body.cinema #probe-card { display: none !important; }
#toast-box .toast {
  background: rgba(8,18,38,.92); border: 1px solid #1e3a6e; border-radius: 8px;
  color: var(--text); font-size: 12px; padding: 8px 14px; margin-top: 8px;
}

/* ── 2D 地面天气图缩略 ── */
#minimap-panel { position: fixed; left: 16px; top: 396px; width: 256px; padding: 10px 12px; z-index: 100; }   /* v127 放大：平面图·天气图·结构对照（竞品同款对照面板） */
#minimap { display: block; width: 100%; border-radius: 6px; background: rgba(6,12,26,0.5); }
body.cinema #minimap-panel { display: none !important; }

/* ── 闪电全屏闪白 + 天空气氛（透明渲染器，body 渐变由 JS 按场景切换）── */
#flash { position: fixed; inset: 0; background: #dfe9ff; opacity: 0; pointer-events: none; z-index: 150; transition: opacity .13s ease-out; }

/* ── 画中画垂直剖面 A—B 对照 ── */
#profile-panel { position: fixed; right: 276px; bottom: 96px; width: 210px; padding: 10px 12px; z-index: 100; }
#profile-cv { display: block; width: 100%; border-radius: 6px; background: rgba(6,12,26,0.5); }
body.cinema #profile-panel { display: none !important; }

/* ── 气团探究实验台 ── */
#lab-panel { position: fixed; left: 50%; transform: translateX(-50%); bottom: 76px; width: 620px; padding: 10px 14px; z-index: 100; }
.lab-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-dim); margin: 6px 0; }
.lab-row span:first-child { width: 96px; flex: none; }
.lab-row input[type=range] { flex: 1; accent-color: var(--cyan); }
.lab-row b { font-family: var(--mono); color: var(--text); width: 44px; text-align: right; font-weight: normal; }
.lab-toggle { display: flex; gap: 6px; }
.lab-btn { background: rgba(8,18,38,.85); border: 1px solid #1e3a6e; color: var(--text-dim); padding: 4px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.lab-btn.active { background: var(--cyan); color: #04203a; font-weight: bold; }
.lab-text { font-size: 11.5px; line-height: 1.75; color: var(--text); border-top: 1px dashed #1e3a6e; margin-top: 8px; padding-top: 8px; }
.lab-text b { color: var(--amber); font-weight: normal; }
.lab-text b.lc { color: #74b6ff; } .lab-text b.lw { color: #ff9a70; }
body.cinema #lab-panel { display: none !important; }

/* v113 P4 边缘轻雾：低对比暗角统一氛围（z5 在 3D 画布上、HUD z100 之下；影院模式保留） */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse 78% 68% at 50% 46%, rgba(0,0,0,0) 58%, rgba(3,8,18,0.34) 100%);
}


/* v130 尺度跃迁 · 天气尺度全域视图（z 在 HUD 上：全屏接管，含自身标题条） */
#weathermap {
  position: fixed; inset: 0; z-index: 150; display: none;
  align-items: center; justify-content: center;
  background: rgba(4, 9, 20, 0.96);
  opacity: 0; transition: opacity 0.55s ease;   /* v130c 淡入过渡 */
}
#weathermap-cv { width: min(92vh, 92vw); height: min(92vh, 92vw); border-radius: 10px; box-shadow: 0 10px 60px rgba(0,0,0,0.6); }

/* v132 尺度跃迁视图：退出通道（关闭按钮 + ESC） */
#weathermap-close {
  position: fixed; top: 18px; right: 22px; z-index: 160;
  padding: 9px 18px; font-size: 14px; font-family: inherit; cursor: pointer;
  color: #dfe8ff; background: rgba(10, 22, 44, 0.9);
  border: 1px solid #2a4a7e; border-radius: 8px;
}
#weathermap-close:hover { background: rgba(30, 58, 110, 0.95); border-color: #4fc3f7; }
#weathermap-hint {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 160;
  font-size: 12.5px; color: #9fb8e8; letter-spacing: 1px;
}