:root {--build-size:78px;--build-gap:8px;}
/* Keep the hammer at the screen corner, independent of the village action tray. */
footer .tools #build {
  position:fixed;right:var(--safe-right);bottom:var(--safe-bottom);z-index:12;
  width:var(--build-size);height:var(--build-size);min-height:0;padding:5px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  border-radius:12px;font-size:16px;line-height:1.1;touch-action:manipulation;
}
#build img,#build .asset-icon {width:48px;height:48px;object-fit:contain;pointer-events:none;}
#build[aria-expanded="true"] {background:linear-gradient(#ffe67d,#dca325);}
footer .tools {padding-bottom:calc(var(--build-size) + 7px);min-width:var(--build-size);width:var(--build-size);}
.build-backdrop {
  position:fixed;inset:0;z-index:8;width:100%;height:100%;border:0;border-radius:0;
  padding:0;background:#10251b28;box-shadow:none;cursor:default;
}
.build-backdrop:hover {background:#10251b28;transform:none;}
.build-menu {
  position:fixed;bottom:var(--safe-bottom);left:var(--safe-left);
  right:calc(var(--safe-right) + var(--build-size) + var(--build-gap));z-index:10;
  visibility:hidden;transform:translateX(calc(100% + var(--build-size) + 20px));opacity:0;
  transition:transform .28s ease-out,opacity .2s,visibility .28s;
}
.build-menu.is-open {visibility:visible;transform:translateX(0);opacity:1;}
.build-categories {
  display:flex;gap:5px;height:var(--build-size);padding:5px;overflow-x:auto;
  border:2px solid #c4b28a;border-radius:12px;background:linear-gradient(#f0e7cf,#b5ab90);
  box-shadow:0 4px 0 #584936,0 3px 15px #11251c80;scrollbar-width:thin;
  scrollbar-color:#8c7854 #d5c8aa;overscroll-behavior:contain;
}
.build-categories button {
  display:flex;flex:1 0 72px;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;min-width:72px;padding:3px 6px;border:1px solid #fff7df;border-radius:7px;
  background:linear-gradient(#fff9e5,#d4c6a4);color:#463d2b;box-shadow:0 2px 0 #8a7956;
  font-size:12px;font-weight:800;touch-action:manipulation;
}
.build-categories .asset-icon {width:43px;height:40px;object-fit:contain;}
.build-categories button:hover {transform:none;background:#fff2bd;}
.build-categories button[aria-pressed="true"] {background:linear-gradient(#ffe576,#e8bb45);border-color:#fff4b6;box-shadow:inset 0 0 0 2px #ad812d;}
.build-category-panel {
  padding:8px;margin-bottom:8px;border:2px solid #c4b28a;border-radius:12px;
  background:linear-gradient(#eee6d3,#b5ab90);color:#423b2f;box-shadow:0 4px 0 #584936;
}
.build-panel-heading {display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.build-panel-heading h2 {font:800 18px Outfit,sans-serif;margin:0 8px;}
.build-panel-heading button {width:38px;height:34px;padding:0;background:#7b463b;font-size:25px;line-height:1;color:#fff;box-shadow:0 2px #533127;border-radius:7px;}
.build-cards {display:flex;gap:8px;overflow-x:auto;overscroll-behavior:contain;padding:2px 2px 7px;scrollbar-width:thin;}
.build-cards > button {
  flex:0 0 138px;min-height:140px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:linear-gradient(#fffaf0,#e2d5b8);color:#433c2e;border:1px solid #fff8e1;border-radius:8px;
  box-shadow:0 2px #8c7958;font-size:11px;white-space:normal;touch-action:manipulation;
}
.build-cards > button:hover {transform:none;background:#fff2cc;}
.build-cards > button:disabled {opacity:1;filter:saturate(.55);background:linear-gradient(#dedbcf,#bcb6a6);color:#655f52;}
.build-cards .catalog-art {height:62px;width:100%;display:grid;place-items:center;}
.build-cards .catalog-art .asset-icon {height:62px;width:82px;object-fit:contain;}
.build-cards strong {font-size:12px;}
.build-cards small {font-size:10px;line-height:1.2;min-height:24px;color:#62563e;letter-spacing:0;}
.build-cards span {font-size:12px;font-weight:800;margin-top:auto;}
.build-menu-open footer .actions,.build-menu-open #tray,.build-menu-open #army,.build-menu-open .building-actions,.build-menu-open #inspector,.build-menu-open .wall-placement-actions,.build-menu-open .placement-hint {visibility:hidden;}
@media (min-width:1100px) and (min-height:600px) {
  :root {--build-size:100px;--build-gap:12px;}
  footer .tools #build {font-size:20px;}
  #build img,#build .asset-icon {width:63px;height:63px;}
  .build-menu {left:30px;right:calc(30px + var(--build-size) + var(--build-gap));bottom:26px;}
  footer .tools #build {right:30px;bottom:26px;}
  .build-categories button {font-size:16px;}
  .build-categories .asset-icon {width:65px;height:58px;}
  .build-cards > button {flex-basis:180px;min-height:190px;}
  .build-cards .catalog-art,.build-cards .catalog-art .asset-icon {height:100px;width:120px;}
  .build-cards strong {font-size:15px;}
}
@media (prefers-reduced-motion:reduce) {.build-menu {transition:none;}}