/* Veller live-GPS — satellite-first, no HUD. Just the imagery, the unit,
   and the trail, with tiny light controls. Emerald accent #45DC9B. */
:root { --emerald: #45DC9B; --red: #ff4444; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

#map { position: absolute; inset: 0; }

/* Tiny light controls, bottom-right, floating over the satellite. */
.controls {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 5;
  display: flex; gap: 8px;
}
.ctl {
  appearance: none; cursor: pointer;
  font: 600 12px/1 system-ui;
  letter-spacing: .03em;
  color: #fff;
  background: rgba(0, 0, 0, .42);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 9px;
  padding: 9px 13px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all .15s ease;
}
.ctl:hover { border-color: var(--emerald); }
.ctl-on {
  background: rgba(69, 220, 155, .9);
  color: #06210f;
  border-color: transparent;
}

/* Only-when-offline pill, top-centre. */
.offline {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  background: rgba(255, 68, 68, .92);
  color: #fff;
  font: 600 12px system-ui;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.offline[hidden] { display: none; }