html, body {
  margin: 0;
  height: 100%;
  background: #05060a;
  color: #dfe6f3;
  font-family: system-ui, sans-serif;
  overflow: hidden;
}

#map {
  display: block;
  width: 100%;
  height: 100%;
}

#hud {
  position: fixed;
  top: 16px;
  left: 16px;
  max-width: 260px;
  max-height: calc(100vh - 32px); /* it scrolls when the menus are open and long */
  overflow-y: auto;
  padding: 12px 14px;
  background: rgba(10, 14, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

#hud h1 {
  margin: 0 0 6px;
  font-size: 16px;
}

#hud p,
#info p {
  margin: 4px 0;
  font-size: 13px;
}

#speed-box {
  margin-top: 8px;
}

#speed-title {
  display: block;
  font-size: 12px;
  opacity: 0.8;
}

#speed {
  width: 100%;
  margin: 4px 0 0;
  accent-color: #7cffb2;
}

#speed-box p {
  margin: 2px 0;
  font-size: 12px;
}

#speed-elapsed {
  opacity: 0.65;
}

#zone-legend {
  display: flex;
  align-items: center;
  gap: 6px;
}

#zone-legend[hidden] {
  display: none;
}

#zone-legend .swatch {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: rgba(76, 175, 122, 0.55);
}

#hud .hint,
#info .hint {
  opacity: 0.6;
  font-size: 12px;
}

#hud button {
  margin-top: 6px;
  padding: 5px 10px;
  color: inherit;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
}

#hud select {
  margin-top: 6px;
  padding: 5px 8px;
  color: inherit;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}

#hud select option {
  color: #05060a;
}

#hud button:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* Hints and credits sit behind the burger button at the top right, so they do not cover the 3D view. */
#burger {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  font-size: 18px;
  color: inherit;
  background: rgba(10, 14, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
}

#burger:hover {
  background: rgba(255, 255, 255, 0.16);
}

#info {
  z-index: 10; /* above the story panel when both are open */
  position: fixed;
  top: 60px;
  right: 16px;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 4px 14px 10px;
  background: rgba(10, 14, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

#info[hidden] {
  display: none;
}

#info #credits {
  margin: 0 0 6px;
  font-size: 10px;
  line-height: 1.4;
  opacity: 0.7;
}

#story {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 340px;
  max-height: 30vh; /* half as tall as before, the text scrolls */
  overflow-y: auto;
  padding: 12px 14px;
  background: rgba(10, 14, 24, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

#story[hidden] {
  display: none;
}

#story.compact #story-text {
  display: none;
}

#story h2 {
  margin: 0 0 8px;
  font-size: 16px;
}

#story p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
}

#story .type {
  font-size: 12px;
  opacity: 0.75;
}

#story button[hidden] {
  display: none;
}

#story button {
  margin-right: 6px;
  padding: 5px 12px;
  color: inherit;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
}

#hud h2,
#info h2 {
  margin: 12px 0 6px;
  font-size: 13px;
}

/* Every list in the left panel is a collapsible menu, so more of them fit without taking the screen. */
.menu {
  margin: 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.menu > summary {
  padding: 8px 0 6px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.planet-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#habitable {
  max-height: 30vh;
  overflow-y: auto;
}

/* One row per planet: name on the left, the three view buttons on the right (below when too narrow). */
.planet-list .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin: 0 0 4px;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 6px;
}

.planet-list .row.active {
  border-color: #7cffb2;
  background: rgba(124, 255, 178, 0.15);
}

.planet-list small {
  display: block;
  opacity: 0.65;
}

.planet-list .views {
  display: flex;
  gap: 3px;
}

.planet-list .views button {
  width: auto;
  margin: 0;
  padding: 3px 6px;
  font-size: 11px;
}


/* Polish: a smoother feel for the panels, buttons and the first moments of the page. */
html, body {
  font-family: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#hud,
#story,
#info {
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

#hud button,
#hud select,
#story button,
#burger {
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

#hud button:active,
#story button:active,
#burger:active {
  transform: scale(0.96);
}

#hud button:focus-visible,
#hud select:focus-visible,
#story button:focus-visible,
#burger:focus-visible,
.menu > summary:focus-visible {
  outline: 2px solid #7cffb2;
  outline-offset: 2px;
}

.menu > summary {
  transition: color 0.18s ease;
}

.menu > summary:hover {
  color: #ffffff;
}

/* A panel that opens fades in and slides up a little. */
#story:not([hidden]),
#info:not([hidden]) {
  animation: panel-in 0.28s ease-out;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Thin scrollbars that match the panels. */
#hud,
#story,
#info,
.planet-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

/* The start screen, fades out when the sky is ready. */
#loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  background: radial-gradient(ellipse at center, #0b1020 0%, #05060a 70%);
  transition: opacity 0.9s ease;
}

#loading span {
  font-size: 22px;
  letter-spacing: 0.08em;
}

#loading small {
  opacity: 0.6;
  letter-spacing: 0.12em;
}

#loading.done {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #story:not([hidden]),
  #info:not([hidden]) {
    animation: none;
  }
  #loading {
    transition: none;
  }
}

/* Search field above the menus. */
#search-box {
  margin: 10px 0 2px;
}

#search {
  box-sizing: border-box;
  width: 100%;
  padding: 7px 10px;
  color: inherit;
  font: inherit;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}

#search::placeholder {
  color: rgba(223, 230, 243, 0.55);
}

#search:focus {
  outline: 2px solid #7cffb2;
  outline-offset: 1px;
}

#search-results {
  margin-top: 6px;
}

#search-results .none {
  opacity: 0.6;
  font-size: 12px;
  margin: 4px 0;
}

/* The discoverer list is as wide as the panel, its long names are cut instead of widening the panel. */
#facility {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-top: 8px;
  text-overflow: ellipsis;
}

/* Travel planner: labelled selects stacked in the panel, the result keeps its line breaks. */
.planner-body label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.85;
}
.planner-body select,
.planner-body input,
#spectral-mode,
#spectral-class {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  text-overflow: ellipsis;
}
#spectral-mode,
#spectral-class {
  margin-top: 8px;
}
.plan-result {
  white-space: pre-line;
  font-size: 13px;
  margin: 8px 0 0;
}
.plan-fiction {
  color: #ff9d7a;
  font-weight: 600;
  opacity: 1 !important;
}

/* Settings in the burger menu look like the buttons of the left panel. */
#info button,
#info select,
#planner-panel button,
#trip-hud button {
  margin-top: 6px;
  padding: 5px 10px;
  color: inherit;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
}
#info select option,
#planner-panel select option {
  color: #05060a;
}
#info button:hover,
#planner-panel button:hover,
#trip-hud button:hover {
  background: rgba(255, 255, 255, 0.16);
}
#info details.menu:first-child {
  border-top: 0;
}

/* The travel planner opens in the middle of the screen. */
#planner-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  box-sizing: border-box;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 10px 16px 14px;
  background: rgba(10, 14, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  scrollbar-width: thin;
}
#planner-panel[hidden],
#trip-hud[hidden] {
  display: none;
}
#planner-panel h2 {
  margin: 4px 0 8px;
  font-size: 15px;
}
#planner-panel .hint {
  opacity: 0.6;
  font-size: 12px;
}
#planner-close {
  position: absolute;
  top: 6px;
  right: 8px;
  margin: 0;
  padding: 0 8px;
  font-size: 18px;
  line-height: 24px;
}
#planner-panel #plan-go {
  margin-top: 10px;
}
/* The caption of the flight: one line over the picture, above the box with the figures. It fades in and out,
   so the arrival is not followed by a line that stands there for ever. */
#flight-caption {
  position: fixed;
  left: 50%;
  bottom: 190px; /* height and width come from the box below, see showCaption */
  transform: translateX(-50%);
  z-index: 9;
  box-sizing: border-box;
  margin: 0;
  max-width: min(520px, calc(100vw - 32px));
  padding: 8px 14px;
  text-align: center;
  font-size: 21px;
  letter-spacing: 0.01em;
  background: rgba(10, 14, 24, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.8s ease;
}
#flight-caption[hidden] {
  display: none;
}
#flight-caption.away {
  opacity: 0;
}

/* While the ship flies the planner is closed, a small box at the bottom shows the trip. */
#trip-hud {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  box-sizing: border-box;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 26px 12px;
  text-align: center;
  background: rgba(10, 14, 24, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}
#trip-hud .plan-result {
  margin: 6px 0 0;
}
/* The x of the box, the same corner and size as the one of the planner. */
#trip-hud #plan-stop {
  position: absolute;
  top: 4px;
  right: 6px;
  margin: 0;
  padding: 0 7px;
  font-size: 16px;
  line-height: 22px;
  background: none;
  border: 0;
  opacity: 0.65;
}
#trip-hud #plan-stop:hover {
  background: none;
  opacity: 1;
}
/* The heading of the trip: the two places, a fifth bigger than the rest and with air under it. */
#trip-title {
  margin: 2px 0 12px;
  font-size: 16px;
  font-weight: 700;
}
/* The three figures stand next to each other, each a word over a number. On a narrow screen they wrap. */
#trip-kpis {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
}
.kpi-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.55;
}
.kpi-value {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 600;
}
.kpi-sub {
  display: block;
  font-size: 11px;
  opacity: 0.55;
}
#trip-board {
  margin: 10px 0 0;
}
#planner-open {
  width: 100%;
}
#info details > button,
#info details > select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

/* The Info button sits left of the burger button, top right. It opens the story panel of the chosen planet. */
#info-button {
  position: fixed;
  top: 16px;
  right: 60px;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  color: inherit;
  background: rgba(10, 14, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
#info-button[hidden] {
  display: none;
}
#info-button:hover,
#info-button[aria-expanded="true"] {
  background: rgba(40, 52, 80, 0.85);
}

/* Listen and the view button sit at the top right of the info window, next to the title. The head stays in view when the text scrolls. */
#story-head {
  position: sticky;
  top: -12px;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: -12px -14px 6px;
  padding: 12px 14px 6px;
  background: rgba(10, 14, 24, 0.92);
}
#story-head h2 {
  margin: 0;
}
#story-actions {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
}
#story-actions button {
  margin: 0;
  padding: 3px 8px;
  font-size: 12px;
}

/* Pick a place of the trip on the map: a row with the field and a button, and a hint at the bottom while the click is awaited. */
.field-row {
  display: flex;
  gap: 6px;
}
.planner-body .field-row input {
  flex: 1;
  width: auto;
  min-width: 0;
}
.planner-body .field-row button {
  margin-top: 6px;
  white-space: nowrap;
}
#pick-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  box-sizing: border-box;
  max-width: min(520px, calc(100vw - 32px));
  padding: 8px 14px 10px;
  text-align: center;
  background: rgba(10, 14, 24, 0.85);
  border: 1px solid rgba(124, 255, 178, 0.5);
  border-radius: 8px;
}
#pick-hint[hidden] {
  display: none;
}
#pick-hint p {
  margin: 0;
  font-size: 13px;
}
#pick-hint button {
  margin-top: 6px;
  padding: 4px 10px;
  color: inherit;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
}
#planner-panel input {
  margin-top: 6px;
  padding: 5px 8px;
  color: inherit;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}

/* The button between From and To swaps them. */
#planner-panel .swap {
  display: block;
  margin: 4px auto 0;
  padding: 0 14px;
  font-size: 16px;
  line-height: 22px;
}

/* A dot behind the title of a menu says that something inside is switched on. */
.menu > summary.active::after {
  content: " CF";
  color: #7cffb2;
  font-size: 10px;
  vertical-align: middle;
}

#scale {
  width: 100%;
}

/* ---- Phones ---------------------------------------------------------------------------------------------------
   The panel on the left starts folded to a small bar (title and a button), so the picture is free. Opened, it is as wide as the
   screen. The other windows use the width of the screen too, with smaller type, and every control is big enough for a finger. */
#info #info-story {
  display: none; /* only on a phone, see the media query below */
}
#info #info-story[hidden] {
  display: none;
}
.hud-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hud-head h1 {
  margin: 0 0 6px;
}
#hud #hud-toggle {
  display: none;
  margin: 0 0 6px;
  padding: 0 10px;
}
#hud.collapsed > :not(.hud-head) {
  display: none !important; /* also the entries moved in from the info window */
}

@media (max-width: 640px) {
  #hud {
    top: 8px;
    left: 8px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 64px);
    box-sizing: border-box;
  }
  #hud:not(.collapsed) {
    top: 56px; /* under the row of the Info and menu buttons */
    right: 8px;
  }
  #hud.collapsed {
    padding: 4px 6px 0 12px;
  }
  .hud-head h1 {
    font-size: 15px;
    white-space: nowrap;
  }
  #hud #hud-toggle {
    display: none; /* the burger button at the top right is the only menu button */
  }
  #hud.collapsed {
    padding-right: 14px;
  }
  #burger {
    top: 8px;
    right: 8px;
  }
  #info-button {
    display: none; /* on a phone it is the first entry of the burger menu */
  }
  #info #info-story {
    display: block;
    width: 100%;
    text-align: left;
  }
  #info {
    top: 56px;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 64px);
  }
  #story {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-height: 34dvh;
  }
  #planner-panel {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 10px 12px 12px;
  }
  #habitable {
    max-height: 40dvh;
  }

  /* The flight: a narrow box with smaller type, the caption above it. */
  #trip-hud,
  #pick-hint {
    bottom: 8px;
    left: 8px; /* the whole width: from the middle (left: 50 %) the box would only get half of it */
    right: 8px;
    transform: none;
    max-width: none;
  }
  #trip-hud {
    padding: 8px 28px 10px 12px;
  }
  #trip-title {
    margin: 0 0 8px;
    font-size: 14px;
  }
  #trip-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* distance, travel time and time on board in a row ... */
    gap: 6px 10px;
  }
  #trip-kpis > * {
    min-width: 0;
  }
  #trip-kpis > :nth-child(2) {
    order: 4; /* ... and the speed, the longest text, under them over the whole width */
    grid-column: 1 / -1;
  }
  .kpi-label,
  .kpi-sub {
    font-size: 10px;
  }
  .kpi-value {
    font-size: 13px;
  }
  #trip-hud .plan-result {
    font-size: 12px;
  }
  #flight-caption {
    max-width: calc(100vw - 16px);
    font-size: 14px;
    padding: 6px 10px;
  }
}

/* Touch: controls at least 44 px high, and 16 px type in fields (a smaller one makes the phone zoom into the page). */
@media (pointer: coarse) {
  #hud button,
  #hud select,
  #info button,
  #info select,
  #planner-panel button,
  #planner-panel select,
  #planner-panel input,
  #story button,
  #pick-hint button,
  #trip-hud button,
  #search {
    min-height: 44px;
  }
  #search,
  #planner-panel input,
  #planner-panel select,
  #hud select,
  #info select {
    font-size: 16px;
  }
  .menu > summary {
    padding: 12px 0 10px;
  }
  .planet-list .row {
    min-height: 40px;
  }
  #burger,
  #info-button {
    height: 44px;
  }
  #burger {
    width: 44px;
  }
  #info-button {
    right: 60px;
  }
  #story-actions button {
    min-height: 36px;
    padding: 3px 10px;
  }
  #planner-close,
  #trip-hud #plan-stop {
    min-width: 44px;
    min-height: 44px;
    top: 0;
    right: 0;
  }
}

/* The entries of the info window, moved into the panel on the left on a phone (see placeMenus in main.js). */
#hud .from-info select option {
  color: #05060a;
}
#hud details.from-info > button,
#hud details.from-info > select,
#hud #info-story {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}
#hud #info-story[hidden] {
  display: none;
}
#hud #credits {
  margin: 0 0 6px;
  font-size: 10px;
  line-height: 1.4;
  opacity: 0.7;
}

/* Phones: the Info button is a round button at the bottom right (in reach of the thumb), an "i" that becomes an "x" while the story panel is
   open. The panel sits above it. It is not in the burger menu any more, and it steps aside while the box of a trip is on the screen. */
@media (max-width: 640px) {
  #info-button {
    display: block;
    top: auto;
    right: 16px;
    bottom: 16px;
    z-index: 13;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    background: rgba(10, 14, 24, 0.85);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  }
  #info-button::before {
    content: "i";
    font-family: Georgia, serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 700;
    line-height: 46px;
  }
  #info-button[aria-expanded="true"]::before {
    content: "\00d7";
    font-family: inherit;
    font-style: normal;
    font-size: 28px;
  }
  #info-button[hidden] {
    display: none;
  }
  body:has(#trip-hud:not([hidden])) #info-button {
    display: none;
  }
  #hud #info-story {
    display: none;
  }
  #story {
    bottom: 76px; /* above the round button */
  }
  #pick-hint {
    bottom: 76px;
  }
}