html, body { margin: 0; height: 100%; background: #05070f; }

#overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(6vh + 2.2em);
  z-index: 10;
  text-align: center;
  color: #f2e86d;
  font: 1.15rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-shadow: 0 0 8px #000;
  pointer-events: none;
  padding: 0 16px;
}

#overlay h1 {
  margin: 0 0 .2em;
  font: clamp(2.4rem, 9vw, 5rem) Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 0 12px #3f6fff, 0 0 30px #3f6fff;
}

#overlay p { margin: .2em 0; }
#eta { color: #9fb8ff; font-size: .95rem; }

/* separate from the overlay, so nothing else can swallow the click */
#status {
  position: fixed;
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%);
  z-index: 20;
  padding: 4px 12px;
  border-radius: 6px;
  font: .95rem system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #f2e86d;
  background: rgba(5, 7, 15, .6);
  white-space: nowrap;
  text-decoration: underline;
}
#status:hover, #status:focus-visible { color: #fff; outline: 2px solid #3f6fff; }