.mini-map-panel {
  font: inherit;
  cursor: zoom-in;
  transition: transform .15s, filter .15s;
}

.mini-map-panel:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.mini-map-panel:focus-visible {
  outline: 3px solid #f2d89b;
  outline-offset: 3px;
}

.map-card {
  width: min(980px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
}

#largeMap {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: min(57vh, 540px);
  border: 3px double #52382d;
  background: #3d2d29;
  cursor: crosshair;
}

.map-legend {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 14px;
  color: #4a3027;
  font-size: 14px;
}

.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend .dot { width: 11px; height: 11px; border: 1px solid rgba(48,30,24,.7); border-radius: 50%; box-shadow: 0 1px 0 #f4ddb0; }
.tower-dot { background: #f2cf67; }
.town-dot { background: #78c9bd; }
.mine-dot { background: #e58a4b; }
.house-dot { background: #aed277; }
.animal-dot { background: #d9aee7; }
.star-mark { color: #fff0a5; text-shadow: 0 1px 1px #3d2a23; font-size: 18px; line-height: 1; }
.map-tip { position: relative; z-index: 2; margin: 10px 0 0!important; font-size: 14px!important; }

@media (max-width: 800px) {
  .mini-map-panel:hover { transform: scale(.78) translateY(-2px); }
  .map-card { width: 95vw; padding-inline: 20px; }
  #largeMap { height: 52vh; }
  .map-legend { gap: 6px 12px; font-size: 12px; }
}