/* Sidebar HUD */
.hud-sidebar{
  position:fixed; inset:0 auto 0 0; width:260px;
  background:linear-gradient(180deg, rgba(10,14,20,.85), rgba(10,14,20,.65));
  border-right:1px solid rgba(154,123,255,.18);
  backdrop-filter:saturate(120%) blur(10px);
  display:flex; flex-direction:column; gap:18px;
  padding:18px 16px;
  z-index:40;
}
.brand{
  display:flex; align-items:center; gap:10px; padding:8px 10px;
}
.brand .glyph{
  width:18px; height:18px; border-radius:50%;
  background:conic-gradient(from 210deg, #5ee6eb, #9a7bff, #5ee6eb);
  box-shadow:0 0 18px rgba(154,123,255,.35);
}
.brand .wordmark{
  font-weight:800; letter-spacing:.16em; font-size:13px;
  color:#cfe6ff; text-transform:uppercase;
}

.nav{ display:flex; flex-direction:column; gap:6px; padding:6px; }
.nav-link{
  position:relative; display:flex; align-items:center;
  padding:12px 12px; border-radius:10px; color:#cfe1ff;
  text-decoration:none; font-weight:600; letter-spacing:.02em;
  border:1px solid transparent; background:transparent;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.nav-link:hover{
  background:linear-gradient(90deg, rgba(94,230,235,.06), rgba(154,123,255,.08));
  border-color:rgba(154,123,255,.25);
}
.nav-link.active{
  background:linear-gradient(90deg, rgba(94,230,235,.12), rgba(154,123,255,.14));
  border-color:rgba(94,230,235,.35);
  box-shadow:inset 0 0 22px rgba(154,123,255,.12);
}

.hud-footer{
  margin-top:auto; padding:8px 6px; display:flex; justify-content:space-between; align-items:center;
}
.btn-help{
  appearance:none; background:transparent; color:#cfe1ff;
  border:1px solid rgba(154,123,255,.28); border-radius:10px;
  padding:10px 12px; font-weight:600; cursor:pointer;
}
.btn-help:hover{ border-color:rgba(154,123,255,.48); }

/* Fly-out Help Panel */
.help-panel{
  position:fixed; top:0; right:-420px; width:380px; height:100dvh;
  background:linear-gradient(180deg, rgba(15,22,32,.92), rgba(15,22,32,.85));
  border-left:1px solid rgba(154,123,255,.2);
  backdrop-filter:saturate(120%) blur(10px);
  box-shadow:-20px 0 30px rgba(0,0,0,.35);
  transition:right .28s cubic-bezier(.22,.61,.36,1);
  z-index:60; display:flex; flex-direction:column;
}
.help-panel.open{ right:0; }
.help-panel header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 16px; border-bottom:1px solid rgba(154,123,255,.16);
}
.icon-btn{
  background:transparent; border:1px solid rgba(154,123,255,.28);
  color:#cfe1ff; padding:6px 10px; border-radius:8px; cursor:pointer;
}
.help-content{ padding:14px 16px 22px; color:#cfe1ff; }
.help-content ul{ padding-left:18px; color:#9eb4d4; }
.help-content kbd{
  background:#0b0f14; border:1px solid rgba(154,123,255,.35);
  border-bottom-width:2px; padding:.1rem .35rem; border-radius:6px; font-weight:700;
}