/* GARGANTUA — Schwarzschild Black Hole Raytracer
   视觉语言: 电影海报 —— 宽字距片名 / 衬线标语 / billing 小字 / 细线装裱 */
:root {
  --ink: #e9e6df;                       /* 暖调胶片白 */
  --ink-dim: #948d80;                   /* 同族暖灰 */
  --ink-faint: rgba(233, 230, 223, .42);
  --accent: #ffb35c;                    /* 吸积盘琥珀 — 唯一强调色 */
  --accent-hot: #ffd9a0;
  --hairline: rgba(233, 230, 223, .09);
  --panel-bg: rgba(8, 8, 11, .74);
  --panel-line: rgba(255, 179, 92, .14);
  --chip-bg: rgba(12, 12, 16, .62);
  --font-display: "Archivo", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-body: "Space Grotesk", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", "Noto Serif SC", "Songti SC", serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #000; color: var(--ink);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

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

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud.ui-hidden > * { opacity: 0 !important; pointer-events: none !important; }
#hud > * { transition: opacity .45s ease; }

/* ---------- 开场编排: 元素错峰入场 ---------- */
@keyframes posterRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes posterFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .brand, .top-right, .panel-toggle, .panel, .hud-bottom, .hud-slate, .frame { animation: none !important; }
}

/* ---------- 海报装裱框 ---------- */
.frame {
  position: absolute; inset: 12px;
  border: 1px solid rgba(233, 230, 223, .07);
  pointer-events: none;
  animation: posterFade 1.6s ease .1s both;
}
.frame::before, .frame::after {
  content: ""; position: absolute; width: 15px; height: 15px;
  border: 0 solid rgba(255, 179, 92, .4);
}
.frame::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.frame::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* ---------- 顶部: 片名区 / 控制区 ---------- */
.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 30px 34px 0; gap: 16px;
}

.brand { animation: posterRise .9s cubic-bezier(.22, .61, .36, 1) .15s both; }
.brand h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(27px, 3.6vw, 46px);
  font-weight: 560;
  font-stretch: 125%;                   /* 可变宽度轴: 拉宽成片名感 */
  letter-spacing: .42em;
  line-height: 1;
  color: var(--ink);
  text-shadow: 0 0 34px rgba(255, 179, 92, .30), 0 0 2px rgba(255, 217, 160, .35);
}
.brand .tagline {
  margin: 12px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13px, 1.35vw, 16px);
  letter-spacing: .18em;
  color: rgba(233, 230, 223, .66);
}
.brand .sub {
  margin: 10px 0 0;
  font-size: 9.5px; font-weight: 400;
  letter-spacing: .34em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.brand .billing {
  margin: 7px 0 0;
  font-family: var(--font-mono);
  font-size: 8.5px; font-weight: 300;
  letter-spacing: .22em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.top-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
  pointer-events: auto;
  animation: posterRise .9s cubic-bezier(.22, .61, .36, 1) .35s both;
}
.btn-row { display: flex; gap: 6px; }
.chip-row { display: flex; gap: 6px; }
.chip-row .chip { cursor: pointer; user-select: none; }

.btn {
  pointer-events: auto;
  background: var(--chip-bg); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 5px;
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; backdrop-filter: blur(12px);
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .16s ease, box-shadow .25s ease;
}
.btn:hover { border-color: rgba(255, 179, 92, .55); color: var(--accent-hot); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn:focus-visible, .chip:focus-visible, .panel-toggle:focus-visible {
  outline: 1px solid var(--accent); outline-offset: 2px;
}
.btn.active {
  background: rgba(255, 179, 92, .13);
  border-color: rgba(255, 179, 92, .65);
  color: var(--accent-hot);
  box-shadow: 0 0 18px rgba(255, 179, 92, .16);
}
.btn.small { padding: 4px 10px; font-size: 10px; }

.chip {
  background: var(--chip-bg);
  border: 1px solid var(--hairline); border-radius: 3px;
  padding: 5px 13px;
  font-size: 10px; font-weight: 400; letter-spacing: .12em;
  color: var(--ink-dim);
  backdrop-filter: blur(10px);
  transition: color .2s ease, border-color .2s ease;
}
.chip:hover { color: var(--ink); border-color: rgba(233, 230, 223, .22); }
.chip.on { color: var(--accent-hot); border-color: var(--panel-line); }

/* ---------- 左下: 遥测场记牌 ---------- */
.hud-slate {
  position: absolute; left: 34px; bottom: 30px;
  animation: posterRise .9s cubic-bezier(.22, .61, .36, 1) .6s both;
}
.hud-slate .slate-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 8.5px; font-weight: 500; letter-spacing: .34em;
  color: var(--ink-faint); text-transform: uppercase;
  margin-bottom: 6px;
}
.hud-slate .slate-label::before {
  content: ""; width: 14px; height: 1px; background: rgba(255, 179, 92, .45);
}
.telemetry {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 300; letter-spacing: .06em;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

/* ---------- 参数面板 ---------- */
.panel-toggle {
  position: absolute; right: 34px; top: 50%; transform: translateY(-50%);
  pointer-events: auto;
  background: var(--chip-bg); color: var(--ink-dim);
  border: 1px solid var(--hairline); border-radius: 6px;
  padding: 12px 9px;
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: .3em; cursor: pointer;
  writing-mode: vertical-rl;
  backdrop-filter: blur(12px);
  transition: color .2s ease, border-color .2s ease;
  animation: posterFade .9s ease .5s both;
}
.panel-toggle:hover { color: var(--accent-hot); border-color: rgba(255, 179, 92, .5); }

.panel {
  position: absolute; right: 72px; top: 50%; transform: translateY(-50%);
  width: 276px; max-height: 74vh; overflow-y: auto;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line); border-radius: 10px;
  padding: 16px 18px 18px;
  pointer-events: auto;
  backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(233, 230, 223, .05), 0 18px 50px rgba(0, 0, 0, .5);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
  scrollbar-width: thin; scrollbar-color: rgba(255, 179, 92, .3) transparent;
}
.panel.closed { opacity: 0; transform: translateY(-50%) translateX(26px); pointer-events: none; }
.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 500; letter-spacing: .22em;
  color: var(--accent);
  margin-bottom: 6px;
}
.group-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 9.5px; font-weight: 500; letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 14px 0 8px;
}
.group-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(233, 230, 223, .14), transparent);
}
.group-label:first-of-type { margin-top: 8px; }
.param { margin: 8px 0; }
.param label {
  display: flex; justify-content: space-between;
  font-size: 12px; font-weight: 400; letter-spacing: .04em;
  color: var(--ink); margin-bottom: 4px;
}
.param .val {
  color: var(--accent-hot);
  font-family: var(--font-mono); font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.param input[type="range"] {
  width: 100%; height: 18px; appearance: none; background: transparent; cursor: pointer;
}
.param input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, rgba(255, 179, 92, .5), rgba(255, 179, 92, .1));
}
.param input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent-hot); margin-top: -4.5px;
  box-shadow: 0 0 10px rgba(255, 179, 92, .65);
  transition: transform .15s ease;
}
.param input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.2); }
.param input[type="range"]:focus-visible { outline: 1px solid rgba(255, 179, 92, .5); outline-offset: 4px; }
.param input[type="range"]::-moz-range-track {
  height: 2px; border-radius: 1px; background: rgba(255, 179, 92, .28);
}
.param input[type="range"]::-moz-range-thumb {
  width: 11px; height: 11px; border: 0; border-radius: 50%;
  background: var(--accent-hot);
  box-shadow: 0 0 10px rgba(255, 179, 92, .65);
}

/* ---------- 底部提示 ---------- */
.hud-bottom {
  position: absolute; bottom: 30px; left: 0; right: 0;
  text-align: center;
  animation: posterRise .9s cubic-bezier(.22, .61, .36, 1) .75s both;
}
.hint {
  display: inline-block;
  font-size: 10.5px; font-weight: 400; letter-spacing: .16em;
  color: var(--ink-dim);
  padding: 7px 20px;
}
.hint b { color: var(--accent); font-weight: 600; }
.hint::before, .hint::after {
  content: "—"; color: rgba(255, 179, 92, .3); margin: 0 10px; font-weight: 300;
}

/* ---------- 帮助 / 错误 ---------- */
.help-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, .62); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
}
.help-overlay[hidden] { display: none; }
.help-card {
  background: var(--panel-bg); border: 1px solid var(--panel-line);
  border-radius: 12px; padding: 30px 38px; max-width: 480px;
  backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 rgba(233, 230, 223, .05), 0 30px 80px rgba(0, 0, 0, .55);
  animation: posterRise .5s cubic-bezier(.22, .61, .36, 1) both;
}
.help-card h2 {
  margin: 0 0 18px;
  font-family: var(--font-display); font-weight: 500; font-stretch: 118%;
  font-size: 15px; letter-spacing: .3em; color: var(--accent-hot);
}
.help-card table { border-collapse: collapse; width: 100%; }
.help-card td { padding: 5.5px 8px; font-size: 12.5px; color: var(--ink); }
.help-card td:first-child {
  color: var(--accent);
  font-family: var(--font-mono); font-size: 11px; white-space: nowrap;
}
.help-note {
  font-size: 11px; color: var(--ink-dim); line-height: 1.8; margin: 16px 0 12px;
}
.help-note code {
  color: var(--accent); background: rgba(255, 179, 92, .07);
  padding: 1px 6px; border-radius: 3px; font-family: var(--font-mono); font-size: 10px;
}

#fatal {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(0, 0, 0, .93);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
#fatal[hidden] { display: none; }
#fatal .fatal-card { max-width: 420px; padding: 20px; }
#fatal h2 {
  font-family: var(--font-display); font-weight: 500; font-stretch: 125%;
  letter-spacing: .4em; font-size: 17px; color: var(--accent-hot); margin: 0;
}
#fatal .fatal-msg { color: var(--ink-dim); font-size: 13px; line-height: 1.9; margin: 16px 0; }

/* ---------- 移动端 ---------- */
@media (max-width: 760px), (pointer: coarse) {
  .hud-top { padding: 18px 18px 0; flex-wrap: wrap; }
  .brand h1 { font-size: 22px; letter-spacing: .3em; }
  .brand .billing { display: none; }
  .brand .tagline { font-size: 12px; letter-spacing: .1em; }
  .top-right { align-items: flex-end; }
  .btn { padding: 6px 10px; font-size: 10px; }
  .hint { display: none; }
  .hud-slate { left: 18px; bottom: 16px; }
  .frame { inset: 8px; }
  .panel {
    right: 12px; left: 12px; width: auto; top: auto; bottom: 12px;
    transform: none; max-height: 46vh;
  }
  .panel.closed { transform: translateY(20px); }
  .panel-toggle {
    right: 12px; top: auto; bottom: 12px; transform: none;
    writing-mode: horizontal-tb; padding: 9px 16px; letter-spacing: .2em;
  }
  .panel:not(.closed) ~ .panel-toggle { display: none; }
}