/* Coordinates follow the approved 1230 × 1108 decorative dial artwork. */
.gather-minimap {
  width: clamp(230px, 22vw, 300px);
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
}
.minimap-dial {
  position: relative;
  aspect-ratio: 1230 / 1108;
  isolation: isolate;
}
.gather-minimap .minimap-dial canvas {
  position: absolute;
  left: 8.1%;
  top: 7.4%;
  width: 83.5%;
  border-radius: 50%;
  background: #17272d;
  filter: none;
}
.minimap-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 3px 4px #0009);
}
.minimap-moon {
  position: absolute;
  left: 6.5%;
  top: 52.4%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid #acb8bf;
  background: #0d1922;
  box-shadow:
    inset 0 0 0 2px #35424a,
    0 2px 5px #000b;
  pointer-events: auto;
  cursor: help;
}
.gather-minimap .minimap-dial .minimap-moon canvas {
  position: static;
  display: block;
  width: 26px;
  height: 26px;
  margin: 3px;
  background: transparent;
  pointer-events: none;
}
.minimap-moon-label {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  padding: 6px 9px;
  border: 1px solid #a4b0b5;
  border-radius: 5px;
  background: #0d1922f5;
  color: #e5edf0;
  font:
    12px system-ui,
    sans-serif;
  visibility: hidden;
  pointer-events: none;
}
.minimap-moon:hover .minimap-moon-label,
.minimap-moon:focus .minimap-moon-label {
  visibility: visible;
}
.minimap-moon:focus-visible {
  outline: 2px solid #d8e5ec;
  outline-offset: 3px;
}
.minimap-inside {
  position: absolute;
  inset: 9% 9% 6%;
  border-radius: 50%;
  background: radial-gradient(circle, #1c2c33, #0b141b);
  color: #b5c7cd;
  display: grid;
  place-items: center;
  font:
    14px Georgia,
    serif;
}
.minimap-inside[hidden] {
  display: none;
}
.gather-minimap .camera-zoom {
  display: contents;
}
.gather-minimap .camera-zoom button,
.minimap-tracking {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  padding: 0;
  min-width: 36px;
  min-height: 36px;
  width: 11%;
  height: 12%;
  color: #f2e3b9;
  font:
    bold 22px Georgia,
    serif;
  pointer-events: auto;
  cursor: pointer;
}
.gather-minimap .camera-zoom button:nth-child(3) {
  left: 90.5%;
  top: 68.7%;
}
.gather-minimap .camera-zoom button:nth-child(1) {
  left: 85.5%;
  top: 79.1%;
}
.minimap-tracking {
  left: 77.5%;
  top: 87.3%;
}
.minimap-tracking svg {
  display: block;
  margin: auto;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.minimap-tracking[aria-pressed="false"] {
  color: #81939d;
}
.gather-minimap .camera-zoom button:hover,
.minimap-tracking:hover {
  background: #d4bd6b26;
}
.minimap-tracking:focus-visible {
  outline: 2px solid #d8e5ec;
  outline-offset: 2px;
}
.gather-minimap .camera-zoom button:nth-child(2) {
  left: 50%;
  top: 82%;
  width: auto;
  min-width: 44px;
  min-height: 24px;
  height: 24px;
  font:
    11px system-ui,
    sans-serif;
  border-radius: 6px;
  background: #0b151cdd;
  border: 1px solid #80929970;
  color: #bbced4;
}
.minimap-clock {
  position: absolute;
  left: 35.5%;
  top: 91.6%;
  width: 29%;
  height: 6%;
  z-index: 2;
  display: grid;
  place-items: center;
  white-space: nowrap;
  color: #e9d7a5;
  font:
    12px Georgia,
    serif;
  font-variant-numeric: tabular-nums;
}
.minimap-quest-slot {
  margin: 3px 5% 8px;
}
.gather-minimap #tracked-quest {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: none;
  min-height: 80px;
  padding: 14px 18px 14px 26px;
  border: 0;
  border-radius: 0;
  background: url("../assets/minimap-quest-frame.webp") center / 100% 100%
    no-repeat;
  pointer-events: auto;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.gather-minimap #tracked-quest[hidden] {
  display: none;
}
.gather-minimap .tracked-quest-title {
  font-size: 13px;
  margin-bottom: 3px;
}
.gather-minimap .tracked-quest-materials {
  margin-top: 4px;
}
.gather-minimap #tracked-quest .material-icon {
  width: 21px;
  height: 20px;
}
.gather-minimap .minimap-inventory {
  margin: 0 9%;
  border: 1px solid #7c8f9666;
  background: #0b151ce8;
}
@media (max-width: 600px) {
  .gather-minimap {
    width: 215px;
    right: 2px;
  }
  .minimap-clock {
    font-size: 10px;
  }
  .gather-minimap #tracked-quest {
    padding: 12px 16px 12px 24px;
    font-size: 11px;
  }
  .gather-minimap .tracked-quest-title {
    font-size: 12px;
  }
  .corner-hud .hud-place {
    max-width: calc(100vw - 305px);
  }
}
@media (max-height: 550px) and (min-width: 601px) {
  .gather-minimap {
    width: 225px;
  }
}