* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%; width: 100%;
  overflow: hidden;
  background: #04050a;
  color: #dfe6f2;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

#scene { position: fixed; inset: 0; z-index: 1; }
#scene canvas { display: block; touch-action: none; }   /* 禁用浏览器手势劫持 → 单指拖动/双指捏合可达 */

#hud {
  position: fixed; left: 0; right: 0; top: 0;
  padding: max(env(safe-area-inset-top), 16px) 22px 0;
  pointer-events: none; z-index: 5; transition: opacity 1.6s ease;
}
#home-link {
  position: fixed; right: 22px; top: max(env(safe-area-inset-top), 16px);
  z-index: 5; font-size: 10px; font-weight: 300; letter-spacing: 0.28em;
  color: #cfe0ff; opacity: 0.32; text-decoration: none;
  transition: opacity 0.3s ease;
}
#home-link:hover, #home-link:focus-visible { opacity: 0.75; }
body.ui-hidden #home-link { opacity: 0; pointer-events: none; }
#title {
  font-size: 17px; font-weight: 200; letter-spacing: 0.42em; margin-top: 4px; opacity: 0.6;
  pointer-events: auto; cursor: pointer; transition: opacity 0.5s ease, font-size 0.4s ease;   /* 整个标题 = 三模式循环 toggle */
  width: fit-content;                                       /* 命中区贴合文字，不横跨整条 HUD */
}
#title:hover { opacity: 0.85; }
#title span {
  font-size: 9px; letter-spacing: 0.34em; opacity: 0.4; margin-left: 12px; font-weight: 200;
  pointer-events: auto; cursor: pointer; transition: opacity 0.2s, font-size 0.4s ease;
}
#title span:hover { opacity: 0.72; }
#title span:active { opacity: 0.9; }

/* 模式3 隐藏态：收起全部文字与按钮（沉浸纯画面）；左上角 hover/触控 浮现大标题 */
body.ui-hidden #sub,
body.ui-hidden #panel,
body.ui-hidden #card { opacity: 0 !important; pointer-events: none !important; }
/* 但音频未开启时，#tip 的「点按开启声音」提示必须可见（否则首屏一片黑、用户不知要点） */
body.ui-hidden:not(.audio-on) #tip { opacity: 0.4 !important; pointer-events: none !important; }
body.ui-hidden:not(.audio-on) #tip button { pointer-events: auto !important; }
body.ui-hidden #hud { opacity: 1 !important; }              /* 保持 HUD 在场，好让标题可浮现（不被静置淡隐） */
body.ui-hidden #title {
  opacity: 0;                                              /* 尺寸+位置与模式1/2 完全一致（不放大、不位移）；padding 只向右/下扩大命中区、不碰 top/left → 文字不动，切换无位移 */
  padding: 0 56px 32px 0;
}
body.ui-hidden #title:hover,
body.ui-hidden #title.peek { opacity: 0.8; }
#sub { font-size: 10px; font-weight: 300; opacity: 0.3; margin-top: 12px; max-width: 520px; line-height: 1.9; letter-spacing: 0.04em; }

#tip {
  position: fixed; left: 0; right: 0;
  bottom: max(env(safe-area-inset-bottom), 18px);
  text-align: center; font-size: 10px; opacity: 0.4; letter-spacing: 0.06em;
  pointer-events: none; z-index: 5; padding: 0 16px; transition: opacity 1.6s ease;
}
#tip button {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(170, 200, 255, 0.35);
  color: #cfe0ff; padding: 7px 16px; border-radius: 999px;
  font-size: 12px; cursor: pointer; margin-left: 6px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.1s;
}
#tip button:hover { background: rgba(255, 255, 255, 0.12); }
#tip button:active { transform: scale(0.96); }

/* 音频开启后：底部按钮（音乐 ⇄ 麦克风/陀螺律动）默认隐藏，只有 hover（或键盘 Tab 聚焦）才浮现 → 沉浸纯画面。
   容器不再整体压暗，交由按钮自身 opacity 控制（避免 #tip 的 0.4 又把浮现的按钮压暗）。 */
body.audio-on #tip { opacity: 1; }
body.audio-on #tip #tip-text { opacity: 0.4; }                          /* running 时其实为空，仍保持淡 */
body.audio-on #enable {
  opacity: 0;                                                           /* 默认隐藏（仍占位、仍是命中/hover 目标） */
  transition: opacity 0.5s ease, background 0.2s, transform 0.1s;
}
body.audio-on #enable:hover,
body.audio-on #enable:focus-visible { opacity: 1; }                     /* hover / 键盘聚焦 → 浮现 */

/* 触摸设备（无 hover）：常显但更透明，让用户知道可点，又不抢画面 */
@media (hover: none) {
  body.audio-on #enable { opacity: 0.4 !important; }
}

#card {
  position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%);
  max-width: 86vw; min-width: 200px;
  background: rgba(8, 11, 20, 0.42);
  border: 1px solid rgba(150, 180, 255, 0.12);
  border-radius: 18px; padding: 15px 24px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  z-index: 6; text-align: center;
  transition: opacity 0.45s, transform 0.45s;
  box-shadow: 0 0 60px rgba(60, 90, 200, 0.16);
}
#card h3 { font-size: 16px; font-weight: 200; letter-spacing: 0.16em; margin-bottom: 9px; line-height: 1.45; }
#card .kw { font-size: 10px; font-weight: 300; opacity: 0.4; letter-spacing: 0.34em; text-transform: lowercase; line-height: 1.9; }

.hidden { opacity: 0 !important; pointer-events: none !important; transform: translateX(-50%) translateY(10px) !important; }

/* 焦点详情探查面板：公式 + 实时参数 + 数据映射（实体名降为角落小字） */
#card.inspect {
  left: max(env(safe-area-inset-left), 16px); right: auto; bottom: 52px;
  transform: none; text-align: left;
  max-width: min(440px, 82vw); min-width: 272px;
  padding: 15px 18px 13px;
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}
#card.inspect.hidden { transform: translateY(12px) !important; }
.ins-meta { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(150, 180, 255, 0.1); }
.ins-name { display: block; font-size: 9px; font-weight: 300; letter-spacing: 0.06em; color: rgba(195, 205, 230, 0.3); line-height: 1.3; text-transform: none; }
.ins-eq { font-size: 12px; line-height: 1.65; color: rgba(220, 232, 255, 0.85); margin-bottom: 8px; }
.ins-eqh { font-size: 11px; letter-spacing: 0.1em; color: rgba(255, 208, 135, 0.92); margin-bottom: 4px; }
.ins-eqh .ins-sys { opacity: 0.5; }
.ins-eq b { color: rgba(150, 255, 200, 0.95); font-weight: 500; }
.ins-state { font-size: 11px; letter-spacing: 0.05em; color: rgba(190, 205, 235, 0.6); margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid rgba(150, 180, 255, 0.1); }
.ins-state i { font-style: normal; color: rgba(150, 255, 200, 0.9); }
.ins-dt { opacity: 0.72; }
.ins-rows { display: flex; flex-direction: column; gap: 2px; }
.ir { display: grid; grid-template-columns: 56px 50px 1fr; gap: 7px; align-items: baseline; font-size: 10.5px; line-height: 1.5; }
.ir .ic { color: rgba(255, 208, 135, 0.8); letter-spacing: 0.03em; }
.ir .iv { color: rgba(222, 236, 255, 0.92); text-align: right; }
.ir .im { color: rgba(185, 200, 230, 0.5); font-size: 9.5px; letter-spacing: 0.02em; }

/* focus 卡的「正在播放」诗句：冷的数据行之下，一句暖的梦呓（脱开等宽字体，改衬线更软） */
.ins-np { margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(150, 180, 255, 0.1); font-family: Georgia, 'Songti SC', 'Times New Roman', ui-serif, serif; font-size: 11.5px; font-style: italic; font-weight: 300; line-height: 1.55; color: rgba(214, 224, 250, 0.74); letter-spacing: 0.015em; }
.ins-np .np-lab { display: inline-block; font-style: normal; font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 208, 135, 0.68); margin-right: 8px; }

/* 环境低语：屏上方漂浮的一句梦呓，8 秒淡出；纯装饰，不吃指针 */
#whisper {
  position: fixed; left: 50%; top: 19vh; transform: translateX(-50%) translateY(-6px);
  max-width: min(680px, 84vw); text-align: center; z-index: 5; pointer-events: none;
  font-family: Georgia, 'Songti SC', 'Times New Roman', ui-serif, serif;
  font-size: 15px; font-weight: 300; font-style: italic; letter-spacing: 0.03em; line-height: 1.7;
  color: rgba(224, 232, 255, 0.9); text-shadow: 0 0 26px rgba(80, 110, 220, 0.34), 0 1px 2px rgba(0, 0, 0, 0.5);
  opacity: 0; transition: opacity 1.4s ease, transform 1.4s ease;
}
#whisper.show { opacity: 0.84; transform: translateX(-50%) translateY(0); }
body.ui-hidden #whisper { z-index: 5; }   /* 低语是叙事层，纯画面模式下仍可浮现（不随 HUD 一起隐） */
@media (max-width: 820px) { #whisper { font-size: 13.5px; top: 15vh; max-width: 88vw; } }
@media (prefers-reduced-motion: reduce) { #whisper { transition: opacity 1.4s ease; } #whisper.show { transform: translateX(-50%); } }

#panel {
  position: fixed; left: max(env(safe-area-inset-left), 12px); top: 50%; transform: translateY(-50%);
  z-index: 7; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(8, 11, 22, 0.5); border: 1px solid rgba(150, 180, 255, 0.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#panel .phead { font-size: 10px; letter-spacing: 0.18em; opacity: 0.45; margin: 6px 0 3px; text-transform: uppercase; }
#panel .phead:first-child { margin-top: 0; }
#panel .prow { display: flex; align-items: center; gap: 7px; font-size: 12px; cursor: pointer; opacity: 0.82; padding: 2px 0; user-select: none; }
#panel .prow:hover { opacity: 1; }
#panel .prow input { width: 13px; height: 13px; accent-color: #8fb4ff; cursor: pointer; margin: 0; }

#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse 78% 78% at 50% 47%, transparent 32%, rgba(0,0,0,0.52) 100%);
}
#grain {
  position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 4;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px; animation: grain 0.55s steps(3) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 33%{transform:translate(-5%,3%)} 66%{transform:translate(4%,-4%)} 100%{transform:translate(0,0)} }

#loading {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; letter-spacing: 0.32em; opacity: 0.75; z-index: 10;
  background: #04050a; transition: opacity 0.9s;
}
#loading.gone { opacity: 0; pointer-events: none; }
@media (max-width: 820px) { #panel { font-size: 11px; padding: 8px 10px; gap: 1px; top: auto; bottom: 64px; transform: none; } }

@media (max-width: 820px) {
  #title { font-size: 21px; letter-spacing: 0.22em; }
  #title span { display: block; margin: 6px 0 0; }
  #sub { font-size: 11px; }
}

/* ---------- 欢迎门：点击 Enter 的同步手势内解锁音频（移动端 Autoplay Policy）---------- */
#welcome-gate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: radial-gradient(ellipse at center, rgba(8, 11, 22, 0.92), rgba(0,0,0,0.97));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.9s ease;
}
#welcome-gate.gone { opacity: 0; pointer-events: none; }
.wg-card {
  max-width: 460px; width: 100%;
  background: rgba(8, 11, 22, 0.55);
  border: 1px solid rgba(150, 180, 255, 0.16);
  border-radius: 18px; padding: 30px 26px 24px;
  text-align: center;
  box-shadow: 0 0 60px rgba(60, 90, 200, 0.2);   /* 冷蓝辉光（与 #card 一致）*/
}
.wg-card h2 {
  font-size: 15px; font-weight: 200; letter-spacing: 0.32em;
  margin-bottom: 20px; color: #cfe0ff; opacity: 0.85;
}
.wg-card .wg-en {
  font-size: 13px; line-height: 1.65; color: rgba(220, 232, 255, 0.78); margin-bottom: 12px;
}
.wg-card .wg-zh {
  font-size: 13px; line-height: 1.7; color: rgba(220, 232, 255, 0.78); margin-bottom: 24px;
}
.wg-card #wg-enter {
  font-size: 12px; letter-spacing: 0.18em; cursor: pointer;
  color: #cfe0ff; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(170, 200, 255, 0.35);
  padding: 11px 26px; border-radius: 999px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}
.wg-card #wg-enter:hover { background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 24px rgba(120, 160, 255, 0.25); }
.wg-card #wg-enter:active { transform: scale(0.96); }
@media (max-width: 820px) {
  .wg-card { padding: 24px 20px 20px; }
  .wg-card h2 { font-size: 13px; }
  .wg-card .wg-en, .wg-card .wg-zh { font-size: 12px; }
}