.city-page, main:has(#city-view:not([hidden])) {
  max-width: 82rem;
  padding-inline: max(clamp(.75rem, 3vw, 2rem), env(safe-area-inset-left), env(safe-area-inset-right));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.city-shell { color: #f2eadb; }
.city-title { margin: .5rem 0; }
.city-stocks, .city-status { margin: .5rem 0; }
.city-stocks { color: #e2bd70; font-weight: 650; }
.city-content { display: grid; gap: .75rem; }
.city-surface { min-width: 0; }
.city-viewport {
  position: relative;
  height: clamp(18rem, 53svh, 35rem);
  overflow: hidden;
  border: 1px solid #68715a;
  border-radius: .85rem;
  background: radial-gradient(ellipse at 50% 40%, #48533c, #242d24 72%);
  touch-action: none;
  user-select: none;
}
.city-plan { position: absolute; inset: 0; transform-origin: 0 0; }
.city-tile, .city-footprint {
  position: absolute;
  width: 128px;
  height: 64px;
  background: #626d49;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.city-tile { overflow: hidden; transform: translate(-50%, -100%); pointer-events: none; }
.city-tile[data-tint="1"] { background: #66734d; }
.city-tile[data-tint="2"] { background: #596743; }
.city-tile[data-tint="3"] { background: #5e6b46; }
.city-tile.city-path { background: #80694c; }
.city-tile .city-art { left: 64px; top: 64px; }
.city-object {
  position: absolute;
  width: calc(var(--span) * 116px);
  height: calc(var(--span) * 36px + 34px);
  padding: 0;
  border: 0;
  border-radius: .3rem;
  min-height: 68px;
  background: transparent;
  transform: translate(-50%, -100%);
  overflow: visible;
}
.city-tree { pointer-events: none; }
.city-footprint {
  width: calc(var(--span) * 128px);
  height: calc(var(--span) * 64px);
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: #3c4833;
  pointer-events: none;
}
.city-object[aria-pressed="true"] .city-footprint { background: #e2bd70; }
.city-object:focus-visible { outline-offset: 4px; }
.city-art { position: absolute; left: 50%; bottom: 0; pointer-events: none; }
.city-art img { position: absolute; max-width: none; }
.city-object .city-art::before, .city-object .city-art::after {
  content: "";
  position: absolute;
  transform: translateX(-50%);
}
.city-object .city-art::before {
  bottom: 16px;
  width: 76px;
  height: 58px;
  background: linear-gradient(108deg, #b2a084 49%, #7d6d57 50%);
  clip-path: polygon(0 36%, 53% 3%, 100% 38%, 100% 67%, 52% 100%, 0 69%);
}
.city-object .city-art::after {
  bottom: 42px;
  width: 79px;
  height: 46px;
  background: linear-gradient(115deg, #a86049 49%, #733d30 50%);
  clip-path: polygon(0 61%, 48% 0, 100% 60%, 54% 100%);
}
.city-keep .city-art::before {
  bottom: 36px;
  width: 152px;
  height: 105px;
  background: linear-gradient(115deg, #b8ab92 49%, #847b6c 50%);
  clip-path: polygon(0 30%, 12% 22%, 12% 8%, 23% 8%, 23% 23%, 41% 14%, 41% 0, 59% 0, 59% 14%, 76% 23%, 76% 8%, 88% 8%, 88% 23%, 100% 32%, 100% 61%, 51% 100%, 0 65%);
}
.city-keep .city-art::after {
  bottom: 67px;
  width: 35px;
  height: 59px;
  background: #874d3b;
  clip-path: polygon(0 0, 100% 15%, 100% 65%, 50% 100%, 0 79%);
}
.city-workshop .city-art::after {
  background: linear-gradient(108deg, #99724e 50%, #493a30 50%);
  clip-path: polygon(0 61%, 48% 20%, 61% 30%, 61% 0, 77% 0, 77% 44%, 100% 60%, 54% 100%);
}
.city-tree .city-art::before {
  bottom: 16px;
  width: 12px;
  height: 39px;
  background: #514233;
  clip-path: none;
}
.city-tree .city-art::after {
  bottom: 29px;
  width: 59px;
  height: 82px;
  background: linear-gradient(108deg, #657d4f 48%, #394f36 50%);
  clip-path: polygon(50% 0, 84% 45%, 75% 45%, 100% 79%, 51% 100%, 0 79%, 25% 45%, 16% 45%);
}
.city-object[data-level="2"] .city-art::after { background: #b36b46; width: 92px; }
.city-object.city-empty .city-art, .city-slot .city-art,
.city-object .city-art:has(img:not([hidden]))::before,
.city-object .city-art:has(img:not([hidden]))::after { display: none; }
.city-object.city-building-work:not([aria-pressed="true"]) .city-footprint { background: #c39960; }
.city-map-label {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  border-radius: .35rem;
  background: #202821;
  color: #f2eadb;
  padding: .18rem .45rem;
  font-size: 1.2rem;
  white-space: nowrap;
  pointer-events: none;
}
.city-map-label:empty { display: none; }
.city-tools { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.city-tools button, .city-sheet-header button { min-width: 44px; }
.city-sheet, .city-list {
  padding: .75rem;
  border: 1px solid #68715a;
  border-radius: .65rem;
  background: #202821;
  overflow-wrap: anywhere;
}
.city-list { display: grid; gap: .4rem; margin-bottom: .5rem; }
.city-sheet-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.city-sheet h3, .city-sheet p { margin: .35rem 0; }
.city-primary { margin-top: .4rem; }
.city-primary[aria-disabled="true"] { opacity: .65; cursor: default; }
.city-sr { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
@media (min-width: 52rem) {
  .city-content { grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); }
}