/* Global reset for this minimal scene */
html, body {
  height: 100%;
  margin: 0;
}

/* Deep space void with a subtle cool core and darker edges */
body {
  background:
    radial-gradient(circle at 50% 50%,
      #1a2230 0%,   /* faint blue-gray center glow */
      #131a26 35%,  /* gently darker ring */
      #0d131c 65%,  /* deep navy */
      #05070b 100%  /* almost black corners */
    ) fixed;
}

/* Optional extra falloff; makes corners a touch deeper.
   Remove this block if you want only the gradient above. */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% 50%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.06) 45%,
      rgba(0,0,0,0.18) 72%,
      rgba(0,0,0,0.32) 100%);
}

/* Starfield underlay sits behind the 3D canvas */
#stars,
#scene {
  position: fixed;
  inset: 0;
  display: block;
}

#stars {
  pointer-events: none;     /* pass clicks/touches to the cube */
  opacity: 0.55;            /* subtle; adjust 0.4–0.8 */
  mix-blend-mode: screen;   /* gentle brightening over the gradient */
}

/* Let touch drags control rotation without the page scrolling */
#scene {
  touch-action: none;
}

/* Hint above the cube */
#hint {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none; /* don't block interactions */
  font-family: 'Source Code Pro', monospace;
  font-size: 13px;
  line-height: 1.3;
  color: #cfe3ff;
  opacity: 0.9;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  background: rgba(0,0,0,0);
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

/* Lat/Lon readout to the right of the cube */
#geo {
  position: fixed;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  pointer-events: none;             /* never blocks dragging */
  font-family: 'Source Code Pro', monospace;
  font-size: 12px;                  /* ~12px */
  line-height: 1.2;
  color: #cfe3ff;
  opacity: 0.9;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  background: rgba(0,0,0,0);
  padding: 6px 8px;
  border-radius: 8px;
  white-space: nowrap;
}

/* Corner weight readouts (very small, unobtrusive) */
#weights {
  position: fixed;
  inset: 0;
  pointer-events: none; /* never blocks cube interaction */
  font-family: 'Source Code Pro', monospace; /* updated */
  font-size: 10px; /* make it tiny */
  line-height: 1.2;
  color: #b7c9ff;  /* soft, cool tone */
  opacity: 0.85;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

#weights .w { position: absolute; margin: 10px; }
#weights .tl { top: 0; left: 0; text-align: left; }
#weights .tr { top: 0; right: 0; text-align: right; }
#weights .bl { bottom: 0; left: 0; text-align: left; }
#weights .br { bottom: 0; right: 0; text-align: right; }

/* Slightly larger on very small screens for legibility */
@media (max-width: 420px) {
  #weights { font-size: 11px; }
}