/*
 * TinyArmy.io v2.1.1
 * Keep the unit inspector in its own grid row so it never overlays the map.
 */
.battle-screen {
  --tinyarmy-inspector-height: 82px;
  grid-template-rows:
    58px
    48px
    minmax(0, 1fr)
    var(--tinyarmy-inspector-height) !important;
}

.battle-layout {
  min-height: 0;
  overflow: hidden;
}

.canvas-shell {
  min-height: 0;
  max-height: 100%;
}

.unit-inspector {
  position: relative;
  z-index: 35;
  grid-row: 4;
  inset: auto;
  width: auto;
  height: var(--tinyarmy-inspector-height);
  min-height: var(--tinyarmy-inspector-height);
}

@media (height <= 720px) and (width >= 821px) {
  .battle-screen {
    --tinyarmy-inspector-height: 72px;
    grid-template-rows:
      52px
      42px
      minmax(0, 1fr)
      var(--tinyarmy-inspector-height) !important;
  }
}

@media (width <= 820px) {
  .battle-screen {
    --tinyarmy-inspector-height: 72px;
    grid-template-rows:
      52px
      42px
      minmax(0, 1fr)
      var(--tinyarmy-inspector-height) !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (height <= 820px) {
  .battle-screen {
    --tinyarmy-inspector-height: 52px;
    grid-template-rows:
      38px
      26px
      minmax(0, 1fr)
      var(--tinyarmy-inspector-height) !important;
  }

  .unit-inspector {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: var(--tinyarmy-inspector-height) !important;
    min-height: var(--tinyarmy-inspector-height) !important;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    box-shadow: none;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (height <= 420px) and (width <= 820px) {
  .battle-screen {
    --tinyarmy-inspector-height: 48px;
    grid-template-rows:
      36px
      24px
      minmax(0, 1fr)
      var(--tinyarmy-inspector-height) !important;
  }
}