* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font: 15px/1.45 system-ui, sans-serif; color: #e8e8ec; background: #07090c; }

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

/* ---------- HUD (top-left title + note) ---------- */
#hud { position: fixed; top: 0; left: 0; right: 0; z-index: 6; padding: 16px 20px 10px;
  background: linear-gradient(#07090cee, #07090c99 70%, #07090c00); pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud h1 { margin: 0; font-size: 21px; letter-spacing: -0.01em; color: #fff; }
#hud .thesis { margin: 6px 0 0; max-width: 640px; color: #9aa0ad; font-size: 13px; }
#note-toggle { margin-top: 8px; padding: 4px 12px; border: 1px solid #2a313d; background: #0e131a;
  color: #6fd3e6; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; }
#note { margin-top: 8px; max-width: 560px; background: #11151cee; border: 1px solid #232a36;
  border-radius: 10px; padding: 10px 14px; font-size: 12.5px; color: #c7ccd6; }
#note[hidden] { display: none; }

/* ---------- legend ---------- */
#legend { position: fixed; left: 16px; bottom: 92px; z-index: 5; background: rgba(14,19,26,.82);
  border: 1px solid #232a36; border-radius: 8px; padding: 8px 12px; font-size: 12px;
  backdrop-filter: blur(4px); display: flex; gap: 12px; align-items: center; }
.legend-title { font-weight: 600; color: #e8e8ec; margin-right: 2px; }
#legend span { display: inline-flex; align-items: center; gap: 5px; color: #c7ccd6; }
#legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ---------- bottom control bar ---------- */
#controls { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 10px 16px 14px;
  background: linear-gradient(#07090c00, #07090cdd 30%, #07090c 100%);
  display: flex; flex-direction: column; gap: 8px; }

#aoi-picker { display: flex; gap: 6px; flex-wrap: wrap; }
#aoi-picker button, #speed-presets button, #play-pause {
  padding: 6px 14px; border: 1px solid #2a313d; background: #0e131a; color: #c7ccd6;
  border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; transition: all .15s;
}
#aoi-picker button.active, #speed-presets button.active {
  background: #6fd3e6; color: #061014; border-color: #6fd3e6; font-weight: 600;
}

#transport { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#speed-presets { display: flex; gap: 6px; }
#play-pause { min-width: 40px; text-align: center; }
#clock { font-variant-numeric: tabular-nums; font-size: 15px; color: #fff; margin-left: auto; }

#scrubber { width: 100%; accent-color: #6fd3e6; }

#status { position: fixed; top: 8px; right: 12px; z-index: 9; font: 11px monospace; color: #5b6270;
  pointer-events: none; }

/* ---------- MOBILE ---------- */
@media (max-width: 640px) {
  #hud { padding: 10px 12px 8px; }
  #hud h1 { font-size: 17px; }
  #hud .thesis { font-size: 11.5px; max-width: 100%; }
  #legend { left: 8px; right: 8px; bottom: 108px; font-size: 11px; padding: 6px 10px;
    flex-wrap: wrap; justify-content: center; }
  #controls { padding: 8px 10px 12px; }
  #aoi-picker { justify-content: center; }
  #aoi-picker button, #speed-presets button, #play-pause { padding: 5px 10px; font-size: 12px; }
  #transport { justify-content: center; }
  #clock { margin-left: 0; width: 100%; text-align: center; order: -1; }
}