/* Common floating map button. Same visual language as .tme-tree-root so
 * the layers chip, north button, locate button, and any future overlays
 * all share a single skin. Tweaks here propagate everywhere. */

.tme-map-button {
  position: fixed;
  z-index: 6;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  background: rgba(20, 20, 22, 0.92);
  color: #eee;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.tme-map-button:hover  { background: rgba(40, 40, 44, 0.95); color: #fff; }
.tme-map-button:focus  { outline: none; }
.tme-map-button:focus-visible {
  outline: 2px solid rgba(45, 108, 223, 0.7);
  outline-offset: 1px;
}

/* Active = button represents an enabled / armed state (e.g. locate-follow). */
.tme-map-button.active {
  background: #2d6cdf;
  color: #fff;
  border-color: #2d6cdf;
}
.tme-map-button.active:hover { background: #3a7be8; }

/* Pulse for "following user" mode — subtle so it doesn't compete with the
 * Cities/Trails colour palette. */
.tme-map-button.pulse::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  border: 2px solid rgba(45, 108, 223, 0.55);
  animation: tme-mapbtn-pulse 1.4s ease-out infinite;
  pointer-events: none;
}
@keyframes tme-mapbtn-pulse {
  0%   { transform: scale(0.85); opacity: 0.9; }
  70%  { transform: scale(1.25); opacity: 0;   }
  100% { transform: scale(1.25); opacity: 0;   }
}

.tme-map-button .material-symbols-outlined {
  font-size: 22px;
  line-height: 1;
  /* Compass needle / arrow icons rotate via JS; this transform-origin keeps
   * the rotation centred on the glyph's middle. */
  transform-origin: 50% 50%;
  transition: transform 0.18s ease-out, color 0.15s;
  pointer-events: none;
}

/* North button: when the map is exactly oriented north, the compass needle
 * goes red so the user knows it's locked. The whole button stays in its
 * normal skin — only the glyph colour changes. */
.tme-map-button.is-north-locked .material-symbols-outlined {
  color: #ff4d4d;
  text-shadow: 0 0 6px rgba(255, 77, 77, 0.55);
}

/* The blue "you are here" dot rendered by core/map-controls/locate.js. */
.tme-locate-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2d6cdf;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 16px rgba(45, 108, 223, 0.55);
}
.tme-locate-dot.pulse {
  animation: tme-locate-dot-pulse 1.4s ease-out infinite;
}
@keyframes tme-locate-dot-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(45, 108, 223, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.35); }
  70%  { box-shadow: 0 0 0 16px rgba(45, 108, 223, 0),    0 0 0 1px rgba(0, 0, 0, 0.35); }
  100% { box-shadow: 0 0 0 0   rgba(45, 108, 223, 0),    0 0 0 1px rgba(0, 0, 0, 0.35); }
}