/* Trial map only; knowledge panels keep their existing presentation. */
#world { background: none; }
.grass-noise { opacity: .08; }
#mapViewport { background: radial-gradient(ellipse at center, #4e7442, #324f35); }
.map25d .place {
  width: var(--art-width); height: var(--art-height); padding: 0; border: 0;
  background: transparent; font: inherit; color: inherit; overflow: visible;
  transform: translate(calc(-1 * var(--anchor-x)), calc(-1 * var(--anchor-y)));
  filter: none; touch-action: none;
}
.map-sprite { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.map25d .place .name { bottom: -24px; font-size: 13px; max-width: 220px; }
.map25d .place .level { top: -20px; font-size: 12px; }
.sprite-fallback { display: none; position: absolute; inset: 0; pointer-events: none; }
.neutral-place .sprite-fallback, .asset-unavailable .sprite-fallback { display: block; }
.asset-unavailable .map-sprite { visibility: hidden; }
.map25d .neutral-place .building, .map25d .asset-unavailable .building { bottom: 30px; }
.map25d .neutral-place .tile, .map25d .asset-unavailable .tile { bottom: 0; }
.map-greenery { position: absolute; height: auto; transform: translate(-50%, -95%); pointer-events: none; }
.map-reservation, .map-footprint {
  position: absolute; transform: translateX(-50%); pointer-events: none; display: none;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.map-reservation { background: rgba(255, 196, 70, .23); z-index: 0; }
.map-footprint { background: rgba(109, 218, 255, .35); z-index: 1; }
.map-debug .map-reservation, .map-debug .map-footprint { display: block; }
.map-anchor { display: none; position: absolute; left: var(--anchor-x); top: var(--anchor-y); width: 8px; height: 8px; border: 2px solid #ff4963; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.map-debug .map-anchor { display: block; }
.map-district-center { display: none; }
#gridBtn[aria-pressed="true"] { background: #47683d; border-color: #ffc446; }
@media (max-width: 430px) {
  .brand { padding: 7px; }
  .brand h1 { font-size: 12px; }
  .brand p { max-width: 105px; font-size: 10px; }
  .top-actions { gap: 3px; }
  .iconbtn { width: 34px; height: 36px; border-radius: 11px; }
}
@media (max-width: 359px) {
  .brand h1 span { display: none; }
  .iconbtn { width: 31px; }
}

/* One screen-sized layer behind the world; repeats beyond every viewport edge. */
#mapViewport::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; display: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' viewBox='0 0 96 48'%3E%3Cpath d='M0 0L96 48M0 48L96 0' fill='none' stroke='%23ffe39b' stroke-opacity='.65' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: var(--grid-width) var(--grid-height);
  background-position: var(--grid-x) var(--grid-y);
}
#mapViewport.map-grid-visible::before { display: block; }

.map-road { position: absolute; z-index: 3; pointer-events: none; user-select: none; }

#previewBuild { display: block; margin-top: 3px; font-size: 9px; opacity: .75; white-space: nowrap; }