* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #02030a; overflow: hidden; }
#c { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
body.flight #c { cursor: crosshair; }

#hud {
  position: fixed; left: 18px; top: 16px; z-index: 5; pointer-events: none;
  color: #f2ece0; font: 500 15px/1.45 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
#hud #hint {
  margin-top: 4px; font-size: 12px; font-weight: 400; opacity: .55; letter-spacing: .04em;
}

/* ── 飞行 HUD ── */
#flightHud {
  position: fixed; left: 18px; bottom: 18px; z-index: 6; pointer-events: none;
  color: #cfe0ff; font: 400 12px/1.5 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
}
.fh-speed { font-size: 34px; font-weight: 200; letter-spacing: .01em; line-height: 1; font-variant-numeric: tabular-nums; }
.fh-speed em { font-style: normal; font-size: 11px; opacity: .5; margin-left: 5px; letter-spacing: .14em; }
.fh-bar { width: 150px; height: 2px; background: rgba(140, 180, 255, .16); margin: 9px 0 8px; overflow: hidden; }
.fh-bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #3f6cff, #bfe0ff);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .12s linear;
}
.fh-meta { font-size: 11px; opacity: .7; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.fh-meta.dim { opacity: .42; margin-top: 3px; }
.fh-warn { margin-top: 6px; font-size: 11px; color: #ffb36b; letter-spacing: .1em; min-height: 14px; }

/* ── 准星 ── */
#reticle { position: fixed; left: 50%; top: 50%; width: 30px; height: 30px; z-index: 4; pointer-events: none; transform: translate(-50%, -50%); opacity: .4; }
#reticle i { position: absolute; inset: 10px; border: 1px solid rgba(191, 224, 255, .75); border-radius: 50%; }
#reticle::before, #reticle::after { content: ""; position: absolute; left: 50%; width: 1px; height: 6px; background: rgba(191, 224, 255, .8); transform: translateX(-50%); }
#reticle::before { top: 0; }
#reticle::after { bottom: 0; }

/* ── 触屏按钮 ── */
#pad { position: fixed; right: 16px; bottom: 20px; z-index: 7; display: none; flex-direction: column; gap: 10px; }
#pad button {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(150, 190, 255, .22);
  background: rgba(14, 22, 42, .55); color: #cfe0ff; font-size: 15px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: background .1s ease, border-color .1s ease;
}
#pad button.on { background: rgba(80, 130, 255, .32); border-color: rgba(160, 200, 255, .55); }

@media (hover: none), (pointer: coarse) { #pad { display: flex; } }
@media (max-width: 620px) {
  #hud #hint { display: none; }
  #flightHud { bottom: 16px; }
  .fh-speed { font-size: 28px; }
}

#err {
  position: fixed; inset: auto 0 0 0; z-index: 9; display: none; white-space: pre-wrap;
  padding: 10px 14px; background: rgba(120, 20, 20, .92); color: #ffe9e9;
  font: 12px/1.5 ui-monospace, Menlo, monospace;
}

/* 疾驰暗角：速度越高越收 */
#rush{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.04;
  background:radial-gradient(ellipse at 50% 50%,rgba(4,8,20,0) 40%,rgba(4,9,22,.78) 100%);
  transition:opacity .1s linear;will-change:opacity}
body.boost #rush{box-shadow:inset 0 0 140px rgba(96,156,255,.22)}