.field-surface {
  position: relative;
  width: min(100%, 480px);
  aspect-ratio: 3 / 5;
  min-height: 0;
}

.field-surface #battlefield {
  position: relative;
  width: 100%;
  height: 100%;
}

.field-surface[data-renderer="3d"] #battlefield { opacity: 0; }
.field-surface:focus-within { outline: 2px solid #edcb89; outline-offset: -2px; }
.field-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.field-gl[hidden] { display: none; }
.field-tools {
  position: absolute;
  z-index: 1;
  inset: auto 8px 8px;
  display: flex;
  justify-content: space-between;
  gap: .4rem;
  pointer-events: none;
}
.field-tools button, .formation-choices button {
  min-width: 44px;
  min-height: 44px;
  padding: .42rem .65rem;
  border: 1px solid #a88b58;
  border-radius: 8px;
  color: #f4e8d1;
  background: #1a3029f5;
  font: inherit;
  font-size: .77rem;
  font-weight: 800;
  cursor: pointer;
}
.field-tools button { pointer-events: auto; }
.field-tools button:disabled { visibility: hidden; }
.formation-choices button:disabled { opacity: .58; cursor: default; }
.field-tools button[aria-pressed="true"], .formation-choices button[aria-pressed="true"] { color: #211b12; background: #e7c07b; }
.field-tools button:focus-visible, .formation-choices button:focus-visible { outline: 2px solid #ffdf9d; outline-offset: 2px; }
.formation-orders {
  grid-column: 1 / -1;
  margin: 0;
  padding: .7rem;
  border: 1px solid #7d7350;
  border-radius: 10px;
  background: #182c25;
  color: #f8ecd3;
}
.formation-orders h3 { margin: 0 0 .5rem; font-size: .95rem; }
.formation-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
#formation-description { margin: .5rem 0; line-height: 1.35; font-size: .8rem; }
#play[data-aiming="true"] #battlefield { cursor: crosshair; }
#play[data-aiming="true"] .field-surface { box-shadow: inset 0 0 0 2px #f3ca83; }
#play .field-ground { bottom: 58px; width: max-content; max-width: min(88%, 320px); line-height: 1.3; }
.sh-village .village-gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sh-village[data-renderer="3d"] .sh-v-canvas { visibility: hidden; }

@media (max-width: 720px) {
  #play .field-surface { width: 100%; height: 100%; aspect-ratio: auto; }
  #play[data-mobile-view="field"] .formation-orders { display: none; }
  #play[data-mobile-view="map"] .field-tools { display: none; }
  #play[data-mobile-view="map"] .field-ground { bottom: 8px; }
  #play[data-mobile-view="map"][data-survey="true"] { --mx-phone-map-dock: min(53dvh, 340px); }
}

@media (min-width: 470px) and (max-width: 720px) and (max-height: 470px) {
  #play[data-mobile-view="map"], #play[data-mobile-view="map"][data-survey="true"] {
    --mx-map-sidebar: min(46vw, 280px); --mx-phone-map-dock: 0px;
  }
  #play[data-mobile-view="map"] .stage-frame { right: var(--mx-map-sidebar) !important; width: calc(100vw - var(--mx-map-sidebar)) !important; }
  #play[data-mobile-view="map"] .world-controls {
    top: var(--mx-phone-content); left: auto; width: var(--mx-map-sidebar); height: auto;
    padding-right: var(--mx-phone-right); border-top: 0; border-left: 1px solid var(--mx-phone-line);
  }
}

@media (orientation: landscape) and (max-height: 540px) and (min-width: 721px) {
  .field-surface { width: min(100%, calc((100svh - 96px) * .6)); }
}