:root {
  --bg: #0a0f14;
  --panel: rgba(10, 16, 22, 0.78);
  --line: rgba(136, 190, 205, 0.22);
  --ink: #e6eef2;
  --muted: #8fa4ad;
  --cyan: #35c8d8;
  --amber: #e0a45a;
  --danger: #e06a6a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  overscroll-behavior: none;
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}

#scene:active { cursor: grabbing; }

#hud {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  width: min(340px, calc(100vw - 28px));
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  pointer-events: none;
  z-index: 5;
}

.brand {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.brand span {
  margin-left: 6px;
  padding: 2px 6px;
  border: 1px solid rgba(53, 200, 216, 0.4);
  border-radius: 999px;
  color: var(--cyan);
  font-size: 10px;
}

.zone {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.stats {
  display: none;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.hint {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

#minimap {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: 260px;
  height: 193px;
  background: rgba(7, 12, 17, 0.78);
  border: 1px solid var(--line);
  border-radius: 10px;
  z-index: 5;
  pointer-events: none;
}

#crosshair {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border: 1px solid rgba(230, 238, 242, 0.75);
  border-radius: 50%;
  z-index: 6;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(10, 15, 20, 0.5);
}

#joystick {
  display: none;
  position: fixed;
  left: max(22px, env(safe-area-inset-left));
  bottom: max(34px, env(safe-area-inset-bottom));
  width: 118px;
  height: 118px;
  border: 1px solid rgba(136, 190, 205, 0.35);
  border-radius: 50%;
  background: rgba(8, 14, 20, 0.35);
  z-index: 8;
  touch-action: none;
}

#joystick-stick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(53, 200, 216, 0.28);
  border: 1px solid rgba(53, 200, 216, 0.75);
  box-shadow: 0 0 18px rgba(53, 200, 216, 0.18);
  transition: transform 0.08s ease-out;
}

#tap-hint, #route-note {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  color: rgba(143, 164, 173, 0.8);
  font-size: 11px;
  letter-spacing: 0.04em;
}

#tap-hint {
  bottom: max(16px, env(safe-area-inset-bottom));
  display: none;
}

#route-note {
  top: max(14px, env(safe-area-inset-top));
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 14, 20, 0.5);
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 38%, rgba(53, 200, 216, 0.10), transparent 42%),
    #0a0f14;
}

.overlay.hidden { display: none; }

.loading-box {
  width: min(520px, 100%);
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(10, 16, 22, 0.92);
}

.eyebrow {
  color: var(--cyan);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.loading-box h1 {
  margin: 12px 0 10px;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.loading-box p {
  margin: 8px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.loading-box .small { font-size: 12px; opacity: 0.8; }
/* 页脚联系方式：访客在入口页就能看到，不依赖 3D 场景加载 */
.site-footer { margin-top: 14px; font-size: 12px; letter-spacing: 0.04em; opacity: 0.62; }

.loading-box code {
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(53, 200, 216, 0.1);
  color: var(--cyan);
}

.progress {
  height: 3px;
  margin-top: 18px;
  background: rgba(136, 190, 205, 0.14);
  border-radius: 99px;
  overflow: hidden;
}

.progress span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #1d8e9c, var(--cyan));
  transition: width 0.18s ease-out;
}

body.touch #joystick { display: block; }
body.touch #tap-hint { display: block; }
body.hud-debug .stats { display: flex; }
body.touch #controls-hint { display: none; }
body.locked #crosshair { display: block; }

/* r79：瞄到可点展品时准星放大并变青 */
#crosshair {
  transition: width 0.12s ease-out, height 0.12s ease-out, margin 0.12s ease-out, border-color 0.12s ease-out;
}
#crosshair.hot {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-color: #35c8d8;
  box-shadow: 0 0 0 1px rgba(10, 15, 20, 0.5), 0 0 10px rgba(53, 200, 216, 0.7);
}

body.ui-hidden #hud,
body.ui-hidden #minimap,
body.ui-hidden #joystick,
body.ui-hidden #crosshair,
body.ui-hidden #tap-hint,
body.ui-hidden #card-tip,
body.ui-hidden #route-note {
  display: none !important;
}

@media (max-width: 760px) {
  #hud {
    width: min(300px, calc(100vw - 24px));
    padding: 11px 13px;
  }
  .zone { font-size: 18px; }
  #minimap {
    width: 150px;
    height: 111px;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
  }
  #joystick {
    left: max(16px, env(safe-area-inset-left));
    bottom: max(28px, env(safe-area-inset-bottom));
    width: 104px;
    height: 104px;
  }
  #joystick-stick {
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
  }
  #route-note { display: none; }
}

@media (pointer: coarse) {
  #joystick { display: block; }
  #tap-hint { display: block; }
  #controls-hint { display: none; }
}

/* ---------- 语音讲解 UI（阶段 2b-r4） ---------- */

.enter-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.enter-row.hidden { display: none; }

#enter-btn {
  padding: 11px 26px;
  border: 1px solid rgba(53, 200, 216, 0.75);
  border-radius: 999px;
  background: rgba(53, 200, 216, 0.14);
  color: #e6f6f9;
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

#enter-btn:hover { background: rgba(53, 200, 216, 0.26); }

.voice-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(201, 216, 222, 0.92);
  cursor: pointer;
}

.voice-switch input { width: 16px; height: 16px; accent-color: #35c8d8; }

#audio-panel {
  position: fixed;
  z-index: 6;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 14, 20, 0.72);
  color: rgba(201, 216, 222, 0.9);
  font-size: 12px;
  letter-spacing: 0.04em;
}

#audio-panel button {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 4px 12px;
  border: 1px solid rgba(53, 200, 216, 0.45);
  border-radius: 999px;
  background: rgba(53, 200, 216, 0.10);
  color: #d8eef3;
  font: inherit;
  cursor: pointer;
}

#audio-panel button[aria-pressed="true"] {
  border-color: rgba(224, 164, 90, 0.8);
  background: rgba(224, 164, 90, 0.18);
  color: #f0d9b6;
}

#audio-panel button:disabled { opacity: 0.45; cursor: not-allowed; }
#audio-panel button.hidden { display: none; }
#audio-panel input[type="range"] { width: 92px; accent-color: #35c8d8; }

#subtitle {
  position: fixed;
  z-index: 7;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 52px);
  max-width: min(760px, calc(100vw - 32px));
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(6, 11, 16, 0.82);
  color: #eaf4f7;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}

#subtitle.hidden { display: none; }

#voice-blocked {
  position: fixed;
  z-index: 8;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 96px);
  padding: 7px 14px;
  border: 1px solid rgba(224, 164, 90, 0.7);
  border-radius: 999px;
  background: rgba(30, 22, 10, 0.9);
  color: #f0d9b6;
  font-size: 12px;
  pointer-events: none;
}

#voice-blocked.hidden { display: none; }

body.ui-hidden #audio-panel,
body.ui-hidden #subtitle,
body.ui-hidden #voice-blocked {
  display: none !important;
}

@media (max-width: 760px) {
  /* 手机：控制条挪到右下角小地图上方，字幕再往上抬一层，
     避免与摇杆（左下）、小地图（右下）叠在一起。 */
  #audio-panel {
    left: auto;
    right: max(10px, env(safe-area-inset-right));
    transform: none;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 124px);
    gap: 6px;
    padding: 5px 9px;
    font-size: 11px;
  }
  #audio-panel button { padding: 3px 9px; }
  #audio-panel label[for="vol-slider"] { display: none; }
  #audio-panel input[type="range"] { width: 62px; }
  #subtitle {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 176px);
    max-width: calc(100vw - 20px);
    font-size: 13px;
    padding: 7px 12px;
  }
  #voice-blocked { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 240px); }
}

/* 具身任务操作台（只进入「具身」厅时出现） */
#emb-console {
  position: fixed;
  z-index: 6;
  left: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 304px;
  padding: 12px 13px 10px;
  border: 1px solid rgba(120, 170, 185, 0.32);
  border-radius: 12px;
  background: rgba(8, 14, 20, 0.86);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(6px);
  color: #d8eef3;
}

#emb-console.hidden { display: none; }

.emb-console-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #e6eef2;
}

.emb-console-head em {
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  color: rgba(143, 164, 173, 0.82);
}

.emb-task-list {
  display: grid;
  gap: 6px;
  margin: 10px 0 8px;
}

.emb-task-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid rgba(120, 170, 185, 0.22);
  border-radius: 8px;
  background: rgba(53, 200, 216, 0.05);
  color: #c9d8de;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.emb-task-list button:hover {
  border-color: rgba(53, 200, 216, 0.55);
  background: rgba(53, 200, 216, 0.10);
}

.emb-task-list button.active {
  border-color: rgba(224, 164, 90, 0.78);
  background: rgba(224, 164, 90, 0.14);
  color: #f4dfbe;
}

.emb-task-list button .num {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(224, 164, 90, 0.16);
  color: #e0a45a;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}

.emb-task-list button.active .num {
  background: rgba(224, 164, 90, 0.3);
  color: #ffe0b0;
}

.emb-console-status {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: rgba(201, 216, 222, 0.88);
}

#emb-console-note {
  color: rgba(143, 164, 173, 0.68);
  font-size: 10px;
  text-align: right;
}

.emb-progress {
  height: 3px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(120, 170, 185, 0.16);
  overflow: hidden;
}

.emb-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #35c8d8, #e0a45a);
  transition: width 0.18s linear;
}

body.ui-hidden #emb-console { display: none !important; }

@media (max-width: 760px) {
  /* 手机竖屏：操作台放在 HUD 下方的墙面上，不遮工作台和展品 */
  #emb-console {
    left: 10px;
    right: 10px;
    width: auto;
    top: calc(max(14px, env(safe-area-inset-top)) + 150px);
    bottom: auto;
    padding: 8px 10px;
  }
  .emb-console-head { font-size: 12px; }
  .emb-console-head em { display: none; }
  .emb-task-list {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 7px 0 6px;
  }
  .emb-task-list button { padding: 6px 7px; font-size: 11px; }
  .emb-console-status { font-size: 10px; }
  #emb-console-note { font-size: 9px; }
}

/* r36 暗角：把视线压回展项上。纯 CSS 叠加层，零渲染代价，桌面与手机同一份。
   中心透明、四角压暗，压在画布之上、HUD 之下（HUD 的 z-index 是 5~8）。 */
#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at 50% 54%,
    rgba(0,0,0,0) 40%, rgba(0,0,0,0.28) 76%, rgba(0,0,0,0.55) 100%);
}

/* ---- 展品说明卡（r64）----
   点中展品后弹出的屏幕空间卡片。竖屏时贴底、桌面时居中偏下。
   文案全部来自 exhibits.json，本文件只管排版。 */
#infocard {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 28px));
  max-height: min(62vh, 520px);
  display: flex;
  flex-direction: column;
  padding: 14px 16px 10px;
  box-sizing: border-box;
  background: rgba(10, 17, 22, 0.94);
  border: 1px solid rgba(143, 231, 240, 0.28);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  color: #dceff4;
  z-index: 40;
  animation: infocard-in 180ms ease-out;
}
@keyframes infocard-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#infocard.hidden { display: none; }
#infocard .info-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(143, 231, 240, 0.16);
}
#infocard [data-role="title"] {
  flex: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #eaf7fb;
}
#infocard [data-role="meta"] {
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(143, 231, 240, 0.85);
  white-space: nowrap;
}
#infocard [data-role="close"] {
  flex: none;
  padding: 4px 10px;
  font-size: 12px;
  color: #cfe6ee;
  background: rgba(143, 231, 240, 0.10);
  border: 1px solid rgba(143, 231, 240, 0.30);
  border-radius: 999px;
  cursor: pointer;
}
#infocard [data-role="body"] {
  overflow-y: auto;
  padding: 10px 2px 4px;
  -webkit-overflow-scrolling: touch;
}
#infocard [data-role="body"] p {
  margin: 0 0 7px;
  font-size: 13.5px;
  line-height: 1.62;
  color: #c9dfe6;
}
#infocard [data-role="body"] p.seg { padding-left: 10px; border-left: 2px solid rgba(143, 231, 240, 0.35); }
#infocard [data-role="body"] p.warn { color: #f0c48a; }
#infocard [data-role="body"] p.credit { font-size: 11.5px; color: rgba(180, 205, 214, 0.75); }
#infocard [data-role="body"] p.phone { color: #9ff0ff; letter-spacing: 0.04em; }
#infocard [data-role="foot"] {
  padding-top: 6px;
  font-size: 11px;
  color: rgba(160, 190, 200, 0.55);
  text-align: right;
}

/* ---------- 首次进入提示（r67）：说明卡存在，但入口只在 HUD 一行小字里 ---------- */
#card-tip {
  position: fixed;
  left: 50%;
  top: max(52px, calc(env(safe-area-inset-top) + 44px));
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  padding: 7px 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #dff6fb;
  background: rgba(8, 18, 26, 0.72);
  border: 1px solid rgba(143, 231, 240, 0.42);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  animation: cardTipIn 0.32s ease-out;
}
#card-tip.hidden { display: none; }
@keyframes cardTipIn {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- 图文速览入口（r68）：弱网 / 无 WebGL 的兜底 ---------- */
.quick-row { margin: 12px 0 0; font-size: 12px; }
.quick-row a { color: #9fe7ef; text-decoration: none; border-bottom: 1px solid rgba(53, 200, 216, 0.35); }
.quick-row a.quick-cta {
  display: inline-block; padding: 8px 16px;
  border: 1px solid rgba(53, 200, 216, 0.6); border-radius: 999px;
  background: rgba(53, 200, 216, 0.12);
}
.info-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.info-actions .act {
  padding: 6px 14px; font: inherit; font-size: 13px;
  color: #dff6fb; text-decoration: none;
  background: rgba(143, 231, 240, 0.10);
  border: 1px solid rgba(143, 231, 240, 0.32); border-radius: 999px;
  cursor: pointer;
}
.info-actions .act.primary {
  color: #061418; font-weight: 600;
  background: #35c8d8; border-color: #35c8d8;
}

/* ---------- r77：落地页 hero 图 + 继续参观 ---------- */
.loading-hero {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto 10px;
  border-radius: 10px;
  border: 1px solid rgba(143, 231, 240, 0.18);
}
#resume-btn {
  padding: 9px 16px;
  font: inherit; font-size: 14px;
  color: #dff6fb;
  background: rgba(53, 200, 216, 0.10);
  border: 1px solid rgba(53, 200, 216, 0.55);
  border-radius: 999px;
  cursor: pointer;
}
#resume-btn.hidden { display: none; }