html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
}
canvas { display: block; }

/* HUD — invisible until the loading curtain is fully gone */
#hud {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10;
  color: #fff;
  font: 12px/1.5 monospace;
  pointer-events: none;      /* never blocks orbit controls */
  user-select: none;
  opacity: 0;                /* hidden until body.booted */
  transition: opacity 0.9s ease;
}
body.booted #hud { opacity: 0.85; }
#hud-toggle {
  pointer-events: auto;
  display: block;
  width: 20px; height: 20px;
  margin: 0 0 8px 0;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font: 10px/18px monospace;
  text-align: center;
  cursor: pointer;
}
#hud-toggle:hover { border-color: #fff; }
#hud-clock, #hud-body {
  margin: 0;
  padding-left: 10px;
}
#hud.collapsed #hud-body { display: none; }   /* clock survives the collapse */

/* Loading screen — four hopping dots, small as you wished */
#loader {
  position: fixed; inset: 0;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  z-index: 20;                 /* above everything, HUD included */
  transition: opacity 0.6s ease;
}
#loader.done { opacity: 0; pointer-events: none; }
#loader .dots { display: flex; gap: 8px; }
#loader .dots span {
  width: 2px; height: 2px;     /* the tiny-dot wish, no !important needed now */
  border-radius: 0;            /* square dots, matching the transit ink */
  background: #fff;
  opacity: 0.25;
  animation: hop 1.1s infinite ease-in-out;
}
#loader .dots span:nth-child(2) { animation-delay: 0.12s; }
#loader .dots span:nth-child(3) { animation-delay: 0.24s; }
#loader .dots span:nth-child(4) { animation-delay: 0.36s; }
@keyframes hop {
  0%, 55%, 100% { transform: translateY(0);    opacity: 0.25; }
  25%           { transform: translateY(-8px); opacity: 1;    }
}