/* Full-screen, image-aligned world map. */
#worldMapOverlay { padding: 0; align-items: stretch; justify-content: stretch; pointer-events: auto; }
#worldMapContent { width: 100%; max-width: none; height: 100%; pointer-events: auto; }
.worldmap-window {
  display: flex; flex-direction: column; width: 100%; max-width: none;
  height: 100%; max-height: none; min-height: 0; padding: 0;
  border: 0; border-radius: 0; overflow: hidden;
}
.worldmap-window .worldmap-hero { flex: 0 0 auto; border-radius: 0; margin: 0; }
.worldmap-window .worldmap-body { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; }
.worldmap-window .worldmap-stage {
  position: relative; display: block; flex: 1 1 auto; width: 100%; min-height: 0;
  padding: 0; overflow: hidden; border: 0; border-radius: 0; touch-action: none; cursor: grab;
  background: radial-gradient(ellipse at center, #67533b 0%, #3a2d20 70%, #251c15 100%);
  box-shadow: none;
  user-select: none;
}
.worldmap-window .worldmap-stage.is-panning { cursor: grabbing; }
.worldmap-window :is(.worldmap-legend, .worldmap-world-info) {
  position: absolute;
  left: 12px;
  z-index: 2900;
  box-sizing: border-box;
  border: 1px solid var(--mg-bronze);
  border-radius: 5px;
  background: var(--mg-surface-window);
  color: var(--mg-text-main);
  box-shadow: 0 5px 16px var(--mg-shadow-deep);
}
.worldmap-window :is(.worldmap-legend, .worldmap-world-info) > .mg-frame-art {
  --mg-frame-corner-size: 15px;
  --mg-frame-edge-size: 4px;
}
.worldmap-window .worldmap-legend {
  top: 12px;
  width: 188px;
  max-height: calc(100% - 116px);
  display: flex;
  overflow: hidden;
}
.worldmap-window .worldmap-legend-list {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 0;
  overflow: auto;
  padding: 13px 14px;
  scrollbar-width: thin;
}
.worldmap-window .worldmap-legend-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 25px;
  font: 12px/1.15 Georgia, serif;
  white-space: nowrap;
}
.worldmap-window .worldmap-legend-icon {
  display: inline-flex;
  flex: 0 0 24px;
  width: 24px;
  height: 23px;
  align-items: center;
  justify-content: center;
  color: var(--mg-parchment);
}
.worldmap-window .worldmap-legend-icon img { width: 23px; height: 23px; object-fit: contain; }
.worldmap-window .worldmap-legend-route { width: 23px; border-top: 2px dashed #dfbd86; }
.worldmap-window .worldmap-legend-event {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #eab05e;
  color: #241710;
  font: bold 14px/1 Georgia, serif;
}
.worldmap-window .worldmap-legend-project { color: #e3bc71; font-size: 20px; }
.worldmap-window .worldmap-legend-clear { color: #b6bdba; font-size: 18px; }
.worldmap-window .worldmap-world-info {
  bottom: 12px;
  width: min(278px, calc(100% - 24px));
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  pointer-events: none;
}
.worldmap-window .worldmap-world-info-season {
  display: flex;
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mg-bronze);
  border-radius: 50%;
}
.worldmap-window .worldmap-world-info-season img { width: 31px; height: 31px; object-fit: contain; }
.worldmap-window .worldmap-world-info-copy { display: grid; gap: 3px; min-width: 0; }
.worldmap-window .worldmap-world-info-copy strong {
  color: var(--mg-parchment);
  font: 600 13px/1.15 var(--font-accent);
}
.worldmap-window .worldmap-world-info-weather {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--mg-text-main);
  font: 11px/1.2 Georgia, serif;
}
.worldmap-window .worldmap-world-info-weather img { width: 17px; height: 17px; object-fit: contain; }
.worldmap-window .worldmap-world-info-weather img[hidden] { display: none; }
.worldmap-window .worldmap {
  position: absolute; left: 0; top: 0; width: 900px; min-width: 900px;
  max-width: 900px; height: 506.25px; min-height: 506.25px; max-height: 506.25px;
  transform-origin: 0 0;
  background: url("/assets/ui/worldmap.jpg") center / 100% 100% no-repeat !important;
  background-color: #14130b !important;
  border: 0; border-radius: 0;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
}
.worldmap-window .worldmap > .mg-frame-art {
  --mg-frame-corner-size: 18px;
  --mg-frame-edge-size: 5px;
  /* Keep the frame above the map image, but behind weather sprites (z: 26). */
  z-index: 25;
  border-radius: 0;
}
.worldmap-window .worldmap.is-zooming { transition: transform 150ms ease-out; }
.worldmap-window .map-icon { width: 44px; height: 44px; }
.worldmap-window .map-label {
  top: calc(100% - 2px);
  padding: 5px 7px;
  border: 0;
  border-radius: 0;
  background: url('/assets/ui/mapicons/cityname_paper.png?v=2') center / 100% 100% no-repeat;
  color: var(--mg-ink);
  font: 600 9px/1.1 var(--font-accent);
  text-shadow: none;
  backdrop-filter: none;
  box-shadow: none;
}
.worldmap-window .map-node.current .map-label { color: #3a2816; text-shadow: none; }
.worldmap-window .map-node:hover .map-icon {
  transform: none;
  filter: brightness(1.08) drop-shadow(0 0 2px var(--mg-glow-amber));
}
.worldmap-window .map-node.current:hover .map-icon { transform: scale(1.22); }
.worldmap-window .worldmap-spline-dot {
  position: absolute;
  z-index: 2700;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border: 1px solid #f5d99a;
  border-radius: 50%;
  background: #69432a;
  box-shadow: 0 0 0 1px rgba(30, 20, 13, .85);
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
}
.worldmap-window .worldmap-spline-dot:hover { background: #c9954f; }
.worldmap-window .worldmap-spline-dot:active { cursor: grabbing; }
.worldmap-window .worldmap-spline-dot-delete {
  position: absolute;
  top: -11px;
  right: -12px;
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid #ac8555;
  border-radius: 50%;
  background: #32251b;
  color: #f5d99a;
  font: 10px/9px Arial, sans-serif;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.worldmap-window .worldmap-spline-dot:is(:hover, :focus-within) .worldmap-spline-dot-delete {
  opacity: 1;
  pointer-events: auto;
}
.worldmap-window .worldmap-spline-dot-delete:is(:hover, :active) {
  transform: none;
  background: #68432b;
  box-shadow: none;
}
.worldmap-window .worldmap.is-adding-spline-dots { cursor: crosshair; }
.worldmap-window .worldmap-spline-save-status {
  align-self: center;
  color: var(--mg-parchment);
  font: 11px/1.2 var(--font-accent);
  white-space: nowrap;
}
.worldmap-window .worldmap-spline-network {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.worldmap-window .worldmap-spline-network line {
  stroke: rgba(248, 222, 168, .45);
  stroke-width: .75;
  stroke-dasharray: 2 3;
}
.worldmap-window .map-node:hover .map-label {
  transform: translateX(-50%);
  color: var(--mg-ink);
  background: url('/assets/ui/mapicons/cityname_paper.png?v=2') center / 100% 100% no-repeat;
  border: 0;
  text-shadow: none;
  box-shadow: none;
  filter: brightness(1.08) drop-shadow(0 0 2px var(--mg-glow-amber));
}
.worldmap-window :is(.map-economy-tooltip, .worldmap-activity-popover) {
  display: none !important;
}
#worldMapHoverPortal {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 20px);
}
#worldMapHoverPortal .worldmap-hover-card {
  position: relative;
  display: block !important;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  width: 300px;
  min-width: 0;
  max-width: calc(100vw - 20px);
  max-height: min(380px, calc(100vh - 40px));
  overflow: hidden;
  transform: none;
  padding: 0;
  box-sizing: border-box;
  pointer-events: none;
  font-size: 12px;
  white-space: normal;
}
#worldMapHoverPortal .worldmap-hover-card > .mg-frame-art {
  --mg-frame-corner-size: 16px;
  --mg-frame-edge-size: 4px;
}
#worldMapHoverPortal .worldmap-hover-content {
  position: relative;
  z-index: 1;
  padding: 16px 19px;
  overflow: auto;
  box-sizing: border-box;
}
#worldMapHoverPortal :is(.map-economy-title, .worldmap-hover-content > strong) {
  display: block;
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--mg-border-muted);
  color: var(--mg-parchment);
  font: 600 15px/1.2 var(--font-accent);
}
#worldMapHoverPortal .worldmap-hover-content > :is(span, small) {
  display: block;
  margin-top: 5px;
  color: var(--mg-text-muted);
  font-size: 12px;
}
.worldmap-window .worldmap-event-marker-pulse {
  animation: worldmapEventHalo 2.4s ease-in-out infinite;
  transform: none;
}
.worldmap-window .worldmap-event-marker {
  width: 24px;
  height: 24px;
}
.worldmap-window .worldmap-event-marker-core {
  inset: 4px;
  font-size: 10px;
  box-shadow: 0 0 6px rgba(211, 162, 98, .36);
}
@keyframes worldmapEventHalo {
  0%, 100% { opacity: .4; }
  50% { opacity: .16; }
}
.worldmap-window .worldmap-community-project-marker.is-flea-market .worldmap-event-marker-core {
  inset: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.worldmap-window .worldmap-community-project-marker.is-flea-market .worldmap-event-marker-core img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px var(--mg-shadow-deep));
}
.worldmap-window :is(.map-economy-tooltip, .worldmap-activity-popover) {
  border: 2px solid var(--mg-bronze);
  border-radius: 5px;
  background: var(--mg-surface-window);
  color: var(--mg-text-main);
  box-shadow: inset 0 0 0 1px var(--mg-border-muted), 0 12px 26px var(--mg-shadow-deep);
}
.worldmap-window :is(.map-economy-title, .worldmap-activity-popover strong) {
  color: var(--mg-parchment);
  font-family: Georgia, serif;
  border-bottom: 1px solid var(--mg-border-muted);
  padding-bottom: 4px;
}
.worldmap-window :is(.map-economy-tooltip, .worldmap-activity-popover) :is(span, small) {
  color: var(--mg-text-muted);
}
.worldmap-window :is(.worldmap-weather-marker, .worldmap-offer-marker, .worldmap-event-marker) {
  transform: translate(-50%, -50%);
  transition: filter 140ms ease-out, opacity 140ms ease-out;
}
.worldmap-window :is(.worldmap-weather-marker, .worldmap-offer-marker) {
  position: absolute;
  z-index: 235;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  padding: 0;
  appearance: none;
  border: 1px solid var(--mg-bronze);
  border-radius: 50%;
  cursor: pointer;
  opacity: .9;
  box-shadow: 0 1px 3px var(--mg-shadow-deep);
}
.worldmap-window .worldmap-weather-marker {
  background: rgba(23, 37, 43, .82);
  color: #e3f0f5;
}
.worldmap-window .worldmap-offer-marker {
  background: rgba(38, 30, 19, .88);
  color: var(--mg-parchment);
}
.worldmap-window :is(.worldmap-weather-marker-core, .worldmap-offer-marker-core) {
  position: absolute;
  inset: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
}
.worldmap-window .worldmap-weather-marker-core {
  background: rgba(48, 75, 89, .7);
}
.worldmap-window .worldmap-offer-marker-core {
  background: var(--mg-surface-recessed);
  font: 600 8px/1 var(--font-accent);
}
.worldmap-window .worldmap-weather-marker-core img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.worldmap-window .worldmap-weather-marker.weather-heat .worldmap-weather-marker-core {
  background: rgba(156, 104, 48, .72);
}
.worldmap-window .worldmap-weather-sprite {
  position: absolute;
  z-index: 26;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.worldmap-window .worldmap-weather-sprite img {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}
.worldmap-window .worldmap-weather-effect {
  position: absolute;
  left: 8px;
  top: 25px;
  width: 22px;
  height: 16px;
  pointer-events: none;
}
.worldmap-window .worldmap-weather-effect :is(i) {
  position: absolute;
  display: block;
  opacity: 0;
}
.worldmap-window :is(.worldmap-weather-effect-rain, .worldmap-weather-effect-storm) i {
  top: 0;
  width: 2px;
  height: 7px;
  border-radius: 2px;
  background: #93d0ee;
  box-shadow: 0 0 2px #315b71;
  transform: rotate(18deg);
  animation: worldmapLocalRain 950ms linear infinite;
}
.worldmap-window .worldmap-weather-effect i:nth-child(1) { left: 2px; animation-delay: -650ms; }
.worldmap-window .worldmap-weather-effect i:nth-child(2) { left: 10px; animation-delay: -300ms; }
.worldmap-window .worldmap-weather-effect i:nth-child(3) { left: 18px; animation-delay: -800ms; }
.worldmap-window .worldmap-weather-sprite.weather-heavy_rain .worldmap-weather-effect i:nth-child(4) { left: 6px; animation-delay: -120ms; }
.worldmap-window .worldmap-weather-sprite.weather-heavy_rain .worldmap-weather-effect i:nth-child(5) { left: 15px; animation-delay: -480ms; }
.worldmap-window .worldmap-weather-sprite.weather-heavy_rain .worldmap-weather-effect i {
  animation-duration: 1200ms;
}
.worldmap-window .worldmap-weather-effect-storm::after {
  content: '';
  position: absolute;
  left: 9px;
  top: -2px;
  width: 8px;
  height: 16px;
  background: #f7d56a;
  clip-path: polygon(55% 0, 10% 55%, 47% 55%, 25% 100%, 95% 42%, 60% 42%, 85% 0);
  filter: drop-shadow(0 0 3px #f7d56a);
  opacity: 0;
  animation: worldmapLocalLightning 4.2s steps(1, end) infinite;
}
.worldmap-window .worldmap-weather-effect-snow i {
  top: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #effaff;
  box-shadow: 0 0 2px #b8e7fa;
  animation: worldmapLocalSnow 2.4s linear infinite;
}
.worldmap-window .worldmap-weather-effect-fog {
  left: -9px;
  top: 7px;
  width: 56px;
  height: 27px;
  background:
    radial-gradient(ellipse at 28% 58%, rgba(224, 233, 224, .42), transparent 55%),
    radial-gradient(ellipse at 66% 38%, rgba(235, 240, 230, .34), transparent 52%),
    radial-gradient(ellipse at 76% 72%, rgba(219, 230, 222, .28), transparent 44%);
  filter: blur(1.4px);
  opacity: .8;
  animation: worldmapLocalFog 14s ease-in-out infinite alternate;
}
.worldmap-window .worldmap-weather-effect-fog::before {
  content: '';
  position: absolute;
  inset: 2px -3px -3px 4px;
  background:
    radial-gradient(ellipse at 38% 36%, rgba(235, 242, 233, .32), transparent 49%),
    radial-gradient(ellipse at 69% 64%, rgba(228, 239, 231, .3), transparent 53%);
  animation: worldmapLocalFog 19s ease-in-out -7s infinite alternate-reverse;
}
@keyframes worldmapLocalRain {
  0% { opacity: 0; translate: 0 -2px; }
  18% { opacity: .95; }
  85% { opacity: .8; }
  100% { opacity: 0; translate: -3px 10px; }
}
@keyframes worldmapLocalSnow {
  0% { opacity: 0; translate: 0 -2px; }
  20% { opacity: 1; }
  80% { opacity: .9; }
  100% { opacity: 0; translate: 4px 11px; }
}
@keyframes worldmapLocalLightning {
  0%, 38%, 41%, 44%, 100% { opacity: 0; }
  39%, 42% { opacity: 1; }
}
@keyframes worldmapLocalFog {
  from { opacity: .65; transform: translate(-1px, 1px) scale(1, .96); }
  to { opacity: .9; transform: translate(1px, -1px) scale(1.06, 1.04); }
}
.worldmap-window :is(.worldmap-weather-marker, .worldmap-offer-marker, .worldmap-event-marker):is(:hover, :focus-visible, :active) {
  transform: translate(-50%, -50%);
  filter: brightness(1.08) drop-shadow(0 0 2px var(--mg-glow-amber));
  outline: none;
}
.worldmap-window :is(.worldmap-weather-marker, .worldmap-offer-marker):is(:hover, :focus-visible, :active) {
  opacity: 1;
  box-shadow: 0 1px 3px var(--mg-shadow-deep);
}
.worldmap-window .worldmap-event-marker:is(:hover, :focus-visible, :active) {
  background: transparent;
  box-shadow: none;
}
.worldmap-window :is(.worldmap-weather-marker, .worldmap-offer-marker, .worldmap-event-marker):focus-visible {
  outline: 1px solid var(--mg-bronze);
  outline-offset: 2px;
}
.worldmap-window :is(.worldmap-event-marker, .worldmap-offer-marker):focus-visible .worldmap-activity-popover {
  display: block;
}
.worldmap-window :is(.worldmap-stage-toolbar, .worldmap-activity-menu-toggle, .worldmap-zoom-controls) {
  border: 1px solid var(--mg-bronze);
  background: var(--mg-surface-chrome);
  box-shadow: inset 0 0 0 1px var(--mg-border-muted), 0 5px 14px var(--mg-shadow-deep);
  backdrop-filter: none;
}
.worldmap-window :is(.worldmap-layer-btn, .worldmap-activity-menu-toggle, .worldmap-zoom-controls button) {
  color: var(--mg-text-main);
  transition: color 120ms ease-out, filter 120ms ease-out, border-color 120ms ease-out;
}
.worldmap-window :is(.worldmap-layer-btn, .worldmap-activity-menu-toggle, .worldmap-zoom-controls button):is(:hover, :focus-visible) {
  color: var(--mg-parchment);
  background: var(--mg-image-selection-hover) center / 100% 100% no-repeat, var(--mg-surface-chrome);
  border-color: var(--mg-amber);
  filter: brightness(1.08);
  outline: 1px solid var(--mg-amber);
  outline-offset: 1px;
}
.worldmap-window .worldmap-layer-btn.is-active {
  background: var(--mg-image-selection-selected) center / 100% 100% no-repeat, var(--mg-surface-chrome);
  color: var(--mg-parchment);
}
#worldMapOverlay .worldmap-stage-toolbar {
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#worldMapOverlay .worldmap-layer-btn {
  box-sizing: border-box;
  padding: 7px 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  filter: none;
}
#worldMapOverlay .worldmap-layer-btn::after { content: none; }
#worldMapOverlay .worldmap-layer-btn:is(:hover, :focus-visible) {
  border-color: transparent;
  border-bottom-color: var(--mg-bronze);
  background: rgba(214, 187, 106, .1);
  box-shadow: none;
  transform: none;
  filter: none;
  outline: none;
}
#worldMapOverlay .worldmap-layer-btn.is-active {
  border-bottom-color: var(--mg-amber);
  background: rgba(214, 187, 106, .16);
  color: var(--mg-parchment);
  box-shadow: none;
}
#worldMapOverlay .worldmap-layer-btn:focus-visible {
  outline: 1px solid var(--mg-amber);
  outline-offset: 2px;
}
.worldmap-window .worldmap-activity-menu-panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: min(380px, calc(var(--canvas-visible-height, 100dvh) / var(--ui-user-scale, 1) - 160px));
  overflow: hidden;
  border: 2px solid var(--mg-bronze);
  border-radius: 5px;
  background: var(--mg-surface-window);
  box-shadow: inset 0 0 0 1px var(--mg-border-muted), 0 12px 26px var(--mg-shadow-deep);
}
/* The decorative frame belongs to the stationary shell, never its scroller. */
.worldmap-window .worldmap-activity-menu-head { flex: 0 0 auto; }
.worldmap-window .worldmap-activity-menu-sections {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 6px;
}
#worldMapOverlay :is(.worldmap-node-actions-card, .city-overview-card) {
  border: 2px solid var(--mg-bronze);
  border-radius: 5px;
  background: var(--mg-surface-window);
  box-shadow: inset 0 0 0 1px var(--mg-border-muted), 0 14px 30px var(--mg-shadow-deep);
}
#worldMapOverlay :is(.worldmap-node-action-btn, .city-overview-btn, .worldmap-activity-menu-head button, .worldmap-event-feed-summary) {
  border: 1px solid var(--mg-border-muted);
  border-radius: 4px;
  background: var(--mg-surface-chrome);
  color: var(--mg-text-main);
  transition: border-color 120ms ease-out, color 120ms ease-out, filter 120ms ease-out;
}
#worldMapOverlay :is(.worldmap-node-action-btn, .city-overview-btn, .worldmap-activity-menu-head button, .worldmap-event-feed-summary):is(:hover, :focus-visible) {
  border-color: var(--mg-amber);
  background: var(--mg-image-selection-hover) center / 100% 100% no-repeat, var(--mg-surface-chrome);
  color: var(--mg-parchment);
  filter: brightness(1.08);
  outline: 1px solid var(--mg-amber);
  outline-offset: 1px;
}
#worldMapOverlay .worldmap-event-feed-item.is-expanded .worldmap-event-feed-summary {
  background: var(--mg-image-selection-selected) center / 100% 100% no-repeat, var(--mg-surface-chrome);
}

#worldMapOverlay .worldmap-event-feed-summary .worldmap-event-title {
  color: inherit;
}

#worldMapOverlay .worldmap-event-feed-summary .world-event-scope {
  /* Expanded details overlap the summary's bottom edge by 8px. */
  padding-bottom: 8px;
}

/* City actions use their label width rather than filling the popup. */
#worldMapOverlay .worldmap-node-action-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
#worldMapOverlay .worldmap-node-action-row .worldmap-node-action-btn {
  flex: 0 1 auto;
  width: auto;
  min-width: 92px;
  padding: 8px 14px;
}

/* City overview fills the available screen and scrolls each data block locally. */
#worldMapOverlay > .city-overview-panel {
  position: absolute;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  pointer-events: auto;
  padding: calc(var(--ui-topbar-height, 48px) + 12px) 16px 16px;
  background: rgba(12, 9, 6, .7);
}
#worldMapOverlay .city-overview-card {
  zoom: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  scrollbar-gutter: auto;
}
#worldMapOverlay .city-overview-header {
  position: relative;
  display: grid;
  grid-template-columns: max-content max-content max-content;
  justify-content: start;
  align-items: center;
  gap: 32px;
  flex: 0 0 auto;
  margin: 0;
  padding: 20px 60px 20px 24px;
  border-bottom: 1px solid var(--mg-border-muted);
}
#worldMapOverlay .city-overview-title {
  margin: 0 0 6px;
  color: var(--mg-parchment);
  font: 700 clamp(22px, 2vw, 34px)/1.1 var(--font-accent);
}
#worldMapOverlay .city-overview-meta {
  display: grid;
  gap: 8px;
  margin: 0;
}
#worldMapOverlay .city-overview-meta-row {
  display: grid;
  grid-template-columns: 105px max-content;
  gap: 10px;
}
#worldMapOverlay .city-overview-actions {
  display: flex;
  gap: 8px;
  margin: 0;
}
#worldMapOverlay .city-overview-actions .city-overview-btn {
  width: auto;
  min-width: 94px;
  padding: 9px 15px;
}
#worldMapOverlay .city-overview-close {
  top: 14px;
  right: 14px;
}
#worldMapOverlay .city-overview-content {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(260px, .85fr);
  align-content: start;
  align-items: start;
  gap: 14px;
  flex: 1;
  min-height: 0;
  padding: 16px;
  overflow: auto;
}
#worldMapOverlay .city-overview-side {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 14px;
  min-width: 0;
  min-height: 0;
}
#worldMapOverlay .city-overview-section {
  display: flex;
  flex-direction: column;
  align-self: start;
  min-width: 0;
  min-height: 0;
  max-height: calc(100dvh - var(--ui-topbar-height, 48px) - 190px);
  margin: 0;
  padding: 14px;
  overflow: hidden;
}
#worldMapOverlay .city-overview-section-title { flex: 0 0 auto; }
#worldMapOverlay :is(.city-overview-economy-grid, .city-overview-world-events, .city-overview-routes-grid) {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
@media (max-width: 1100px) {
  #worldMapOverlay .city-overview-header { grid-template-columns: max-content max-content; gap: 12px 24px; }
  #worldMapOverlay .city-overview-actions { grid-column: 1 / -1; }
  #worldMapOverlay .city-overview-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #worldMapOverlay .city-overview-side { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
}
@media (max-width: 700px) {
  #worldMapOverlay > .city-overview-panel { padding: calc(var(--ui-topbar-height, 48px) + 6px) 8px 8px; }
  #worldMapOverlay .city-overview-header { grid-template-columns: 1fr; gap: 10px; padding: 14px 48px 14px 14px; }
  #worldMapOverlay .city-overview-content { grid-template-columns: 1fr; padding: 8px; }
  #worldMapOverlay .city-overview-side { grid-column: auto; grid-template-columns: 1fr; grid-template-rows: none; }
  #worldMapOverlay .city-overview-section { max-height: 55dvh; }
}
#worldMapOverlay .worldmap-zoom-controls {
  position: absolute;
  z-index: 3000;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--mg-bronze);
  border-radius: 6px;
  background: var(--mg-surface-chrome);
  box-shadow: 0 5px 14px var(--mg-shadow-deep);
}
#worldMapOverlay .worldmap-zoom-controls button {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--mg-border-muted);
  border-radius: 4px;
  background: var(--mg-surface-chrome);
  color: var(--mg-text-main);
  box-shadow: none;
  transform: none;
  line-height: 1;
}
#worldMapOverlay .worldmap-zoom-controls button::after { content: none; }
#worldMapOverlay .worldmap-zoom-level {
  display: grid;
  place-items: center;
  min-width: 25px;
  color: var(--mg-parchment);
  font: 600 12px/1 var(--font-accent);
}
#worldMapOverlay .worldmap-zoom-controls button:disabled {
  opacity: .4;
  cursor: default;
}
#worldMapOverlay .worldmap-zoom-controls button svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#worldMapOverlay .worldmap-zoom-controls button:is(:hover, :focus-visible) {
  border-color: var(--mg-amber);
  background: var(--mg-image-selection-hover) center / 100% 100% no-repeat, var(--mg-surface-chrome);
  color: var(--mg-parchment);
  box-shadow: none;
  transform: none;
  outline: none;
}
#worldMapOverlay .worldmap-zoom-controls button:focus-visible {
  outline: 1px solid var(--mg-amber);
  outline-offset: 2px;
}
#worldMapOverlay .worldmap-zoom-controls button:disabled:hover {
  border-color: var(--mg-border-muted);
  background: var(--mg-surface-chrome);
  color: var(--mg-text-main);
  outline: none;
}
@media (min-width: 1280px) and (max-height: 1080px) {
  .worldmap-window { width: 100%; max-height: none; }
}
#worldMapOverlay.hidden .worldmap-route-layer { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .worldmap-window .worldmap-route-layer { animation: none; }
  .worldmap-window :is(.map-icon, .worldmap-weather-marker, .worldmap-offer-marker, .worldmap-event-marker, button) {
    transition: none;
  }
  .worldmap-window .worldmap-weather-effect,
  .worldmap-window .worldmap-weather-effect i,
  .worldmap-window .worldmap-weather-effect::before,
  .worldmap-window .worldmap-weather-effect::after {
    animation: none;
    opacity: 1;
  }
}