/* Battle overlay containment and compact HUD refinements. */
#battle-layer {
  z-index: 1000;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  overscroll-behavior: none;
  touch-action: manipulation;
}

#battle-layer canvas {
  display: block;
}

.battle-hud .bh-side {
  padding: 8px 10px;
  border: 1px solid #ffffff24;
  border-radius: 12px;
  background: #10150eaa;
  box-shadow: 0 6px 18px #0007;
  backdrop-filter: blur(7px);
}

.bh-name {
  color: #f4f1df;
}

.bh-name small {
  color: #cbd6b6;
}

@media (max-height: 650px), (min-aspect-ratio: 9/4) {
  .battle-hud {
    padding-top: calc(6px + env(safe-area-inset-top));
  }

  .battle-hud .bh-side {
    width: min(31vw, 260px);
    padding: 6px 8px;
  }

  .bh-name {
    font-size: 12px;
  }

  .bh-name small {
    font-size: 10px;
  }

  .bh-bar {
    height: 9px;
    margin-top: 3px;
  }

  .battle-ctrl {
    bottom: calc(7px + env(safe-area-inset-bottom));
    gap: 5px;
    padding: 5px 7px;
  }

  .battle-ctrl button {
    min-width: 38px;
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
  }
}