:root{
  --bg:#05070d;
  --panel:rgba(14,18,30,.82);
  --panel-brd:rgba(120,150,210,.18);
  --fg:#dfe7f5;
  --muted:#8c99b5;
  --accent:#6ea8ff;
  --btn:rgba(70,100,160,.22);
  --btn-hover:rgba(100,140,210,.38);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);
  font:13px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
canvas{display:block;position:fixed;inset:0}

/* ---------- Control panel ---------- */
#panel{
  position:fixed;top:14px;left:14px;width:244px;z-index:20;
  background:var(--panel);backdrop-filter:blur(12px);
  border:1px solid var(--panel-brd);border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  user-select:none;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px 6px}
.panel-head h1{margin:0;font-size:15px;font-weight:650;letter-spacing:.3px}
.panel-body{padding:4px 12px 12px;max-height:80vh;overflow:auto}
#panel.collapsed .panel-body{display:none}
#collapse{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;
  line-height:1;padding:2px 4px;transition:transform .2s}
#panel.collapsed #collapse{transform:rotate(-90deg)}

section{display:flex;flex-direction:column;gap:7px;margin:4px 0}
hr{border:none;border-top:1px solid var(--panel-brd);margin:10px 0 4px}
.lbl{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px;
  display:flex;justify-content:space-between;align-items:center}
.lbl span{color:var(--accent);font-weight:600;text-transform:none;letter-spacing:0}

.row{display:flex;gap:6px}
.row.small .btn{flex:1;padding:5px 4px;font-size:11px}

.btn{background:var(--btn);color:var(--fg);border:1px solid var(--panel-brd);
  border-radius:8px;padding:7px 8px;cursor:pointer;font-size:12px;transition:background .15s}
.btn:hover{background:var(--btn-hover)}
.btn.wide{flex:1;width:100%}

input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}
select{width:100%;background:var(--btn);color:var(--fg);border:1px solid var(--panel-brd);
  border-radius:8px;padding:6px;font-size:12px}

#warpStatus{font-size:11px;color:var(--accent);margin-top:2px;min-height:14px;
  letter-spacing:.3px}
#warpStatus.cruising{animation:warpPulse 1.1s ease-in-out infinite}
@keyframes warpPulse{0%,100%{opacity:.55}50%{opacity:1}}

.chk{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px}
.chk input{accent-color:var(--accent);width:15px;height:15px}

/* ---------- Labels ---------- */
#labels{position:fixed;inset:0;z-index:10;pointer-events:none;overflow:hidden}
.label{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  font-size:12px;font-weight:600;color:#eaf1ff;text-shadow:0 0 6px #000,0 0 3px #000;
  padding-left:14px;transition:opacity .2s}
.label::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;
  margin-top:-3px;border-radius:50%;background:currentColor;
  box-shadow:0 0 6px currentColor}
.label.moon{font-size:10.5px;font-weight:500;color:#bcd0f0;opacity:.9}

/* ---------- HUD + help ---------- */
#hud{position:fixed;top:14px;right:14px;z-index:20;text-align:right;
  color:var(--muted);font-size:11.5px;line-height:1.6;pointer-events:none;
  text-shadow:0 0 4px #000}
#hud b{color:var(--fg);font-weight:600}

#clock{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:20;
  background:rgba(10,14,24,.55);border:1px solid var(--panel-brd);
  padding:6px 18px;border-radius:14px;backdrop-filter:blur(6px);
  pointer-events:none;text-align:center;line-height:1.25;
  font-variant-numeric:tabular-nums}
#clock .date{font-size:15px;font-weight:650;color:var(--fg);letter-spacing:.3px}
#clock .time{font-size:11px;color:var(--muted);letter-spacing:.6px;margin-top:1px}

#help{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:20;
  color:var(--muted);font-size:11.5px;background:rgba(10,14,24,.55);
  border:1px solid var(--panel-brd);padding:6px 14px;border-radius:20px;
  backdrop-filter:blur(6px);pointer-events:none;text-align:center}
#help strong{color:var(--fg)}

#loading{position:fixed;inset:0;z-index:40;display:flex;align-items:center;
  justify-content:center;background:var(--bg);color:var(--muted);font-size:14px;
  letter-spacing:.5px;transition:opacity .6s}
#loading.hidden{opacity:0;pointer-events:none}

/* "h" hides all on-screen overlays */
body.ui-hidden #panel,
body.ui-hidden #clock,
body.ui-hidden #hud,
body.ui-hidden #help,
body.ui-hidden #labels{display:none !important}

@media (max-width:560px){
  #panel{width:210px}
  #help{display:none}
}