:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07100c;
  color: #f2f1de;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: radial-gradient(circle at 50% 20%, #1d3628, #07100c 65%); }
canvas#scene { position: absolute; inset: 0; width: 100%; height: 100%; }

.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, transparent 48%, rgba(2, 9, 6, .65) 115%),
              linear-gradient(180deg, rgba(2, 8, 5, .18), transparent 30%, rgba(2, 8, 5, .25));
}

.brand, .telemetry, .controls, .map-panel { position: absolute; z-index: 2; }
.brand { top: 28px; left: 34px; text-shadow: 0 2px 24px #000; }
.eyebrow { font: 650 10px/1.2 ui-monospace, SFMono-Regular, monospace; letter-spacing: .23em; color: #c2d49b; }
h1 { margin: 4px 0 0; font-family: Georgia, serif; font-weight: 400; font-size: clamp(28px, 4vw, 52px); letter-spacing: -.04em; }

.telemetry {
  left: 34px; bottom: 32px; width: min(380px, calc(100vw - 68px));
  padding: 17px 18px 15px; border: 1px solid rgba(208, 225, 180, .22);
  border-radius: 12px; backdrop-filter: blur(15px); background: rgba(7, 18, 12, .58);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
}
.species-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#species { font: 400 25px/1 Georgia, serif; }
.pill { font: 700 9px/1 ui-monospace, monospace; letter-spacing: .14em; color: #d7e7b6; border: 1px solid #829567; border-radius: 99px; padding: 6px 8px; }
.telemetry p { margin: 8px 0 14px; color: #c6cbbf; font-size: 12px; }
.switch-track { height: 2px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.switch-track i { display: block; width: 0; height: 100%; background: #c8df8d; box-shadow: 0 0 9px #c8df8d; }
#next-switch { display: block; margin-top: 7px; color: #8f9c8b; font: 500 10px/1.3 ui-monospace, monospace; }

.controls { top: 30px; right: 30px; display: flex; gap: 8px; }
button { color: #e9eddf; background: rgba(8, 18, 12, .58); border: 1px solid rgba(222, 238, 197, .22); border-radius: 99px; padding: 9px 12px; cursor: pointer; backdrop-filter: blur(12px); }
button:hover { border-color: rgba(222, 238, 197, .65); background: rgba(24, 40, 29, .72); }
kbd { margin-left: 6px; color: #97a38f; font: 500 9px/1 ui-monospace, monospace; }

.map-panel { top: 78px; right: 30px; padding: 14px; border: 1px solid rgba(208, 225, 180, .2); border-radius: 12px; background: rgba(7, 18, 12, .72); backdrop-filter: blur(15px); }
.map-title { margin-bottom: 8px; color: #c2d49b; font: 650 10px/1.2 ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
#map-canvas { display: block; width: min(280px, 55vw); height: min(280px, 55vw); border-radius: 8px; background: #101c14; }
.legend { display: flex; justify-content: space-between; margin-top: 8px; color: #849080; font-size: 9px; }
.legend span:nth-child(1) { color: #d8b780; } .legend span:nth-child(2) { color: #91c37c; } .legend span:nth-child(3) { color: #92bcd1; }

.loading { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: #07100c; color: #cad9ae; letter-spacing: .06em; transition: opacity .7s ease; }
.loading.done { opacity: 0; pointer-events: none; }

@media (max-width: 760px) {
  .brand { top: 20px; left: 20px; }
  .controls { top: 20px; right: 20px; flex-direction: column; align-items: flex-end; }
  .controls button:nth-child(2) { display: none; }
  .telemetry { left: 20px; bottom: 20px; width: calc(100vw - 40px); }
  .map-panel { top: 112px; right: 20px; }
}