/* City decoration stays transparent to input so it cannot cover building controls. */
.fortifications{position:absolute;inset:0;display:block;pointer-events:none;user-select:none}
.fortifications img{position:absolute;display:block;max-width:none;pointer-events:none;user-select:none;object-fit:fill}
.fortifications img:not([data-fortification-ready]){visibility:hidden}
.fortification-wall-back{clip-path:inset(0 0 48% 0)}
.fortification-wall-front{clip-path:inset(52% 0 0 0)}
.fortifications .is-damaged{filter:grayscale(.65) brightness(.74);opacity:.72}

/* The wall surrounds the whole board. The artwork's northern and southern
   footings sit at about 19% and 85.5% of its height. Expand their 66.5% span
   by the city's southern margin, anchored at the northern footing: moving
   the entire ring south would put its rear wall through the castle/quarry. */
.fortifications-city .fortification-wall{--wall-height-extra:calc(var(--city-wall-offset-y,0px)/.665);left:24px;top:calc(-22px - var(--wall-height-extra)*.19);width:1512px;height:calc(1160px + var(--wall-height-extra))}
.fortifications-city .fortification-wall-back{z-index:1}
.fortifications-city .fortification-wall-front{z-index:96}
.fortifications-city .fortification-tower{width:200px;height:200px;transform:translate(-50%,-100%);z-index:94}
/* Grow upward from the existing footing; terrain, width and input stay fixed. */
.progression-mode .fortifications-city .fortification-tower{height:320px}
.fortifications-city .fortification-tower-1{left:180px;top:580px}
.fortifications-city .fortification-tower-2{left:1370px;top:650px}

/* Watchtower foundations keep their fixed board coordinates. The Stable has a
   compact foundation alongside the military buildings in the wider terrain. */
#city-foundation-ground{display:none}
.progression-mode #city-foundation-ground{
  display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    url('./art-web/city-tower-foundation-v1-74c1e7abea.webp') 65px 509.5px/230px auto no-repeat,
    url('./art-web/city-tower-foundation-v1-74c1e7abea.webp') 1255px 579.5px/230px auto no-repeat;
}

/* A fixed curve joins the existing road around the farm, then blends into
   the straight approach. The southern margin reveals more of the strip, keeping
   the cobbles and junction fixed. Decoration never takes input or covers UI. */
.progression-mode #kingdom-terrain::after{
  content:'';position:absolute;left:380px;top:390px;width:420px;height:315px;
  z-index:0;pointer-events:none;
  background:url('./art-web/city-gate-inner-road-v2-ef4186c8d8.webp') 0 0/420px 315px no-repeat;
  mask-image:linear-gradient(#000 calc(100% - 24px),transparent);
}
.progression-mode #kingdom-plane::after{
  content:'';position:absolute;left:620px;top:875px;width:320px;
  height:calc(300px + var(--city-wall-offset-y,0px));
  z-index:0;pointer-events:none;
  background:url('./art-web/city-gate-straight-road-v2-eef61a79af.webp') 0 0/320px 480px no-repeat;
  mask-image:linear-gradient(transparent,#000 40px);
  /* Repeat the prepared paving at its original scale across the new district. */
  background-repeat:repeat-y;
}

/* World defenses belong to their castle button, including art beyond its anchor box. */
.map-piece.castle .world-castle-sprite,
.map-piece.castle .fortifications-world img{pointer-events:auto}
.fortifications-world .fortification-wall{left:50%;bottom:-18px;width:420px;height:270px;transform:translateX(-50%)}
.fortifications-world .fortification-wall-back{z-index:0}
.fortifications-world .fortification-wall-front{z-index:3}
.fortifications-world .fortification-tower{width:130px;height:130px;bottom:40px;transform:translateX(-50%);z-index:2}
.fortifications-world .fortification-tower-1{left:38px}
.fortifications-world .fortification-tower-2{left:calc(100% - 38px)}
.map-piece.castle:has(.fortifications-world) .world-castle-sprite{z-index:1}
.map-piece.castle:has(.fortifications-world)>.piece-emblem,
.map-piece.castle:has(.fortifications-world)>.piece-label,
.map-piece.castle:has(.fortifications-world)>.castle-owner-name{z-index:4}
.overview .fortifications-world .fortification-wall{width:370px;height:238px;bottom:-18px}
.overview .fortifications-world .fortification-tower{width:110px;height:110px;bottom:32px}
.overview .fortifications-world .fortification-tower-1{left:45px}
.overview .fortifications-world .fortification-tower-2{left:calc(100% - 45px)}
#map-viewport.map-moving .fortifications .is-damaged{filter:none}