/* MAP MODULE styles — dark parchment theme (see css/style.css variables) */

.map-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
}
#map-container.grabbing,
#map-container.grabbing .map-viewport { cursor: grabbing; }

.map-layer {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.map-image {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  user-select: none;
  -webkit-user-drag: none;
}

.map-svg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}

/* ---------- territory fills & strokes ---------- */
.terr-fill {
  transition: fill-opacity 0.15s ease;
  pointer-events: none;
}
.terr-fortified {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8));
}

.terr-hit {
  cursor: pointer;
  transition: fill 0.12s ease, stroke 0.12s ease;
}
.terr-hit:hover {
  fill: rgba(232, 221, 200, 0.18);
  stroke: var(--accent);
  stroke-width: 3;
}

/* ---------- territory numbers ---------- */
.terr-number {
  font-family: Georgia, serif;
  font-size: 13px;
  fill: var(--text);
  fill-opacity: 0.45;
  paint-order: stroke;
  stroke: #000;
  stroke-width: 2.5px;
  stroke-opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

/* ---------- markers ---------- */
.marker { pointer-events: none; }
.marker-bg {
  fill: #1a1612;
  stroke: var(--border);
  stroke-width: 2;
  opacity: 0.92;
}
.marker-icon { filter: brightness(1.1); }

/* ---------- landmarks ---------- */
.landmark { pointer-events: none; }
.landmark-bg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); }
.landmark-glyph {
  font-size: 15px;
  font-family: Georgia, serif;
  user-select: none;
}
.landmark.razed { opacity: 0.4; }

/* ---------- banners ---------- */
.banner {
  pointer-events: none;
  /* smooth movement so replay looks animated */
  transition: transform 0.55s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.banner-bg {
  fill: #20180f;
  stroke: var(--accent);
  stroke-width: 2.5;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}
.banner-icon { filter: brightness(1.15); }
.banner-label {
  font-family: Georgia, serif;
  font-size: 12px;
  fill: var(--text);
  paint-order: stroke;
  stroke: #000;
  stroke-width: 3px;
  stroke-opacity: 0.85;
  user-select: none;
}

/* ---------- battles in viewed turn ---------- */
.turn-battle-marker { pointer-events: none; }
.turn-battle-ring {
  fill: rgba(87, 16, 8, 0.92);
  stroke: #ff725d;
  stroke-width: 3;
  filter: drop-shadow(0 0 7px rgba(212, 83, 59, 1));
}
.turn-battle-icon {
  fill: #fff0d2;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 25px;
  font-weight: bold;
  paint-order: stroke;
  stroke: #4b0905;
  stroke-width: 2px;
  user-select: none;
}
.turn-battle-count {
  fill: #fff;
  font-family: Georgia, serif;
  font-size: 11px;
  font-weight: bold;
  paint-order: stroke;
  stroke: #4b0905;
  stroke-width: 4px;
}

/* ---------- random badges ---------- */
.badge { pointer-events: none; }
.badge circle { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)); }
.badge-num {
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: bold;
  user-select: none;
}

/* ---------- faction dim ---------- */
.dimmed { opacity: 0.18; transition: opacity 0.25s ease; }

/* ---------- tooltip ---------- */
.map-tooltip {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 6px 9px;
  font-family: Georgia, serif;
  font-size: 12px;
  color: var(--text);
  max-width: 260px;
  line-height: 1.4;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
}
.map-tooltip b { color: var(--accent); }