/* v562 HUD NORMALIZE - fixes text overflow, clipped labels, and overlapping
   fixed-position control buttons reported on the CTF + Life HUDs.
   Strategy: never let a control button clip its own text, and collect the
   top control buttons into one tidy flex row instead of stacked fixed coords.
   Constitution-safe: plain CSS, no smart quotes, no en/em dashes. */

/* 1) Every known HUD control button: auto width, no clip, consistent pill. */
#as-subtitles-toggle,
#as-cam-toggle,
#as-camera-mode-pill,
#as-audio-toggle,
#as-haptics-toggle,
#as-comms-btn,
#as-hud-menu-btn,
#as-pause-btn,
#as-realm-help-btn,
#as-realm-immerse-btn,
#as-tutorial-pro-btn,
.as-realm-hud-btn,
.as-hud-control {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  box-sizing: border-box !important;
  height: 36px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 13px !important;
  font-family: 'Rajdhani', system-ui, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 12px !important;
}

/* 2) Top control row: one flex container the coordinator script fills.
   Sits below the safe-area inset, wraps on very narrow screens. */
#as-hud-toprow {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 140;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: calc(100vw - 24px);
  pointer-events: none;
}
#as-hud-toprow > * {
  pointer-events: auto;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}

/* 3) Toasts / "Red scored!" banners: clamp width, allow wrap, never run off-screen. */
#as-realm-toasts,
.as-ctf-toast,
.as-realm-toast {
  max-width: calc(100vw - 28px) !important;
  box-sizing: border-box !important;
}
#as-realm-toasts > *,
.as-ctf-toast,
.as-realm-toast {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  max-width: calc(100vw - 28px) !important;
  box-sizing: border-box !important;
}

/* 4) Score/timer pill: center it, keep it clear of the top row. */
.as-ctf-scorebar,
#as-ctf-scorebar {
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* 5) Right-edge action button (CREATE etc): never let it bleed off-screen. */
#as-realm-immerse-btn,
.as-edge-action-btn {
  right: calc(env(safe-area-inset-right, 0px) + 12px) !important;
  max-width: 44vw !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Very small screens: shrink type a touch so labels still fit. */
@media (max-width: 380px) {
  #as-subtitles-toggle,
  #as-cam-toggle,
  #as-camera-mode-pill,
  #as-audio-toggle,
  #as-haptics-toggle,
  #as-comms-btn,
  #as-hud-menu-btn,
  #as-pause-btn,
  #as-realm-help-btn,
  .as-realm-hud-btn,
  .as-hud-control {
    font-size: 11px !important;
    padding: 0 10px !important;
    height: 34px !important;
  }
}