.prototype-note {
  margin: 24px 0 8px;
  color: rgb(233 218 184 / 78%);
  font: 500 12px/1.55 Inter, ui-sans-serif, system-ui, sans-serif;
  text-shadow: 0 2px 8px #000;
}

.prototype-launch {
  padding: 10px 14px;
  border: 1px solid rgb(211 174 105 / 62%);
  border-radius: 3px;
  color: #f0d49a;
  cursor: pointer;
  background: linear-gradient(145deg, rgb(36 29 19 / 82%), rgb(8 9 8 / 88%));
  font: 700 11px/1.3 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .12em;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.prototype-launch:hover {
  transform: translateY(-1px);
  border-color: #f1d398;
  background: rgb(178 138 78 / 22%);
}

.prototype-launch:focus-visible {
  outline: 2px solid #f2d59d;
  outline-offset: 4px;
}

.village-screen[hidden] { display: none; }

.village-screen {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: clip;
  color: #f5eedc;
  background: #12170f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.village-screen::before {
  position: absolute;
  z-index: 0;
  inset: -18px;
  pointer-events: none;
  background: url("./village-terrain.webp") center / cover no-repeat;
  filter: blur(20px) brightness(.3) saturate(.75);
  opacity: .68;
  content: "";
}

.map-canvas {
  position: absolute;
  z-index: 1;
  top: var(--map-center-y, 50%);
  left: var(--map-center-x, 50%);
  width: 1500px;
  height: 843.75px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--map-fit-scale, 1));
  transform-origin: center;
}

.village-terrain {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.map-canvas::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(7 12 9 / 54%) 0%, rgb(8 11 8 / 16%) 16%, transparent 36%, transparent 69%, rgb(8 11 8 / 28%) 100%),
    radial-gradient(ellipse at 50% 48%, transparent 42%, rgb(7 10 8 / 27%) 100%);
  content: "";
}

.map-markers {
  position: absolute;
  z-index: 1;
  inset: 0;
}

.building-marker {
  position: absolute;
  display: grid;
  width: var(--building-width, 140px);
  height: var(--building-height, 94px);
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  touch-action: auto;
  user-select: none;
  transform: translate(-50%, -50%);
  transition: filter 180ms ease, transform 180ms ease;
}

.building-marker[data-building="hall"] { --building-width: 210px; --building-height: 140px; }
.building-marker[data-building="healer"] { --building-width: 154px; --building-height: 105px; }
.building-marker[data-building="mine"] { --building-width: 172px; --building-height: 118px; }
.building-marker[data-building="house"] { --building-width: 154px; --building-height: 126px; }
.building-marker[data-building="warehouse"] { --building-width: 184px; --building-height: 146px; }
.building-marker[data-building="arena"] { --building-width: 190px; --building-height: 148px; }
.building-marker[data-building="hunter"],
.building-marker[data-building="woodcutter"],
.building-marker[data-building="workshop"] { --building-width: 166px; --building-height: 112px; }
.building-marker[data-building="altar"] { --building-width: 132px; --building-height: 126px; }

.building-sprite {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.building-marker .building-sprite {
  filter: drop-shadow(0 5px 5px rgb(0 0 0 / 38%));
  transition: filter 180ms ease;
}

.building-marker:hover,
.building-marker[aria-pressed="true"] {
  z-index: 2;
}

.building-marker:hover .building-sprite {
  filter: drop-shadow(0 5px 5px rgb(0 0 0 / 38%));
}

.building-marker[aria-pressed="true"] .building-sprite {
  filter: drop-shadow(0 5px 5px rgb(0 0 0 / 38%)) drop-shadow(0 0 1.5px rgb(184 133 55 / 88%)) drop-shadow(0 0 5px rgb(184 133 55 / 38%));
}

.building-marker.is-dragging {
  z-index: 5;
  cursor: grabbing;
  filter: drop-shadow(0 8px 10px rgb(0 0 0 / 45%));
  transition: none;
}

.building-marker.is-relocating {
  cursor: grab;
  touch-action: none;
}

.building-marker:focus-visible,
.mobile-building-button:focus-visible,
.return-button:focus-visible,
.panel-close:focus-visible,
.game-action:focus-visible,
.building-design-card:focus-visible {
  outline: 2px solid #f5d996;
  outline-offset: 3px;
}

.village-hud {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  max-width: 1600px;
  margin-inline: auto;
  padding: 11px 15px;
  border: 1px solid rgb(229 211 171 / 25%);
  border-radius: 4px;
  background: linear-gradient(105deg, rgb(13 17 13 / 96%), rgb(20 22 16 / 91%) 58%, rgb(12 15 11 / 95%));
  box-shadow: 0 10px 32px rgb(0 0 0 / 42%), inset 0 1px 0 rgb(255 255 255 / 8%), inset 0 -1px 0 rgb(0 0 0 / 25%);
  backdrop-filter: blur(18px) saturate(1.12);
}

.village-hud-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: max-content;
}

.return-button {
  min-height: 40px;
  padding: 7px 11px;
  border: 1px solid rgb(215 193 149 / 36%);
  border-radius: 3px;
  color: #e8d6ad;
  cursor: pointer;
  background: rgb(255 255 255 / 4%);
  font: 600 12px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
}

.return-button:hover { background: rgb(255 255 255 / 10%); }

.era-heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.era-kicker {
  color: #d2ad70;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .19em;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgb(205 163 94 / 26%);
}

.era-heading strong {
  overflow: hidden;
  color: #fff6e4;
  font: 650 14px/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.village-hud-data {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 11px;
  min-width: 0;
}

.resource-strip {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
}

.resource-chip {
  display: grid;
  min-width: 78px;
  gap: 3px;
  align-content: center;
  padding: 5px 10px;
  border-left: 1px solid rgb(231 215 177 / 16%);
}

.resource-name {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #c6b68f;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .105em;
  text-transform: uppercase;
  white-space: nowrap;
}

.resource-name svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: #d5b16f;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
  filter: drop-shadow(0 0 3px rgb(218 174 101 / 28%));
}

.resource-chip span {
  min-width: 0;
}

.resource-chip strong {
  color: #fff3d7;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .015em;
  line-height: 1.1;
}

.resource-chip small {
  color: #a6b18a;
  font-size: 9px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
}

.village-vitals {
  display: grid;
  grid-template-columns: repeat(2, minmax(105px, 123px));
  align-items: stretch;
  gap: 7px;
  padding-left: 10px;
  border-left: 1px solid rgb(231 215 177 / 20%);
}

.vital-chip {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 6px;
  padding: 6px 8px 7px;
  border: 1px solid rgb(228 211 173 / 14%);
  border-radius: 3px;
  background: linear-gradient(145deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1%));
}

.vital-chip > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
}

.vital-chip span {
  overflow: hidden;
  color: #b9ad91;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .09em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.vital-chip strong {
  color: #f5e6c8;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vital-meter {
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgb(255 255 255 / 12%);
}

.vital-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9d7440, #e0c181);
  box-shadow: 0 0 8px rgb(220 184 118 / 40%);
  transition: width 280ms ease;
}

.vital-chip--morale .vital-meter i {
  background: linear-gradient(90deg, #877748, #d6c17e);
}

.map-instruction {
  position: absolute;
  z-index: 2;
  bottom: 28px;
  left: 22px;
  max-width: min(400px, calc(100vw - 44px));
  margin: 0;
  padding: 10px 13px;
  border: 1px solid rgb(233 219 181 / 26%);
  border-radius: 3px;
  color: #f2e7cd;
  background: rgb(15 18 13 / 78%);
  box-shadow: 0 4px 15px rgb(0 0 0 / 32%);
  font-size: 12px;
  line-height: 1.45;
  backdrop-filter: blur(8px);
}

.building-panel {
  position: absolute;
  z-index: 4;
  top: 118px;
  right: 20px;
  width: min(350px, calc(100vw - 40px));
  max-height: calc(100dvh - 150px);
  overflow: auto;
  padding: 20px;
  border: 1px solid rgb(223 205 166 / 36%);
  border-radius: 5px;
  background: linear-gradient(145deg, rgb(21 24 18 / 96%), rgb(12 14 11 / 95%));
  box-shadow: 0 15px 45px rgb(0 0 0 / 58%), inset 0 1px 0 rgb(255 255 255 / 8%);
  scrollbar-color: rgb(175 137 78 / 55%) transparent;
  backdrop-filter: blur(15px);
}

.building-panel[hidden] { display: none; }

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.panel-kicker {
  color: #cfad72;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.panel-heading h1 {
  margin: 5px 0 0;
  color: #fff1d1;
  font: 600 25px/1.13 Georgia, "Times New Roman", serif;
}

.panel-close {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgb(223 205 166 / 30%);
  border-radius: 3px;
  color: #e8d6ad;
  cursor: pointer;
  background: transparent;
  font-size: 23px;
  line-height: 1;
}

.panel-close:hover { background: rgb(255 255 255 / 8%); }

.building-description {
  margin: 13px 0 17px;
  color: #d7cfb8;
  font-size: 13px;
  line-height: 1.55;
}

.building-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.building-facts > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgb(227 213 176 / 15%);
  border-radius: 3px;
  background: rgb(255 255 255 / 3%);
}

.building-facts span,
.upgrade-cost span {
  color: #bcae8d;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.building-facts strong {
  overflow-wrap: anywhere;
  color: #f5e7c7;
  font-size: 13px;
  font-weight: 650;
}

.building-facts .building-output { grid-column: 1 / -1; }

.upgrade-cost {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
  padding-bottom: 11px;
  border-bottom: 1px solid rgb(227 213 176 / 17%);
}

.upgrade-cost strong {
  color: #ead29b;
  font-size: 11px;
  text-align: right;
}

.action-cost {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: -5px 0 13px;
}

.action-cost span {
  color: #bcae8d;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.action-cost strong {
  color: #d9cdaf;
  font-size: 11px;
  text-align: right;
}

.building-actions { display: grid; gap: 8px; }

.building-design-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.building-design-card {
  display: grid;
  min-width: 0;
  min-height: 48px;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid #64451f;
  border-radius: 4px;
  color: #f6e7c2;
  background: linear-gradient(180deg, #54402a, #302014);
  box-shadow: inset 0 1px 0 rgb(255 230 176 / 13%), 0 1px 2px rgb(0 0 0 / 24%);
  font: 650 11px/1.15 Georgia, "Times New Roman", serif;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.building-design-card svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.building-design-card:hover,
.building-design-card.is-active {
  border-color: #e9c77f;
  background: linear-gradient(180deg, #60492d, #392719);
  box-shadow: inset 0 1px 0 rgb(255 230 176 / 18%), 0 0 0 1px rgb(233 199 127 / 17%);
}

.building-design-card:active { background: linear-gradient(180deg, #46331f, #2b1c11); }

.building-marker .building-sprite,
.mobile-building-button .building-sprite {
  transition: filter 180ms ease, transform 180ms ease;
}

.building-marker.is-mirrored .building-sprite,
.mobile-building-button.is-mirrored .building-sprite {
  transform: scaleX(-1);
}

.game-action {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgb(221 199 153 / 38%);
  border-radius: 3px;
  color: #eadfc6;
  cursor: pointer;
  background: rgb(255 255 255 / 4%);
  font: 650 12px/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, opacity 140ms ease;
}

.game-action:hover:not(:disabled) {
  border-color: #e9c77f;
  background: rgb(205 158 83 / 17%);
}

.game-action--primary {
  border-color: rgb(225 184 111 / 72%);
  color: #fff0cf;
  background: linear-gradient(105deg, rgb(116 82 37 / 66%), rgb(47 40 26 / 68%));
}

.game-action--passive {
  border-color: rgb(149 172 119 / 36%);
  color: #d6e0c5;
  background: linear-gradient(105deg, rgb(70 88 55 / 38%), rgb(36 44 29 / 46%));
  cursor: default;
  opacity: 1;
}

.game-action:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.game-action--passive:disabled {
  cursor: default;
  opacity: 1;
}

.building-feedback {
  min-height: 36px;
  margin: 12px 0 0;
  color: #e4c685;
  font-size: 12px;
  line-height: 1.45;
}

.prototype-disclaimer {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 15px;
  margin: 0;
  color: rgb(244 235 216 / 75%);
  font-size: 10px;
  text-shadow: 0 1px 5px #000;
}

.mobile-building-list { display: none; }

@media (max-width: 1050px) {
  .village-hud { flex-direction: column; align-items: stretch; gap: 8px; }
  .village-hud-data { justify-content: space-between; }
  .resource-strip { justify-content: flex-start; }
  .resource-chip { min-width: 76px; }
  .building-panel { top: 146px; }
}

@media (max-width: 700px) {
  .map-markers { display: block; }
  .village-hud {
    top: 8px;
    right: 8px;
    left: 8px;
    gap: 8px;
    padding: 9px;
  }
  .village-hud-heading { gap: 10px; }
  .return-button { min-height: 38px; padding-inline: 8px; font-size: 11px; }
  .era-kicker { font-size: 8px; }
  .era-heading strong { font-size: 12px; }
  .village-hud-data { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .resource-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .resource-chip { min-width: 0; padding: 4px 6px; }
  .resource-name { gap: 3px; font-size: 8px; letter-spacing: .045em; }
  .resource-name svg { width: 12px; height: 12px; }
  .resource-chip strong { font-size: 13px; }
  .resource-chip small { font-size: 8px; }
  .village-vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-left: 0; border-left: 0; }
  .vital-chip { gap: 5px; padding: 5px 8px 6px; }
  .vital-chip span { font-size: 8px; }
  .vital-chip strong { font-size: 10px; }
  .building-panel {
    top: auto;
    right: 8px;
    bottom: 78px;
    left: 8px;
    width: auto;
    max-height: 42dvh;
    padding: 14px;
  }
  .panel-heading h1 { font-size: 22px; }
  .building-description { margin: 9px 0 12px; font-size: 12px; }
  .mobile-building-list {
    position: absolute;
    z-index: 3;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 68px;
    overflow-x: auto;
    padding: 4px 6px 0;
    background: linear-gradient(180deg, transparent, rgb(10 13 10 / 48%));
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-building-list::-webkit-scrollbar { display: none; }
  .mobile-building-button {
    display: grid;
    width: clamp(40px, calc(12vw - 3px), 56px);
    height: clamp(40px, calc(12vw - 3px), 56px);
    flex: 0 0 clamp(40px, calc(12vw - 3px), 56px);
    place-items: center;
    padding: 2px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    transition: filter 160ms ease;
  }
  .mobile-building-button .building-sprite {
    filter: drop-shadow(0 3px 4px rgb(0 0 0 / 48%));
  }
  .mobile-building-button[aria-pressed="true"] {
    filter: none;
  }
  .mobile-building-button[aria-pressed="true"] .building-sprite {
    filter: drop-shadow(0 3px 4px rgb(0 0 0 / 48%)) drop-shadow(0 0 1.5px rgb(184 133 55 / 88%)) drop-shadow(0 0 5px rgb(184 133 55 / 38%));
  }
  .map-instruction { bottom: 68px; left: 10px; font-size: 11px; }
  .prototype-disclaimer { display: none; }
}

/* Compact touch layouts with safe-area and dynamic-viewport support. */
@media (max-width: 700px) {
  .village-hud {
    top: max(5px, env(safe-area-inset-top));
    right: max(5px, env(safe-area-inset-right));
    left: max(5px, env(safe-area-inset-left));
    gap: 4px;
    padding: 6px;
  }

  .village-hud-heading { gap: 6px; }
  .return-button { min-height: 31px; padding: 5px 7px; font-size: 10px; }
  .era-kicker { font-size: 7px; letter-spacing: .12em; }
  .era-heading strong { font-size: 11px; }
  .village-hud-data { gap: 3px; }
  .resource-strip { gap: 2px; }
  .resource-chip {
    gap: 2px;
    padding: 3px 3px;
    border: 0;
    border-radius: 2px;
    background: rgb(255 255 255 / 3%);
    text-align: center;
  }
  .resource-name { justify-content: center; gap: 2px; font-size: 7px; letter-spacing: .02em; }
  .resource-name svg { width: 10px; height: 10px; }
  .resource-chip strong { font-size: 11px; }
  .resource-chip small { font-size: 7px; }
  .village-vitals { gap: 3px; }
  .vital-chip { gap: 3px; padding: 3px 5px 4px; }
  .vital-chip span { font-size: 7px; letter-spacing: .025em; }
  .vital-chip strong { font-size: 9px; }
  .vital-meter { height: 2px; }

  .building-panel {
    right: max(6px, env(safe-area-inset-right));
    bottom: calc(66px + env(safe-area-inset-bottom));
    left: max(6px, env(safe-area-inset-left));
    max-height: min(44dvh, 360px);
    padding: clamp(10px, 3vw, 14px);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .panel-heading { gap: 8px; }
  .panel-heading h1 { font-size: clamp(17px, 5.2vw, 21px); }
  .panel-close { width: 30px; height: 30px; font-size: 21px; }
  .building-description { margin: 7px 0 10px; font-size: clamp(11px, 3.2vw, 12px); }
  .building-facts { gap: 5px; }
  .building-facts > div { gap: 3px; padding: 7px; }
  .building-facts span, .upgrade-cost span, .action-cost span { font-size: 8px; }
  .building-facts strong { font-size: 11px; }
  .upgrade-cost { margin: 9px 0; padding-bottom: 8px; }
  .action-cost { margin: -2px 0 9px; }
  .game-action { min-height: 38px; padding: 8px 10px; font-size: 11px; }
  .building-feedback { min-height: 24px; margin-top: 8px; font-size: 10px; }

  .mobile-building-list {
    right: max(5px, env(safe-area-inset-right));
    bottom: max(4px, env(safe-area-inset-bottom));
    left: max(5px, env(safe-area-inset-left));
    min-height: 58px;
  }
  .map-instruction {
    bottom: calc(62px + env(safe-area-inset-bottom));
    left: max(7px, env(safe-area-inset-left));
    max-width: calc(100vw - 14px - env(safe-area-inset-left) - env(safe-area-inset-right));
    padding: 6px 8px;
    font-size: 10px;
  }
}

.building-marker::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  pointer-events: auto;
  background: transparent;
  transform: translate(-50%, -50%) scale(var(--map-inverse-scale, 1));
  content: "";
}

@media (max-width: 360px) {
  .mobile-building-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 44px;
    align-content: center;
    justify-items: center;
    row-gap: 0;
    min-height: 94px;
    padding: 2px 8px 4px;
  }
  .mobile-building-button {
    width: min(52px, 100%);
    height: 44px;
    flex-basis: 44px;
  }
  .building-panel {
    bottom: calc(102px + env(safe-area-inset-bottom));
  }
  .map-instruction {
    bottom: calc(98px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 360px) {
  .village-hud { gap: 3px; padding: 5px; }
  .village-hud-heading { gap: 5px; }
  .return-button { min-height: 29px; padding-inline: 6px; font-size: 9px; }
  .resource-chip { padding-inline: 1px; }
  .resource-name { gap: 1px; font-size: 6.5px; }
  .resource-name svg { width: 9px; height: 9px; }
  .resource-chip strong { font-size: 10px; }
  .resource-chip small { font-size: 6.5px; }
}

@media (max-width: 1100px) and (max-height: 520px) {
  .village-hud {
    top: max(4px, env(safe-area-inset-top));
    right: max(5px, env(safe-area-inset-right));
    left: max(5px, env(safe-area-inset-left));
    flex-direction: row;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
  }
  .village-hud-heading { gap: 9px; }
  .return-button { min-height: 32px; padding: 6px 8px; font-size: 10px; }
  .era-kicker { font-size: 7px; letter-spacing: .09em; }
  .era-heading strong { font-size: 11px; }
  .village-hud-data {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
  }
  .resource-strip { display: flex; min-width: 0; gap: 2px; }
  .resource-chip { min-width: 48px; padding: 3px; }
  .resource-name { font-size: 7px; }
  .resource-name svg { width: 9px; height: 9px; }
  .resource-chip strong { font-size: 10px; }
  .resource-chip small { font-size: 7px; }
  .village-vitals { display: flex; gap: 4px; padding-left: 4px; }
  .vital-chip { min-width: 58px; gap: 3px; padding: 4px 5px; }
  .vital-chip span { font-size: 7px; }
  .vital-chip strong { font-size: 9px; }
  .building-panel {
    top: calc(58px + env(safe-area-inset-top));
    right: max(6px, env(safe-area-inset-right));
    bottom: calc(58px + env(safe-area-inset-bottom));
    left: auto;
    width: min(320px, 43vw);
    max-height: none;
    padding: 10px;
  }
  .map-instruction { display: none; }
}

@media (max-width: 700px) and (max-height: 520px) {
  .village-hud { gap: 6px; padding: 6px; }
  .village-hud-heading { gap: 6px; }
  .return-button { min-height: 30px; padding-inline: 6px; font-size: 9px; }
  .era-heading strong { font-size: 10px; }
  .resource-chip { min-width: 38px; padding: 2px; }
  .resource-name { font-size: 6px; }
  .resource-name svg { width: 8px; height: 8px; }
  .resource-chip strong { font-size: 9px; }
  .resource-chip small { font-size: 6px; }
  .village-vitals { gap: 2px; padding-left: 2px; }
  .vital-chip { min-width: 48px; gap: 2px; padding: 3px; }
  .vital-chip span { font-size: 6px; }
  .vital-chip strong { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .building-marker, .mobile-building-button, .building-marker .building-sprite, .mobile-building-button .building-sprite, .return-button, .panel-close, .game-action, .building-design-card, .prototype-launch, .vital-meter i {
    transition-duration: .01ms !important;
  }
}

/* Drag the shared world plane; UI remains anchored to the viewport. */
.map-canvas{touch-action:none;cursor:grab}
.map-canvas:active{cursor:grabbing}
.map-canvas:focus{outline:none}
.map-canvas:focus-visible{outline:2px solid #d9bd7a;outline-offset:-3px}