body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #505050; /* Matches your Inkscape gray background workspace */
}

#viewport {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  cursor: grab;
  user-select: none;
}

#viewport:active {
  cursor: grabbing;
}

#map {
  position: absolute;
  width: 1920px;  
  height: 1920px; 
  transform-origin: 0 0; 
  will-change: transform;
}

/* Force the SVG element to stay perfectly pinned to container constraints */
#map svg {
  width: 1920px !important;
  height: 1920px !important;
  display: block;
}

/* --- TOOLTIP OVERLAY STYLING --- */
#map-tooltip {
  position: fixed; /* Fixed relative to screen layout */
  background-color: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: sans-serif;
  font-size: 14px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -130%);
  transition: opacity 0.1s ease;
  z-index: 1000;
  white-space: nowrap;
}

/* --- INTERACTION STATES --- */
g[inkscape:label^="stop-"] {
  cursor: pointer;
}

g[inkscape:label^="stop-"] {
  transition: filter .25s ease;
}

.stop-hovered {
  filter: brightness(.6);
}

.active-stop .inner-circle {
  fill: #000000 !important;
}

.active-stop .outer-circle {
  fill: #ffff00 !important;
  stroke: #000000 !important;
}

/* Ensure tooltips and buttons are handled */
.stop-hovered { filter: brightness(0.5); transition: filter 0.3s ease; }
.line-hovered { stroke-width: 12px; transition: stroke-width 0.3s ease; }

.line-inactive { opacity: 0.2;}

.stop-inactive .inner-circle {
  fill: #777777 !important;
  transition: fill 0.25s ease  !important;
}

.stop-inactive .outer-circle {
  fill: #000000 !important;
  stroke: #777777 !important;
  transition !important:
    fill 0.25s ease !important
    stroke 0.25s ease !important;
}

#ui-footer {
  position: fixed;

  left: 0;
  right: 0;
  bottom: 20px;

  display: flex;

  justify-content: center;
  gap: 15px;

  z-index: 10000;

  opacity: 0;
  pointer-events: none;

  transition: opacity .3s ease;
}

#ui-footer.visible {
  opacity: 1;
  pointer-events: auto;
}

.footer-button {
  background: #000000;
  color: #ffffff;

  border: none;

  padding: 6px 12px;

  cursor: pointer;

  flex: 0 0 auto;

  white-space: nowrap;
}

.path-travelled {
  stroke: #ffff00 !important;
}

.route-step {
  filter: drop-shadow(0 0 8px #ffff00);
}

.route-step .outer-circle {
  fill: #ffff00 !important;
  stroke: #ffff00 !important;
}

.route-step .inner-circle {
  fill: #ffff00 !important;
}

#content-overlay {

  position: fixed;
  inset: 0;

  background: rgba(0,0,0,.55);

  display: flex;

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

  z-index: 999999;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity .3s ease,
    visibility .3s ease;
}

#content-overlay.visible {

  opacity: 1;
  visibility: visible;
}

#overlay-back {

  position: absolute;

  top: 20px;
  left: 20px;

  font-size: 32px;

  color: white;

  background: none;
  border: none;

  cursor: pointer;

  z-index: 2;
}

#overlay-content {

  width: 80vw;
  height: 80vh;

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

#overlay-content iframe {

  width: 100%;
  height: 100%;

  border: none;
}

#overlay-content video {

  max-width: 100%;
  max-height: 100%;
}

#overlay-content embed,
#overlay-content iframe,
#overlay-content video {

  width: 100%;
  height: 100%;

  border: none;
}