/* map.css
   The hunt map: the illustrated parchment view with bright markers and the
   player longship, the optional real-map view, and the readout and banners. */

.map-screen { display: flex; flex-direction: column; gap: 10px; }
.map-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 12px;
  padding: 10px 12px;
}
.map-readout { flex: 1; font-size: 15px; color: var(--gold); }
.map-controls { display: flex; gap: 8px; align-items: center; }
.map-compass { background: none; border: 1px solid rgba(201,168,76,0.4); color: var(--gold); border-radius: 10px; min-height: 40px; min-width: 40px; font-size: 18px; cursor: pointer; }

.map-banner {
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 700;
}
.map-banner.hidden { display: none; }
.banner-proximity { background: rgba(74,144,217,0.25); border: 1px solid var(--sky); color: #d6e6ff; }
.banner-arrived { background: rgba(45,122,45,0.3); border: 1px solid var(--forest); color: #d9f3d9; }
.banner-confirm { background: rgba(245,166,35,0.25); border: 1px solid var(--amber); color: #ffe6bd; }
.banner-offline { background: rgba(139,26,26,0.3); border: 1px solid var(--rune-red); color: #f3c9c9; }

.map-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(201,168,76,0.4);
}

/* illustrated map */
.illus-map { position: absolute; inset: 0; }
.illus-base {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.illus-base.illus-fallback {
  background:
    radial-gradient(circle at 30% 20%, rgba(139,26,26,0.15), transparent 40%),
    repeating-linear-gradient(60deg, #e2cf9c, #e2cf9c 18px, #d9c48d 18px, #d9c48d 36px);
}
/* treasure-map fog of war: a parchment mist over the map that clears around
   visited points. It sits above the base but below the trail, markers and ship,
   and never receives pointer events, so existing map behaviour is untouched. */
.illus-fog {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.illus-fog-rect {
  fill: #c4ad74;
  fill-opacity: 0.72;
}

/* breadcrumb trail: a faint dotted path behind the markers and ship */
.illus-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.illus-trail polyline {
  fill: none;
  stroke: var(--sky);
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0.5 2.2;
  opacity: 0.55;
}

.illus-overlay { position: absolute; inset: 0; z-index: 2; }
.illus-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
.marker-art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.marker-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.marker-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-bright), var(--amber));
  border: 2px solid var(--rune-red);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.marker-label {
  font-size: 11px;
  font-weight: 700;
  color: #2c2208;
  background: rgba(243,230,196,0.9);
  border-radius: 6px;
  padding: 1px 5px;
  margin-top: 3px;
  white-space: nowrap;
  max-width: 30vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.illus-marker.kind-troll .marker-dot { background: radial-gradient(circle, #9be29b, var(--forest)); }
.illus-marker.confirmed .marker-dot { background: var(--forest); }
.illus-marker.snapped .marker-dot { outline: 3px solid var(--sky); outline-offset: 2px; }
.illus-marker.snapped .marker-art { outline: 3px solid var(--sky); outline-offset: 2px; }
/* Proximity glow: intensity is driven purely by the tier class the controller
   sets on the marker. Far markers sit still; closer tiers pulse, glow brighter
   and a touch larger, then settle solid with a gentle bounce on arrival.
   Only transform and box-shadow animate, so it stays smooth at 60fps. */
.marker-art { will-change: transform; }

/* pulse: a soft expanding halo */
.illus-marker.tier-pulse .marker-dot,
.illus-marker.tier-pulse .marker-art {
  animation: marker-pulse 1.6s ease-in-out infinite;
}
@keyframes marker-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0.55); }
  50% { box-shadow: 0 0 0 10px rgba(245,166,35,0); }
}

/* proximity: brighter, steady glow plus a faster pulse and a slight grow */
.illus-marker.tier-proximity .marker-dot,
.illus-marker.tier-proximity .marker-art {
  animation: marker-glow 1.1s ease-in-out infinite;
}
@keyframes marker-glow {
  0%, 100% {
    transform: scale(1.08);
    box-shadow: 0 0 8px 2px rgba(245,166,35,0.7), 0 0 0 0 rgba(245,166,35,0.6);
  }
  50% {
    transform: scale(1.16);
    box-shadow: 0 0 14px 4px rgba(245,166,35,0.85), 0 0 0 12px rgba(245,166,35,0);
  }
}

/* arrived: solid bright glow with a gentle bounce */
.illus-marker.tier-arrived .marker-dot,
.illus-marker.tier-arrived .marker-art {
  box-shadow: 0 0 16px 5px rgba(245,166,35,0.9);
  animation: marker-bounce 0.9s ease-in-out infinite;
}
@keyframes marker-bounce {
  0%, 100% { transform: translateY(0) scale(1.12); }
  50% { transform: translateY(-4px) scale(1.18); }
}

.illus-ship {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-size: 30px;
  color: var(--sky);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
  transition: left 0.6s ease, top 0.6s ease;
}
.ship-glyph { display: inline-block; }
.ship-img { width: 36px; height: 36px; object-fit: contain; display: block; }

/* real map */
.real-map { position: absolute; inset: 0; }
.real-marker {
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-bright), var(--amber));
  border: 2px solid var(--rune-red);
  cursor: pointer;
}
.real-marker.kind-troll { background: radial-gradient(circle, #9be29b, var(--forest)); }
.real-marker.confirmed { background: var(--forest); }
.real-ship { font-size: 26px; color: var(--sky); }

/* foot */
.map-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.map-accuracy { font-size: 12px; color: #9fb0d8; flex: 1; }
.map-here { white-space: nowrap; }
.map-toggle { white-space: nowrap; }

/* compass-and-distance HUD: a small fixed badge inside the stage that points
   at the nearest unfound landmark. */
.map-hud {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 20px);
  padding: 6px 10px 6px 6px;
  background: rgba(10,14,46,0.78);
  border: 1px solid rgba(201,168,76,0.45);
  border-radius: 12px;
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.map-hud.hidden { display: none; }
.map-hud-rose {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: block;
  transform: rotate(0deg);
  transition: transform 0.5s ease;
}
/* CSS needle fallback when the compass image fails to load */
.map-hud-needle {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--gold);
  transform: rotate(0deg);
  transition: transform 0.5s ease;
}
.map-hud-needle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 4px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 12px solid var(--rune-red);
  transform: translateX(-50%);
}
.map-hud-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* GPS-searching empty state: centred over the stage until the first fix */
.map-searching {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: rgba(10,14,46,0.82);
}
.map-searching.hidden { display: none; }
.map-searching-rose {
  width: 84px;
  height: 84px;
  display: block;
  animation: hud-rose-spin 6s linear infinite;
}
.map-searching-text {
  margin: 0;
  max-width: 32ch;
  font-size: 15px;
  line-height: 1.4;
  color: var(--gold);
}
@keyframes hud-rose-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Reduced motion: hold the living-map animations still. Markers keep a static
   glow so the tiers still read, the compass does not spin, and transitions are
   instant. */
body.reduce-motion .illus-marker.tier-pulse .marker-dot,
body.reduce-motion .illus-marker.tier-pulse .marker-art,
body.reduce-motion .illus-marker.tier-proximity .marker-dot,
body.reduce-motion .illus-marker.tier-proximity .marker-art,
body.reduce-motion .illus-marker.tier-arrived .marker-dot,
body.reduce-motion .illus-marker.tier-arrived .marker-art {
  animation: none;
}
body.reduce-motion .illus-marker.tier-proximity .marker-dot,
body.reduce-motion .illus-marker.tier-proximity .marker-art {
  transform: scale(1.1);
  box-shadow: 0 0 10px 3px rgba(245,166,35,0.7);
}
body.reduce-motion .illus-marker.tier-arrived .marker-dot,
body.reduce-motion .illus-marker.tier-arrived .marker-art {
  transform: scale(1.14);
  box-shadow: 0 0 16px 5px rgba(245,166,35,0.9);
}
body.reduce-motion .map-searching-rose { animation: none; }
body.reduce-motion .map-hud-rose,
body.reduce-motion .map-hud-needle { transition: none; }
body.reduce-motion .illus-fog { transition: none; }