/* A single flowing HUD keeps instructions and progress readable at every size. */
.stage-two-hud {
  position: absolute;
  z-index: 31;
  left: 50%;
  top: 2%;
  display: grid;
  justify-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}

.stage-two-hud > :first-child {
  position: static;
  left: auto;
  top: auto;
  width: 100%;
  max-width: none;
  transform: none;
  pointer-events: auto;
}

.stage-two-hud > [role="progressbar"],
.stage-two-hud > .route-progress {
  position: static;
  left: auto;
  top: auto;
  transform: none;
}

.farm-hud { width: min(52%, 690px); }
.wind-hud,
.weather-hud { width: min(54%, 690px); }
.routes-hud { width: min(46%, 700px); }

@media (orientation: portrait) {
  .farm-hud,
  .wind-hud,
  .weather-hud {
    top: calc(env(safe-area-inset-top, 0px) + 9px);
    width: 55%;
  }

  .routes-hud {
    top: calc(env(safe-area-inset-top, 0px) + 72px);
    width: calc(100vw - 28px);
  }

  .flight-wheel {
    right: calc((100% - 100vw) / 2 + 24px + env(safe-area-inset-right, 0px));
    min-width: 84px;
    min-height: 84px;
    touch-action: manipulation;
  }
}

@media (orientation: landscape) and (max-aspect-ratio: 5/3) {
  .routes-hud {
    top: calc(env(safe-area-inset-top, 0px) + 72px);
    width: min(calc(100vw - 28px), 700px);
  }

  .flight-wheel {
    right: calc((100% - 100vw) / 2 + 24px + env(safe-area-inset-right, 0px));
  }
}