html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #111;
  overflow: hidden;
}
.hidden {
  display: none !important;
}
a {
  color: #7fbfff;          /* anchor normal */
}
a:visited {
  color: rgba(127, 191, 255, 0.8);
}
a:hover {
  color: #a6d4ff;
}
a:active {
  color: #ffffff;
}

#skySVG {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: transparent;
}

/* ======================== Dual skyview layout ========================= */

#skyContainer {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
}

#skyViews {
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;      
  gap: 24px;            /* distance between both skyviews */
  padding-left: min(10vw, 50px);  /* distance between the left skyview and the left window border */
}
/* both grid cells */
.skyCell {
  position: relative;
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* label canvas fills the cell */
.labelCanvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
/* Base style for both skyview circles */
.skyview {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  background: #1e1e1e;
  border: 2px solid #444;
  cursor: default;
  transition:
    width 0.25s ease,
    height 0.25s ease;
}
#skyviewSecondary {
  cursor: pointer;
}
/* Dimensions */
/* Large primary view */
.skyview.large {
  width: min(80vmin, 760px);  /* dimensions of the skyview in focus */
  height: min(80vmin, 760px);
}
/* Small secondary view */
.skyview.small {
  width: min(26vmin, 200px);
  height: min(26vmin, 200px);
}
/* Ensure canvases and SVGs stay clipped inside circles */
.skyview canvas,
.skyview svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* inner canvas & SVG */
.skyCanvas,
.skySVG {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ======================== Dual skyview layout ========================= */


#cookieBanner {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30,30,30,0.95);
  color: #eee;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.8rem;
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 5000;
}

#cookieBanner button {
  background: #444;
  color: #fff;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.cookieText {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
}
/* Menu navigation bar */
#menuNav {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

#menuNav button {
  flex: 1;
  padding: 6px;
  background: #222;
  color: #ccc;
  border: 1px solid #444;
  border-radius: 4px;
  cursor: pointer;
}
#menuNav button.active {
  background: #444;
  color: #fff;
}
/* ================ Menu views ===================== */
.menuView {
  display: block;
}
.menuView.hidden {
  display: none;
}
#menuButton .hamburger {
  font-size: 1.6rem;
  line-height: 1;
  display: block;
}

#menuButton {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.8rem;          /* icon size */
  padding: 0px 8px 10px;       /* clickable area */
  line-height: 1; 

  color: white;                     /* white icon */
  background: rgba(0, 0, 0, 0.4);   /* subtle dark background */
  border-radius: 6px;

  cursor: pointer;
  user-select: none;

  position: fixed; 
  top: 12px;
  left: 12px;
  z-index: 3000;
}

#observerInfo:hover {
  background: rgba(0, 0, 0, 0.45);
}
#observerInfo {
  position: fixed;
  top: 56px;          /* below hamburger */
  left: 14px;

  font-family: system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;

  font-size: 0.85rem;
  line-height: 1.2;

  color: #ddd;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 8px;
  border-radius: 6px;

  z-index: 1500;      /* below side panel, above sky */
  pointer-events: auto;
  cursor: pointer;
}

#observerPrimary {
  font-weight: 600;
  color: #fff;
}

#observerSecondary {
  opacity: 0.85;
}

#instrumentButtons {
  position: absolute;
  z-index: 10;
  pointer-events: auto;

  top: 110px;      /* below observer info */
  left: 16px;
  
  background: rgba(0,0,0,0.25);
  padding: 6px 11px;
  border-radius: 8px;

  display: flex;
  flex-direction: column;
  gap: 6px;        /* vertical spacing */
}


.instrumentBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 3px 5px;

  background: #2b2b2b;
  color: #ffffff;
  border: 1px solid #2b2b2b;
  border-radius: 6px;

  opacity: 0.85;

  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 0.03em;

  cursor: pointer;
}

.instrumentBtn:hover {
  border-color: #bbbbbb;
  opacity: 1.0;
}

.instrumentBtn:focus-visible {
  outline: none;
  border-color: #dddddd;
}


@keyframes savePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 60, 60, 0.9);
    border-color: rgba(220, 60, 60, 0.9);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(220, 60, 60, 0);
    border-color: rgba(220, 60, 60, 0.6);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 60, 60, 0);
    border-color: initial;
  }
}

#sidePanel {
  position: fixed;
  top: 56px;
  left: 12px;

  width: 500px;
  height: calc(100% - 68px);

  background: rgba(30, 30, 30, 0.95);
  color: #eee;

  padding: 0 16px 16px 16px;   /* no padding-top because of button row */

  border-radius: 12px;   /* rounded corners */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);

  z-index: 2000;
  overflow-y: auto;
  font-family: system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;

  /* Animation base state */
  transform: translateX(-20px);
  opacity: 0;
  pointer-events: none;

  transition:
    transform 0.25s ease-out,
    opacity 0.2s ease-out;
}

#sidePanel.hidden {
  transform: translateX(-20px);
  opacity: 0;
  pointer-events: none;
}
#sidePanel:not(.hidden) {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
#sidePanel h2 {
  margin-top: 0;
  color: #fff;
}
#sidePanel label {
  display: block;
  margin-bottom: 12px;
  font-size: 0.9em;
}
#sidePanel input {
  width: 80%;
  padding: 6px;
  background: #222;
  color: #eee;
  border: 1px solid #444;
  border-radius: 4px;
}
#sidePanel .hint {
  font-size: 0.85em;
  color: #aaa;
}
/* side panel menu row */
#menuNav {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-top: 0;
  
  background: #111;   
  padding: 10px 12px;        /* bigger box */
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}


/* Headings inside the settings side panel */
#sidePanel h2,
#sidePanel h3 {
  font-family: system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
}

/* Make the main heading a bit smaller */
#sidePanel h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.6em;
}

/* Sub-headings, if any */
#sidePanel h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 1.2em;
}
#view-settings label {
  display: block;
  margin-bottom: 0.8em;
}

#view-settings label input {
  margin-top: 0.25em;
}

#map {
  margin-top: 8px;
  border: 1px solid #444;
  border-radius: 4px;
}
/* Leaflet map cursor behavior */
/* Default: normal arrow */
.leaflet-container {
  cursor: default;
}

/* While dragging */
.leaflet-container.leaflet-grab {
  cursor: default;
}

.leaflet-container.leaflet-grabbing {
  cursor: grabbing;
}
.leaflet-container:active {
  cursor: grabbing;
}
.locator {
  margin-top: 8px;
  font-size: 0.9em;
  color: #ccc;
}

#swankeyBox {
  display: flex;
  flex-direction: column;
  margin: 0;
  gap: 0.4em;

  width: 220px;
  padding: 0.5em;
  margin-top: 0.5em;

  background: #222;
  border-radius: 4px;
}
#swankeyInputBlock {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}
#swankeyBox p,
#swankeyBox label {
  margin: 0;
}
.swankey-label {
  font-size: 0.9em;
  opacity: 0.8;
  margin-top: 0.5em;
}
#swankeyRow {
  display: flex;
  align-items: center;
  margin-top: 0;
/*  gap: 0.5em; */
}
#requestSwankey {
  align-self: flex-start;
  font-size: 0.9em;
}
#swankeyValue {
  font-size: 1.5em;
  user-select: all;
}
.iconButton {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.1em 0.2em;
  font-size: 1em;
}
.iconButton:hover {
  opacity: 0.8;
}
#swankeyExpiry {
  font-size: 0.8em;
  opacity: 0.7;
}

button.save-flash {
  animation: savePulse 0.8s ease-out;
}

button:disabled {
  background-color: #3a3a3a;   /* dunkles Grau, aber heller als aktiv */
  color: #bfbfbf;              /* helles Grau für Text */
  border-color: #3a3a3a;

  opacity: 1.0;                /* wichtig: NICHT weiter abdunkeln */
  cursor: not-allowed;
}

/* ============== flux capacitor timebox ================= */
.time-line {
  display: grid;
  grid-template-columns: 110px auto;
  align-items: center;
}
.time-label {
  opacity: 0.7;
}
.time-value {
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
#timeModeStatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: #ccc;
  font-family: monospace;
  font-size: 13px;
}
.timeMode {
  padding: 4px 10px;
  border-radius: 6px;
  font-family: sans-serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
#play {              /* play does not run smoothly */
  display: none;
}
#pause {
  display: none;
}

.timeMode.paused {
  background: #444;
  color: #ccc;
}

.timeMode.real {
  background: #1e6bb8;
  color: #e6f2ff;
}

.timeMode.sim {
  background: #b85c1e;
  color: #fff0e6;
}
#statusToggle {
  position: absolute;
  top: 12px;
  right: 12px;
  
  font-size: 12px;
  line-height: 1;
  
  width: 20px;
  height: 30px;

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

  cursor: pointer;
  user-select: none;

  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;

  z-index: 1000;
}

#timedisplayBox.expanded #content {
  display: block;
  padding: 8px 10px;
}
#timedisplayBox.collapsed #content {
  display: none;
}
/* option not used */
#timedisplayBox.collapsed {
  width: 28px;
}

#timedisplayBox {
  position: absolute;
  top: 10px;
  right: 10px;

  background: rgba(0, 0, 0, 0.55);
  color: #e0e0e0;
  border-radius: 8px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  z-index: 900;
}

#simTime.visible {
  font-size: 16px;
  visibility: visible;
}
.timeModeIndicators {
  display: flex;
  justify-content: flex-start;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Button-Zeile */
.buttonRow {
  display: flex;
  gap: 6px;
}

.buttonRow button {
  width: auto;          /* prevents full width */
  padding: 4px 6px;
  margin-bottom: 12px;
}

/* Slider row */
.sliderRow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sliderRow input[type="range"] {
  width: 220px;         /* limited */
  accent-color: ##e95420;
}
.sliderTooltip {
  position: absolute;
  padding: 2px 6px;
  font-size: 12px;
  background: rgba(30,30,30,0.9);
  color: #eee;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -120%);
  transition: opacity 0.1s;
}
.radiant-label {
  display: block;
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.035;
  font-weight: 600;          /* fett, aber nicht klobig */
  fill: white;
  pointer-events: none;

  /* Lesbarkeit auf hellem Hintergrund */
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.6);
  stroke-width: 0.01;
}
.elevation-label {
  fill: white;
  fill-opacity: 0.8;

  stroke: rgba(0, 0, 0, 0.6);
  stroke-width: 0.015em;
  paint-order: stroke;

  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 0.035;

  pointer-events: none;
}
.elevation-label.shadow {
  fill: black;
  fill-opacity: 0.4;
  stroke: none;
}
.radiant {
  fill: #ffd080;
  stroke: none;
  cursor: pointer;
}

.radiant.selected {
  stroke: #fff2b0;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(255, 240, 180, 0.9));
}
.radiant.selected circle {
  stroke: #fff2b0;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(255, 240, 180, 0.9));
}