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

html, body {
  height: 100%; width: 100%;
  overflow: hidden;
  background: #04050a;
  color: #b8f0ff;   /* 霓虹青调（原 #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:focus-visible { outline: 2px solid #b8f0ff; outline-offset: 2px; }   /* a11y：#enable/#mic-enable 键盘可见焦点（AGENTS.md §4.3），与 .ep-card 控件同款 */
#tip button:active { transform: scale(0.96); }
/* mic 驱动次级按钮："带上你自己的 DJ"：仅静音态 + 已过光敏警示门才出现，显隐完全由 JS 切 class（不参与
   #enable 那套 hover-only 淡隐逻辑，避免用户找不到它）。复用 `#tip button` 的基础样式族。 */
#mic-enable.mic-hidden { display: none; }

/* 音频开启后：底部按钮默认隐藏，只有 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-np {
  margin-top: 11px; padding-top: 9px;
  border-top: 1px solid rgba(150, 180, 255, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
  font-style: italic; font-size: 11px; line-height: 1.6; letter-spacing: 0.015em;
  color: rgba(255, 192, 236, 0.52);
}
.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; }

#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; }

/* 环境低语：段落/相位切换时淡入 ~8s 后淡出的数据诗句（顶部居中，不与底部详情卡/提示争位）。
   opacity 由 .show 驱动淡入淡出；pointer-events:none → 纯氛围，不拦交互。 */
#whisper {
  position: fixed; left: 50%; top: 15%; transform: translateX(-50%) translateY(-6px);
  max-width: min(560px, 82vw); text-align: center; z-index: 5; pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
  font-size: 14px; font-weight: 200; font-style: italic; letter-spacing: 0.04em; line-height: 1.7;
  color: rgba(224, 245, 255, 0.92);
  text-shadow: 0 0 26px rgba(120, 200, 255, 0.35), 0 0 8px rgba(0, 0, 0, 0.5);
  opacity: 0; transition: opacity 1.1s ease, transform 1.1s ease;
}
#whisper.show { opacity: 0.85; transform: translateX(-50%) translateY(0); }

#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse 65% 65% at 50% 47%, transparent 28%, rgba(0,0,0,0.6) 100%);   /* 收紧：夜店聚光灯感 */
}
#grain {
  position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 4;
  opacity: 0.02; mix-blend-mode: overlay;   /* 弱化颗粒：lofi 0.06 → 干净数字感 */
  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)} }

/* 节拍频闪层：drop 段 JS 给 .strobe-on 时触发白闪（opacity 由 #strobe.strobe-on 控制）*/
#strobe {
  position: fixed; inset: 0; pointer-events: none; z-index: 4;
  background: #ffffff; opacity: 0; mix-blend-mode: screen;
  transition: opacity 0.04s linear;   /* 极快 → 节拍点闪 */
}
#strobe.strobe-on { opacity: 0.12; }   /* 闪一下（峰值 12% 白屏，受光敏警示控制、可关闭）*/

#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; }
  #whisper { font-size: 12px; top: 12%; max-width: 88vw; letter-spacing: 0.02em; }   /* 移动端字号收敛 + 略上移，避开顶部标题 */
}

/* ---------- 光敏性癫痫警示门 ---------- */
/* 首屏拦截：用户确认后才进场景（含节拍同步频闪）。z-index 高于一切。 */
#epilepsy-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,6,20,0.94), rgba(0,0,0,0.98));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.6s ease;
}
#epilepsy-gate.gone { opacity: 0; pointer-events: none; }
.ep-card {
  max-width: 480px; width: 100%;
  background: rgba(14, 12, 28, 0.7);
  border: 1px solid rgba(184, 240, 255, 0.22);
  border-radius: 18px; padding: 28px 26px 22px;
  text-align: center;
  box-shadow: 0 0 80px rgba(255, 0, 180, 0.18), 0 0 60px rgba(0, 220, 255, 0.14);   /* 双霓虹辉光 */
}
.ep-card h2 {
  font-size: 15px; font-weight: 200; letter-spacing: 0.24em;
  margin-bottom: 18px; color: #ff4fd8;   /* 品红标题 */
}
.ep-card .ep-en {
  font-size: 13px; line-height: 1.65; color: rgba(220, 235, 255, 0.85); margin-bottom: 12px;
}
.ep-card .ep-zh {
  font-size: 13px; line-height: 1.7; color: rgba(220, 235, 255, 0.85); margin-bottom: 22px;
}
.ep-card .ep-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ep-card .ep-leave {
  font-size: 12px; letter-spacing: 0.06em; color: rgba(220, 235, 255, 0.6);
  text-decoration: none; padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(220, 235, 255, 0.18); transition: background 0.2s;
}
.ep-card .ep-leave:hover { background: rgba(255, 255, 255, 0.06); }
.ep-card .ep-alt {
  font-size: 12px; letter-spacing: 0.06em; color: rgba(184, 240, 255, 0.7);
  text-decoration: none; padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(184, 240, 255, 0.28); transition: background 0.2s, color 0.2s;
}
.ep-card .ep-alt:hover { background: rgba(184, 240, 255, 0.08); color: rgba(184, 240, 255, 0.95); }
.ep-card .ep-leave:focus-visible, .ep-card .ep-alt:focus-visible, .ep-card #ep-enter:focus-visible {
  outline: 2px solid #b8f0ff; outline-offset: 2px;
}
.ep-card #ep-enter {
  font-size: 12px; letter-spacing: 0.06em; cursor: pointer;
  color: #04050a; background: #b8f0ff; border: none;
  padding: 10px 22px; border-radius: 999px; font-weight: 600;
  transition: transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 0 24px rgba(184, 240, 255, 0.5);
}
.ep-card #ep-enter:hover { box-shadow: 0 0 36px rgba(184, 240, 255, 0.8); }
.ep-card #ep-enter:active { transform: scale(0.96); }
@media (max-width: 820px) {
  .ep-card { padding: 22px 18px 18px; }
  .ep-card h2 { font-size: 13px; }
  .ep-card .ep-en, .ep-card .ep-zh { font-size: 12px; }
}