*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;background:#000;overflow:hidden}
canvas{display:block;width:100%;height:100%}

#hud{
  position:fixed;bottom:0;left:0;right:0;
  padding:16px 26px 22px;
  background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,transparent 100%);
  display:flex;justify-content:space-between;align-items:flex-end;
  pointer-events:none;font-family:'Courier New',monospace;
  font-size:11px;letter-spacing:.11em;color:rgba(180,200,220,.6);z-index:10;
}
.hc{display:flex;flex-direction:column;gap:3px}
.hc.r{align-items:flex-end;text-align:right}
.bright{color:rgba(210,230,255,.92)}
.dim{color:rgba(120,150,180,.4);font-size:9px}

#tooltip{
  position:fixed;pointer-events:none;z-index:20;
  background:rgba(2,4,10,.92);border:1px solid rgba(60,100,160,.5);
  padding:8px 13px;font-family:'Courier New',monospace;font-size:11px;
  letter-spacing:.09em;color:rgba(195,215,245,.9);display:none;line-height:1.7;
}
.ttn{font-size:13px;color:rgba(210,235,255,1);margin-bottom:1px}

#ov{
  position:fixed;inset:0;z-index:50;background:#000;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:14px;font-family:'Courier New',monospace;
  font-size:11px;letter-spacing:.28em;color:rgba(120,160,210,.8);
  transition:opacity 1.5s;
}
.spin{width:32px;height:32px;border:1px solid rgba(40,80,130,.4);border-top-color:rgba(100,160,220,.8);border-radius:50%;animation:sp 1.2s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

#mission-badge{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  font-family:'Courier New',monospace;font-size:9px;letter-spacing:.22em;
  color:rgba(140,175,220,.55);pointer-events:none;z-index:10;
  text-align:center;line-height:1.6;
}

/* ── Top buttons ─────────────────────────────────────────────────────────── */
.top-btn{
  position:fixed;top:16px;z-index:10;
  background:rgba(2,4,10,.8);border:1px solid rgba(60,100,160,.5);
  color:rgba(160,200,240,.85);font-family:'Courier New',monospace;
  font-size:10px;letter-spacing:.11em;padding:5px 9px;
  cursor:pointer;outline:none;transition:border-color .2s,color .2s;
}
.top-btn:hover{border-color:rgba(100,160,240,.7);color:rgba(200,225,255,1)}
.top-btn.off{color:rgba(80,110,150,.5);border-color:rgba(40,70,110,.35)}

#fsBtn{left:16px;display:flex;align-items:center;gap:6px}
#fsBtn svg{width:12px;height:12px;fill:currentColor}
#lblBtn{left:130px}
#evtBtn{left:244px}

/* ── Events panel ────────────────────────────────────────────────────────── */
#events-panel{
  position:fixed;right:16px;top:50%;transform:translateY(-50%);
  z-index:10;background:rgba(2,4,10,.82);
  border:1px solid rgba(60,100,160,.4);
  padding:14px 16px;font-family:'Courier New',monospace;
  font-size:10px;letter-spacing:.10em;color:rgba(170,195,230,.7);
  line-height:1.85;min-width:210px;pointer-events:none;
  transition:opacity .3s, transform .3s;
}
#events-panel.hidden{opacity:0;pointer-events:none;transform:translateY(-50%) translateX(20px)}
#events-panel .ep-title{
  color:rgba(210,230,255,.9);font-size:9px;letter-spacing:.22em;
  margin-bottom:8px;border-bottom:1px solid rgba(60,100,160,.3);
  padding-bottom:5px;
}
#events-panel .ep-val{color:rgba(230,245,255,.95)}
#events-panel .ep-soon{color:rgba(255,220,100,.9)}
#events-panel .ep-dim{color:rgba(100,130,170,.5);font-size:9px}
#events-panel .ep-sep{border-top:1px solid rgba(60,100,160,.2);margin:6px 0}