.map-page {

  display: grid;

  gap: 1rem;

}

.map-hero-copy h1 {

  margin-bottom: .35rem;

}

.map-city-list {

  list-style: none; margin: 0; padding: 1rem 1.2rem;

  display: flex; flex-wrap: wrap; gap: .6rem 1.2rem;

}

.map-landmarks { margin-top: 1rem; }

.map-landmarks h2 {

  font-family: var(--font-display, Cinzel, serif);

  font-size: 1.05rem;

  margin: 0 0 .75rem;

  color: var(--gold, #c4a574);

}

.map-landmark-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));

  gap: .55rem 1.25rem;

}

.map-landmark-list li {

  display: flex;

  flex-direction: column;

  gap: .15rem;

  font-size: .9rem;

}

.map-landmark-list strong {

  font-family: var(--font-display, Cinzel, serif);

  font-weight: 600;

  letter-spacing: .03em;

}

.map-landmark-list a {

  color: inherit;

  text-decoration: none;

}

.map-landmark-list a:hover { color: var(--gold, #c4a574); }

.map-landmark-play {

  font-size: .78rem;

  color: var(--gold, #c4a574);

  opacity: .85;

}

.map-landmark-play:hover { opacity: 1; }

.map-city-list li {

  display: inline-flex; align-items: center; gap: .35rem;

}

.map-city-list a {

  display: inline-flex; align-items: center; gap: .45rem; color: var(--ink);

}

.map-city-list a.is-current {

  color: var(--gold);

  font-weight: 600;

}

.map-back {

  margin: .35rem 0 0;

}

.map-back a {

  color: var(--gold, #c4a574);

  text-decoration: none;

}

.map-back a:hover { text-decoration: underline; }

.map-landmarks-sub { margin-top: 1.15rem; }

.map-place-mark {

  color: var(--gold, #c4a574);

  margin-right: .2rem;

  font-variant-numeric: tabular-nums;

}

.map-city-list i {

  width: 10px; height: 10px; border-radius: 50%; display: inline-block;

}

.map-jump-btn {

  border: 1px solid var(--line);

  background: rgba(0, 0, 0, .25);

  color: var(--gold);

  border-radius: var(--radius);

  width: 1.6rem;

  height: 1.6rem;

  padding: 0;

  cursor: pointer;

  font-size: .75rem;

  line-height: 1;

}

.map-jump-btn:hover {

  border-color: var(--gold);

  background: rgba(212, 176, 106, .12);

}

.map-viewport {

  position: relative;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  overflow: hidden;

  background: #141910;

  box-shadow: var(--shadow);

}

.map-lore {

  margin: .55rem 0 0;

  padding: .55rem .75rem;

  border-left: 3px solid var(--gold);

  background: rgba(0, 0, 0, .18);

  color: #d7d0c2;

  font-size: .9rem;

  line-height: 1.45;

  font-style: italic;

}

.map-toolbar {

  position: absolute;

  top: .65rem;

  right: .65rem;

  z-index: 5;

  display: flex;

  align-items: center;

  gap: .35rem;

  padding: .35rem .45rem;

  background: rgba(16, 14, 12, .88);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  backdrop-filter: blur(6px);

}

.map-toolbar .btn[disabled] { opacity: .35; pointer-events: none; }

.map-zoom-label {

  min-width: 3.2rem;

  text-align: center;

  font-size: .78rem;

  font-variant-numeric: tabular-nums;

  color: var(--gold);

}

.map-stage {

  position: relative;

  width: 100%;

  height: min(80vh, 880px);

  min-height: 440px;

  overflow: hidden;

  cursor: grab;

  touch-action: none;

  user-select: none;

}

.map-stage.is-dragging { cursor: grabbing; }

.map-stage.is-dragging .map-city { pointer-events: none; }

.map-stage-wide { width: 100%; }

.map-world {

  position: absolute;

  left: 0;

  top: 0;

  width: 1536px;

  height: 1024px;

  max-width: none;

  will-change: transform;

  --map-marker-inv: 1;

}

.map-stage img.map-art {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: fill;

  user-select: none;

  pointer-events: none;

  -webkit-user-drag: none;

  background: #141910;

}

.map-overlay {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

}

/* Nulla méretű horgony: left/top % = pontos várospontra esik */

.map-city {

  position: absolute;

  width: 0;

  height: 0;

  margin: 0;

  padding: 0;

  border: none;

  background: transparent;

  transform: none;

  cursor: pointer;

  text-decoration: none;

  z-index: 2;

  pointer-events: auto;

}

.map-city-pin {

  position: absolute;

  left: 0;

  top: 0;

  width: 14px;

  height: 14px;

  margin: 0;

  border-radius: 50%;

  background: var(--city-color, var(--gold));

  border: 2px solid #1a1612;

  box-shadow:

    0 0 0 2px rgba(212, 176, 106, .45),

    0 2px 8px rgba(0, 0, 0, .55);

  transform: translate(-50%, -50%) scale(var(--map-marker-inv, 1));

  transform-origin: center center;

  transition: box-shadow .15s ease;

}

/* Nagyobb láthatatlan / fél-látható tap cél (44px) */

.map-city::before {

  content: '';

  position: absolute;

  left: 0;

  top: 0;

  width: 44px;

  height: 44px;

  border-radius: 50%;

  transform: translate(-50%, -50%) scale(var(--map-marker-inv, 1));

  transform-origin: center center;

  pointer-events: auto;

}

.map-city::after {

  content: '';

  position: absolute;

  left: 0;

  top: 0;

  width: 28px;

  height: 28px;

  border-radius: 50%;

  border: 1px solid var(--city-color, var(--gold));

  opacity: .35;

  transform: translate(-50%, -50%) scale(var(--map-marker-inv, 1));

  transform-origin: center center;

  animation: map-pin-pulse 2.4s ease-out infinite;

  pointer-events: none;

}

.map-city:hover,

.map-city:focus-visible,

.map-city.is-pulse {

  z-index: 4;

}

.map-city:hover .map-city-pin,

.map-city:focus-visible .map-city-pin,

.map-city.is-pulse .map-city-pin {

  box-shadow:

    0 0 0 3px rgba(212, 176, 106, .7),

    0 3px 12px rgba(0, 0, 0, .65);

  outline: 2px solid rgba(212, 176, 106, .55);

  outline-offset: 2px;

}

.map-city:focus-visible {

  outline: none;

}

.map-city-label {

  position: absolute;

  left: 0;

  top: 0;

  transform: translate(-50%, calc(10px * var(--map-marker-inv, 1))) scale(var(--map-marker-inv, 1));

  transform-origin: top center;

  white-space: nowrap;

  font-family: var(--font-display);

  font-size: .72rem;

  letter-spacing: .03em;

  color: var(--gold);

  background: rgba(16, 14, 12, .92);

  border: 1px solid var(--line);

  padding: .15rem .45rem;

  border-radius: var(--radius);

  pointer-events: none;

  opacity: .92;

  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);

}

.map-city:hover .map-city-label,

.map-city:focus-visible .map-city-label,

.map-city.is-pulse .map-city-label {

  opacity: 1;

  border-color: var(--gold);

}

@keyframes map-pin-pulse {

  0% { transform: translate(-50%, -50%) scale(calc(var(--map-marker-inv, 1) * .55)); opacity: .5; }

  70% { transform: translate(-50%, -50%) scale(calc(var(--map-marker-inv, 1) * 1.35)); opacity: 0; }

  100% { transform: translate(-50%, -50%) scale(calc(var(--map-marker-inv, 1) * 1.35)); opacity: 0; }

}



.map-panel {

  background: linear-gradient(180deg, rgba(26, 35, 48, 0.96), rgba(14, 18, 24, 0.98));

  border: 1px solid var(--line-strong, var(--line));

  border-radius: var(--radius);

  box-shadow:

    var(--shadow),

    inset 0 0 0 1px rgba(180, 150, 100, 0.06),

    inset 0 0 40px rgba(0, 0, 0, 0.18);

  padding: 1.1rem 1.15rem 1.25rem;

  display: flex;

  flex-direction: column;

  gap: .85rem;

  min-height: 420px;

  animation: slideIn .4s ease both;

  /* Keret: app.css .map-panel::before / ::after */

}

.map-panel-empty {

  color: var(--muted);

  display: grid;

  place-content: center;

  text-align: center;

  gap: .6rem;

  min-height: 360px;

}

.map-panel-empty strong {

  font-family: var(--font-display);

  color: var(--gold);

  font-size: 1.15rem;

}

.map-motif {

  display: inline-flex;

  align-items: center;

  gap: .4rem;

  font-size: .78rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--city-color, var(--copper));

}

.map-panel h2 {

  margin: 0;

  font-size: 1.45rem;

  line-height: 1.15;

}

.map-epithet {

  margin: 0;

  color: var(--muted);

  font-style: italic;

}

.map-meta {

  display: grid;

  gap: .35rem;

  font-size: .92rem;

  padding: .7rem .8rem;

  background: rgba(0,0,0,.22);

  border: 1px solid rgba(255,255,255,.05);

  border-radius: var(--radius);

}

.map-meta span { color: var(--muted); }

.map-section h3 {

  margin: 0 0 .4rem;

  font-size: .95rem;

  color: var(--gold);

}

.map-section p { margin: 0; color: #d7d0c2; }

.trade-cols {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: .6rem;

}

.trade-cols ul {

  margin: 0;

  padding-left: 1.1rem;

  color: #cfc7b8;

  font-size: .9rem;

}

.district-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: .45rem;

}

.district-list a {

  display: block;

  padding: .55rem .7rem;

  border: 1px solid rgba(255,255,255,.06);

  background: rgba(0,0,0,.18);

  border-radius: var(--radius);

  color: inherit;

  transition: border-color .2s, transform .2s;

}

.district-list a:hover {

  border-color: var(--gold);

  transform: translateX(3px);

  color: inherit;

}

.district-list strong { color: var(--gold); display: block; }

.district-list span { color: var(--muted); font-size: .86rem; }

.map-legend {

  display: flex;

  flex-wrap: wrap;

  gap: .55rem .9rem;

  margin-top: .25rem;

}

.map-legend button {

  display: inline-flex;

  align-items: center;

  gap: .45rem;

  background: transparent;

  border: 1px solid var(--line);

  color: var(--ink);

  border-radius: var(--radius);

  padding: .3rem .65rem;

  cursor: pointer;

  font: inherit;

  font-size: .85rem;

}

.map-legend button i {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: var(--city-color);

  display: inline-block;

}

.map-legend button.is-active,

.map-legend button:hover {

  border-color: var(--gold);

  color: var(--gold);

}

.map-actions {

  display: flex;

  flex-wrap: wrap;

  gap: .5rem;

  margin-top: auto;

}



@media (max-width: 960px) {

  .map-stage { height: min(72vh, 640px); min-height: 360px; }

  .map-world { width: 2200px; }

  .map-panel { min-height: 0; }

  .map-city-label { font-size: .65rem; }

  .trade-cols { grid-template-columns: 1fr; }

}



@media (max-width: 430px) {

  .map-stage {

    height: min(62dvh, 480px);

    min-height: 280px;

  }

  .map-city::before {

    width: 48px;

    height: 48px;

  }

  .map-city-label {

    font-size: .72rem;

  }

}