html, body { margin:0; height:100%; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 20%, #0c1226 0%, #060913 55%, #04060d 100%); }
#gl { position:fixed; inset:0; }
#gl canvas { display:block; width:100%; height:100%; touch-action:none; }
#ui { position:fixed; inset:0; pointer-events:none;
  font:400 14px/1.45 system-ui, sans-serif; }

#boot { position:fixed; inset:0; display:grid; place-items:center; background:#060913;
  color:#8fb8ff; font:500 14px/1.5 system-ui,sans-serif; letter-spacing:.24em;
  text-align:center; z-index:99; }
#boot .ring { width:54px; height:54px; border-radius:50%;
  border:1.5px solid rgba(143,184,255,.25); border-top-color:#8fb8ff;
  animation:spin 1s linear infinite; margin:0 auto 18px; }
#bootmsg { margin-top:10px; font-size:11px; letter-spacing:.12em; opacity:.7; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #boot .ring { animation:none; } }

#xrbar { position:fixed; left:0; right:0; bottom:18px; display:flex;
  justify-content:center; z-index:20; pointer-events:none; }
#xrbtn { pointer-events:auto; border:1px solid rgba(143,184,255,.6);
  background:rgba(16,24,48,.8); color:#cfe0ff; border-radius:999px;
  padding:12px 26px; font:600 14px/1 system-ui,sans-serif; letter-spacing:.14em;
  cursor:pointer; }
#xrbtn:disabled { opacity:.5; cursor:default; }
body.in-xr #xrbar, body.in-xr #hud { display:none; }

#hud { position:absolute; top:14px; left:14px; pointer-events:auto;
  background:rgba(8,12,24,.82); border:1px solid rgba(143,184,255,.35);
  border-radius:14px; padding:14px 16px; color:#dbe6fb; max-width:250px;
  backdrop-filter:blur(6px); }
.hud-title { font-weight:700; letter-spacing:.18em; margin-bottom:8px;
  color:#cfe0ff; }
.hud-title span { float:right; font-weight:400; opacity:.7; letter-spacing:0; }
#hud label { display:block; margin:5px 0; cursor:pointer; user-select:none; }
#hud input[type=checkbox] { accent-color:#548cff; margin-right:8px; }
#hud .rng { display:flex; align-items:center; gap:8px; }
#hud .rng input { flex:1; accent-color:#548cff; }
#hud .rng span { min-width:38px; text-align:right; opacity:.8; font-size:12px; }
.hud-row { display:flex; gap:8px; margin-top:8px; }
.hud-row button { flex:1; border:1px solid rgba(143,184,255,.4);
  background:rgba(30,44,80,.6); color:#dbe6fb; border-radius:8px;
  padding:7px 0; font:600 12px/1 system-ui,sans-serif; letter-spacing:.1em;
  cursor:pointer; }
#hud-credits-box { margin-top:10px; max-height:38vh; overflow:auto;
  border-top:1px solid rgba(143,184,255,.25); padding-top:8px; }
#hud-credits-box .credit { margin:0 0 10px; font-size:12px; opacity:.85; }
#hud-credits-box .credit b { color:#8fb8ff; }
.hud-hint { margin-top:10px; font-size:11px; opacity:.55; }

@media (max-width:700px) {
  #hud { max-width:210px; font-size:13px; }
}