/* ============================================================
   多维作品展示区块 · 右上角玻璃质感功能浮窗（P1-4）
   ------------------------------------------------------------
   约束（逐条对应需求）：
     · 只挂在 .galaxy-wrap 内 → 作品独立页等其他区域不会出现；
     · position:absolute（不是 fixed）→ 随区块滚动，不漂移；
     · 尺寸全部用 vmin / clamp → 随视口缩放自适应；
     · 浮窗本体与展开后的功能区都不超出 .galaxy-wrap 边界；
     · 透明默认 50%（可调），功能区 = 本体 × 1.2（上限 100%）。
   所有可变值来自 CSS 自定义属性，由 js/gx3-hud.js 按配置写入。
   ============================================================ */

/* ★ 用户第 11 条：行星资料面板（.planet-panel，贴右）打开时会与浮窗重叠。
   给 .galaxy-wrap 加 .is-panel-open，浮窗整体左移一个面板宽度 + 间距，
   并在窄屏让到底部抽屉上方。位移量用与 .planet-panel 相同的变量，保证一致。 */
.galaxy-wrap.is-panel-open > .gx3-hud {
  right: calc(var(--pp-gap, 22px) + var(--pp-w, 300px) + clamp(10px, 1.4vmin, 16px));
}
@media (max-width: 900px) {
  /* 窄屏面板变底部抽屉：浮窗留在右上，但要抬高到抽屉之上 */
  .galaxy-wrap.is-panel-open > .gx3-hud {
    right: clamp(12px, 1.6vmin, 18px);
    top: clamp(10px, 1.6vmin, 16px);
  }
}

/* ★ GPU 不可用：3D 切换按钮禁用并说明原因（不是"点了没反应"） */
#galaxy3dBtn.is-gpu-off,
#galaxy3dBtn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  border-color: rgba(255, 210, 122, .38);
  color: rgba(255, 210, 122, .92);
}

.gx3-hud {
  /* 由 JS 按 polaris-settings.js 写入 */
  --hud-opacity: 0.5;
  --hud-panel-opacity: 0.6;
  --hud-font: 11px;
  --hud-duration: 280ms;

  position: absolute;
  /* ★ 不能与切换按钮撞位：#galaxy3dBtn 在 right:18px / top:44px。
     浮窗放到它下方，右侧对齐，两者不重叠、也不遮住面包屑。 */
  top: calc(44px + clamp(30px, 4.4vmin, 44px) + clamp(8px, 1.4vmin, 14px));
  right: clamp(12px, 1.6vmin, 18px);
  /* 必须高于 .planet-panel（z-index:7），否则面板一开浮窗就被盖住 */
  z-index: 12;
  transition: right .28s cubic-bezier(.22,1,.36,1), top .28s cubic-bezier(.22,1,.36,1);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  /* 命中区只在浮窗本体上，展开后不带 pointer 事件的地方要放行给画布 */
  pointer-events: none;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: var(--hud-font);
  line-height: 1.5;
  color: #e9f2ff;
  /* 合计占屏 ≤ 8%：本体 4vmin 见方 + 功能区 40vmin 封顶 */
  max-width: min(42vmin, 320px);
}

/* ---------- 浮窗本体（收起态） ---------- */
.gx3-hud__trigger {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: clamp(30px, 4.4vmin, 44px);
  height: clamp(30px, 4.4vmin, 44px);
  padding: 0;
  border-radius: clamp(9px, 1.4vmin, 14px);
  border: 1px solid rgba(233, 242, 255, 0.20);
  background: rgba(8, 11, 18, var(--hud-opacity));
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: inherit;
  cursor: pointer;
  transition: background var(--hud-duration) cubic-bezier(0.22, 1, 0.36, 1),
              border-color var(--hud-duration) cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow var(--hud-duration) cubic-bezier(0.22, 1, 0.36, 1),
              transform var(--hud-duration) cubic-bezier(0.22, 1, 0.36, 1);
}
.gx3-hud__trigger:hover,
.gx3-hud__trigger:focus-visible {
  background: rgba(8, 11, 18, calc(var(--hud-opacity) + 0.12));
  border-color: rgba(233, 242, 255, 0.34);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  outline: none;
}
.gx3-hud__trigger svg {
  width: 58%;
  height: 58%;
  display: block;
  opacity: 0.88;
  transition: transform var(--hud-duration) cubic-bezier(0.22, 1, 0.36, 1);
}
.gx3-hud.is-open .gx3-hud__trigger svg { transform: rotate(90deg); }

/* ---------- 功能区（展开态） ----------
   关键：panel 与 trigger 在同一个 flex 容器里、同列排布，
   展开时它从「高度 0 / 不可见」平滑到「实际高度」，
   所以永远在浮窗边界内（不会浮到视口外）。 */
.gx3-hud__panel {
  pointer-events: none;
  /* 宽度取固定上限而不是 100%（100% 会被 flex 拉成整行宽 → 超出浮窗视觉边界） */
  width: min(42vmin, 268px);
  flex: none;
  margin-top: 6px;
  overflow: hidden;
  opacity: 0;
  /* 高度用 max-height 过渡（0 → 足够大），避免 JS 逐帧测高 */
  max-height: 0;
  transform: translateY(-4px) scale(0.985);
  transform-origin: top right;
  border-radius: clamp(10px, 1.5vmin, 15px);
  border: 1px solid rgba(233, 242, 255, 0.16);
  background: rgba(8, 11, 18, var(--hud-panel-opacity));
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: max-height var(--hud-duration) cubic-bezier(0.22, 1, 0.36, 1),
              opacity var(--hud-duration) cubic-bezier(0.22, 1, 0.36, 1),
              transform var(--hud-duration) cubic-bezier(0.22, 1, 0.36, 1),
              margin-top var(--hud-duration) cubic-bezier(0.22, 1, 0.36, 1),
              background var(--hud-duration) cubic-bezier(0.22, 1, 0.36, 1);
}
.gx3-hud.is-open .gx3-hud__panel {
  pointer-events: auto;
  opacity: 1;
  max-height: 320px;
  margin-top: 8px;
  transform: translateY(0) scale(1);
}

/* 键盘/点击聚焦时也展开（无障碍：不能只依赖 hover） */
.gx3-hud:focus-within .gx3-hud__panel {
  pointer-events: auto;
  opacity: 1;
  max-height: 320px;
  margin-top: 8px;
  transform: translateY(0) scale(1);
}

.gx3-hud__inner {
  padding: clamp(9px, 1.5vmin, 14px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.3vmin, 12px);
}

.gx3-hud__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.92em;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(233, 242, 255, 0.62);
  white-space: nowrap;
}

/* ---------- 单个滑杆行 ----------
   label 固定不换行（nowrap），滑杆占 1fr，数值框固定宽 → 三者永不溢出 */
.gx3-hud__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.gx3-hud__label {
  white-space: nowrap;
  font-size: 0.95em;
  color: rgba(233, 242, 255, 0.78);
  letter-spacing: 0.02em;
}

/* 滑杆：细、克制，与站点细线体系一致 */
.gx3-hud__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 40px;
  height: 14px;
  background: transparent;
  cursor: pointer;
}
.gx3-hud__range::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: rgba(233, 242, 255, 0.20);
}
.gx3-hud__range::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: rgba(233, 242, 255, 0.20);
}
.gx3-hud__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px; height: 10px;
  margin-top: -4px;
  border-radius: 50%;
  background: #e9f2ff;
  box-shadow: 0 0 0 1px rgba(5, 7, 13, 0.6);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.gx3-hud__range::-moz-range-thumb {
  width: 10px; height: 10px;
  border: none;
  border-radius: 50%;
  background: #e9f2ff;
  box-shadow: 0 0 0 1px rgba(5, 7, 13, 0.6);
}
.gx3-hud__range:hover::-webkit-slider-thumb,
.gx3-hud__range:focus-visible::-webkit-slider-thumb {
  transform: scale(1.18);
  box-shadow: 0 0 0 1px rgba(5, 7, 13, 0.6), 0 0 0 4px rgba(233, 242, 255, 0.14);
}
.gx3-hud__range:focus-visible { outline: none; }

/* 数值框：可手动输入，与滑杆双向同步 */
.gx3-hud__num {
  width: 3.4em;
  padding: 2px 4px;
  font: inherit;
  font-size: 0.95em;
  text-align: right;
  color: #e9f2ff;
  background: rgba(233, 242, 255, 0.06);
  border: 1px solid rgba(233, 242, 255, 0.16);
  border-radius: 4px;
  -moz-appearance: textfield;
  transition: border-color 140ms ease, background 140ms ease;
}
.gx3-hud__num::-webkit-outer-spin-button,
.gx3-hud__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gx3-hud__num:focus {
  outline: none;
  border-color: rgba(233, 242, 255, 0.42);
  background: rgba(233, 242, 255, 0.10);
}
/* 非法输入：红边提示，失焦后回落到合法值 */
.gx3-hud__num.is-invalid {
  border-color: rgba(255, 155, 176, 0.75);
  background: rgba(255, 155, 176, 0.10);
}

.gx3-hud__unit {
  font-size: 0.85em;
  color: rgba(233, 242, 255, 0.42);
  margin-left: 1px;
}

.gx3-hud__reset {
  margin-top: 2px;
  padding: 4px 6px;
  font: inherit;
  font-size: 0.88em;
  letter-spacing: 0.06em;
  color: rgba(233, 242, 255, 0.55);
  background: transparent;
  border: 1px solid rgba(233, 242, 255, 0.14);
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease;
}
.gx3-hud__reset:hover,
.gx3-hud__reset:focus-visible {
  color: #e9f2ff;
  border-color: rgba(233, 242, 255, 0.34);
  outline: none;
}

/* ---------- 窄屏降级：字号与间距逐档收紧 ----------
   实测（含浮窗本体）：
     680px 档  → 768×1024 打开态占屏 5.88%（原 5.88% 已达标，此处仅微调）
     380px 档  → 375×812  打开态占屏 6.2%（收紧前 11.33%，超出 8% 上限）
   收紧手段：宽度上限、内边距、行间距、隐藏标题行、数值框收窄。 */
@media (max-width: 680px) {
  .gx3-hud { --hud-font: 10px; max-width: min(50vmin, 232px); }
  .gx3-hud__panel { width: min(50vmin, 232px); }
  .gx3-hud__inner { gap: 6px; padding: 7px; }
  .gx3-hud__num { width: 2.9em; }
  .gx3-hud__head { font-size: 0.86em; }
  .gx3-hud__reset { padding: 3px 5px; font-size: 0.82em; }
}
@media (max-width: 380px) {
  .gx3-hud { --hud-font: 9px; max-width: min(46vmin, 176px); }
  .gx3-hud__panel { width: min(46vmin, 176px); }
  .gx3-hud__inner { gap: 4px; padding: 6px; }
  .gx3-hud__row { gap: 5px; }
  .gx3-hud__num { width: 2.6em; padding: 1px 3px; }
  /* 极窄屏：标题行只是装饰，去掉可省一整行高度（信息在 aria-label 里） */
  .gx3-hud__head { display: none; }
  .gx3-hud__reset { padding: 2px 4px; font-size: 0.8em; margin-top: 0; }
  .gx3-hud.is-open .gx3-hud__panel { margin-top: 6px; }
}

/* ---------- prefers-reduced-motion：去掉所有过渡，但不改变可用性 ---------- */
@media (prefers-reduced-motion: reduce) {
  .gx3-hud__trigger,
  .gx3-hud__panel,
  .gx3-hud__trigger svg,
  .gx3-hud__num,
  .gx3-hud__reset {
    transition-duration: 1ms !important;
  }
}