/* One final authority for the device-safe gameplay shell. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --hud-bottom: calc(var(--safe-top) + 104px);
}
@media (display-mode: standalone) and (max-width: 680px) and (orientation: portrait) {
  :root {
    --safe-top: max(59px, env(safe-area-inset-top, 0px));
  }
}
body:not(.playing) {
  padding-top: var(--safe-top);
}
body:not(.playing) .hud-icon {
  display: none;
}
.playing header {
  height: calc(var(--safe-top) + 60px);
  min-height: calc(var(--safe-top) + 60px);
  padding: calc(var(--safe-top) + 8px) max(12px, var(--safe-right)) 8px
    max(12px, var(--safe-left));
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  border: 0;
  background: linear-gradient(#18344bf5, #18344bad);
}
.playing header .brand {
  display: none;
}
.playing header .power {
  justify-self: center;
  min-height: 44px;
  padding: 0 12px;
}
.playing .power span {
  font-size: 9px;
  letter-spacing: 0.14em;
}
.playing .power strong {
  font-size: 25px;
}
.hud-icon {
  width: 44px;
  height: 44px;
  padding: 10px;
  background: #294b62d9;
  border: 1px solid #87a8bb55;
}
.hud-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.playing .resourcebar {
  top: calc(var(--safe-top) + 60px);
  height: 44px;
  justify-content: center;
  gap: 12px;
  padding: 0 max(12px, var(--safe-right)) 4px max(12px, var(--safe-left));
  background: linear-gradient(#18344bad, #18344b00);
  border: 0;
  box-shadow: none;
}
.playing .resourcebar > button {
  min-height: 36px;
  padding: 4px 12px;
  background: #213e52e8;
  border: 1px solid #8aabba40;
  border-radius: 18px;
}
#connection {
  display: none !important;
}
.playing #game:not([data-view="base"]):not([data-view="world"]) {
  padding-top: calc(var(--hud-bottom) + 8px);
}
.location-badge {
  top: calc(var(--hud-bottom) + 8px);
}
#toast,
.connection-warning,
.retry-command {
  top: calc(var(--hud-bottom) + 8px);
}
.bottom-nav {
  padding-left: max(8px, var(--safe-left));
  padding-right: max(8px, var(--safe-right));
  padding-bottom: calc(6px + var(--safe-bottom));
}
dialog {
  max-width: calc(100vw - 24px - var(--safe-left) - var(--safe-right));
  max-height: calc(100svh - var(--safe-top) - var(--safe-bottom) - 28px);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 22px;
}
.dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.dialog-heading h2 {
  margin: 0;
}
.dialog-heading button {
  min-width: 44px;
  min-height: 44px;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  gap: 24px;
}
.settings-row input {
  width: 24px;
  height: 24px;
  accent-color: #f4b25b;
}
.settings-account {
  border-top: 1px solid #ffffff25;
  margin-top: 18px;
  padding-top: 20px;
}
.settings-account small {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.12em;
}
#commander {
  font-size: 20px;
  font-weight: 700;
  margin: 4px 0;
}
#logout {
  margin-top: 18px;
  width: 100%;
  min-height: 44px;
  background: transparent;
  color: #d5b9b7;
}
.building-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 20px;
  width: 100%;
  padding: 14px;
  margin-bottom: 8px;
  background: #29485e;
}
.building-entry small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}
.playing header .power,
.hud-icon,
.building-entry {
  touch-action: manipulation;
}
/* Keep overlays above the home indicator and the actual bottom navigation. */
.base-stage .map-tools {
  bottom: calc(95px + var(--safe-bottom));
  grid-template-columns: 44px;
  gap: 6px;
}
.base-stage [data-tool="motion"] {
  display: none;
}
.on-map #panelWrap {
  bottom: calc(82px + var(--safe-bottom));
  max-height: min(
    51svh,
    calc(100svh - var(--hud-bottom) - var(--safe-bottom) - 100px)
  );
}