.floating-map {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 18;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 16px 8px 12px;
  border: 1px solid #857047;
  border-radius: 4px;
  background: radial-gradient(ellipse at 50% 0, #b99d5520, transparent 75%), linear-gradient(150deg, #1b2726, #0b1416);
  box-shadow: 0 8px 28px #0005, inset 0 0 0 4px #0a121540;
  color: #d8bd82;
  text-align: center;
  transition: color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s, visibility .2s
}

.floating-map::before,
.floating-map::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border: solid #d7bb7a;
  pointer-events: none
}

.floating-map::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
  border-radius: 4px 0 0 0
}

.floating-map::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
  border-radius: 0 0 4px 0
}

.floating-map-icon {
  width: 32px;
  height: 32px;
  display: block
}

.floating-map-icon svg {
  display: block;
  width: 100%;
  height: 100%
}

.floating-map-title {
  font-family: KaiTi, STKaiti, serif;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 3px;
  padding-left: 3px
}

.floating-map-action {
  font-size: 9px;
  letter-spacing: 2px;
  color: #92947a;
  border-top: 1px solid #81704c66;
  padding-top: 8px;
  width: 100%;
  transition: color .2s
}

.floating-map-action>span {
  display: inline-block;
  transition: transform .2s
}

.floating-map:hover {
  transform: translateY(calc(-50% - 3px));
  color: #ffe1a0;
  border-color: #d4b775;
  box-shadow: 0 10px 30px #0007, 0 0 18px #c7a55c18
}

.floating-map:hover .floating-map-action {
  color: #dfc58a
}

.floating-map:hover .floating-map-action>span {
  transform: translate(1px, -1px)
}

.floating-map[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none
}

html.mobile {
  .floating-map {
    top: auto;
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(70px + env(safe-area-inset-bottom));
    transform: none;
    width: auto;
    flex-direction: row;
    gap: 8px;
    padding: 10px 13px;
    border-radius: 4px;
    box-shadow: 0 5px 22px #0008
  }

  .floating-map-icon {
    width: 23px;
    height: 23px
  }

  .floating-map-title {
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 1;
    padding: 0
  }

  .floating-map-title br {
    display: none
  }

  .floating-map-action {
    border: 0;
    padding: 0;
    width: auto;
    font-size: 0;
    letter-spacing: 0
  }

  .floating-map-action>span {
    font-size: 15px
  }

  .floating-map:hover {
    transform: translateY(-2px)
  }

  /* .floating-map.map-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
  } */

}