/* One measured caption block per city; no city-specific absolute offsets. */
#region-section .map-city { pointer-events:none; z-index:3; }
#region-section .city-visual, #region-section .city-pin-name { pointer-events:auto; }
#region-section .city-visual { position:absolute; top:0; left:50%; transform:translateX(-50%); }
#region-section .edge-land { z-index:20; }
#region-section .city-income { z-index:9; }
.city-caption { position:absolute; width:260px; height:220px; transform:translate(-50%,-50%); pointer-events:none; z-index:8; }
.city-caption .city-pin-name { pointer-events:auto; }
.city-caption[data-selected='true'] .city-pin-name { background:var(--color-accent); }
#map-stage #region-section .city-pin-name {
  position:absolute; left:calc(50% + var(--tag-x,0px)); top:calc(50% + var(--tag-y,100px));
  transform:translate(-50%,-50%); width:calc(132px / var(--map-scale)); max-width:none;
  height:calc(26px / var(--map-scale)); box-sizing:border-box; margin:0;
  padding:0 calc(6px / var(--map-scale)); gap:calc(4px / var(--map-scale));
  font-size:calc(11px / var(--map-scale)); justify-content:center;
}
#map-stage #region-section .city-pin-status { display:none; }
#map-stage #region-section .city-production {
  left:calc(50% + var(--tag-x,0px) - 52px / var(--map-scale)); top:calc(50% + var(--tag-row-y,130px)) !important;
  transform:translate(-50%,-50%); width:calc(28px / var(--map-scale)); min-height:calc(28px / var(--map-scale)); height:calc(28px / var(--map-scale)); padding:0; box-sizing:border-box;
}
#map-stage #region-section .city-production > span { display:none; }
#map-stage #region-section .city-income {
  transform:translate(-50%,-50%); width:calc(100px / var(--map-scale)); min-width:0;
  min-height:calc(30px / var(--map-scale)); height:calc(30px / var(--map-scale));
  box-sizing:border-box; padding:0 calc(5px / var(--map-scale)); font-size:calc(10px / var(--map-scale));
}
#map-stage:not([data-detail='full']) #region-section .city-pin-name { width:calc(86px / var(--map-scale)); font-size:calc(10px / var(--map-scale)); }
#map-stage:not([data-detail='full']) #region-section .city-level,
#map-stage:not([data-detail='full']) #region-section .city-production { display:none; }
#region-section .caption-hidden .city-pin-name, #region-section .caption-hidden .city-production,
#region-section .city-income.caption-hidden { visibility:hidden; pointer-events:none; }
#map-caption-leaders { fill:none; stroke:var(--color-green); opacity:.45; stroke-width:1.5; pointer-events:none; }
.map-viewport.dragging .town-diorama * { animation-play-state:paused !important; }
.map-viewport.dragging .map-stage { will-change:transform; }

/* Income stays legible in screen pixels at every zoom level. */
#map-stage #region-section .city-production { display:none; }
#map-stage[data-detail] #region-section .city-income {
  display:flex; align-items:center; justify-content:center; gap:calc(6px / var(--map-scale));
  width:calc(132px / var(--map-scale)); height:calc(44px / var(--map-scale));
  min-height:calc(44px / var(--map-scale)); font-size:calc(13px / var(--map-scale));
  transform:translate(-50%,-50%); border-radius:calc(22px / var(--map-scale));
  border:calc(2px / var(--map-scale)) solid #fff4ca;
  box-shadow:0 calc(3px / var(--map-scale)) 0 #b97919;
}
#map-stage[data-detail] #region-section .city-income[hidden] { display:none; }
#map-stage[data-detail] #region-section .city-income::before {
  content:'●'; display:grid; place-items:center; width:calc(24px / var(--map-scale));
  height:calc(24px / var(--map-scale)); border-radius:50%; flex-shrink:0;
  background:#ffdb50; color:#b76c08; border:calc(2px / var(--map-scale)) solid #e99d12;
}
#map-stage[data-detail] #region-section .city-income:disabled { box-shadow:none; }
#map-stage[data-detail] #region-section .city-income:active:not(:disabled) { transform:translate(-50%,-48%); }

/* A quiet place label below the town, separate from the collection action. */
#map-stage[data-detail] #region-section .city-caption .city-pin-name {
  width:calc(132px / var(--map-scale)); height:calc(28px / var(--map-scale));
  min-height:0; background:var(--color-paper); color:var(--color-green);
  border:0; border-radius:calc(5px / var(--map-scale)); box-shadow:none;
  font-size:calc(11px / var(--map-scale));
}
#map-stage[data-detail] #region-section .city-caption .city-pin-name:hover,
#map-stage[data-detail] #region-section .city-caption .city-pin-name:focus-visible { background:var(--color-mint); }
#map-stage[data-detail] #region-section .city-caption .city-level { background:transparent; color:var(--color-muted); }
#map-caption-leaders { opacity:.22; stroke-dasharray:3 4; }