:root {
  --panel: rgba(8, 16, 24, 0.62);
  --edge: rgba(150, 190, 220, 0.22);
  --ink: #cfe4f2;
  --dim: #7f97a8;
  --live: #6fe08a;
  --off: #ff7a6b;
  --warn: #ffce54;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0a1420;
  color: var(--ink);
  font: 13px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hud {
  position: fixed;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 10px 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  min-width: 180px;
  user-select: none;
  pointer-events: none;
}

.hud-tl { top: 14px; left: 14px; }
.hud-tr { top: 14px; right: 14px; }
.hud-bl { bottom: 40px; left: 14px; }

.site { font-weight: 600; margin-bottom: 6px; letter-spacing: 0.02em; }
.hud-title { font-weight: 600; margin-bottom: 8px; text-transform: lowercase; }

.row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 1px 0;
}
.k { color: var(--dim); }
.v { color: var(--ink); text-align: right; }
.dim { color: var(--dim); font-weight: 400; }

.health { text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
.health.live { color: var(--live); }
.health.offline { color: var(--off); }
.health.mock, .health.fallback { color: var(--warn); }

.wx-grid { display: flex; gap: 12px; align-items: flex-start; }
.wx-readout { flex: 1; min-width: 140px; }

.vane { text-align: center; }
.vane-ring { fill: none; stroke: var(--edge); stroke-width: 1.5; }
.vane-card { fill: var(--dim); font-size: 11px; text-anchor: middle; dominant-baseline: middle; }
.vane-arrow { transition: transform 0.6s ease; transform-origin: 0 0; }
.vane-arrow polygon { fill: var(--warn); }
.vane-label { margin-top: 2px; color: var(--ink); font-size: 12px; }

.offline {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 18px 30px;
  background: rgba(30, 8, 8, 0.6);
  border: 1px solid rgba(255, 122, 107, 0.4);
  border-radius: 10px;
  z-index: 10;
  pointer-events: none;
}
.offline-title { color: var(--off); font-size: 20px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.offline-sub { color: var(--dim); margin-top: 4px; }

.vessel-tip {
  position: fixed;
  z-index: 6;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 12px;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: 260px;
}
.tip-row { display: flex; justify-content: space-between; gap: 16px; padding: 1px 0; }
.tip-k { color: var(--dim); }
.tip-v { color: var(--ink); text-align: right; }
.tip-stale { color: var(--off); margin-top: 3px; text-transform: uppercase; font-size: 11px; }

.hidden { display: none; }