body {
      background-color: #000; /* black background */
      color: #fff;           /* white text */
      margin: 2em;
      font-family: sans-serif;
      margin-top: 200px; 
    }

    #topBar {
      display: none;          /* remains hidden until login/create success */
      background: #222;       /* dark gray background */
      padding: 10px;
      margin: 0;              /* no margin */
      position: fixed;        /* fixed to the viewport */
      top: 0;
      left: 0;
      width: 100%;            /* spans the full width */
      z-index: 1000;          /* stays on top */
      align-items: center;
    }
    #topBarPortrait {
      width: 160px;
      height: auto;
      border: 2px solid #fff;
      border-radius: 4px;
      margin-right: 10px;
    }
    #topBarPlayerName, #topBarLocation {
      margin-right: 20px;
      font-weight: bold;
    }

    /* Menu, forms, etc. */
    #menu { margin-bottom: 1em; }
    form {
      margin: 1em 0;
      padding: 1em;
      border: 1px solid #ccc;
      width: 600px;
      background: #333;
    }
    label, p, h2, h3, pre, input { color: #fff; }
    button {
      margin-top: 1em;
      background: #555;
      color: #fff;
      border: 1px solid #888;
      cursor: pointer;
    }
    button:hover { background: #777; }

    input {
      background: #222;
      border: 1px solid #666;
      padding: 4px;
      width: 100%;
      box-sizing: border-box;
    }
    pre {
      background-color: #222;
      padding: 1em;
      color: #fff;
    }

    /* Portrait Grid */
    #portraitGrid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .portraitChoice {
      width: 160px;
      height: auto;
      cursor: pointer;
      border: 2px solid transparent;
      border-radius: 4px;
    }
    .portraitChoice.selected {
      border-color: gold;
    }
    #solarSystemUI {
  margin-top: 1em;
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* spacing between icons */
}
.actionIcon {
  width: 64px;   /* or whichever size you prefer */
  height: auto;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
}
.actionIcon:hover {
  border-color: gold; /* highlight on hover */
}
.warpOption, .stationOption {
  display: inline-flex;
  flex-direction: column; /* or row if you prefer horizontal layout */
  align-items: center;
  margin-right: 16px;
  color: #fff;
}
.warpOption span, .stationOption span {
  margin-top: 4px;
  font-size: 0.9em;
}

#musicBar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #222;
  color: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 1000; /* Ensure it stays on top */
}

#musicBar button {
  background: #555;
  border: 1px solid #888;
  color: #fff;
  padding: 6px 12px;
  cursor: pointer;
}

#musicBar button:hover {
  background: #777;
}