:root {
  --ink: #e8edf2;
  --dim: #8d97a3;
  --line: rgba(190, 205, 220, 0.16);
  --bg: #07090c;
  --acc: #ffb44a;
  --acc2: #57d8ff;
  --panel: rgba(9, 12, 16, 0.78);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

kbd {
  display: inline-block; padding: 0 4px; min-width: 15px; text-align: center;
  border: 1px solid var(--line); border-radius: 3px;
  font: 500 10px/16px ui-monospace, Menlo, Consolas, monospace;
  color: var(--dim); background: rgba(255, 255, 255, 0.04);
}

/* ══════════ 加载页 ══════════ */
#boot {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(ellipse at 50% 120%, #17202b 0%, #05070a 62%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .9s ease;
}
#boot.gone { opacity: 0; pointer-events: none; }
.boot-inner { width: min(760px, 88vw); text-align: center; }
.boot-mark {
  font-size: clamp(56px, 10vw, 112px); font-weight: 800; letter-spacing: .22em;
  color: #f2f6fa; line-height: 1;
  text-shadow: 0 0 60px rgba(120, 190, 255, .22);
}
.boot-inner h1 {
  margin: 14px 0 4px; font-size: clamp(13px, 1.6vw, 17px);
  letter-spacing: .62em; font-weight: 500; color: var(--acc);
}
.boot-sub { margin: 0 0 30px; font-size: 12.5px; letter-spacing: .22em; color: var(--dim); }
.manifest {
  text-align: left; display: grid; gap: 7px; margin: 0 auto 30px;
  max-width: 560px; font-size: 12.5px; line-height: 1.75; color: #b9c3ce;
}
.manifest b { color: var(--acc2); font-weight: 600; margin-right: 9px; letter-spacing: .1em; }
.manifest i { color: #fff; font-style: normal; border-bottom: 1px solid var(--acc); }
.bar { height: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc2), var(--acc)); transition: width .25s; }
.boot-step { margin-top: 12px; font-size: 11.5px; letter-spacing: .18em; color: var(--dim); }
.boot-stats { margin-top: 6px; font: 10.5px/1.6 ui-monospace, Consolas, monospace; color: #5c6673; }

/* ══════════ 顶栏 ══════════ */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 46px; z-index: 40;
  display: flex; align-items: center; gap: 18px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(4, 6, 9, .82), rgba(4, 6, 9, 0));
  pointer-events: none;
}
#topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand .cjk { font-size: 19px; font-weight: 800; letter-spacing: .2em; }
.brand .lat { font-size: 9.5px; letter-spacing: .34em; color: var(--dim); }
.modes { display: flex; gap: 2px; margin-left: auto; }
.topright { display: flex; gap: 6px; }

button {
  font-family: inherit; font-size: 12px; color: var(--ink);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  padding: 6px 11px; border-radius: 4px; cursor: pointer;
  transition: background .16s, border-color .16s, color .16s;
  display: inline-flex; align-items: center; gap: 6px;
}
button:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
button.on { background: rgba(255, 180, 74, .16); border-color: rgba(255, 180, 74, .55); color: #ffd9a1; }
button.tg { font-size: 11px; padding: 5px 9px; opacity: .55; }
button.tg.on { opacity: 1; }

/* ══════════ 视点 ══════════ */
#viewpoints {
  position: fixed; left: 12px; top: 58px; z-index: 35; width: 176px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 9px 9px 7px; backdrop-filter: blur(9px);
}
.vp-title { font-size: 10px; letter-spacing: .3em; color: var(--dim); margin: 0 2px 7px; }
#vpList { display: grid; gap: 2px; }
#vpList button {
  width: 100%; justify-content: flex-start; font-size: 11.5px; padding: 5px 8px;
  background: transparent; border-color: transparent;
}
#vpList button:hover { background: rgba(255, 255, 255, .07); }
#vpList button.on { background: rgba(87, 216, 255, .14); border-color: rgba(87, 216, 255, .4); color: #cdf1ff; }
.vp-sep { height: 1px; background: var(--line); margin: 5px 2px; }
.vp-hint { margin: 7px 2px 0; font-size: 10px; line-height: 1.6; color: #6b7481; }

/* ══════════ 参数面板 ══════════ */
#panel {
  position: fixed; right: 12px; top: 58px; z-index: 36; width: 232px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 11px; backdrop-filter: blur(9px);
  max-height: calc(100vh - 110px); overflow-y: auto;
}
#panel.hidden, #help.hidden, .hidden { display: none !important; }
.pt { font-size: 10px; letter-spacing: .3em; color: var(--dim); margin: 4px 0 8px; }
.pt:not(:first-child) { margin-top: 15px; border-top: 1px solid var(--line); padding-top: 12px; }
#panel label { display: block; font-size: 11px; color: #a9b3bf; margin-bottom: 9px; }
#panel output { float: right; font: 10.5px ui-monospace, Consolas, monospace; color: var(--acc); }
#panel input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 16px;
  background: transparent; margin: 3px 0 0; cursor: pointer;
}
#panel input[type=range]::-webkit-slider-runnable-track { height: 2px; background: rgba(255, 255, 255, .16); }
#panel input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--acc); margin-top: -4px; border: none;
}
.row { display: flex; gap: 4px; }
.row.wrap { flex-wrap: wrap; }
#skyPresets button { flex: 1 1 30%; min-width: 58px; padding: 5px 0; justify-content: center; font-size: 11px; }
#panel .stats {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  font: 10px/1.75 ui-monospace, Consolas, monospace; color: #6d7784; white-space: pre;
}

/* ══════════ 帮助 ══════════ */
#help {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  background: rgba(4, 6, 9, .9); backdrop-filter: blur(6px); padding: 30px;
}
#help h2 { margin: 0; font-size: 15px; letter-spacing: .3em; font-weight: 500; color: var(--acc); }
.hgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; max-width: 940px; }
.hgrid h3 { margin: 0 0 8px; font-size: 12.5px; letter-spacing: .16em; color: var(--acc2); }
.hgrid p { margin: 0 0 8px; font-size: 12px; line-height: 1.85; color: #b3bdc9; }
.hgrid b { color: #fff; font-weight: 600; }
.hgrid i { font-style: normal; border-bottom: 1px solid var(--acc); }
#help .close { padding: 8px 24px; }

/* ══════════ 图解标签 ══════════ */
#annos { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.anno {
  position: absolute; transform: translate(0, -50%);
  padding-left: 30px; opacity: 0; transition: opacity .3s;
}
.anno::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 24px; height: 1px;
  background: linear-gradient(90deg, rgba(87, 216, 255, .1), var(--acc2));
}
.anno::after {
  content: ''; position: absolute; left: -3px; top: calc(50% - 3px);
  width: 6px; height: 6px; border: 1px solid var(--acc2); border-radius: 50%;
}
.anno.show { opacity: 1; }
.anno b {
  display: block; font-size: 12px; letter-spacing: .16em; color: #fff;
  text-shadow: 0 1px 8px #000;
}
.anno span {
  display: block; font-size: 10.5px; line-height: 1.5; color: #9fb0be;
  max-width: 210px; margin-top: 2px; text-shadow: 0 1px 6px #000;
}

/* ══════════ 第一视角 HUD ══════════ */
#fpsHud { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
.cross {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px; border-radius: 50%;
  background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}
.readout {
  position: absolute; left: 16px; bottom: 46px;
  border-left: 1px solid rgba(255, 180, 74, .55); padding-left: 11px;
}
.alt { display: flex; align-items: baseline; gap: 7px; }
.alt span { font: 700 30px/1 ui-monospace, Consolas, monospace; color: #fff; letter-spacing: -.01em; }
.alt i { font-style: normal; font-size: 10px; letter-spacing: .24em; color: var(--dim); }
.meter { font: 12px ui-monospace, Consolas, monospace; color: var(--acc); margin-top: 3px; }
.scaleref { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.ref-bar { width: 26px; height: 13px; border-left: 1px solid #fff; border-right: 1px solid #fff; position: relative; }
.ref-bar i { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #fff; }
.scaleref span { font-size: 10px; color: #97a2ae; }
.lookup {
  position: absolute; left: 50%; top: 20%; transform: translateX(-50%);
  font-size: 12px; letter-spacing: .34em; color: rgba(255, 220, 170, .9);
  text-shadow: 0 2px 10px #000; animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .25; } 50% { opacity: .95; } }
.ridehint {
  position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%);
  font-size: 11.5px; letter-spacing: .12em; color: #cdf1ff;
  background: rgba(6, 12, 18, .7); border: 1px solid rgba(87, 216, 255, .32);
  padding: 6px 14px; border-radius: 20px;
}
#lockHint {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30;
  font-size: 12.5px; letter-spacing: .2em; color: #dbe4ee;
  background: rgba(6, 9, 13, .72); border: 1px solid var(--line);
  padding: 10px 22px; border-radius: 30px; pointer-events: none;
}

/* ══════════ 巡航 HUD ══════════ */
#cineHud { position: fixed; inset: 0; z-index: 28; pointer-events: none; }
.cine-title {
  position: absolute; left: 46px; bottom: 108px;
  font-size: 20px; letter-spacing: .3em; font-weight: 700; color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .9); transition: opacity .5s;
}
.cine-text {
  position: absolute; left: 48px; bottom: 78px; max-width: min(620px, 60vw);
  font-size: 12.5px; line-height: 1.85; color: #c3cdd8;
  text-shadow: 0 2px 12px #000; transition: opacity .5s;
}
.cine-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .08); }
.cine-prog > i { display: block; height: 100%; background: var(--acc); width: 0; }

/* ══════════ 底栏 ══════════ */
#footer {
  position: fixed; left: 0; right: 0; bottom: 0; height: 26px; z-index: 30;
  display: flex; align-items: center; gap: 16px; padding: 0 14px;
  font: 10px/1 ui-monospace, Consolas, monospace; color: #6a7480;
  background: linear-gradient(0deg, rgba(4, 6, 9, .8), rgba(4, 6, 9, 0));
  pointer-events: none;
}
#fMode { color: var(--acc); letter-spacing: .2em; }

@media (max-width: 860px) {
  #viewpoints { width: 148px; }
  .hgrid { gap: 16px; }
  .cine-title { left: 20px; font-size: 16px; }
  .cine-text { left: 22px; }
}