:root { color-scheme: dark; }
html, body { margin: 0; height: 100%; background: #0b0f17; overflow: hidden;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #eef2f7; }
canvas { display: block; }
.hud { position: fixed; inset: 0; pointer-events: none; display: grid;
  grid-template-rows: auto 1fr auto; padding: 18px 20px; gap: 10px; }
.hud > * { pointer-events: auto; }
.hud-back { justify-self: start; color: #8ab4f8; text-decoration: none; font-size: 14px;
  background: rgba(14,18,28,.7); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(8px); }
.hud-title { grid-row: 1; justify-self: center; align-self: start; font-size: 15px; font-weight: 600;
  letter-spacing: .01em; background: rgba(14,18,28,.7); padding: 7px 14px; border-radius: 999px; backdrop-filter: blur(8px); }
.hud-hint { grid-row: 1; justify-self: end; max-width: 300px; font-size: 12.5px; color: #b7c0cf; line-height: 1.45;
  background: rgba(14,18,28,.7); padding: 8px 12px; border-radius: 12px; backdrop-filter: blur(8px); }
.hud-stations { grid-row: 3; justify-self: start; align-self: end; display: flex; gap: 6px;
  background: rgba(14,18,28,.7); padding: 6px; border-radius: 999px; backdrop-filter: blur(8px); }
.hud-actions { grid-row: 3; justify-self: center; align-self: end; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  background: rgba(14,18,28,.7); padding: 6px; border-radius: 999px; backdrop-filter: blur(8px); }
.hud-actions:empty { display: none; }
.hud button[hidden] { display: none; }
.hud-vr { grid-row: 3; justify-self: end; align-self: end; }
.hud button, .hud-vrbtn { font: inherit; font-size: 13px; color: #eef2f7; background: transparent; border: 1px solid transparent;
  padding: 7px 13px; border-radius: 999px; cursor: pointer; }
.hud button:hover { background: rgba(255,255,255,.08); }
.hud-stations button.active { background: #1a73e8; }
.hud-vrbtn { background: #1a73e8; font-weight: 600; padding: 10px 18px; opacity: 1 !important; }
.hud-vrbtn:disabled, .hud-vrbtn.disabled { background: rgba(255,255,255,.1); color: #b7c0cf; cursor: default; }
.hud.in-vr { display: none; }
@media (max-width: 720px) {
  .hud { grid-template-rows: auto auto 1fr auto; }
  .hud-hint { grid-row: 2; justify-self: stretch; max-width: none; }
  .hud-title { justify-self: end; }
}