* { box-sizing: border-box; }

.visually-hidden {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:root {
  --hud-width: 324px;
  --hud-height: 42px;
  --toolbar-height: 42px;
  --toolbar-midline-offset: 0px;
  --edge-offset: 14px;
  --body-bg: #e7eee9;
  --text-color: #30423d;
  --panel-bg: rgba(255,255,255,.28);
  --controls-bg: rgba(255,255,255,.28);
  --controls-border: rgba(255,255,255,.52);
  --controls-text: #30423d;
  --intro-panel-bg: rgba(255,255,255,.18);
  --panel-border: rgba(255,255,255,.52);
  --panel-shadow: rgba(57,74,66,.07);
  --status-bg: rgba(248,251,244,.80);
  --status-border: rgba(255,255,255,.72);
  --status-shadow: rgba(27,45,39,.18);
  --status-text: #263a34;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
  background: var(--body-bg);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: var(--text-color);
}

#landscape {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.content {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 40px;
}

.intro {
  position: relative;
  /* the panel that greets the reader comes before every other layer: HUD,
     controls, compass, hint and tooltips all pass underneath it, expanded or
     collapsed alike */
  z-index: 11;

  width: min(600px, 88vw);

  transform: translateY(
    clamp(48px, 7.5vh, 82px)
  );

  padding: 31px 36px;

  background: var(--intro-panel-bg);

  border: 1px solid var(--panel-border);
  border-radius: 24px;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 24px 72px var(--panel-shadow),
    inset 0 1px 0 rgba(255,255,255,.06);
}

h1 {
  margin: 0 0 12px;

  font-size: clamp(36px,6.5vw,72px);
  line-height: .95;

  font-weight: 550;
}

p {
  margin: 0;
  max-width: 480px;

  font-size: 16px;
  line-height: 1.55;

  opacity: .72;
}

.intro-toggle {
  display: grid;

  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;

  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;

  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;

  opacity: .6;
  transition: opacity .16s ease, background-color .16s ease;
}

.intro-toggle:hover,
.intro-toggle:focus-visible {
  opacity: 1;
  background-color: rgba(255,255,255,.17);
  outline: none;
}

.intro-toggle svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.intro-toggle .intro-toggle-expand,
.intro.is-collapsed .intro-toggle .intro-toggle-minimise {
  display: none;
}

.intro.is-collapsed .intro-toggle .intro-toggle-expand {
  display: block;
}

.intro-links {
  margin-top: 22px;
  padding-top: 15px;

  border-top: 1px solid var(--panel-border);
}

.intro-links-row + .intro-links-row {
  margin-top: 4px;
}

/* the row label sits inline with its links; the left margin cancels the row's
   negative offset so the label text lines up with the panel copy above */
.intro-links-label {
  margin-left: 10px;
  margin-right: 4px;

  font-size: 13px;
  line-height: 1;
  letter-spacing: .01em;

  opacity: .55;
}

.intro-links-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;

  margin-left: -10px;
}

.intro-links-row-icons {
  margin-left: -6px;
}

.intro-links-row-icons .intro-links-label {
  margin-left: 6px;
}

.intro-links a {
  display: inline-flex;
  align-items: center;

  padding: 6px 10px;
  border-radius: 8px;

  color: inherit;
  text-decoration: none;

  font-size: 14px;
  line-height: 1;
  letter-spacing: .005em;

  opacity: .72;
  transition: opacity .16s ease, background-color .16s ease;
}

.intro-links a:hover,
.intro-links a:focus-visible {
  opacity: 1;
  background-color: rgba(255,255,255,.17);
  outline: none;
}

.intro-links a.intro-links-icon {
  padding: 6px;
}

.intro-links svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* sitting next to Privacy, an underlined word read as one more link: the pill
   and the icon say "this does something" instead. Help borrows the same chrome
   so the two meta controls read as a pair. */
.intro-language,
.intro-help {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  padding: 2px 8px 2px 6px;
  margin: 0 1px;
  vertical-align: -1px;

  color: inherit;
  text-decoration: none;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;

  font: inherit;
  font-size: 10px;
  line-height: 1.4;

  opacity: .82;
  transition: opacity .16s ease, background-color .16s ease;
}

.intro-language:hover,
.intro-language:focus-visible,
.intro-help:hover,
.intro-help:focus-visible {
  opacity: 1;
  background-color: rgba(255,255,255,.17);
  outline: none;
}

.intro-language svg,
.intro-help svg {
  display: block;
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* sits in the sky above the mountains, in the gap that opens up when the
   landscape keeps its proportions on a narrow screen: the extra room is not
   left mute, it says the scene is meant for landscape orientation */
.rotate-hint {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;

  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  width: min(300px, calc(100vw - 48px));
  padding: 15px 22px 17px;

  text-align: center;
  color: var(--text-color);

  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  box-shadow: 0 18px 44px var(--panel-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  /* it is an invitation, not an obstacle: the sky below stays touchable */
  pointer-events: none;
}

body.rotate-hint-visible .rotate-hint {
  display: flex;
}

/* icon and title on one line: on a short phone screen every line saved is
   room the welcome panel does not have to give up */
.rotate-hint-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.rotate-hint svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .78;
}

.rotate-hint strong {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.rotate-hint span {
  font-size: 12px;
  line-height: 1.45;
  opacity: .68;
}

/* the one touchable spot on an otherwise pass-through card */
.rotate-hint-close {
  position: absolute;
  top: 6px;
  right: 6px;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;

  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;

  font: inherit;
  font-size: 13px;
  line-height: 1;

  opacity: .55;
  pointer-events: auto;
  transition: opacity .16s ease, background-color .16s ease;
}

.rotate-hint-close:hover,
.rotate-hint-close:focus-visible {
  opacity: 1;
  background-color: rgba(255,255,255,.14);
  outline: none;
}

/* only the heading sits level with the toggle, so it alone needs the
   clearance; reserving it on the panel squeezed the links onto two rows */
.intro-body h1 {
  padding-right: 42px;
}

body.fullscreen .scene-compass {
  display: none;
}

.intro.is-collapsed {
  position: fixed;
  top: 12px;
  left: 12px;

  width: 44px;
  height: 44px;
  padding: 0;

  border-radius: 14px;
  transform: none;
}

.intro.is-collapsed .intro-body {
  display: none;
}

.intro.is-collapsed .intro-toggle {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  opacity: .82;
}

.intro-legal a:not(.intro-help) {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  opacity: .92;
}

.intro-legal a:not(.intro-help):hover,
.intro-legal a:not(.intro-help):focus-visible {
  opacity: 1;
  outline: none;
}

.intro-version {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.intro-legal {
  margin-top: 15px;

  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .01em;

  opacity: .68;
}

/* the four Creative Commons glyphs (CC BY NC SA) echoing the licence link */
.cc-badges {
  display: inline-flex;
  gap: 2px;
  margin-left: 5px;
  vertical-align: -2px;
}

.cc-badges svg {
  display: block;
  width: 12px;
  height: 12px;
  fill: currentColor;
  opacity: .82;
}

.sky-status {
  position: fixed;
  right: 14px;
  /* when the two bars sit side by side they share a midline, not a bottom
     edge: this keeps the HUD centred even when touch targets make the toolbar
     taller */
  bottom: calc(var(--edge-offset) + var(--toolbar-midline-offset));
  z-index: 2;

  display: grid;
  align-content: center;
  gap: 3px;
  width: min(var(--hud-width), calc(100vw - 16px));
  height: var(--hud-height);

  font-size: 10px;
  line-height: 1;
  letter-spacing: .025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;

  padding: 5px 8px;

  color: var(--status-text);
  background: var(--status-bg);
  border: 1px solid var(--status-border);
  border-radius: 9px;
  box-shadow:
    0 5px 18px var(--status-shadow),
    inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);

  pointer-events: none;
  user-select: none;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.solar-event {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: -2px;
}

.solar-event svg {
  width: 16px;
  height: 14px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.moon-phase-status {
  display: inline-flex;
  align-items: center;
  vertical-align: -3px;
}

.moon-phase-status svg {
  width: 16px;
  height: 16px;
  overflow: visible;
}

.moon-phase-outline {
  fill: rgba(255,255,255,.08);
  stroke: currentColor;
  stroke-width: 1.1;
}

.moon-phase-lit {
  fill: currentColor;
}

.scene-compass {
  position: fixed;
  top: 14px;
  right: 14px;
  /* secondary decorative element: it yields to the welcome panel and the
     rotate hint, even at the cost of ending up partly underneath them */
  z-index: 0;

  /* scales with the window instead of jumping in steps: never wider than
     124px, never below 80px, and height-limited too for phones in landscape */
  width: clamp(80px, min(22vw, 15vh), 124px);
  height: auto;
  aspect-ratio: 140 / 90;

  color: var(--status-text);
  filter:
    drop-shadow(0 1px 1px rgba(255,255,255,.24))
    drop-shadow(0 2px 3px rgba(8,17,27,.20));

  pointer-events: none;
  user-select: none;
}

.scene-compass svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.compass-ring,
.compass-axis,
.compass-tick {
  fill: none;
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
}

.compass-ring {
  stroke-width: 1.15;
  opacity: .56;
}

.compass-ring-back {
  stroke-dasharray: 3 4;
  opacity: .32;
}

.compass-axis {
  stroke-width: 1;
  opacity: .30;
}

.compass-tick {
  stroke-width: 1.35;
  opacity: .72;
}

.compass-heading {
  fill: rgba(244,151,103,.88);
  stroke: currentColor;
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
}

.compass-center {
  fill: currentColor;
  opacity: .76;
}

.compass-label {
  fill: currentColor;
  font-family: inherit;
  font-size: 11px;
  font-weight: 680;
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--body-bg);
  stroke-width: 2px;
  stroke-linejoin: round;
}

.compass-label-back {
  font-size: 9px;
  opacity: .54;
}

.compass-label-front {
  font-size: 13px;
}

.star-tooltip {
  position: fixed;
  z-index: 10;
  width: max-content;
  max-width: min(230px, calc(100vw - 24px));
  padding: 10px 12px 9px;

  color: #edf5ff;
  background: rgba(9,20,40,.88);
  border: 1px solid rgba(221,235,255,.25);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(2,8,22,.22);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);

  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}

.star-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.star-tooltip strong {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .01em;
}

.star-tooltip-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  font-size: 11px;
  line-height: 1.45;
}

.star-tooltip-label {
  color: rgba(225,237,255,.60);
}

/* rows the script fills only sometimes, like the helicopter passenger list */
.star-tooltip-row[hidden] {
  display: none;
}

/* the one-liner introducing who is aboard the scenic flight */
.heli-tooltip-quip-row {
  margin-top: 3px;
  font-style: italic;
  color: rgba(225,237,255,.72);
}

body.star-hovering {
  cursor: help;
}

body.iss-hovering {
  cursor: help;
}

body.planet-hovering {
  cursor: help;
}

body.peak-hovering {
  cursor: help;
}

body.moon-landing-hovering {
  cursor: help;
}

body.helicopter-hovering {
  cursor: help;
}

body.paraglider-hovering {
  cursor: help;
}

body.sun-hovering {
  cursor: help;
}

body.moon-hovering {
  cursor: help;
}

body.rifugio-hovering {
  cursor: help;
}

body.dog-hovering {
  cursor: help;
}

body.cat-hovering {
  cursor: help;
}

body.cow-hovering {
  cursor: help;
}

body.roe-hovering {
  cursor: help;
}

body.wave-hovering {
  cursor: help;
}

body.star-nearby:not(.star-hovering) {
  cursor: crosshair;
}

body.planet-nearby:not(.planet-hovering) {
  cursor: crosshair;
}

.simulation-controls {
  position: fixed;
  left: 14px;
  bottom: var(--edge-offset);
  z-index: 8;

  color: var(--controls-text);
  font-size: 12px;
}

.control-toolbar,
.control-popover {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: 0 12px 34px var(--panel-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.control-toolbar {
  color: var(--controls-text);
  background: var(--controls-bg);
  border-color: var(--controls-border);
}

#status-coordinates {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.control-toolbar {
  display: flex;
  gap: 3px;
  /* six 32px buttons, five gaps and the padding; --hud-width is the HUD's own */
  width: 215px;
  height: var(--toolbar-height);
  padding: 4px;
  border-radius: 12px;
}

.control-button,
.control-apply {
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.control-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  opacity: .72;
}

.control-button:disabled {
  /* the rule below lifts a hovered button back to full opacity, and overriding
     only its background left the button lighting up under the pointer anyway:
     a disabled control should not answer the pointer at all */
  pointer-events: none;
  opacity: .3;
  cursor: default;
}

/* .active carries the running speed, so it stays marked while disabled, only
   dimmed with the rest instead of jumping back to full opacity */
.control-button:disabled.active {
  opacity: .3;
}

.control-button:hover,
.control-button:focus-visible,
.control-button.active {
  opacity: 1;
  background: rgba(255,255,255,.17);
  outline: none;
}

.control-button.active {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

.control-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.control-button.control-rate {
  width: 35px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.control-button.control-language {
  font-size: 17px;
  line-height: 1;
}

.control-note {
  margin: 0 0 2px;
  max-width: 34ch;

  font-size: 10.5px;
  line-height: 1.45;

  opacity: .62;
}

.control-note a {
  color: inherit;
  white-space: nowrap;
}

/* both of these buttons change what they do rather than toggling a setting,
   so the icon follows the same .active flag the label does */
/* like the highlight, the icon reports the state the simulation is in rather
   than the action the button performs: running shows play, stopped shows pause */
.control-button .icon-exit-fullscreen,
.control-button .icon-pause,
.control-button.active .icon-enter-fullscreen,
.control-button.paused .icon-play {
  display: none;
}

.control-button.active .icon-exit-fullscreen,
.control-button.paused .icon-pause {
  display: block;
}

.control-geolocate {
  justify-self: start;
  margin-bottom: 2px;
  padding: 5px 9px;

  color: inherit;
  background: transparent;
  border: 1px solid var(--controls-border);
  border-radius: 8px;
  cursor: pointer;

  font: inherit;
  font-size: 11px;
  line-height: 1;

  opacity: .72;
  transition: opacity .16s ease, background-color .16s ease;
}

.control-geolocate:hover,
.control-geolocate:focus-visible {
  opacity: 1;
  background-color: rgba(255,255,255,.17);
  outline: none;
}

.control-popover {
  position: absolute;
  left: 0;
  bottom: 46px;
  display: none;
  min-width: 270px;
  padding: 12px;
  border-radius: 13px;
}

.control-popover.open {
  display: block;
}

.control-form {
  display: flex;
  align-items: end;
  gap: 7px;
}

.control-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.control-field label {
  font-size: 10px;
  line-height: 1;
  opacity: .66;
}

.control-field input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 5px 7px;

  color: inherit;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 7px;
  outline: none;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.control-field input:focus {
  border-color: currentColor;
}

.control-apply {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 11px;
  border-radius: 7px;
  color: #f5f8f7;
  background: rgba(42,73,66,.76);
  font-size: 15px;
}

.control-cancel {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 11px;

  color: inherit;
  background: transparent;
  border: 1px solid var(--controls-border);
  border-radius: 7px;
  cursor: pointer;

  font: inherit;
  font-size: 14px;
  line-height: 1;

  opacity: .7;
  transition: opacity .16s ease, background-color .16s ease;
}

.control-cancel:hover,
.control-cancel:focus-visible {
  opacity: 1;
  background-color: rgba(255,255,255,.17);
  outline: none;
}

.coordinate-form {
  min-width: 516px;
  align-items: stretch;
  flex-direction: column;
  gap: 9px;
}

.coordinate-picker {
  display: grid;
  grid-template-columns: 212px 1fr;
  gap: 10px;
  align-items: center;
}

.coordinate-globe-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 204px;
}

.coordinate-globe {
  width: 200px;
  height: 200px;
  display: block;
  cursor: grab;
  touch-action: none;
}

.coordinate-globe.dragging {
  cursor: grabbing;
}

.coordinate-globe-hint {
  position: absolute;
  left: 50%;
  bottom: 1px;
  translate: -50% 0;
  width: max-content;
  font-size: 9px;
  opacity: .58;
  pointer-events: none;
}

.known-location-field {
  display: grid;
  gap: 6px;
}

.known-location-field label {
  font-size: 10px;
  opacity: .66;
}

.known-location-field select {
  width: 100%;
  height: 34px;
  padding: 5px 8px;
  color: inherit;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 7px;
  outline: none;
  font: inherit;
}

.known-location-field select option {
  color: #243832;
  background: #f7faf6;
}

.coordinate-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 7px;
}

.control-field-datetime {
  /* the content is a fixed-length timestamp, so the field takes what it needs
     and leaves the slack to the coordinates instead of stretching */
  flex: 0 1 202px;
}

@media (max-width: 680px) {
  .content {
    padding: 14px;
    /* the HUD and the controls stack at this width: keep the panel clear */
    padding-bottom: 116px;
  }

  .intro {
    width: min(600px, 92vw);
    padding: 24px 22px;

    transform: translateY(clamp(10px, 2.5vh, 30px));
  }

  p {
    font-size: 15px;
  }

  /* tighter link spacing keeps the links on a single row at 320px */
  .intro-links a {
    padding: 6px 8px;
  }

  .simulation-controls {
    left: 8px;
    bottom: 8px;
  }

  .control-popover {
    width: min(360px, calc(100vw - 16px));
    min-width: 0;
  }

  /* the form must fit inside the popover's padding, not repeat its width */
  .coordinate-form {
    width: auto;
    min-width: 0;
  }

  .coordinate-picker {
    grid-template-columns: 152px 1fr;
  }

  .coordinate-globe {
    width: 146px;
    height: 146px;
  }

  .coordinate-globe-wrap {
    min-height: 150px;
  }

  .sky-status {
    right: 8px;
    bottom: 56px;
  }

  .scene-compass {
    top: 8px;
    right: 8px;
  }
}

@media (max-height: 520px) {
  .content {
    padding: 14px;
    padding-bottom: 88px;
  }

  .intro {
    padding: 17px 24px;
    transform: none;
  }

  h1 {
    margin-bottom: 8px;
    font-size: clamp(28px, 5.2vw, 40px);
  }

  p {
    font-size: 14px;
    line-height: 1.45;
  }

  .intro-links {
    margin-top: 12px;
    padding-top: 10px;
  }

  .intro-legal {
    margin-top: 8px;
    font-size: 10px;
  }

  /* merging the two panels made this one taller than a landscape phone, so it
     scrolls instead of running off the top of the screen, and it keeps the
     narrow width the width breakpoint gives it below 680px */
  .control-popover {
    width: min(360px, calc(100vw - 16px));
    min-width: 0;

    max-height: calc(100vh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .coordinate-form {
    width: auto;
    min-width: 0;
  }

  .coordinate-globe {
    width: 116px;
    height: 116px;
  }

  .coordinate-globe-wrap {
    min-height: 120px;
  }

  .coordinate-picker {
    grid-template-columns: 122px 1fr;
  }

  .scene-compass {
    top: 6px;
    right: 6px;
  }
}

/* The greeting panel fills most of a phone screen, so it can be folded away
   into the one free corner. Collapsed, the whole pill is the button that
   brings it back. */
/* Phone-sized screens in either orientation: 44px touch targets, which six
   buttons reach at every phone width. The popover is capped at 360px here, too
   narrow for three fields and two buttons on one line, so the date takes a row
   of its own and the labels stop colliding. */
@media (max-width: 680px), (max-height: 520px) {
  :root {
    --toolbar-height: 52px;
    --toolbar-midline-offset: 5px;
  }

  .control-field-datetime {
    flex: 1 1 100%;
  }

  .coordinate-input-row .control-field {
    min-width: 84px;
  }

  .control-toolbar {
    justify-content: space-between;
    /* six 44px targets, five gaps and the padding: they now fit even at 320px */
    width: min(calc(100vw - 16px), 282px);
    gap: 2px;
    padding: 4px;
  }

  .control-button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 44px;
    height: 44px;
    border-radius: 10px;
  }

  .control-button.control-rate {
    width: auto;
    font-size: 12px;
  }

  .control-button svg {
    width: 20px;
    height: 20px;
  }

  .control-button.control-language {
    font-size: 19px;
  }

  .control-popover {
    bottom: 60px;
  }
}

/* Below roughly 640px the two bars cannot sit side by side at all, so they
   stack on the centre line the same way they do in portrait. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 640px) {
  .content {
    padding-bottom: 112px;
  }

  /* the toolbar is centred here, so the popover centres on it rather than
     hanging off its left edge, where it ran past the screen */
  .control-popover {
    left: 50%;
    transform: translateX(-50%);
  }

  /* at this size the panel reached across into the compass, putting the toggle
     underneath it: give the compass its corner back */
  .intro {
    width: min(600px, calc(100vw - 220px));
  }

  .simulation-controls {
    left: 50%;
    right: auto;
    bottom: 8px;

    transform: translateX(-50%);
  }

  .sky-status {
    left: 50%;
    right: auto;
    bottom: 66px;

    transform: translateX(-50%);
  }
}

/* Held upright there is no room side by side, so the HUD and the toolbar stack
   on the centre line instead of hugging opposite corners. */
@media (orientation: portrait) and (max-width: 680px) {
  .content {
    padding-bottom: 128px;
  }

  /* the toolbar is centred here, so the popover centres on it rather than
     hanging off its left edge, where it ran past the screen */
  .control-popover {
    left: 50%;
    transform: translateX(-50%);
  }

  .simulation-controls {
    left: 50%;
    right: auto;
    bottom: 10px;

    transform: translateX(-50%);
  }

  .sky-status {
    left: 50%;
    right: auto;
    bottom: 70px;

    transform: translateX(-50%);
  }
}

/* The panels over the drawing (compass, intro, controls, status) fade out
   after a few seconds of pointer inactivity and come back as soon as the user
   moves the mouse or touches the screen. This holds both fullscreen and
   windowed. */
/* Fast return: the transition applied when going back to the base state. */
#scene-compass,
#intro-panel,
#simulation-controls,
#sky-status {
  transition: opacity .28s ease;
}

/* Slow fade: the "hidden" state's transition wins when the class is added, so
   it applies only on the way out. */
#scene-compass.ui-faded,
#intro-panel.ui-faded,
#simulation-controls.ui-faded,
#sky-status.ui-faded {
  opacity: 0;
  pointer-events: none;
  transition: opacity 2.4s ease;
}

/* The hint leaves a little before the others: it is the one in front of the
   welcome panel, and once read it should get out of the way first. */
#rotate-hint.ui-faded {
  opacity: 0;
  transition: opacity 1.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  #scene-compass,
  #intro-panel,
  #simulation-controls,
  #sky-status,
  #rotate-hint,
  #scene-compass.ui-faded,
  #intro-panel.ui-faded,
  #simulation-controls.ui-faded,
  #sky-status.ui-faded,
  #rotate-hint.ui-faded {
    transition: opacity .2s ease;
  }
}