/* Rustic village interface inspired by the supplied layout reference. */
.village-screen {
  --wood-dark: #21160f;
  --wood-mid: #4c321e;
  --wood-light: #84603b;
  --brass: #bd8f4e;
  --parchment: #dec18c;
  --ink: #2c1c10;
}
.village-screen::before { filter: blur(8px) brightness(.48) saturate(.88); opacity: .9; }

.village-hud {
  top: max(6px, env(safe-area-inset-top));
  right: max(7px, env(safe-area-inset-right));
  left: max(7px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(195px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  max-width: none;
  min-height: 61px;
  padding: 5px 9px 5px 7px;
  border: 2px solid #29190e;
  border-radius: 7px;
  background:
    radial-gradient(ellipse at 6% 0%, rgb(192 147 85 / 21%), transparent 32%),
    repeating-linear-gradient(177deg, rgb(231 186 119 / 5%) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #63442a 0%, #392417 17%, #21160f 46%, #3d2818 77%, #24170f 100%);
  box-shadow: 0 1px 0 #c09355 inset, 0 -1px 0 #130c08 inset, 0 0 0 1px rgb(196 149 88 / 52%), 0 5px 18px rgb(0 0 0 / 58%);
}

.village-hud::before,
.construction-deck-shell::before,
.settlement-overview::before,
.building-panel::before {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 7px 7px, #e2bd77 0 1.3px, #694621 1.7px 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 7px) 7px, #e2bd77 0 1.3px, #694621 1.7px 3px, transparent 3.5px),
    radial-gradient(circle at 7px calc(100% - 7px), #e2bd77 0 1.3px, #694621 1.7px 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #e2bd77 0 1.3px, #694621 1.7px 3px, transparent 3.5px);
  content: "";
}

.village-hud { position: absolute; }
.village-hud-heading { min-width: 0; gap: 0; }
.return-button {
  display: flex;
  min-width: 0;
  min-height: 46px;
  align-items: center;
  gap: 9px;
  padding: 1px 4px;
  border: 0;
  color: #f2e5ca;
  background: transparent;
  text-align: left;
}
.return-button:hover { background: rgb(255 232 187 / 6%); }
.identity-avatar {
  position: relative;
  display: grid;
  width: 47px;
  height: 47px;
  flex: 0 0 47px;
  place-items: center;
  overflow: visible;
  border: 2px solid #91683a;
  border-radius: 50%;
  background: radial-gradient(circle, #5d4829, #20160f 72%);
  box-shadow: 0 0 0 2px #21160f, 0 0 0 3px rgb(203 156 88 / 76%), inset 0 0 9px #120b07;
}
.identity-avatar img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 2px 2px #160e08); }
.identity-avatar i {
  position: absolute;
  right: -5px;
  bottom: -3px;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 2px solid #8a612f;
  border-radius: 50%;
  color: #fff0ce;
  background: linear-gradient(#64451f, #291a0d);
  box-shadow: 0 1px 4px #000;
  font: 700 10px/1 Georgia, serif;
}
.identity-copy { display: grid; min-width: 0; gap: 0; }
.identity-copy .era-kicker { color: #ddba7d; font-size: 8px; line-height: 1; letter-spacing: .16em; }
.identity-copy strong { color: #fff4df; font: 700 clamp(15px, 1.15vw, 19px)/1.1 Georgia, "Times New Roman", serif; letter-spacing: .01em; text-shadow: 0 2px 3px #0c0805; }
.identity-copy small { overflow: hidden; color: #d2bea0; font: 500 10px/1.15 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }

.village-hud-data { justify-content: flex-end; gap: 7px; }
.resource-strip { gap: 5px; }
.resource-chip {
  display: grid;
  grid-template-columns: 26px auto;
  grid-template-rows: minmax(16px, auto) auto;
  min-width: 85px;
  align-content: center;
  gap: 0 5px;
  padding: 4px 7px;
  border: 1px solid #18100a;
  border-radius: 6px;
  background:
    linear-gradient(145deg, rgb(255 236 194 / 7%), transparent 46%),
    linear-gradient(180deg, #49301c, #24170f 54%, #372316);
  box-shadow: 0 1px 0 rgb(226 185 126 / 24%) inset, 0 0 0 1px rgb(171 119 61 / 58%), 0 2px 5px rgb(0 0 0 / 45%);
}
.resource-name { grid-column: 1; grid-row: 1 / 3; flex-direction: column; justify-content: center; gap: 1px; color: #ddc89e; font-size: 7px; letter-spacing: .055em; }
.resource-name > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.resource-name svg { width: 23px; height: 23px; color: #e1b878; stroke: #e1b878; filter: drop-shadow(0 1px 2px #090604); }
.resource-chip strong { grid-column: 2; grid-row: 1; align-self: end; color: #fff3dd; font: 700 16px/1 Georgia, "Times New Roman", serif; }
.resource-chip small { grid-column: 2; grid-row: 2; align-self: start; color: #b7c16d; font: 700 10px/1.25 Georgia, serif; }
.village-vitals { grid-template-columns: repeat(2, minmax(82px, 102px)); gap: 5px; padding-left: 6px; border-left-color: rgb(226 199 150 / 25%); }
.vital-chip { gap: 4px; padding: 5px 6px 5px; border: 1px solid #17100b; border-radius: 6px; background: linear-gradient(145deg, #4c321e, #24170f 68%, #382416); box-shadow: 0 0 0 1px rgb(163 114 60 / 48%), inset 0 1px 0 rgb(229 192 137 / 13%); }
.vital-chip span { color: #d0bd9a; font-size: 7px; letter-spacing: .07em; }
.vital-chip strong { color: #fff0d3; font: 700 12px/1 Georgia, serif; }
.vital-meter { height: 4px; background: #1b130d; box-shadow: 0 1px 2px #110b07 inset; }
.vital-meter i { background: linear-gradient(90deg, #9d6d31, #e3bb70); }
.vital-chip--morale .vital-meter i { background: linear-gradient(90deg, #8a753d, #dcc47c); }
.game-utility { display: flex; align-items: center; gap: 6px; }
.daylight-seal, .utility-button {
  position: relative;
  display: grid;
  width: 41px;
  height: 41px;
  flex: 0 0 41px;
  place-items: center;
  padding: 0;
  border: 2px solid #20150d;
  border-radius: 7px;
  color: #e9d3a7;
  background: linear-gradient(145deg, #543820, #281a10 64%, #49301d);
  box-shadow: 0 1px 0 rgb(230 190 131 / 24%) inset, 0 0 0 1px #8e683c, 0 2px 5px #160d07;
}
.daylight-seal { border-radius: 50%; color: #f7c549; background: radial-gradient(circle, #86601f, #33200d 67%); box-shadow: 0 0 0 3px #24170f, 0 0 0 4px #b78b43, 0 0 13px rgb(247 188 66 / 35%); }
.daylight-seal svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; filter: drop-shadow(0 1px 2px #160d05); }
.utility-button svg { width: 24px; height: 24px; fill: none; stroke: #e4cda1; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px #0c0804); }
.utility-button:disabled { opacity: .94; cursor: not-allowed; }
.utility-button:disabled svg { stroke: #e1c89b; }

.game-navigation {
  position: absolute;
  z-index: 4;
  top: 73px;
  height: clamp(330px, 46vh, 440px);
  bottom: auto;
  left: max(6px, env(safe-area-inset-left));
  display: flex;
  width: clamp(76px, 5.25vw, 92px);
  flex-direction: column;
  gap: 3px;
  padding: 4px;
  border: 2px solid #2b1b0e;
  border-radius: 8px;
  background:
    repeating-linear-gradient(176deg, rgb(222 174 111 / 5%) 0 1px, transparent 1px 4px),
    linear-gradient(100deg, #634427, #291a10 24%, #352114 72%, #20140c);
  box-shadow: 0 1px 0 #c29557 inset, 0 0 0 1px #956c3d, 0 5px 16px rgb(0 0 0 / 54%);
}
.navigation-button {
  position: relative;
  display: grid;
  min-height: 58px;
  flex: 1 1 0;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 4px 2px;
  border: 1px solid #1a110b;
  border-radius: 5px;
  color: #e7d6b2;
  background: linear-gradient(145deg, #4b321e, #26180e 54%, #3c2819);
  box-shadow: inset 0 1px 0 rgb(225 185 129 / 13%), 0 1px 2px #100a06;
  font: 600 10px/1.05 Georgia, "Times New Roman", serif;
  text-shadow: 0 1px 2px #0a0704;
  cursor: pointer;
}
.navigation-button svg { width: 29px; height: 29px; fill: none; stroke: #d1a76a; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 2px #100905); }
.navigation-button.is-current { border-color: #c39a54; color: #fff0d0; background: linear-gradient(145deg, #81572d, #44301b 55%, #2b1b10); box-shadow: 0 0 0 1px rgb(234 197 122 / 45%) inset, 0 0 9px rgb(206 154 73 / 25%); }
.navigation-button.is-current svg { stroke: #ffd48a; }
.navigation-button:disabled { opacity: .82; cursor: not-allowed; }
.navigation-button:disabled svg { stroke: #a8895c; }
.navigation-button:focus-visible, .category-button:focus-visible, .mobile-building-button:focus-visible { outline: 2px solid #f2ce7e; outline-offset: 2px; }

.parchment-frame {
  position: absolute;
  z-index: 4;
  overflow: hidden;
  border: 7px solid transparent;
  border-image: linear-gradient(135deg, #20130b, #ad8043 12%, #352113 22%, #78522b 53%, #25170d 80%, #a17b46) 1;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 15% 10%, rgb(255 249 218 / 62%), transparent 43%),
    radial-gradient(circle at 85% 88%, rgb(161 110 54 / 12%), transparent 43%),
    repeating-linear-gradient(4deg, rgb(110 68 30 / 4%) 0 1px, transparent 1px 5px),
    linear-gradient(125deg, #ead6ad, #c9a875 52%, #e4c995);
  box-shadow: 0 4px 13px rgb(0 0 0 / 55%), 0 0 0 1px #20140c, inset 0 0 0 1px rgb(116 77 38 / 50%), inset 0 0 20px rgb(122 81 39 / 18%);
}
.parchment-frame::after {
  position: absolute;
  z-index: 0;
  inset: 3px;
  pointer-events: none;
  border: 1px solid rgb(123 82 39 / 36%);
  content: "";
}
.settlement-overview {
  top: 74px;
  right: max(8px, env(safe-area-inset-right));
  width: clamp(210px, 14.2vw, 244px);
  max-height: min(310px, calc(100dvh - 340px));
  padding: 11px 11px 12px;
}
.side-panel-heading { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 0 3px 8px; border-bottom: 1px solid rgb(103 68 34 / 37%); }
.side-panel-heading h2 { margin: 3px 0 0; color: #382313; font: 700 17px/1.05 Georgia, "Times New Roman", serif; }
.panel-kicker { color: #77552e; font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.panel-fold { color: #6c4b28; font: 900 18px/1 Georgia, serif; }
.overview-status-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 9px 3px 7px; border-bottom: 1px solid rgb(105 69 34 / 24%); }
.overview-symbol { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border: 1px solid #9e7541; border-radius: 50%; color: #6a431d; background: rgb(132 88 43 / 14%); font: 700 18px/1 Georgia, serif; }
.overview-symbol--morale { color: #8a5b27; }
.overview-row-content { display: grid; flex: 1; gap: 5px; min-width: 0; }
.overview-row-content > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.overview-row-content strong { overflow: hidden; color: #49301a; font: 700 12px/1.1 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.overview-row-content b { color: #52371e; font: 700 11px/1 Georgia, serif; white-space: nowrap; }
.overview-meter { display: block; height: 7px; overflow: hidden; border: 1px solid #744c26; border-radius: 6px; background: #49341e; box-shadow: 0 1px 2px #382312 inset; }
.overview-meter > i { display: block; height: 100%; border-right: 1px solid #eed28f; background: linear-gradient(180deg, #a4a849, #65732e); box-shadow: 0 0 6px rgb(127 146 44 / 50%); }
.overview-meter--morale > i { background: linear-gradient(180deg, #d7ad54, #9b652a); }
.overview-production-heading { position: relative; z-index: 1; display: flex; justify-content: space-between; margin: 8px 3px 2px; color: #624326; font: 800 8px/1.1 Inter, ui-sans-serif, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.overview-production-list { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; }
.overview-production-list > div { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 3px; border-top: 1px solid rgb(117 79 40 / 17%); color: #5a3b20; font: 600 10px/1 Georgia, serif; }
.overview-production-list b { margin-left: auto; color: #465224; font: 700 9px/1 Georgia, serif; white-space: nowrap; }
.flow-icon { display: grid; width: 17px; height: 17px; flex: 0 0 17px; place-items: center; border-radius: 50%; color: #f2ddb2; background: #73512d; font: 700 10px/1 Georgia, serif; }
.flow-icon--food { color: #e8a49b; }.flow-icon--wood { color: #d6a96b; }.flow-icon--stone { color: #d0c6ac; }.flow-icon--flint { color: #aac0bd; }

.construction-deck {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(190px, 24.4vh, 246px);
  padding: 0 7px max(5px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.construction-deck-shell {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: minmax(205px, 20.2%) minmax(0, 1fr) minmax(235px, 19%);
  gap: 7px;
  padding: 7px;
  border: 3px solid #23160c;
  border-radius: 8px 8px 4px 4px;
  background:
    radial-gradient(ellipse at 50% 0%, rgb(195 142 77 / 16%), transparent 65%),
    repeating-linear-gradient(178deg, rgb(214 169 108 / 5%) 0 1px, transparent 1px 4px),
    linear-gradient(100deg, #63452a, #332114 22%, #24170e 50%, #3a2516 78%, #5d4025);
  box-shadow: 0 -5px 22px rgb(0 0 0 / 52%), 0 1px 0 #c0914e inset, 0 -2px 0 #140d08 inset, 0 0 0 1px rgb(180 135 72 / 60%);
  pointer-events: auto;
}
.deck-categories { display: grid; min-width: 0; grid-template-rows: 34px minmax(0, 1fr); gap: 4px; padding: 0 4px; }
.deck-heading { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; padding: 0 6px; border-bottom: 1px solid rgb(201 157 93 / 35%); color: #fff0d1; font: 700 clamp(13px, 1.12vw, 18px)/1 Georgia, "Times New Roman", serif; text-shadow: 0 2px 3px #160d07; }
.deck-heading-mark { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border: 2px solid #8b6536; border-radius: 50%; color: #e0b878; background: #2d1c10; box-shadow: 0 0 0 2px #21140c; font-size: 15px; }
.inventory-filters { display: grid; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 1px; }
.category-button { display: grid; min-width: 0; align-content: center; justify-items: center; gap: 3px; padding: 4px 2px; border: 1px solid #1b1109; border-radius: 4px; color: #ebd9b6; background: linear-gradient(145deg, #50351f, #26180e 55%, #402a18); box-shadow: 0 1px 0 rgb(227 184 123 / 15%) inset, 0 1px 2px #100905; font: 600 10px/1 Georgia, "Times New Roman", serif; text-shadow: 0 1px 2px #100905; cursor: pointer; }
.category-button > span:first-child { color: #c49a60; font: 700 20px/1 Georgia, serif; }
.category-button:hover, .category-button.is-active { border-color: #c7a15f; color: #fff0d1; background: linear-gradient(145deg, #73502c, #3b2816 60%, #50371f); box-shadow: 0 0 0 1px rgb(227 185 114 / 27%) inset, 0 0 8px rgb(190 143 71 / 21%); }
.category-button.is-active > span:first-child { color: #f5d497; }

.mobile-building-list.inventory-rail {
  position: relative;
  z-index: 1;
  right: auto;
  bottom: auto;
  left: auto;
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: stretch;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 3px;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: #987146 #271a10;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.inventory-rail::-webkit-scrollbar { height: 5px; }
.inventory-rail::-webkit-scrollbar-track { background: #291b10; }
.inventory-rail::-webkit-scrollbar-thumb { border-radius: 9px; background: #987146; }
.mobile-building-button.inventory-card {
  position: relative;
  display: grid;
  width: clamp(112px, 8.6vw, 154px);
  height: 100%;
  flex: 0 0 clamp(112px, 8.6vw, 154px);
  grid-template-rows: minmax(58px, 1fr) auto auto;
  align-content: stretch;
  justify-items: stretch;
  gap: 2px;
  padding: 5px 6px 5px;
  border: 2px solid #8d6335;
  border-radius: 5px;
  color: #3b2716;
  background:
    radial-gradient(ellipse at 50% 4%, rgb(255 255 239 / 78%), transparent 54%),
    repeating-linear-gradient(3deg, rgb(105 69 34 / 4%) 0 1px, transparent 1px 5px),
    linear-gradient(130deg, #f0dfb9, #cfb07c 62%, #ead4a6);
  box-shadow: 0 0 0 1px #4a3019 inset, 0 1px 0 #fff0cf inset, 0 2px 4px rgb(0 0 0 / 45%);
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms ease, filter 140ms ease, transform 140ms ease;
}
@media (min-width: 901px) and (orientation: landscape) {
  .mobile-building-button.inventory-card {
    width: clamp(112px, calc((100% - 30px) / 6), 154px);
    flex-basis: clamp(112px, calc((100% - 30px) / 6), 154px);
  }
}
.mobile-building-button.inventory-card:hover { filter: brightness(1.08); transform: translateY(-2px); }
.mobile-building-button.inventory-card[aria-pressed="true"] { border-color: #e4c47f; box-shadow: 0 0 0 2px #82592c inset, 0 0 0 1px #f0d594, 0 0 10px rgb(220 174 92 / 43%); }
.inventory-sprite-wrap { display: grid; min-height: 0; place-items: center; overflow: hidden; }
.mobile-building-button.inventory-card .building-sprite { width: 100%; height: 100%; max-height: 80px; object-fit: contain; filter: drop-shadow(0 2px 2px rgb(47 29 12 / 38%)); }
.inventory-name { display: block; overflow: hidden; color: #362313; font: 700 clamp(9px, .7vw, 12px)/1.05 Georgia, "Times New Roman", serif; text-overflow: ellipsis; white-space: nowrap; }
.inventory-meta { display: flex; align-items: center; justify-content: space-between; gap: 3px; color: #76522b; font: 700 8px/1.1 Inter, ui-sans-serif, sans-serif; text-transform: uppercase; }
.inventory-action { display: block; padding: 4px 3px; border: 1px solid #28220c; border-radius: 4px; color: #fff1d3; background: linear-gradient(180deg, #687b34, #33471b); box-shadow: 0 1px 0 rgb(217 230 154 / 34%) inset, 0 1px 2px #503c19; font: 700 10px/1 Georgia, "Times New Roman", serif; }
.mobile-building-button[hidden] { display: none; }

.minimap-wrap { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) 35px; gap: 5px; padding: 1px; }
.minimap-frame { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 3px solid #26180d; border-radius: 5px; background: #29351f; box-shadow: 0 0 0 1px #a7824a, 0 1px 0 rgb(241 215 160 / 25%) inset; }
.minimap-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) brightness(.78); }
.minimap-frame::after { position: absolute; inset: 0; pointer-events: none; border: 1px solid rgb(242 215 153 / 44%); box-shadow: inset 0 0 16px rgb(0 0 0 / 31%); content: ""; }
.minimap-pins { position: absolute; inset: 0; }
.minimap-pins i { position: absolute; width: 5px; height: 5px; border: 1px solid #25170b; border-radius: 50%; background: #ffd16b; box-shadow: 0 0 4px #fbdd89, 0 0 8px rgb(249 193 75 / 80%); transform: translate(-50%, -50%); }
.minimap-view-window { position: absolute; top: 28%; left: 39%; width: 31%; height: 38%; border: 1px solid #fff1c2; box-shadow: 0 0 0 1px #4b371f, inset 0 0 12px rgb(255 235 185 / 12%); }
.minimap-tools { display: grid; align-content: center; gap: 5px; }
.minimap-tools span { display: grid; width: 32px; height: 32px; place-items: center; border: 2px solid #28190d; border-radius: 5px; color: #e3c997; background: linear-gradient(145deg, #553920, #26180e); box-shadow: 0 0 0 1px #8f693e; font: 700 18px/1 Georgia, serif; }

.building-panel {
  z-index: 6;
  top: 74px;
  right: max(8px, env(safe-area-inset-right));
  bottom: calc(clamp(190px, 24.4vh, 246px) + 10px);
  left: auto;
  width: clamp(230px, 16vw, 285px);
  max-height: none;
  overflow: auto;
  padding: 13px 14px;
  border-radius: 2px;
  border-image: linear-gradient(135deg, #20130b, #ad8043 12%, #352113 22%, #78522b 53%, #25170d 80%, #a17b46) 1;
  color: #392617;
  background:
    radial-gradient(ellipse at 15% 10%, rgb(255 249 218 / 62%), transparent 43%),
    repeating-linear-gradient(4deg, rgb(110 68 30 / 4%) 0 1px, transparent 1px 5px),
    linear-gradient(125deg, #ead6ad, #c9a875 52%, #e4c995);
  box-shadow: 0 4px 13px rgb(0 0 0 / 55%), 0 0 0 1px #20140c, inset 0 0 0 1px rgb(116 77 38 / 50%);
  scrollbar-color: #987146 transparent;
}
.building-panel .panel-heading h1 { color: #342111; font-size: clamp(19px, 1.5vw, 25px); }
.building-description { margin: 9px 0 12px; color: #594127; font: 500 12px/1.45 Georgia, serif; }
.building-facts > div { padding: 8px; border-color: rgb(108 73 37 / 27%); background: rgb(255 245 216 / 28%); }
.building-facts span, .upgrade-cost span, .action-cost span { color: #765932; }
.building-facts strong, .action-cost strong { color: #372414; }
.upgrade-cost { margin: 9px 0; padding-bottom: 8px; border-bottom-color: rgb(105 71 38 / 35%); }
.upgrade-cost strong { color: #4d371a; }
.game-action { min-height: 35px; border-color: #64451f; color: #f6e7c2; background: linear-gradient(180deg, #54402a, #302014); font-family: Georgia, serif; }
.game-action--primary { border-color: #394914; color: #fff2d4; background: linear-gradient(180deg, #77853d, #394c1c); }
.game-action--passive { color: #e3e6d3; background: linear-gradient(180deg, #65714a, #344227); }
.building-feedback { color: #604b25; }
.panel-close { border-color: rgb(105 71 38 / 43%); color: #533719; }
.panel-close:hover { background: rgb(122 84 38 / 12%); }

.map-instruction, .prototype-disclaimer { display: none; }

@media (min-width: 701px) and (max-width: 1100px) {
  .village-hud { grid-template-columns: minmax(142px, .75fr) minmax(0, 2fr) auto; gap: 5px; min-height: 57px; padding: 4px 7px; }
  .return-button { gap: 6px; }
  .identity-avatar { width: 40px; height: 40px; flex-basis: 40px; }
  .identity-avatar img { width: 36px; height: 36px; }
  .identity-copy strong { font-size: 14px; }
  .identity-copy small { font-size: 9px; }
  .village-hud-data { gap: 4px; }
  .resource-strip { gap: 3px; }
  .resource-chip { min-width: 61px; grid-template-columns: 19px auto; gap: 0 3px; padding: 3px 4px; }
  .resource-name svg { width: 19px; height: 19px; }
  .resource-chip strong { font-size: 13px; }
  .resource-chip small { font-size: 8px; }
  .village-vitals { grid-template-columns: repeat(2, minmax(66px, 82px)); gap: 3px; padding-left: 4px; }
  .vital-chip { padding: 4px; }
  .vital-chip span { font-size: 6px; }
  .vital-chip strong { font-size: 10px; }
  .game-utility { gap: 4px; }
  .daylight-seal, .utility-button { width: 34px; height: 34px; flex-basis: 34px; }
  .utility-button svg { width: 20px; height: 20px; }
  .construction-deck { height: 188px; }
  .construction-deck-shell { grid-template-columns: minmax(168px, 22%) minmax(0, 1fr) minmax(170px, 22%); }
  .deck-categories { grid-template-rows: 28px 1fr; }
  .deck-heading { font-size: 14px; }
  .category-button { font-size: 9px; }
  .category-button > span:first-child { font-size: 17px; }
  .mobile-building-button.inventory-card { flex-basis: 112px; width: 112px; }
  .minimap-wrap { grid-template-columns: 1fr; }
  .minimap-tools { display: none; }
  .game-navigation { width: 64px; }
  .navigation-button { min-height: 48px; font-size: 8px; }
  .navigation-button svg { width: 24px; height: 24px; }
  .settlement-overview { width: 202px; }
}

@media (min-width: 701px) and (max-width: 900px) and (orientation: portrait) {
  .settlement-overview, .minimap-wrap { display: none; }
  .construction-deck { height: clamp(180px, 20vh, 220px); }
  .construction-deck-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 30px minmax(0, 1fr); gap: 3px; }
  .deck-categories { display: block; padding: 0; overflow: hidden; }
  .deck-heading { display: none; }
  .inventory-filters { display: flex; height: 100%; gap: 5px; overflow-x: auto; scrollbar-width: none; }
  .inventory-filters::-webkit-scrollbar { display: none; }
  .category-button { min-width: 76px; min-height: 25px; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 5px; padding: 3px 6px; font-size: 9px; }
  .category-button > span:first-child { font-size: 15px; }
  .mobile-building-list.inventory-rail { gap: 6px; }
  .mobile-building-button.inventory-card { width: clamp(104px, 16vw, 134px); flex-basis: clamp(104px, 16vw, 134px); }
  .building-panel { bottom: calc(clamp(180px, 20vh, 220px) + 10px); }
}

@media (max-width: 700px) {
  .village-hud {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 5px;
    min-height: 0;
    padding: 4px 5px;
  }
  .village-hud-heading { grid-column: 1; grid-row: 1; }
  .return-button { min-height: 38px; gap: 6px; padding: 0 2px; }
  .identity-avatar { width: 36px; height: 36px; flex-basis: 36px; }
  .identity-avatar img { width: 33px; height: 33px; }
  .identity-avatar i { width: 17px; height: 17px; font-size: 8px; }
  .identity-copy .era-kicker { font-size: 6px; }
  .identity-copy strong { font-size: 14px; }
  .identity-copy small { font-size: 8px; }
  .village-hud-data { display: grid; grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .resource-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
  .resource-chip { min-width: 0; grid-template-columns: 23px minmax(0, 1fr); grid-template-rows: 12px auto; gap: 0 2px; padding: 2px 3px; border-radius: 4px; }
  .resource-name { flex-direction: row; justify-content: flex-start; gap: 2px; font-size: 7px; letter-spacing: .01em; }
  .resource-name svg { width: 14px; height: 14px; }
  .resource-chip strong { font-size: 11px; }
  .resource-chip small { font-size: 7px; }
  .village-vitals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 0; border: 0; }
  .vital-chip { gap: 2px; padding: 3px 5px; border-radius: 4px; }
  .vital-chip span { font-size: 6px; }
  .vital-chip strong { font-size: 9px; }
  .vital-meter { height: 2px; }
  .game-utility { grid-column: 2; grid-row: 1; gap: 3px; }
  .daylight-seal { width: 31px; height: 31px; flex-basis: 31px; }
  .daylight-seal svg { width: 21px; height: 21px; }
  .utility-button { display: none; }
  .game-navigation { top: clamp(112px, 14vh, 140px); right: auto; bottom: calc(clamp(145px, 21.5svh, 185px) + 7px); left: max(4px, env(safe-area-inset-left)); width: 47px; gap: 3px; padding: 3px; border-radius: 6px; }
  .navigation-button { min-height: 41px; flex: 1 1 0; gap: 2px; padding: 3px 1px; border-radius: 4px; font-size: 7px; }
  .navigation-button svg { width: 22px; height: 22px; }
  .settlement-overview { display: none; }
  .construction-deck { height: clamp(145px, 21.5svh, 185px); padding: 0 4px max(4px, env(safe-area-inset-bottom)); }
  .construction-deck-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 28px minmax(0, 1fr); gap: 3px; padding: 4px; border-width: 2px; border-radius: 6px 6px 3px 3px; }
  .deck-categories { display: block; padding: 0; overflow: hidden; }
  .deck-heading { display: none; }
  .inventory-filters { display: flex; height: 100%; gap: 4px; overflow-x: auto; grid-template-columns: none; grid-template-rows: none; padding: 0 1px 2px; scrollbar-width: none; }
  .inventory-filters::-webkit-scrollbar { display: none; }
  .category-button { min-width: 70px; min-height: 24px; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 4px; padding: 3px 5px; border-radius: 4px; font-size: 8px; }
  .category-button > span:first-child { font-size: 13px; }
  .mobile-building-list.inventory-rail { gap: 4px; padding: 2px 1px; }
  .mobile-building-button.inventory-card { width: 94px; flex-basis: 94px; grid-template-rows: minmax(36px, 1fr) auto auto; gap: 2px; padding: 3px 4px; border-width: 1px; border-radius: 4px; }
  .mobile-building-button.inventory-card .building-sprite { max-height: 58px; }
  .inventory-name { font-size: 10px; }
  .inventory-meta { font-size: 6px; }
  .inventory-action { padding: 3px; font-size: 8px; }
  .minimap-wrap { display: none; }
  .building-panel {
    top: auto;
    right: max(5px, env(safe-area-inset-right));
    bottom: calc(clamp(145px, 21.5svh, 185px) + 9px + env(safe-area-inset-bottom));
    left: 56px;
    width: auto;
    max-height: min(43dvh, 350px);
    padding: 10px;
  }
  .building-panel .panel-heading h1 { font-size: 18px; }
  .building-description { font-size: 11px; }
  .map-instruction, .prototype-disclaimer { display: none; }
}

@media (max-width: 700px) and (max-height: 560px) {
  .village-hud { display: flex; min-height: 0; flex-direction: row; gap: 4px; padding: 3px 5px; }
  .village-hud-heading { flex: 0 0 118px; }
  .return-button { min-height: 36px; }
  .identity-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  .identity-avatar img { width: 29px; height: 29px; }
  .identity-copy .era-kicker { font-size: 5px; }
  .identity-copy strong { font-size: 12px; }
  .identity-copy small { font-size: 7px; }
  .village-hud-data { display: grid; flex: 1 1 auto; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px; }
  .resource-strip { display: flex; min-width: 0; gap: 2px; }
  .resource-chip { min-width: 0; flex: 1 1 0; grid-template-columns: 17px minmax(0,1fr); grid-template-rows: 10px auto; gap: 0 1px; padding: 2px; }
  .resource-name { flex-direction: row; justify-content: flex-start; gap: 1px; font-size: 6px; }
  .resource-name svg { width: 11px; height: 11px; }
  .resource-chip strong { font-size: 9px; }
  .resource-chip small { font-size: 6px; }
  .village-vitals { display: flex; flex: 0 0 auto; gap: 2px; }
  .vital-chip { min-width: 44px; gap: 2px; padding: 2px 3px; }
  .vital-chip span { font-size: 6px; }
  .vital-chip strong { font-size: 8px; }
  .game-utility { flex: 0 0 auto; }
  .daylight-seal { width: 27px; height: 27px; flex-basis: 27px; }
  .daylight-seal svg { width: 18px; height: 18px; }
  .game-navigation { display: none; }
  .construction-deck { height: 106px; padding-bottom: max(3px, env(safe-area-inset-bottom)); }
  .construction-deck-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 24px minmax(0, 1fr); gap: 2px; padding: 3px; }
  .deck-categories { display: block; overflow: hidden; }
  .inventory-filters { display: flex; height: 100%; gap: 3px; overflow-x: auto; scrollbar-width: none; }
  .inventory-filters::-webkit-scrollbar { display: none; }
  .category-button { min-width: 61px; min-height: 20px; gap: 2px; padding: 2px; font-size: 7px; }
  .category-button > span:first-child { font-size: 11px; }
  .mobile-building-list.inventory-rail { gap: 3px; padding: 1px; }
  .mobile-building-button.inventory-card { width: 78px; flex-basis: 78px; grid-template-rows: minmax(25px, 1fr) auto auto; gap: 1px; padding: 2px; }
  .mobile-building-button.inventory-card .building-sprite { max-height: 39px; }
  .inventory-name { font-size: 8px; }
  .inventory-meta { font-size: 5px; }
  .inventory-action { padding: 2px; font-size: 7px; }
  .minimap-wrap, .settlement-overview { display: none; }
  .building-panel { top: 49px; right: 5px; bottom: 111px; left: auto; width: min(285px, calc(100vw - 55px)); max-height: none; padding: 8px; }
  .building-panel .panel-heading h1 { font-size: 16px; }
  .building-description { margin: 5px 0 7px; font-size: 10px; }
  .building-facts > div { padding: 5px; }
  .building-facts strong { font-size: 10px; }
  .upgrade-cost, .action-cost { margin: 5px 0; padding-bottom: 5px; }
  .game-action { min-height: 29px; padding: 5px 7px; font-size: 10px; }
  .building-feedback { min-height: 18px; margin-top: 4px; font-size: 9px; }
}

@media (min-width: 701px) and (max-height: 560px) {
  .game-navigation, .settlement-overview { display: none; }
  .village-hud { grid-template-columns: minmax(120px, .8fr) minmax(0, 2fr) auto; gap: 4px; min-height: 48px; padding: 3px 5px; }
  .return-button { min-height: 35px; gap: 5px; }
  .identity-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  .identity-avatar img { width: 29px; height: 29px; }
  .identity-copy .era-kicker { font-size: 5px; }
  .identity-copy strong { font-size: 12px; }
  .identity-copy small { font-size: 7px; }
  .village-hud-data { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px; }
  .resource-strip { display: flex; min-width: 0; gap: 2px; }
  .resource-chip { min-width: 0; flex: 1 1 0; grid-template-columns: 20px minmax(0,1fr); grid-template-rows: 10px auto; gap: 0 1px; padding: 2px; }
  .resource-name { flex-direction: row; justify-content: flex-start; gap: 1px; font-size: 7px; }
  .resource-name svg { width: 13px; height: 13px; }
  .resource-chip strong { font-size: 9px; }
  .resource-chip small { font-size: 6px; }
  .village-vitals { display: flex; flex: 0 0 auto; gap: 2px; padding-left: 2px; }
  .vital-chip { min-width: 54px; gap: 2px; padding: 2px 3px; }
  .vital-chip span { font-size: 6px; }
  .vital-chip strong { font-size: 8px; }
  .game-utility { gap: 3px; }
  .daylight-seal, .utility-button { width: 27px; height: 27px; flex-basis: 27px; }
  .daylight-seal svg { width: 18px; height: 18px; }
  .utility-button svg { width: 16px; height: 16px; }
  .construction-deck { height: 106px; padding-bottom: max(3px, env(safe-area-inset-bottom)); }
  .construction-deck-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 24px minmax(0, 1fr); gap: 2px; padding: 3px; }
  .deck-categories { display: block; overflow: hidden; }
  .deck-heading { display: none; }
  .inventory-filters { display: flex; height: 100%; gap: 3px; overflow-x: auto; grid-template-columns: none; grid-template-rows: none; padding: 0 1px 1px; scrollbar-width: none; }
  .inventory-filters::-webkit-scrollbar { display: none; }
  .category-button { min-width: 65px; min-height: 20px; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 3px; padding: 2px 4px; font-size: 7px; }
  .category-button > span:first-child { font-size: 11px; }
  .mobile-building-list.inventory-rail { gap: 3px; padding: 1px; }
  .mobile-building-button.inventory-card { width: 92px; flex-basis: 92px; grid-template-rows: minmax(25px, 1fr) auto auto; gap: 1px; padding: 2px; }
  .mobile-building-button.inventory-card .building-sprite { max-height: 41px; }
  .inventory-name { font-size: 8px; }
  .inventory-meta { font-size: 5px; }
  .inventory-action { padding: 2px; font-size: 7px; }
  .minimap-wrap { display: none; }
  .building-panel { top: 52px; right: 5px; bottom: 111px; width: min(320px, calc(100vw - 10px)); max-height: none; padding: 8px; }
  .building-panel .panel-heading h1 { font-size: 16px; }
  .building-description { margin: 5px 0 7px; font-size: 10px; }
  .building-facts > div { padding: 5px; }
  .building-facts strong { font-size: 10px; }
  .upgrade-cost, .action-cost { margin: 5px 0; padding-bottom: 5px; }
  .game-action { min-height: 29px; padding: 5px 7px; font-size: 10px; }
  .building-feedback { min-height: 18px; margin-top: 4px; font-size: 9px; }
}

@media (max-width: 700px) {
  .building-design-actions { gap: 4px; margin-top: 5px; }
  .building-design-card { min-height: 30px; grid-template-columns: 15px minmax(0, 1fr); gap: 4px; padding: 4px 5px; font-size: 9px; }
  .building-design-card svg { width: 14px; height: 14px; }
}

@media (max-height: 560px) {
  .building-design-actions { gap: 3px; margin-top: 4px; }
  .building-design-card { min-height: 28px; grid-template-columns: 14px minmax(0, 1fr); gap: 3px; padding: 3px 4px; font-size: 9px; }
  .building-design-card svg { width: 13px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-building-button.inventory-card, .navigation-button, .category-button, .building-design-card { transition-duration: .01ms !important; }
}

/* City center ledger: a single responsive panel layered over the village map. */
.village-screen .city-center-backdrop {
  position: absolute;
  z-index: 8;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgb(12 9 6 / 68%);
  backdrop-filter: blur(2px) brightness(.78);
  -webkit-backdrop-filter: blur(2px) brightness(.78);
  cursor: default;
}
.village-screen .city-center-backdrop[hidden] { display: none; }

.village-screen .building-panel.city-center-mode,
.village-screen .building-panel.mine-mode,
.village-screen .building-panel.arena-mode {
  position: absolute;
  z-index: 9;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  display: grid;
  width: min(1120px, calc(100vw - 48px));
  height: min(790px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  /* The standard panel is hidden while the city-center console is open, so
     keep the live content between the heading and the persistent actions. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(10px, 1.2vw, 16px);
  overflow: hidden;
  padding: clamp(13px, 1.8vw, 24px);
  border-width: 6px;
  border-radius: 5px;
  box-shadow: 0 22px 70px rgb(0 0 0 / 76%), 0 0 0 1px #170e07, inset 0 0 0 1px rgb(116 77 38 / 50%);
  transform: translate(-50%, -50%);
}
.village-screen .building-panel.city-center-mode[hidden],
.village-screen .building-panel.mine-mode[hidden],
.village-screen .building-panel.arena-mode[hidden] { display: none; }
.city-center-mode .panel-heading { position: relative; z-index: 1; align-items: center; padding: 1px 4px 3px; }
.city-center-mode .panel-kicker { color: #75532a; }
.city-center-mode .panel-heading h1 { margin-top: 4px; font-size: clamp(23px, 2.1vw, 34px); }
.city-center-mode .panel-close { border-color: rgb(105 71 38 / 44%); color: #533719; }
.city-center-mode .panel-close:hover { background: rgb(122 84 38 / 12%); }
.village-screen .building-panel-standard[hidden],
.village-screen .city-center-console[hidden] { display: none; }
.city-center-mode #cityCenterConsole,
.mine-mode .mine-console,
.arena-mode .arena-console { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: clamp(9px, 1.1vw, 14px); }

.city-center-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  gap: 4px;
  overflow-x: auto;
  padding: 5px 5px 6px;
  border: 1px solid #805b31;
  border-radius: 4px;
  background:
    repeating-linear-gradient(177deg, rgb(231 186 119 / 5%) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #51371f, #27190f 56%, #3b2718);
  box-shadow: inset 0 1px 0 rgb(255 231 184 / 15%), 0 2px 5px rgb(0 0 0 / 22%);
  scrollbar-color: #9a7342 transparent;
  scrollbar-width: thin;
}
.city-center-tab {
  position: relative;
  display: flex;
  min-width: max-content;
  min-height: 40px;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  padding: 8px clamp(11px, 1.5vw, 20px);
  border: 1px solid transparent;
  border-radius: 3px;
  color: #ead8b2;
  background: linear-gradient(180deg, rgb(255 233 192 / 6%), rgb(0 0 0 / 8%));
  box-shadow: inset 0 1px 0 rgb(255 234 192 / 7%);
  font: 700 clamp(10px, .86vw, 13px)/1 Georgia, "Times New Roman", serif;
  text-shadow: 0 1px 2px #150d07;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.city-center-tab:hover { color: #fff0d1; border-color: rgb(213 173 108 / 35%); }
.city-center-tab.is-active {
  border-color: #bc8d4d;
  color: #fff1d1;
  background: linear-gradient(180deg, #846035, #594023 54%, #3d2919);
  box-shadow: inset 0 1px 0 rgb(255 236 192 / 22%), 0 0 0 1px rgb(211 166 96 / 17%), 0 2px 5px rgb(0 0 0 / 34%);
}
.city-center-tab:focus-visible { outline: 2px solid #f0cd83; outline-offset: -3px; }

.city-center-pages { position: relative; z-index: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-color: #987146 transparent; }
.city-center-page { display: grid; min-height: 100%; align-content: start; gap: clamp(12px, 1.4vw, 19px); }
.city-center-page[hidden] { display: none; }
.city-center-page--empty { min-height: clamp(180px, 32vh, 360px); }
.city-building-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 4px; }
.city-building-card { display: grid; min-width: 0; min-height: 108px; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 5px 10px; padding: 10px; border: 1px solid #a78150; border-radius: 4px; color: #3e2917; background: linear-gradient(135deg, rgb(255 247 221 / 85%), rgb(186 144 91 / 30%)); box-shadow: 0 2px 5px rgb(65 42 21 / 15%), inset 0 1px 0 rgb(255 255 255 / 60%); text-align: left; cursor: pointer; }
.city-building-card:hover, .city-building-card:focus-visible { border-color: #72502b; background: linear-gradient(135deg, #fff2ce, #d7b682); outline: 2px solid rgb(114 80 43 / 38%); outline-offset: 1px; }
.city-building-card img { width: 88px; height: 72px; grid-row: 1 / 3; object-fit: contain; }
.city-building-card-copy { display: grid; gap: 5px; }
.city-building-card-copy strong { font: 700 16px/1.15 Georgia, serif; }
.city-building-card-copy small { color: #755632; font: 700 10px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; }
.city-building-card-action { color: #5b452d; font: 800 10px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .07em; }
.city-center-resource-grid--page { max-height: none; overflow: visible; }
.city-center-population-grid { align-self: start; }
.village-screen .building-marker { z-index: var(--building-depth, 1); }
.village-screen .building-marker:hover, .village-screen .building-marker[aria-pressed="true"] { z-index: calc(var(--building-depth, 1) + 100); }
.village-screen .building-marker.is-dragging { z-index: 1000; }
.city-center-planned { display: grid; min-height: 220px; align-content: center; justify-items: center; gap: 12px; border: 1px solid rgb(108 73 37 / 26%); background: linear-gradient(130deg, rgb(255 247 222 / 54%), rgb(173 131 74 / 15%)); text-align: center; }
.city-center-planned h2 { margin: 0; color: #3e2917; font: 700 clamp(25px, 3vw, 38px)/1.1 Georgia, serif; }
.city-center-planned p { max-width: 500px; margin: 0; color: #6c512f; font: 500 13px/1.5 Georgia, serif; }
@media (max-width: 900px) { .city-building-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .city-building-grid { grid-template-columns: minmax(0, 1fr); } .city-building-card { min-height: 76px; grid-template-columns: 66px minmax(0, 1fr); } .city-building-card img { width: 66px; height: 58px; } }
.city-center-overview { display: grid; grid-template-columns: minmax(245px, .88fr) minmax(0, 1.12fr); align-items: stretch; gap: clamp(16px, 2vw, 28px); }
.city-center-artboard {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: clamp(200px, 31vh, 345px);
  place-items: center;
  overflow: hidden;
  margin: 0;
  border: 2px solid #8e683b;
  border-radius: 4px;
  background:
    radial-gradient(ellipse at 50% 47%, rgb(255 250 229 / 76%), transparent 54%),
    repeating-linear-gradient(5deg, rgb(107 69 34 / 4%) 0 1px, transparent 1px 5px),
    linear-gradient(140deg, #e7d2a7, #c7a36e 52%, #e6cea0);
  box-shadow: inset 0 0 0 4px rgb(255 244 210 / 35%), inset 0 0 22px rgb(80 48 22 / 22%), 0 3px 8px rgb(41 25 11 / 27%);
}
.city-center-artboard::after { position: absolute; inset: 7px; pointer-events: none; border: 1px solid rgb(92 59 29 / 32%); content: ""; }
.city-center-artboard img {
  display: block;
  width: min(92%, 450px);
  height: min(31vh, 330px);
  object-fit: contain;
  filter: drop-shadow(0 14px 12px rgb(45 29 14 / 38%));
  transform: scaleX(1);
  transition: transform 220ms ease;
}
.city-center-artboard img.is-mirrored { transform: scaleX(-1); }
.city-center-artboard figcaption { position: absolute; z-index: 1; right: 12px; bottom: 12px; left: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.city-center-level-seal,
.city-center-age-seal { display: inline-flex; min-height: 25px; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid #78522b; border-radius: 3px; color: #fff0ce; background: linear-gradient(180deg, #694722, #392313); box-shadow: 0 2px 5px rgb(36 21 9 / 35%), inset 0 1px 0 rgb(255 231 177 / 16%); font: 700 9px/1 Georgia, serif; text-shadow: 0 1px 2px #211207; }
.city-center-level-seal b { color: #f5d58f; font-size: 12px; }
.city-center-age-seal { color: #edd8b2; }

.city-center-ledger { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(4px, 1vw, 14px) 0; }
.city-center-eyebrow { margin: 0 0 7px; color: #72512c; font: 800 9px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .19em; text-transform: uppercase; }
.city-center-ledger h2 { margin: 0; color: #352112; font: 700 clamp(24px, 2.6vw, 39px)/1.05 Georgia, "Times New Roman", serif; text-shadow: 0 1px 0 rgb(255 248 220 / 55%); }
.city-center-description { max-width: 570px; margin: 11px 0 clamp(12px, 1.7vw, 23px); color: #594127; font: 500 clamp(12px, .94vw, 15px)/1.6 Georgia, "Times New Roman", serif; }
.city-center-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.city-center-stat { display: grid; min-width: 0; min-height: 59px; align-content: center; gap: 7px; padding: 8px 10px; border: 1px solid rgb(108 73 37 / 29%); border-radius: 3px; background: linear-gradient(145deg, rgb(255 247 222 / 61%), rgb(173 131 74 / 13%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 42%), 0 1px 2px rgb(81 52 25 / 10%); }
.city-center-stat span { overflow: hidden; color: #755632; font: 800 8px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .12em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.city-center-stat strong { overflow: hidden; color: #352414; font: 700 clamp(12px, 1vw, 16px)/1.1 Georgia, "Times New Roman", serif; text-overflow: ellipsis; white-space: nowrap; }

.city-center-stores { padding-top: 2px; }
.city-center-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 0 2px 7px; border-bottom: 1px solid rgb(107 72 37 / 33%); }
.city-center-section-heading h3 { margin: 0; color: #493019; font: 700 clamp(13px, 1.1vw, 17px)/1.2 Georgia, "Times New Roman", serif; }
.city-center-section-heading > span { color: #80613a; font: 700 8px/1.3 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.city-center-resource-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.city-center-resource { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 4px 8px; min-width: 0; padding: 8px 10px; border: 1px solid rgb(108 73 37 / 30%); border-radius: 3px; background: linear-gradient(145deg, rgb(255 248 223 / 57%), rgb(166 123 68 / 11%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 36%); }
.city-center-resource .flow-icon { grid-column: 1; grid-row: 1 / 3; width: 25px; height: 25px; }
.city-center-resource > span:nth-child(2) { overflow: hidden; color: #6d512f; font: 800 8px/1.1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .09em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.city-center-resource strong { color: #372513; font: 700 clamp(15px, 1.4vw, 21px)/1 Georgia, serif; }
.city-center-resource small { grid-column: 2; color: #54612b; font: 700 9px/1.1 Georgia, serif; }

.city-center-mode .building-panel-actions { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(250px, .75fr) minmax(250px, .75fr); align-items: end; gap: 9px clamp(12px, 1.5vw, 20px); padding-top: 10px; border-top: 1px solid rgb(107 72 37 / 34%); }
.city-center-mode .building-actions { grid-column: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.city-center-mode .building-design-actions { grid-column: 2; grid-row: 1; gap: 7px; margin: 0; }
.city-center-mode .building-design-card { min-height: 40px; }
.city-center-mode .building-feedback { grid-column: 1 / -1; min-height: 17px; margin: 0; padding: 0 2px; color: #604b25; font-size: 10px; }
.city-center-mode .game-action { min-height: 40px; }

.relocation-toast {
  position: absolute;
  z-index: 8;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(clamp(166px, 20.5vh, 198px) + 16px + env(safe-area-inset-bottom));
  left: max(12px, env(safe-area-inset-left));
  display: flex;
  width: fit-content;
  max-width: min(660px, calc(100% - 24px));
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-inline: auto;
  padding: 10px 13px;
  border: 1px solid #986f3e;
  border-radius: 4px;
  color: #f3e1ba;
  background: linear-gradient(180deg, #49301a, #21150d 58%, #3b2716);
  box-shadow: 0 4px 16px rgb(0 0 0 / 57%), inset 0 1px 0 rgb(255 226 171 / 17%);
  font: 600 12px/1.35 Georgia, serif;
}
.relocation-toast[hidden] { display: none; }
.relocation-toast button { flex: 0 0 auto; padding: 6px 10px; border: 1px solid #a67c45; border-radius: 3px; color: #fff0cf; background: linear-gradient(180deg, #614323, #362313); font: 700 10px/1 Georgia, serif; cursor: pointer; }
.relocation-toast button:hover { border-color: #e3bd77; background: linear-gradient(180deg, #73512b, #412c19); }
.relocation-toast button:focus-visible { outline: 2px solid #f0cd83; outline-offset: 2px; }

@media (max-width: 800px) {
  .village-screen .building-panel.city-center-mode { width: calc(100vw - 16px); height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height: none; gap: 8px; padding: 10px; }
  .city-center-mode .panel-heading h1 { font-size: clamp(19px, 5vw, 25px); }
  .city-center-tabs { gap: 3px; padding: 3px; }
  .city-center-tab { min-height: 34px; padding: 6px 10px; font-size: 10px; }
  .city-center-pages { margin-inline: -1px; }
  .city-center-page { gap: 10px; }
  .city-center-overview { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 11px; }
  .city-center-artboard { min-height: 195px; }
  .city-center-artboard img { height: min(26vh, 250px); }
  .city-center-ledger h2 { font-size: clamp(21px, 5.4vw, 30px); }
  .city-center-description { margin: 7px 0 10px; font-size: 12px; line-height: 1.42; }
  .city-center-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .city-center-stat { min-height: 47px; gap: 4px; padding: 6px 7px; }
  .city-center-stat span { font-size: 7px; }
  .city-center-stat strong { font-size: 12px; }
  .city-center-section-heading { margin-bottom: 6px; padding-bottom: 5px; }
  .city-center-section-heading h3 { font-size: 12px; }
  .city-center-section-heading > span { font-size: 7px; }
  .city-center-resource-grid { gap: 5px; }
  .city-center-resource { grid-template-columns: 20px minmax(0, 1fr); gap: 3px 5px; padding: 6px; }
  .city-center-resource .flow-icon { width: 20px; height: 20px; }
  .city-center-resource > span:nth-child(2) { font-size: 7px; letter-spacing: .04em; }
  .city-center-resource strong { font-size: 15px; }
  .city-center-resource small { font-size: 8px; }
  .city-center-mode .building-panel-actions { grid-template-columns: minmax(0, 1fr); gap: 5px; padding-top: 6px; }
  .city-center-mode .building-actions { grid-column: 1; gap: 5px; }
  .city-center-mode .building-design-actions { grid-column: 1; grid-row: 2; gap: 5px; }
  .city-center-mode .building-design-card { min-height: 34px; grid-template-columns: 17px minmax(0, 1fr); gap: 5px; padding: 5px 7px; font-size: 10px; }
  .city-center-mode .building-design-card svg { width: 16px; height: 16px; }
  .city-center-mode .game-action { min-height: 34px; padding: 6px 8px; font-size: 10px; }
  .city-center-mode .building-feedback { grid-column: 1; min-height: 14px; font-size: 9px; }
  .relocation-toast { bottom: calc(70px + env(safe-area-inset-bottom)); max-width: calc(100% - 16px); gap: 9px; padding: 8px 10px; font-size: 10px; }
}

@media (max-width: 560px) {
  .village-screen .building-panel.city-center-mode { inset: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left)); width: auto; height: auto; max-height: none; padding: 8px; transform: none; }
  .city-center-mode .panel-heading { padding-inline: 2px; }
  .city-center-mode .panel-heading h1 { font-size: 18px; }
  .city-center-mode .panel-close { width: 28px; height: 28px; font-size: 19px; }
  .city-center-tab { min-height: 32px; padding-inline: 9px; font-size: 9px; }
  .city-center-overview { grid-template-columns: minmax(0, 1fr); }
  .city-center-artboard { min-height: clamp(112px, 20vh, 170px); }
  .city-center-artboard img { width: min(82%, 250px); height: min(19vh, 160px); }
  .city-center-artboard figcaption { right: 7px; bottom: 6px; left: 7px; }
  .city-center-level-seal, .city-center-age-seal { min-height: 20px; padding: 3px 6px; font-size: 8px; }
  .city-center-ledger { padding: 0; }
  .city-center-eyebrow { margin-bottom: 4px; font-size: 8px; }
  .city-center-ledger h2 { font-size: 22px; }
  .city-center-description { margin: 5px 0 8px; font-size: 11px; }
  .city-center-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .city-center-stat { min-height: 43px; padding: 5px; }
  .city-center-stat span { font-size: 6px; letter-spacing: .08em; }
  .city-center-stat strong { font-size: 10px; }
  .city-center-section-heading h3 { font-size: 11px; }
  .city-center-section-heading > span { max-width: 120px; font-size: 6px; }
  .city-center-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .city-center-resource { padding: 5px 7px; }
  .city-center-resource > span:nth-child(2) { font-size: 7px; }
  .city-center-resource strong { font-size: 13px; }
  .city-center-resource small { font-size: 7px; }
  .city-center-mode .building-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .city-center-mode .building-design-card { min-height: 30px; font-size: 9px; }
  .relocation-toast { right: 6px; left: 6px; width: auto; max-width: none; gap: 7px; padding: 7px 8px; font-size: 9px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .village-screen .building-panel.city-center-mode { inset: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left)); width: auto; height: auto; max-height: none; gap: 5px; padding: 7px; transform: none; }
  .city-center-mode .panel-heading { gap: 6px; padding-block: 0; }
  .city-center-mode .panel-heading h1 { margin-top: 0; font-size: 17px; }
  .city-center-mode .panel-kicker { font-size: 7px; }
  .city-center-tabs { padding: 2px; }
  .city-center-tab { min-height: 27px; padding: 4px 9px; font-size: 8px; }
  .city-center-overview { grid-template-columns: minmax(140px, .48fr) minmax(0, 1.52fr); gap: 9px; }
  .city-center-artboard { min-height: 75px; }
  .city-center-artboard img { height: 14vh; }
  .city-center-page { gap: 6px; }
  .city-center-ledger h2 { font-size: 17px; }
  .city-center-description { display: none; }
  .city-center-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
  .city-center-stat { min-height: 30px; gap: 3px; padding: 4px 5px; }
  .city-center-stat span { font-size: 6px; }
  .city-center-stat strong { font-size: 9px; }
  .city-center-section-heading { margin-bottom: 3px; padding-bottom: 3px; }
  .city-center-resource-grid { gap: 4px; }
  .city-center-resource { padding: 4px 6px; }
  .city-center-resource .flow-icon { width: 17px; height: 17px; }
  .city-center-resource strong { font-size: 12px; }
  .city-center-resource small { font-size: 7px; }
  .city-center-mode .building-panel-actions { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 6px; padding-top: 5px; }
  .city-center-mode .building-design-actions { grid-column: 2; grid-row: 1; }
  .city-center-mode .building-design-card, .city-center-mode .game-action { min-height: 27px; padding-block: 4px; font-size: 9px; }
  .city-center-mode .building-feedback { min-height: 11px; font-size: 8px; }
}

@media (min-width: 701px) {
  .village-screen .building-panel.house-mode,
  .village-screen .building-panel.warehouse-mode { width: clamp(330px, 30vw, 410px); }
}
@media (max-width: 700px) {
  .village-screen .building-panel.house-mode,
  .village-screen .building-panel.warehouse-mode { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .city-center-tab, .city-center-artboard img { transition-duration: .01ms !important; }
}

/* Full-bleed playfield with the complete game interface layered above it. */
.village-hud {
  min-height: 53px;
  padding: 4px 7px;
  border-width: 1px;
  border-radius: 5px;
  box-shadow: 0 1px 0 #c09355 inset, 0 -1px 0 #130c08 inset, 0 0 0 1px rgb(196 149 88 / 42%), 0 4px 13px rgb(0 0 0 / 48%);
}
.identity-avatar { width: 40px; height: 40px; flex-basis: 40px; }
.identity-avatar img { width: 36px; height: 36px; }
.resource-chip { min-width: 78px; grid-template-columns: 22px auto; gap: 0 4px; padding: 3px 5px; }
.resource-name svg { width: 20px; height: 20px; }
.resource-chip strong { font-size: 14px; }
.resource-chip small { font-size: 9px; }
.vital-chip { padding: 4px 5px; }
.daylight-seal, .utility-button { width: 36px; height: 36px; flex-basis: 36px; }
.utility-button svg { width: 21px; height: 21px; }

.game-navigation {
  top: 65px;
  width: clamp(64px, 4.7vw, 82px);
  height: clamp(255px, 36vh, 340px);
  padding: 3px;
  border-width: 1px;
  border-radius: 6px;
  box-shadow: 0 1px 0 #c29557 inset, 0 0 0 1px #956c3d, 0 4px 12px rgb(0 0 0 / 48%);
}
.navigation-button { min-height: 46px; gap: 2px; padding: 3px 1px; font-size: 9px; }
.navigation-button svg { width: 25px; height: 25px; }
.settlement-overview {
  top: 66px;
  width: clamp(188px, 12.5vw, 216px);
  max-height: min(270px, calc(100dvh - 300px));
  padding: 8px 9px;
  border-width: 5px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 48%), 0 0 0 1px #20140c, inset 0 0 0 1px rgb(116 77 38 / 46%);
}
.side-panel-heading { padding-bottom: 6px; }
.side-panel-heading h2 { font-size: 15px; }
.overview-status-row { gap: 6px; padding: 7px 2px 5px; }
.overview-symbol { width: 25px; height: 25px; flex-basis: 25px; font-size: 15px; }
.overview-production-heading { margin-top: 6px; }
.overview-production-list > div { padding: 4px 2px; font-size: 9px; }

.construction-deck {
  height: clamp(166px, 20.5vh, 198px);
  padding-inline: 5px;
}
.construction-deck-shell {
  grid-template-columns: minmax(180px, 18%) minmax(0, 1fr) minmax(205px, 17%);
  gap: 5px;
  padding: 5px;
  border-width: 2px;
  border-radius: 6px 6px 3px 3px;
  box-shadow: 0 -4px 16px rgb(0 0 0 / 48%), 0 1px 0 #c0914e inset, 0 -2px 0 #140d08 inset, 0 0 0 1px rgb(180 135 72 / 52%);
}
.deck-categories { grid-template-rows: 29px minmax(0, 1fr); gap: 3px; padding-inline: 2px; }
.deck-heading { gap: 5px; padding-inline: 4px; font-size: clamp(12px, 1vw, 16px); }
.deck-heading-mark { width: 23px; height: 23px; flex-basis: 23px; font-size: 13px; }
.inventory-filters { gap: 3px; }
.category-button { gap: 2px; padding: 3px 1px; font-size: 9px; }
.category-button > span:first-child { font-size: 17px; }
.mobile-building-list.inventory-rail { gap: 5px; padding: 3px 1px; }
.mobile-building-button.inventory-card {
  width: clamp(104px, 7.8vw, 140px);
  flex-basis: clamp(104px, 7.8vw, 140px);
  grid-template-rows: minmax(48px, 1fr) auto auto;
  gap: 1px;
  padding: 4px 5px;
  border-width: 1px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #4a3019 inset, 0 1px 0 #fff0cf inset, 0 1px 3px rgb(0 0 0 / 38%);
}
.mobile-building-button.inventory-card:hover { transform: translateY(-1px); }
.mobile-building-button.inventory-card .building-sprite { max-height: 70px; }
.inventory-name { font-size: clamp(8px, .65vw, 11px); }
.inventory-meta { font-size: 7px; }
.inventory-action { padding: 3px 2px; font-size: 9px; }
.minimap-wrap { grid-template-columns: minmax(0, 1fr) 30px; gap: 4px; }
.minimap-tools span { width: 28px; height: 28px; }
.building-panel { top: 66px; bottom: calc(clamp(166px, 20.5vh, 198px) + 8px); width: clamp(220px, 15vw, 270px); padding: 10px 11px; }

@media (min-width: 701px) and (max-width: 1100px) {
  .construction-deck { height: 168px; }
  .construction-deck-shell { grid-template-columns: minmax(148px, 20%) minmax(0, 1fr) minmax(145px, 18%); }
  .deck-categories { grid-template-rows: 25px minmax(0, 1fr); }
  .deck-heading { font-size: 13px; }
  .category-button { font-size: 8px; }
  .mobile-building-button.inventory-card { width: 102px; flex-basis: 102px; }
  .mobile-building-button.inventory-card .building-sprite { max-height: 56px; }
  .game-navigation { top: 61px; width: 58px; height: 280px; }
  .navigation-button { min-height: 43px; font-size: 8px; }
  .navigation-button svg { width: 22px; height: 22px; }
  .settlement-overview { width: 184px; }
  .building-panel { bottom: 176px; }
}

@media (min-width: 701px) and (max-width: 900px) and (orientation: portrait) {
  .construction-deck { height: clamp(154px, 18vh, 186px); }
  .construction-deck-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 26px minmax(0, 1fr); }
  .mobile-building-button.inventory-card { width: clamp(96px, 13vw, 120px); flex-basis: clamp(96px, 13vw, 120px); }
  .mobile-building-button.inventory-card .building-sprite { max-height: 54px; }
  .game-navigation { top: 62px; width: 56px; height: 274px; }
  .building-panel { bottom: calc(clamp(154px, 18vh, 186px) + 8px); }
}

@media (max-width: 700px) {
  .village-hud { padding: 3px 4px; }
  .return-button { min-height: 34px; gap: 5px; }
  .identity-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  .identity-avatar img { width: 29px; height: 29px; }
  .identity-copy strong { font-size: 13px; }
  .resource-chip { padding: 2px; grid-template-columns: 19px minmax(0, 1fr); grid-template-rows: 10px auto; }
  .resource-name svg { width: 13px; height: 13px; }
  .resource-chip strong { font-size: 10px; }
  .resource-chip small { font-size: 6px; }
  .vital-chip { padding: 2px 4px; }
  .game-navigation {
    top: clamp(101px, 12vh, 116px);
    bottom: auto;
    width: 43px;
    height: clamp(230px, 31vh, 262px);
    padding: 2px;
    gap: 2px;
  }
  .navigation-button { min-height: 39px; gap: 1px; padding: 2px 0; font-size: 6px; }
  .navigation-button svg { width: 19px; height: 19px; }
  .construction-deck { height: clamp(132px, 18.5svh, 160px); padding-inline: 3px; }
  .construction-deck-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 25px minmax(0, 1fr); gap: 2px; padding: 3px; }
  .category-button { min-width: 64px; min-height: 22px; padding: 2px 4px; font-size: 7px; }
  .category-button > span:first-child { font-size: 12px; }
  .mobile-building-list.inventory-rail { gap: 3px; padding: 2px 1px; }
  .mobile-building-button.inventory-card { width: 88px; flex-basis: 88px; grid-template-rows: minmax(32px, 1fr) auto auto; gap: 1px; padding: 2px; }
  .mobile-building-button.inventory-card .building-sprite { max-height: 48px; }
  .inventory-name { font-size: 9px; }
  .inventory-meta { font-size: 6px; }
  .inventory-action { padding: 2px; font-size: 7px; }
  .building-panel {
    top: auto;
    right: max(5px, env(safe-area-inset-right));
    bottom: calc(clamp(132px, 18.5svh, 160px) + 8px + env(safe-area-inset-bottom));
    left: max(56px, calc(env(safe-area-inset-left) + 51px));
    width: auto;
    max-height: min(39dvh, 320px);
  }
}

@media (max-width: 700px) and (max-height: 560px) {
  .construction-deck { height: 106px; }
  .mobile-building-button.inventory-card { width: 88px; flex-basis: 88px; }
  .building-panel { top: 49px; bottom: 111px; max-height: none; }
}

@media (max-height: 560px) {
  .mobile-building-button.inventory-card { grid-template-rows: minmax(0, 1fr) auto; padding: 2px 4px; }
  .mobile-building-button.inventory-card .building-sprite { max-height: 40px; }
  .inventory-meta, .inventory-action { display: none; }
  .inventory-name { font-size: 8px; }
}

@media (min-width: 701px) and (max-height: 560px) {
  .construction-deck { height: 106px; }
  .construction-deck-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 24px minmax(0, 1fr); gap: 2px; padding: 3px; }
  .deck-categories { display: block; overflow: hidden; padding: 0; }
  .deck-heading { display: none; }
  .inventory-filters { display: flex; height: 100%; gap: 3px; overflow-x: auto; grid-template-columns: none; grid-template-rows: none; padding: 0 1px 1px; scrollbar-width: none; }
  .inventory-filters::-webkit-scrollbar { display: none; }
  .category-button { min-width: 65px; min-height: 20px; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 3px; padding: 2px 4px; font-size: 7px; }
  .category-button > span:first-child { font-size: 11px; }
  .mobile-building-button.inventory-card { width: 92px; flex-basis: 92px; }
  .building-panel { bottom: 111px; }
}

/* Keep the village map uncluttered: these overlay sections are intentionally removed. */
.village-screen .construction-deck,
.village-screen .game-navigation,
.village-screen .settlement-overview {
  display: none !important;
}

/* Compact resource book and bottom status rail. */
.resource-toggle {
  position: absolute;
  z-index: 14;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border: 1px solid #d0a35c;
  border-radius: 5px;
  color: #f9ebca;
  background: linear-gradient(180deg, #614526, #2a1b10 82%);
  box-shadow: 0 2px 0 #130c07, 0 3px 12px rgb(0 0 0 / 56%), inset 0 1px 0 rgb(255 227 166 / 40%);
  font: 700 12px/1 Georgia, serif;
  cursor: pointer;
}
.resource-toggle:hover, .resource-toggle[aria-expanded="true"] { border-color: #f0cf8b; background: linear-gradient(180deg, #79562d, #352214 82%); }
.resource-toggle:focus-visible { outline: 2px solid #f0cf8b; outline-offset: 3px; }
.resource-toggle svg { width: 22px; height: 22px; fill: none; stroke: #ebc67d; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.resource-toggle b { display: grid; min-width: 21px; height: 21px; place-items: center; border: 1px solid rgb(240 207 139 / 54%); border-radius: 50%; color: #f9e7bf; background: rgb(14 10 7 / 48%); font-size: 9px; }
.resource-drawer {
  position: absolute;
  z-index: 15;
  top: calc(max(12px, env(safe-area-inset-top)) + 50px);
  left: max(12px, env(safe-area-inset-left));
  display: grid;
  width: min(570px, calc(100vw - 24px));
  max-height: calc(100dvh - 125px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  grid-template-rows: auto minmax(0, 1fr);
  gap: 9px;
  overflow: hidden;
  padding: 13px;
  border: 5px solid #3c2817;
  border-radius: 5px;
  color: #382514;
  background: linear-gradient(145deg, #f0dfb5, #c6a16c 84%);
  box-shadow: 0 12px 36px rgb(0 0 0 / 68%), inset 0 0 0 1px rgb(255 242 206 / 54%);
}
.resource-drawer[hidden] { display: none; }
.resource-drawer-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 1px 2px 8px; border-bottom: 1px solid rgb(87 56 28 / 34%); }
.resource-drawer-heading h2 { margin: 4px 0 0; color: #362312; font: 700 22px/1 Georgia, serif; }
.resource-drawer-heading .panel-kicker { color: #795b32; }
.resource-drawer-heading .panel-close { width: 30px; height: 30px; border-color: rgb(89 59 31 / 45%); color: #50351c; }
.resource-drawer-groups { min-height: 0; overflow-y: auto; padding-right: 3px; scrollbar-color: rgb(104 72 37 / 52%) transparent; }
.resource-group { padding: 7px 1px 9px; }
.resource-group + .resource-group { border-top: 1px solid rgb(90 59 31 / 22%); }
.resource-group h3 { margin: 0 0 6px; color: #61452a; font: 800 9px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.resource-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.resource-card {
  position: relative;
  isolation: isolate;
  display: grid;
  min-width: 0;
  min-height: 54px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 3px 6px;
  overflow: hidden;
  padding: 6px 8px;
  border: 1px solid rgb(88 61 34 / 43%);
  border-radius: 3px;
  background: linear-gradient(100deg, rgb(255 245 219 / 91%), rgb(238 220 181 / 83%) 63%, rgb(154 119 69 / 48%));
  box-shadow: 0 1px 2px rgb(67 42 19 / 24%), inset 0 1px 0 rgb(255 255 255 / 67%);
}
.resource-card::before { position: absolute; z-index: -1; inset: 0 0 0 auto; width: 48%; background: var(--resource-image) center / contain no-repeat; opacity: .19; content: ""; }
.resource-card-icon { width: 33px; height: 33px; grid-row: 1 / 3; object-fit: contain; filter: drop-shadow(0 1px 1px rgb(54 35 19 / 30%)); }
.resource-card-name { overflow: hidden; color: #564027; font: 800 9px/1.15 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; }
.resource-card-count { color: #352414; font: 700 14px/1 Georgia, serif; text-align: right; }
.resource-card-rate { grid-column: 2 / 4; color: #56602e; font: 700 9px/1.2 Georgia, serif; }

/* The village identity and resource totals sit below the map. */
.village-screen .village-hud {
  z-index: 16;
  top: auto;
  right: max(8px, env(safe-area-inset-right));
  bottom: max(9px, env(safe-area-inset-bottom));
  left: max(8px, env(safe-area-inset-left));
  display: flex;
  min-height: 64px;
  justify-content: space-between;
  gap: clamp(7px, 1vw, 16px);
  padding: 6px 9px;
}
.village-hud-heading { flex: 0 1 205px; }
.village-hud-data { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: 8px; }
.resource-strip { display: flex; min-width: 0; flex: 1 1 auto; }
.resource-chip { min-width: 76px; grid-template-columns: 30px minmax(0, 1fr); }
.resource-name img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 1px 2px #090604); }
.resource-name > span { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: hidden; clip: auto; color: #ddc89e; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; border: 0; }
.village-hud .game-utility { flex: 0 0 auto; gap: 5px; }
.village-screen .building-panel:not(.city-center-mode):not(.mine-mode):not(.arena-mode) { top: max(62px, env(safe-area-inset-top)); bottom: calc(86px + env(safe-area-inset-bottom)); width: clamp(330px, 30vw, 410px); z-index: 20; }
.village-screen .city-center-backdrop { z-index: 28; }
.village-screen .building-panel.city-center-mode, .village-screen .building-panel.mine-mode {
  z-index: 29;
  width: min(1120px, calc(100vw - 48px));
  height: min(790px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
}
.village-screen .building-panel.mine-mode[hidden] { display: none; }
.mine-mode .panel-heading { position: relative; z-index: 1; align-items: center; padding: 1px 4px 3px; }
.mine-mode .panel-kicker { color: #75532a; }
.mine-mode .panel-heading h1 { margin-top: 4px; color: #342111; font-size: clamp(23px, 2.1vw, 34px); }
.mine-mode .panel-close { border-color: rgb(105 71 38 / 44%); color: #533719; }
.mine-mode .building-panel-standard { min-height: 0; overflow-y: auto; padding: 1px 5px 9px; scrollbar-color: rgb(132 94 49 / 55%) transparent; }
.mine-mode .building-description { max-width: 820px; color: #685033; }
.mine-mode .building-facts > div { background: rgb(255 245 216 / 44%); }
.mine-mode .building-production-details { margin: 14px 0 5px; padding: 13px; border: 1px solid rgb(104 69 34 / 30%); border-radius: 4px; background: rgb(255 244 215 / 36%); }
.production-details-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid rgb(107 72 37 / 25%); }
.production-details-heading h2 { margin: 0; color: #493019; font: 700 17px/1.2 Georgia, serif; }
.production-worker-capacity { color: #6c512f; font: 700 10px/1.25 Inter, ui-sans-serif, system-ui, sans-serif; text-align: right; }
.production-resource-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.production-resource-list--mine { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.production-resource-row { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.production-resource-card { min-height: 50px; padding: 5px 6px; }
.building-panel:not(.city-center-mode):not(.mine-mode) .production-resource-list { grid-template-columns: minmax(0, 1fr); gap: 5px; }
.building-panel:not(.city-center-mode):not(.mine-mode) .production-resource-row { grid-template-columns: minmax(0, 1fr); }
.building-panel:not(.city-center-mode):not(.mine-mode) .production-resource-card { min-height: 43px; }
.worker-stepper { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid rgb(102 67 34 / 27%); border-radius: 4px; background: rgb(255 247 223 / 65%); }
.worker-stepper button { display: grid; width: 26px; height: 27px; place-items: center; border: 1px solid #82603a; border-radius: 3px; color: #523519; background: linear-gradient(#f0dfb5, #c9a36a); font: 700 17px/1 Georgia, serif; cursor: pointer; }
.worker-stepper button:hover:not(:disabled) { background: #f7e5b9; }
.worker-stepper button:disabled { opacity: .38; cursor: not-allowed; }
.worker-stepper strong { min-width: 18px; color: #392615; font: 700 13px/1 Georgia, serif; text-align: center; }
.mine-mode .building-panel-actions { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(250px, .75fr) minmax(250px, .75fr); align-items: end; gap: 9px clamp(12px, 1.5vw, 20px); padding-top: 10px; border-top: 1px solid rgb(107 72 37 / 34%); }
.mine-mode .building-actions { grid-column: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.mine-mode .building-design-actions { grid-column: 2; grid-row: 1; gap: 7px; margin: 0; }
.mine-mode .building-feedback { grid-column: 1 / -1; min-height: 17px; margin: 0; padding: 0 2px; color: #604b25; font-size: 10px; }
.mine-mode .building-design-card, .mine-mode .game-action { min-height: 40px; }

.city-center-resource-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; max-height: min(285px, 34dvh); overflow-y: auto; padding: 2px; scrollbar-color: rgb(132 94 49 / 45%) transparent; }
.city-center-resource { position: relative; isolation: isolate; overflow: hidden; grid-template-columns: 31px minmax(0, 1fr) auto; grid-template-rows: auto auto; min-height: 55px; gap: 3px 6px; padding: 5px 6px; background: linear-gradient(100deg, rgb(255 248 223 / 87%), rgb(166 123 68 / 25%) 67%); }
.city-center-resource::before { position: absolute; z-index: 0; inset: 0 0 0 auto; width: 48%; background: var(--resource-image) center / contain no-repeat; opacity: .14; content: ""; }
.city-center-resource > * { position: relative; z-index: 1; }
.city-center-resource .resource-card-icon { width: 30px; height: 30px; grid-row: 1 / 3; }
.city-center-resource .resource-card-name { font-size: 7px; }
.city-center-resource .resource-card-count { font-size: 15px; }
.city-center-resource .resource-card-rate { grid-column: 2 / 4; font-size: 8px; }

@media (max-width: 900px) {
  .village-screen .village-hud { gap: 5px; padding-inline: 6px; }
  .village-hud-heading { flex-basis: 155px; }
  .resource-chip { min-width: 66px; grid-template-columns: 26px minmax(0, 1fr); padding-inline: 4px; }
  .resource-name img { width: 23px; height: 23px; }
  .village-screen .game-utility { gap: 3px; }
  .daylight-seal, .utility-button { width: 31px; height: 31px; flex-basis: 31px; }
  .city-center-resource-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .production-resource-list--mine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .resource-toggle { top: max(9px, env(safe-area-inset-top)); left: max(9px, env(safe-area-inset-left)); min-height: 37px; gap: 7px; padding: 5px 9px; font-size: 10px; }
  .resource-toggle svg { width: 19px; height: 19px; }
  .resource-drawer { top: calc(max(9px, env(safe-area-inset-top)) + 43px); left: max(7px, env(safe-area-inset-left)); width: min(520px, calc(100vw - 14px)); max-height: calc(100dvh - 105px - env(safe-area-inset-bottom)); gap: 6px; padding: 8px; border-width: 4px; }
  .resource-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .resource-card { min-height: 47px; grid-template-columns: 29px minmax(0, 1fr) auto; padding: 4px 6px; }
  .resource-card-icon { width: 28px; height: 28px; }
  .resource-card-name { font-size: 8px; }
  .resource-card-count { font-size: 12px; }
  .resource-card-rate { font-size: 8px; }
  .village-screen .village-hud { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px; min-height: 0; padding: 5px; }
  .village-hud-heading { grid-column: 1; grid-row: 1; flex-basis: auto; }
  .village-hud-data { display: contents; }
  .village-screen .village-hud .resource-strip { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 3px; }
  .resource-chip { min-width: 0; flex: 1 1 0; grid-template-columns: 21px minmax(0, 1fr); grid-template-rows: auto auto; padding: 3px; }
  .resource-name img { width: 19px; height: 19px; }
  .resource-name > span { font-size: 6px; }
  .resource-chip strong { font-size: 10px; }
  .resource-chip small { font-size: 6px; }
  .village-vitals { grid-column: 2; grid-row: 1; grid-template-columns: repeat(2, minmax(58px, 72px)); gap: 3px; padding-left: 3px; }
  .village-screen .game-utility { display: none; }
  .village-screen .building-panel:not(.city-center-mode):not(.mine-mode) { top: 56px; right: 6px; bottom: calc(76px + env(safe-area-inset-bottom)); left: 6px; width: auto; max-height: none; }
  .village-screen .building-panel.city-center-mode, .village-screen .building-panel.mine-mode { inset: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left)); width: auto; height: auto; max-height: none; gap: 7px; padding: 8px; transform: none; }
  .city-center-resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 32dvh; }
  .production-resource-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .production-resource-list--mine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mine-mode .building-panel-standard { padding-inline: 2px; }
  .mine-mode .building-description { margin-block: 7px; font-size: 11px; }
  .mine-mode .building-production-details { margin-top: 8px; padding: 8px; }
  .production-details-heading { align-items: flex-start; }
  .production-details-heading h2 { font-size: 14px; }
  .production-worker-capacity { font-size: 8px; }
  .production-resource-row { grid-template-columns: minmax(0, 1fr) auto; gap: 3px; }
  .production-resource-card { min-height: 44px; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 2px 4px; padding: 4px; }
  .production-resource-card .resource-card-icon { width: 23px; height: 23px; }
  .production-resource-card .resource-card-name { font-size: 7px; }
  .production-resource-card .resource-card-count { font-size: 11px; }
  .production-resource-card .resource-card-rate { font-size: 7px; }
  .worker-stepper { gap: 2px; padding: 2px; }
  .worker-stepper button { width: 22px; height: 23px; font-size: 15px; }
  .worker-stepper strong { min-width: 13px; font-size: 11px; }
  .mine-mode .building-panel-actions { grid-template-columns: minmax(0, 1fr); gap: 5px; padding-top: 6px; }
  .mine-mode .building-actions { grid-column: 1; gap: 5px; }
  .mine-mode .building-design-actions { grid-column: 1; grid-row: 2; gap: 5px; }
  .mine-mode .building-design-card, .mine-mode .game-action { min-height: 32px; padding: 5px 7px; font-size: 9px; }
  .mine-mode .building-feedback { grid-column: 1; min-height: 12px; font-size: 8px; }
}
@media (max-width: 390px) {
  .village-screen .village-hud { left: max(5px, env(safe-area-inset-left)); right: max(5px, env(safe-area-inset-right)); }
  .identity-copy .era-kicker, .identity-copy small { display: none; }
  .identity-avatar { width: 28px; height: 28px; flex-basis: 28px; }
  .identity-avatar img { width: 25px; height: 25px; }
  .identity-copy strong { font-size: 12px; }
  .vital-chip { min-width: 0; padding: 2px; }
  .vital-chip span { font-size: 6px; }
  .vital-chip strong { font-size: 9px; }
  .city-center-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 30dvh; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .village-screen .building-panel.city-center-mode, .village-screen .building-panel.mine-mode { inset: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left)); width: auto; height: auto; max-height: none; gap: 5px; padding: 7px; transform: none; }
  .mine-mode .building-production-details { margin-block: 5px; padding: 7px; }
  .production-resource-list--mine { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .production-resource-card { min-height: 38px; }
  .worker-stepper button { width: 23px; height: 22px; }
  .city-center-resource-grid { max-height: 28dvh; }
  .village-screen .village-hud { min-height: 45px; }
}

/* Mine, housing, storage, and recruitment panels share the settlement ledger style. */
.village-screen .building-panel.city-center-mode,
.village-screen .building-panel.mine-mode,
.village-screen .building-panel.arena-mode {
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding: clamp(13px, 1.8vw, 24px);
  border-width: 6px;
  border-radius: 5px;
  transform: translate(-50%, -50%);
}
.village-screen .building-panel.city-center-mode[hidden],
.village-screen .building-panel.mine-mode[hidden],
.village-screen .building-panel.arena-mode[hidden] { display: none; }
.mine-mode .mine-console,
.arena-mode .arena-console { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: clamp(9px, 1.1vw, 14px); }
.mine-mode .mine-console[hidden],
.arena-mode .arena-console[hidden] { display: none; }
.mine-mode .panel-heading,
.arena-mode .panel-heading { position: relative; z-index: 1; align-items: center; padding: 1px 4px 3px; }
.mine-mode .panel-heading h1,
.arena-mode .panel-heading h1 { margin-top: 4px; color: #342111; font-size: clamp(23px, 2.1vw, 34px); }
.mine-mode .panel-close,
.arena-mode .panel-close { border-color: rgb(105 71 38 / 44%); color: #533719; }
.mine-mode .panel-close:hover,
.arena-mode .panel-close:hover { background: rgb(122 84 38 / 12%); }
.mine-mode .building-panel-actions,
.arena-mode .building-panel-actions { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(250px, .75fr) minmax(250px, .75fr); align-items: end; gap: 9px clamp(12px, 1.5vw, 20px); padding-top: 10px; border-top: 1px solid rgb(107 72 37 / 34%); }
.mine-mode .building-actions,
.arena-mode .building-actions { grid-column: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.mine-mode .building-design-actions,
.arena-mode .building-design-actions { grid-column: 2; grid-row: 1; gap: 7px; margin: 0; }
.mine-mode .building-feedback,
.arena-mode .building-feedback { grid-column: 1 / -1; min-height: 17px; margin: 0; padding: 0 2px; color: #604b25; font-size: 10px; }
.mine-mode .building-design-card,
.mine-mode .game-action,
.arena-mode .building-design-card,
.arena-mode .game-action { min-height: 40px; }

.mine-overview-page .city-center-overview { grid-template-columns: minmax(230px, .78fr) minmax(0, 1.22fr); }
.mine-artboard img { width: min(94%, 460px); height: min(30vh, 320px); }
.mine-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.mine-overview-resource { min-height: 57px; padding: 5px 6px; }
.mine-overview-resource .resource-card-icon { width: 30px; height: 30px; }
.mine-overview-resource .resource-card-name { font-size: 8px; }
.mine-overview-resource .resource-card-count { font-size: 13px; }
.mine-overview-resource .resource-card-rate { font-size: 8px; }
.mine-overview-resource .mine-summary-limit { grid-column: 2 / 4; color: #755632; font: 700 8px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; }
.mine-resource-page { align-content: start; gap: clamp(9px, 1.1vw, 14px); padding: clamp(4px, .9vw, 11px); }
.mine-resource-heading { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); padding: clamp(9px, 1.3vw, 16px); border: 1px solid rgb(108 73 37 / 31%); background: linear-gradient(130deg, rgb(255 247 222 / 65%), rgb(173 131 74 / 15%)); }
.mine-resource-heading img { width: clamp(82px, 12vh, 128px); height: clamp(82px, 12vh, 128px); flex: 0 0 auto; object-fit: contain; }
.mine-resource-heading h2 { margin: 5px 0; color: #352112; font: 700 clamp(24px, 3vw, 42px)/1.05 Georgia, serif; }
.mine-resource-caption { margin: 8px 0 0; color: #705532; font: 700 11px/1.4 Inter, ui-sans-serif, system-ui, sans-serif; }
.mine-resource-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mine-worker-allocation { display: flex; min-height: 55px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid rgb(108 73 37 / 30%); background: linear-gradient(145deg, rgb(255 247 222 / 62%), rgb(173 131 74 / 13%)); }
.mine-worker-allocation h3 { margin: 0; color: #493019; font: 700 clamp(14px, 1.4vw, 18px)/1.3 Georgia, serif; }
.mine-worker-stepper button { width: 38px; height: 38px; }
.mine-worker-stepper strong { min-width: 34px; font-size: 18px; }

.building-feature-hero { display: flex; align-items: center; gap: 14px; margin: 8px 0 12px; padding: 8px 12px; border: 1px solid rgb(108 73 37 / 24%); background: linear-gradient(120deg, rgb(255 248 223 / 66%), rgb(173 131 74 / 14%)); }
.building-feature-hero img { width: 104px; height: 86px; flex: 0 0 auto; object-fit: contain; }
.building-feature-hero p { margin: 0; color: #594127; font: 500 11px/1.45 Georgia, serif; }
.feature-stat-grid { margin-bottom: 3px; }
.house-mode .feature-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.house-mode .feature-stat-grid .city-center-stat:last-child { grid-column: 1 / -1; }
.house-evolution{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:12px}
.house-evolution-stage{margin:0;padding:5px 2px;border:1px solid rgb(110 75 35 / 22%);border-radius:3px;background:rgb(255 245 219 / 35%);text-align:center}
.house-evolution-stage.is-current{border-color:#936528;background:rgb(220 189 128 / 55%)}
.house-evolution-stage img{display:block;width:100%;height:48px;object-fit:contain}
.house-evolution-stage figcaption{font:600 9px/1.35 Georgia,serif;color:#503619;overflow-wrap:anywhere}
.warehouse-capacity-note { margin: 0 0 8px; color: #705532; font: 500 10px/1.4 Georgia, serif; }
.warehouse-resource-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: min(300px, 32vh); overflow: auto; padding: 2px; scrollbar-color: rgb(132 94 49 / 45%) transparent; }
.warehouse-resource-item { min-width: 0; padding: 4px; border: 1px solid rgb(108 73 37 / 25%); background: rgb(255 247 222 / 44%); }
.warehouse-resource-card { min-height: 42px; padding: 4px; }
.warehouse-resource-card.resource-card { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 3px 5px; padding: 5px 6px; }
.warehouse-resource-card .resource-card-icon { width: 27px; height: 27px; }
.warehouse-resource-card .resource-card-name { font-size: 8px; }
.warehouse-resource-card .resource-card-count { font-size: 12px; }
.warehouse-resource-card .resource-card-rate { font-size: 8px; }
.warehouse-resource-cap { display: block; padding: 4px 3px 1px; color: #705532; font: 700 8px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; text-align: right; }

.arena-recruitment-page { align-content: stretch; }
.arena-artboard img { width: min(95%, 450px); height: min(35vh, 360px); }
.arena-roster-placeholder { display: grid; min-height: 105px; align-content: center; gap: 8px; padding: clamp(14px, 2vw, 24px); border: 1px solid rgb(108 73 37 / 31%); background: linear-gradient(100deg, rgb(255 247 222 / 63%), rgb(173 131 74 / 17%)); }
.arena-roster-placeholder h3 { margin: 0; color: #493019; font: 700 clamp(16px, 1.6vw, 21px)/1.25 Georgia, serif; }
.arena-roster-placeholder p { max-width: 760px; margin: 0; color: #705532; font: 500 12px/1.55 Georgia, serif; }

.village-screen .building-panel:not(.city-center-mode):not(.mine-mode):not(.arena-mode) { top: max(62px, env(safe-area-inset-top)); bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 20; }
.village-screen .building-panel.city-center-mode,
.village-screen .building-panel.mine-mode,
.village-screen .building-panel.arena-mode { z-index: 29; width: min(1120px, calc(100vw - 48px)); height: min(790px, calc(100dvh - 48px)); max-height: calc(100dvh - 48px); }

@media (max-width: 900px) {
  .mine-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mine-overview-page .city-center-overview { grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr); }
}
@media (max-width: 700px) {
  .village-screen .building-panel:not(.city-center-mode):not(.mine-mode):not(.arena-mode) { top: 56px; right: 6px; bottom: calc(76px + env(safe-area-inset-bottom)); left: 6px; width: auto; max-height: none; }
  .village-screen .building-panel.city-center-mode,
  .village-screen .building-panel.mine-mode,
  .village-screen .building-panel.arena-mode { inset: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left)); width: auto; height: auto; max-height: none; gap: 7px; padding: 8px; transform: none; }
  .mine-overview-page .city-center-overview { grid-template-columns: minmax(120px, .48fr) minmax(0, .52fr); gap: 9px; }
  .mine-artboard { min-height: 150px; }
  .mine-artboard img { height: min(22vh, 210px); }
  .mine-overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .mine-overview-stats .city-center-stat { min-height: 47px; padding: 5px; }
  .mine-overview-stats .city-center-stat span { font-size: 7px; }
  .mine-overview-stats .city-center-stat strong { font-size: 11px; }
  .mine-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .mine-overview-resource { min-height: 46px; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 2px 4px; padding: 3px; }
  .mine-overview-resource .resource-card-icon { width: 22px; height: 22px; }
  .mine-overview-resource .resource-card-name { font-size: 6px; }
  .mine-overview-resource .resource-card-count { font-size: 10px; }
  .mine-overview-resource .resource-card-rate, .mine-overview-resource .mine-summary-limit { font-size: 6px; }
  .mine-resource-page { gap: 12px; padding: 2px; }
  .mine-resource-heading { gap: 10px; padding: 9px; }
  .mine-resource-heading img { width: 74px; height: 74px; }
  .mine-resource-heading h2 { font-size: clamp(18px, 5vw, 25px); }
  .mine-resource-caption { font-size: 8px; }
  .mine-resource-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .mine-resource-stats .city-center-stat { min-height: 53px; padding: 6px; }
  .mine-worker-allocation { min-height: 54px; gap: 8px; padding: 7px; }
  .mine-worker-allocation h3 { font-size: 10px; }
  .mine-worker-stepper button { width: 28px; height: 28px; }
  .mine-worker-stepper strong { min-width: 24px; font-size: 13px; }
  .mine-mode .building-panel-actions,
  .arena-mode .building-panel-actions { grid-template-columns: minmax(0, 1fr); gap: 5px; padding-top: 6px; }
  .mine-mode .building-actions,
  .arena-mode .building-actions { grid-column: 1; gap: 5px; }
  .mine-mode .building-design-actions,
  .arena-mode .building-design-actions { grid-column: 1; grid-row: 2; gap: 5px; }
  .mine-mode .building-design-card, .mine-mode .game-action,
  .arena-mode .building-design-card, .arena-mode .game-action { min-height: 32px; padding: 5px 7px; font-size: 9px; }
  .mine-mode .building-feedback,
  .arena-mode .building-feedback { grid-column: 1; min-height: 12px; font-size: 8px; }
  .warehouse-resource-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: min(235px, 26vh); }
  .arena-roster-placeholder { min-height: 76px; padding: 9px; }
  .arena-roster-placeholder h3 { font-size: 13px; }
  .arena-roster-placeholder p { font-size: 9px; }
}
@media (max-width: 390px) {
  .mine-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mine-overview-page .city-center-overview { grid-template-columns: minmax(90px, .35fr) minmax(0, .65fr); }
  .mine-artboard { min-height: 118px; }
  .mine-artboard img { height: min(18vh, 160px); }
  .mine-overview-resource { min-height: 40px; }
  .mine-overview-resource .resource-card-icon { width: 19px; height: 19px; }
  .mine-overview-resource .resource-card-name { font-size: 6px; }
  .mine-overview-resource .resource-card-count { font-size: 9px; }
  .mine-overview-resource .resource-card-rate, .mine-overview-resource .mine-summary-limit { font-size: 5px; }
  .warehouse-resource-card { grid-template-columns: 21px minmax(0, 1fr) auto; min-height: 37px; padding: 3px; }
  .warehouse-resource-card .resource-card-icon { width: 20px; height: 20px; }
  .warehouse-resource-card .resource-card-name { font-size: 6px; }
  .warehouse-resource-card .resource-card-count { font-size: 10px; }
  .warehouse-resource-card .resource-card-rate, .warehouse-resource-cap { font-size: 6px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .village-screen .building-panel.city-center-mode,
  .village-screen .building-panel.mine-mode,
  .village-screen .building-panel.arena-mode { inset: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left)); width: auto; height: auto; max-height: none; gap: 5px; padding: 7px; transform: none; }
  .mine-resource-page { gap: 7px; }
  .mine-resource-heading { padding: 5px; }
  .mine-resource-heading img { width: 58px; height: 58px; }
  .mine-worker-allocation { min-height: 43px; padding: 4px 8px; }
  .mine-mode .building-panel-actions,
  .arena-mode .building-panel-actions { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 6px; padding-top: 5px; }
  .mine-mode .building-design-actions,
  .arena-mode .building-design-actions { grid-column: 2; grid-row: 1; }
  .mine-mode .building-design-card, .mine-mode .game-action,
  .arena-mode .building-design-card, .arena-mode .game-action { min-height: 27px; padding-block: 4px; font-size: 9px; }
  .mine-mode .building-feedback,
  .arena-mode .building-feedback { min-height: 11px; font-size: 8px; }
}

/* The fishery uses the compact resource ledger layout while keeping its own controls. */
.village-screen .building-panel.fishery-mode {position:absolute;top:50%;right:auto;bottom:auto;left:50%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;padding:clamp(13px,1.8vw,24px);border-width:6px;border-radius:5px;transform:translate(-50%,-50%);z-index:29;width:min(1120px,calc(100vw - 48px));height:min(790px,calc(100dvh - 48px));max-height:calc(100dvh - 48px);}
.village-screen .building-panel.fishery-mode[hidden] {display:none!important;}
.fishery-mode .fishery-console {display:flex;flex-direction:column;min-height:0;}
.fishery-mode .fishery-console[hidden] {display:none!important;}
.fishery-mode #fisheryPages {min-height:0;padding:10px;overflow:auto;}
.fishery-mode .panel-heading {position:relative;z-index:1;align-items:center;padding:1px 4px 3px;}
.fishery-mode .panel-heading h1 {margin-top:4px;color:#342111;font-size:clamp(23px,2.1vw,34px);}
.fishery-mode .panel-close {border-color:rgb(105 71 38 / 44%);color:#533719;}
.fishery-mode .panel-close:hover {background:rgb(122 84 38 / 12%);}
.fishery-mode .building-panel-actions {position:relative;z-index:1;display:grid;grid-template-columns:minmax(250px,.75fr) minmax(250px,.75fr);align-items:end;gap:9px clamp(12px,1.5vw,20px);padding-top:10px;border-top:1px solid rgb(107 72 37 / 34%);}
.fishery-mode .building-actions {grid-column:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
.fishery-mode .building-design-actions {grid-column:2;grid-row:1;gap:7px;margin:0;}
.fishery-mode .building-feedback {grid-column:1/-1;min-height:17px;margin:0;padding:0 2px;color:#604b25;font-size:10px;}
.fishery-mode .building-design-card,.fishery-mode .game-action {min-height:40px;}
.fishery-mode #buildingAction.game-action--passive {display:none!important;}
@media(max-width:700px){
  .village-screen .building-panel.fishery-mode {inset:max(5px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));width:auto;height:auto;max-height:none;gap:7px;padding:8px;transform:none;}
  .fishery-mode .mine-ledger-summary {grid-template-columns:54px minmax(0,1fr) minmax(0,1fr);gap:7px;padding:5px;}
  .fishery-mode .mine-ledger-summary>img {width:50px;height:45px;}
  .fishery-mode .mine-ledger-summary strong {font-size:12px;}
  .fishery-mode .mine-ledger-summary span {font-size:9px;}
  .fishery-mode .mine-ledger-head,.fishery-mode .mine-ledger-row {grid-template-columns:24px minmax(0,1fr) 61px 42px minmax(64px,1fr);gap:4px;padding:4px;}
  .fishery-mode .mine-ledger-head {font-size:8px;}
  .fishery-mode .mine-ledger-row {min-height:46px;}
  .fishery-mode .mine-ledger-row>img {width:23px;height:23px;}
  .fishery-mode .mine-deposit-name strong {font-size:10px;}
  .fishery-mode .mine-amount strong {font-size:11px;}
  .fishery-mode .mine-hourly {font-size:10px;}
  .fishery-mode .mine-slider-control {grid-template-columns:minmax(35px,1fr) 38px;gap:3px;}
  .fishery-mode .mine-slider-control output {font-size:9px;}
  .fishery-mode .mine-ledger-note {font-size:9px;}
  .fishery-mode .building-panel-actions {grid-template-columns:minmax(0,1fr);gap:5px;padding-top:6px;}
  .fishery-mode .building-actions {grid-column:1;gap:5px;}
  .fishery-mode .building-design-actions {grid-column:1;grid-row:2;gap:5px;}
  .fishery-mode .building-design-card,.fishery-mode .game-action {min-height:32px;padding:5px 7px;font-size:9px;}
  .fishery-mode .building-feedback {grid-column:1;min-height:12px;font-size:8px;}
}
@media(max-height:560px) and (orientation:landscape){
  .village-screen .building-panel.fishery-mode {inset:max(5px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));width:auto;height:auto;max-height:none;gap:5px;padding:7px;transform:none;}
  .fishery-mode .mine-ledger-summary {padding:4px;}
  .fishery-mode .mine-ledger-row {min-height:40px;}
  .fishery-mode .building-panel-actions {grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:6px;padding-top:5px;}
  .fishery-mode .building-design-actions {grid-column:2;grid-row:1;}
  .fishery-mode .building-design-card,.fishery-mode .game-action {min-height:27px;padding-block:4px;font-size:9px;}
  .fishery-mode .building-feedback {min-height:11px;font-size:8px;}
}

.workforce-info{grid-column:1;grid-row:1;min-width:160px;display:flex;align-items:center;gap:8px}.workforce-info .workforce-count{min-width:0;line-height:1.45;white-space:nowrap}.workforce-role-art{width:40px;height:46px;flex:0 0 auto;object-fit:cover;object-position:center;border:1px solid #9d8050;border-radius:4px;box-shadow:0 2px 5px #34210b44}.mine-ledger-summary #mineWorkforce,.mine-ledger-summary #fisheryWorkforce{display:flex;align-items:center;gap:8px;min-width:0}.mine-ledger-summary #mineWorkforce>div,.mine-ledger-summary #fisheryWorkforce>div{min-width:0}.mine-ledger-summary #mineWorkforce .workforce-role-art,.mine-ledger-summary #fisheryWorkforce .workforce-role-art{width:42px;height:50px}.mine-ledger-summary #mineWorkforce strong,.mine-ledger-summary #fisheryWorkforce strong{font-size:14px}.building-panel img[data-building-art].is-mirrored,.city-center-artboard img[data-building-art].is-mirrored,.ledger-name img[data-building-art].is-mirrored{transform:scaleX(-1)}
.city-building-card img[data-building-art].is-mirrored,.identity-avatar img[data-building-art].is-mirrored{transform:scaleX(-1)}