:root {
  color-scheme: dark;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: #050505;
  color: #f8f8f8;
}

* {
  box-sizing: border-box;
}

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

#pano {
  position: fixed;
  inset: 0;
}

#controls {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1000;
  width: min(34rem, calc(100vw - 2rem));
  display: grid;
  justify-items: end;
  gap: 0.75rem;
  pointer-events: none;
}

#hud,
#map-box {
  width: min(24rem, 100%);
  overflow: hidden;
  border: 1px solid #4a4a4a;
  border-radius: 0.75rem;
  background: rgb(10 10 10 / 90%);
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 45%);
  pointer-events: auto;
}

#map-panel {
  position: relative;
  width: min(34rem, 100%);
  pointer-events: auto;
  transition: width 180ms ease;
}

#challenge-controls {
  width: 100%;
  display: grid;
  justify-items: end;
  gap: 0.75rem;
  transform-origin: right bottom;
  transition:
    opacity 140ms ease,
    transform 180ms ease,
    visibility 0s linear;
}

#hud {
  padding: 0.8rem 1rem;
}

#chall-title {
  margin: 0;
  font-size: 1.2rem;
}

#chall-result {
  margin: 0.35rem 0 0;
  overflow-wrap: anywhere;
  color: #d3d3d3;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

#chall-result[data-state] {
  padding: 0.45rem 0.6rem;
  border: 1px solid currentColor;
  border-radius: 0.45rem;
  font-weight: 700;
}

#chall-result[data-state="correct"] {
  color: #86ff9a;
  background: rgb(16 116 45 / 28%);
  text-shadow: 0 0 0.8rem rgb(76 255 111 / 36%);
}

#chall-result[data-state="incorrect"] {
  color: #ff7474;
  background: rgb(145 22 22 / 28%);
  text-shadow: 0 0 0.8rem rgb(255 65 65 / 32%);
}

#map-box {
  position: relative;
  height: 14rem;
  transform-origin: right bottom;
  transition:
    width 160ms ease,
    height 160ms ease,
    opacity 160ms ease,
    transform 180ms ease,
    visibility 0s linear;
}

#map-panel:not(.is-collapsed):hover #map-box,
#map-panel:not(.is-collapsed):focus-within #map-box {
  width: 100%;
  height: min(32rem, 60vh);
}

#map-toggle {
  position: absolute;
  bottom: 6.15rem;
  right: 0.55rem;
  z-index: 1100;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 50%;
  background: rgb(8 8 8 / 68%);
  color: #fff;
  box-shadow: 0 0.35rem 1rem rgb(0 0 0 / 35%);
  backdrop-filter: blur(0.55rem);
  cursor: pointer;
  transition:
    width 180ms ease,
    height 180ms ease,
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease,
    opacity 160ms ease;
}

#map-toggle:hover {
  border-color: rgb(145 255 0 / 70%);
  background: rgb(18 18 18 / 84%);
  transform: scale(1.05);
}

#map-toggle:focus-visible {
  outline: 2px solid #91ff00;
  outline-offset: 3px;
}

.collapse-icon {
  font-size: 1.65rem;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-0.08rem);
}

.map-icon {
  display: none;
  width: 1.55rem;
  height: 1.55rem;
  fill: currentColor;
}

#map-panel.is-collapsed {
  width: 3.5rem;
  height: 3.5rem;
}

#map-panel.is-collapsed #challenge-controls {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(34rem, calc(100vw - 2rem));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.94) translate(0.35rem, 0.35rem);
  transition: opacity 140ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

#map-panel.is-collapsed #map-toggle {
  position: static;
  width: 3.5rem;
  height: 3.5rem;
  background: rgb(8 8 8 / 48%);
  border-color: rgb(255 255 255 / 20%);
  box-shadow: 0 0.55rem 1.4rem rgb(0 0 0 / 32%);
  opacity: 0.88;
}

#map-panel.is-collapsed #map-toggle:hover {
  background: rgb(8 8 8 / 72%);
  border-color: rgb(145 255 0 / 72%);
  opacity: 1;
}

#map-panel.is-collapsed .collapse-icon {
  display: none;
}

#map-panel.is-collapsed .map-icon {
  display: block;
}

#map {
  width: 100%;
  height: calc(100% - 5.6rem);
  overflow: hidden;
  border-radius: 0.7rem 0.7rem 0 0;
  clip-path: inset(0 round 0.7rem 0.7rem 0 0);
  cursor: crosshair;
  background:
    linear-gradient(rgb(255 255 255 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 7%) 1px, transparent 1px), #15212b;
  background-size: 32px 32px;
}

#coordinate-entry {
  height: 2.7rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.35rem;
  padding: 0.35rem;
  border-top: 1px solid #4a4a4a;
  background: #161616;
}

#coordinate-entry input,
#locate {
  min-width: 0;
  border: 1px solid #555;
  border-radius: 0.3rem;
  background: #292929;
  color: #f8f8f8;
  font: inherit;
}

#coordinate-entry input {
  width: 100%;
  padding: 0 0.45rem;
}

#coordinate-entry input:focus {
  border-color: #91ff00;
  outline: 1px solid #91ff00;
}

#locate {
  padding: 0 0.65rem;
  cursor: pointer;
}

#submit {
  width: 100%;
  height: 2.9rem;
  border: 0;
  border-top: 1px solid #4a4a4a;
  border-radius: 0 0 0.7rem 0.7rem;
  background: #91ff00;
  color: #080808;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

#submit:disabled {
  background: #494949;
  color: #bcbcbc;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  #controls {
    right: 0.5rem;
    bottom: 0.5rem;
    width: calc(100vw - 1rem);
  }

  #hud,
  #map-box {
    width: 100%;
  }

  #map-panel {
    width: 100%;
  }

  #map-panel.is-collapsed {
    width: 3.5rem;
  }

  #map-box,
    #map-panel:not(.is-collapsed):hover #map-box,
    #map-panel:not(.is-collapsed):focus-within #map-box {
      height: 14rem;
    }

    #map-panel.is-collapsed #challenge-controls {
      width: calc(100vw - 1rem);
    }
}

@media (prefers-reduced-motion: reduce) {
  #map-box,
  #challenge-controls {
    transition: none;
  }
}