:root {
  --safe-left:max(8px,env(safe-area-inset-left));
  --safe-right:max(8px,env(safe-area-inset-right));
  --safe-top:max(8px,env(safe-area-inset-top));
  --safe-bottom:max(8px,env(safe-area-inset-bottom));
}
html,body { width:100%;height:100%;overscroll-behavior:none; }
body { -webkit-tap-highlight-color:transparent; }
#world {width:calc(100 * var(--game-vw));height:calc(100 * var(--game-vh));}
header {top:var(--safe-top);left:var(--safe-left);right:var(--safe-right);gap:8px;z-index:4;}
.crest {width:38px;height:38px;flex-shrink:0;}
.crest .asset-icon {width:35px;height:35px;}
header h1 {font-size:17px;}
header h1 span,header small,header p {display:none;}
.resources {gap:5px;margin-left:auto;}
.resources > div {min-width:86px;padding:5px 8px;border-radius:10px;}
.resources b {font-size:15px;}
.resources small {display:block;font-size:8px;letter-spacing:1px;}
.resources .resource-icon {width:18px;height:18px;}
.resources #collect {display:block;width:40px;height:38px;min-width:40px;padding:4px;font-size:0;}
.resources #collect::after {content:'↗';font-size:22px;}
aside {left:var(--safe-left);top:65px;gap:5px;z-index:4;}
.round {width:40px;height:40px;padding:5px;min-width:40px;}
.round .asset-icon {width:27px;height:27px;}
#assets {display:none;}
#fullscreen {position:fixed;top:var(--safe-top);left:145px;width:38px;height:38px;min-width:38px;font-size:20px;}
.status {top:53px;font-size:9px;padding:4px 9px;max-width:calc(48 * var(--game-vw));}
.builders-status {top:55px;right:var(--safe-right);font-size:10px;padding:6px 9px;}
footer {left:var(--safe-left);right:var(--safe-right);bottom:var(--safe-bottom);gap:7px;flex-wrap:nowrap;}
footer .actions {display:flex;gap:5px;flex-shrink:0;}
.actions button {height:60px;padding:6px;font-size:10px;}
.actions .primary {min-width:108px;gap:5px;font-size:18px;}
.primary span {font-size:12px;}
.primary small {display:none;}
.actions .asset-icon {width:26px;height:26px;}
#defend {width:58px;}
footer .tools {display:grid;grid-template-columns:1fr;min-width:88px;width:88px;gap:5px;margin-left:auto;flex-shrink:0;}
.tools button {min-height:32px;padding:5px;font-size:12px;}
.tools .asset-icon {width:22px;height:22px;}
.tools small,.difficulty-label {display:none;}
body[data-connection="offline"] .tools small,body[data-connection="connecting"] .tools small {
  display:block;position:fixed;right:var(--safe-right);bottom:83px;max-width:180px;
  background:#3b2e23;color:#fff0bc;padding:5px 8px;border-radius:6px;font-size:10px;letter-spacing:0;
}
#tray {order:0;width:auto;flex:1;flex-basis:auto;max-width:calc(calc(100 * var(--game-vw)) - 290px - env(safe-area-inset-left) - env(safe-area-inset-right));padding:3px;gap:4px;}
#tray button {min-width:60px;padding:5px;font-size:10px;}
#tray em .asset-icon {width:31px;height:31px;}
#tray small {font-size:8px;}
.tray-message {padding:8px;font-size:10px;}
.building-actions {bottom:var(--safe-bottom);gap:7px;}
.building-actions button {width:68px;height:64px;font-size:12px;padding:5px;}
.building-actions img {width:33px;height:32px;}
#inspector {top:87px;right:var(--safe-right);width:210px;max-height:calc(calc(100 * var(--game-vh)) - 170px);padding:12px;overflow:auto;}
#inspector h2 {font-size:18px;}
#inspector p {font-size:11px;}
#inspector button {font-size:11px;padding:7px;}
.toast {bottom:88px;font-size:11px;max-width:calc(68 * var(--game-vw));padding:8px 12px;}
.placement-hint {bottom:89px;font-size:11px;padding:7px 10px;max-width:calc(75 * var(--game-vw));}
.wall-placement-actions {bottom:117px;padding:6px;gap:6px;}
#cancelWallPlacement,#confirmWallPlacement {width:44px;height:44px;font-size:25px;}
.battle-tools {top:87px;right:var(--safe-right);}
#trayTabs {bottom:84px;}
#heroAbilities {max-width:200px;}
dialog {max-height:calc(calc(100 * var(--game-vh)) - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-width:calc(calc(100 * var(--game-vw)) - 24px);padding:14px;}
dialog.wide-dialog {width:calc(calc(100 * var(--game-vw)) - 24px);padding:12px;}
.dialog-heading h2 {font-size:20px;}
.catalog-grid {grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;}
#upgradeDialog {width:min(900px,calc(calc(100 * var(--game-vw)) - 20px));padding:7px;}
#upgradeDialog .dialog-heading {padding:7px 12px;}
#upgradeDialog .dialog-heading h2 {font-size:21px;}
.upgrade-layout {grid-template-columns:minmax(150px,40%) 1fr;gap:7px;}
.upgrade-model-stage {min-height:170px;}
.upgrade-model-stage .asset-icon {height:150px;width:170px;}
.upgrade-model-stage::before {width:110px;height:84px;top:40%;}
.upgrade-stat-grid {min-height:0;padding:7px;gap:5px;}
.upgrade-stat-card {padding:6px;}
.upgrade-stat-card small {font-size:10px;}
.upgrade-stat-card strong {font-size:16px;}
.upgrade-stat-track {margin-top:5px;}
#upgradeDialog #confirmUpgrade {min-width:130px;font-size:14px;padding:6px 9px;}
#upgradeDialog #confirmUpgrade::after {font-size:16px;margin-top:4px;}
.upgrade-time {min-width:70px;padding:6px 9px;}
.upgrade-time small {font-size:8px;margin-bottom:4px;}
.upgrade-time strong {font-size:17px;}
.mobile-difficulty {display:flex;align-items:center;gap:12px;margin:10px 0;}
dialog.play-gate[open] {
  display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;
  position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;
  padding:max(22px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));
  border:0;border-radius:0;background:radial-gradient(ellipse at 50% 20%,#466d37,#1a3328 70%);color:#fff7d6;
}
.play-gate:not([open]) {display:none;}
.play-gate .gate-crest {width:65px;height:65px;object-fit:contain;}
.play-gate h1 {font:900 clamp(32px,calc(6 * var(--game-vw)),56px) Arial,sans-serif;margin:0;text-shadow:0 4px #152819;}
.play-gate h2 {font:800 20px Arial,sans-serif;margin:0;}
.play-gate p {font-size:14px;line-height:1.5;max-width:360px;margin:0;color:#e0e9ca;}
.play-gate #playGame {background:linear-gradient(#ffe576,#e6b52e);border:2px solid #fff0a4;color:#273a24;min-width:220px;min-height:52px;font:900 19px Arial,sans-serif;margin-top:4px;}
.rotate-phone {display:none;width:37px;height:64px;border:3px solid #e6f5c9;border-radius:8px;position:relative;}
.rotate-phone::after {content:'';position:absolute;bottom:4px;left:13px;width:5px;height:5px;border-radius:50%;background:#e6f5c9;}
.landscape-required .rotate-phone {display:block;animation:turn-phone 2s ease-in-out infinite alternate;margin:14px 0;}
@keyframes turn-phone {from{transform:rotate(0);}to{transform:rotate(90deg);}}
@media (prefers-reduced-motion:reduce) {.landscape-required .rotate-phone {animation:none;transform:rotate(90deg);}}
@media (min-width:1100px) and (min-height:600px) {
  header {top:26px;left:30px;right:30px;gap:14px;}
  .crest,.crest .asset-icon {width:56px;height:56px;}
  header h1 {font-size:25px;}
  .resources > div {min-width:125px;padding:10px 14px;}
  .resources b {font-size:21px;}
  aside {left:30px;top:145px;gap:8px;}
  .round {width:48px;height:48px;}
  #assets {display:block;}
  #fullscreen {top:26px;left:245px;width:42px;height:42px;}
  .status {top:110px;font-size:12px;padding:10px 16px;}
  .builders-status {top:110px;right:30px;font-size:12px;}
  footer {left:30px;right:30px;bottom:26px;gap:20px;}
  footer .actions {display:grid;}
  .actions button {height:auto;padding:12px;font-size:14px;}
  .actions .primary {min-width:188px;gap:14px;}
  .primary span {font-size:18px;}
  #defend {width:auto;}
  footer .tools {min-width:150px;width:150px;}
  .tools button {min-height:43px;font-size:16px;}
  #tray {max-width:calc(calc(100 * var(--game-vw)) - 470px);}
  #tray button {min-width:76px;font-size:12px;}
  .building-actions {bottom:25px;}
  .building-actions button {width:88px;height:80px;font-size:14px;}
  .building-actions img {width:42px;height:38px;}
  #inspector {top:145px;right:30px;width:230px;max-height:calc(calc(100 * var(--game-vh)) - 330px);padding:18px;}
  #upgradeDialog {padding:10px;}
  .upgrade-layout {grid-template-columns:.95fr 1.15fr;}
  .upgrade-model-stage {min-height:330px;}
  .upgrade-model-stage .asset-icon {height:260px;width:300px;}
  .upgrade-stat-card strong {font-size:20px;}
  .upgrade-stat-card small {font-size:12px;}
  .upgrade-stat-grid {padding:12px;gap:8px;}
  .mobile-difficulty {display:flex;}
}