:root {
  color-scheme: dark;
  --amber: #ffb454;
  --cyan: #6ee7ff;
  --panel: rgba(8, 14, 26, 0.72);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; font-family: 'Inter', sans-serif; }
button, input, select, textarea { font-family: inherit; }
body .lil-gui { --font-family: 'Inter', sans-serif; --font-family-mono: 'Inter', sans-serif; font-family: 'Inter', sans-serif; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.hidden { display: none !important; }
.immersive #top-left,
.immersive #crosshair, .immersive #toast { display: none; }
.immersive #labels { display: none !important; }

#boot, #nogl {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: radial-gradient(ellipse at center, #0a1230 0%, #010208 70%);
  z-index: 20;
}
.boot-card {
  border: 1px solid #26355c; background: var(--panel); padding: 32px 40px;
  border-radius: 14px; text-align: center; max-width: 460px; backdrop-filter: blur(8px);
}
.boot-card h1 { letter-spacing: 0.35em; color: var(--amber); margin: 0 0 6px; font-size: 28px; }
#boot h1 { font-family: 'Bruno Ace SC', sans-serif; font-weight: 400; letter-spacing: normal; color: #886b04; }
.boot-card .sub { color: #8ea2c8; margin: 0 0 16px; font-size: 12px; letter-spacing: 0.08em; }
#boot-msg { color: #d7e3ff; min-height: 24px; font-size: 14px; }
#launch {
  margin-top: 14px; padding: 12px 34px; border-radius: 999px; border: none; cursor: pointer;
  background: #886b04; color: #fff; font-weight: 800; letter-spacing: normal;
}
#launch:disabled { opacity: 0.45; cursor: wait; }
.fine { font-size: 11px; color: #5f7194; margin-top: 14px; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.panel {
  position: absolute; background: var(--panel); border: 1px solid rgba(110,231,255,0.25);
  border-radius: 10px; padding: 10px 14px; font-size: 12px; color: #cfe3ff; backdrop-filter: blur(6px);
}
/* Fixed width: readouts change length every frame and must not reflow the panel. */
#top-left { top: 14px; left: 14px; width: 300px; box-sizing: border-box; }
#top-left .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 0; }
#top-left .row b { text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
#top-left .row span { color: #7e93b8; letter-spacing: 0.12em; font-size: 10px; }
.speed-controls { pointer-events: auto; display: grid; grid-template-columns: 1fr auto; gap: 6px; margin: 7px 0 9px; }
.speed-controls label { grid-column: 1 / -1; color: #7e93b8; font-size: 10px; }
.speed-controls button { color: #cfe3ff; background: #111b2b; border: 1px solid #33455e; border-radius: 4px; padding: 5px; font-size: 11px; }
.speed-controls input { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--cyan); cursor: pointer; }
.speed-controls output { align-self: center; color: #cfe3ff; font-size: 11px; font-variant-numeric: tabular-nums; }
.speed-controls button { cursor: pointer; }
.sound-controls { pointer-events: auto; display: grid; grid-template-columns: 1fr auto; gap: 6px; margin: 0 0 9px; padding-top: 7px; border-top: 1px solid #26364b; }
.sound-controls label { color: #7e93b8; font-size: 10px; align-self: center; }
.sound-controls output { color: #cfe3ff; font-size: 11px; font-variant-numeric: tabular-nums; }
.sound-controls input { width: 100%; margin: 0; accent-color: var(--cyan); cursor: pointer; }
.sound-controls button { color: #cfe3ff; background: #111b2b; border: 1px solid #33455e; border-radius: 4px; padding: 5px; font-size: 11px; cursor: pointer; }
.sound-controls #music-status { grid-column: 1 / -1; color: #ffb454; font-size: 11px; }
#crosshair {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%);
  border: 1px solid rgba(110,231,255,0.8); border-radius: 50%;
}
#crosshair::after { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; background: var(--amber); border-radius: 50%; transform: translate(-50%,-50%); }
#toast {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%);
  background: rgba(255,180,84,0.14); border: 1px solid var(--amber); color: #ffe2b8;
  padding: 8px 18px; border-radius: 999px; font-size: 13px; letter-spacing: 0.06em;
  opacity: 0; transition: opacity 0.3s;
}
#toast.show { opacity: 1; }
#help {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: rgba(4,8,18,0.94); border: 1px solid #2b3c63; border-radius: 12px; padding: 20px 28px;
  color: #d7e3ff; pointer-events: auto; max-width: 440px;
}
#help h2 { margin: 0 0 8px; color: var(--amber); letter-spacing: 0.2em; font-size: 15px; }
#help li { font-size: 13px; margin: 6px 0; }

#labels { position: fixed; inset: 0; pointer-events: none; z-index: 9; overflow: hidden; }
#labels .lbl {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-size: 10px; letter-spacing: 0.18em; color: #cfe3ff;
  text-shadow: 0 0 6px #000, 0 0 2px #000; padding-left: 10px;
}
#labels .lbl::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 5px;
  border: 1px solid #6ee7ff; transform: translateY(-50%) rotate(45deg);
}
#labels .lbl.star { color: #ffd9a0; }
#labels .lbl.galaxy { color: #b49bff; }
#labels .lbl.system { color: #7dffb0; }