/* 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: 34px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 11px !important;
  font-family: 'Rajdhani', system-ui, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 11px !important;
}

/* 2) Top control row: one flex container the coordinator script fills.
   Sits below the safe-area inset. Centered, but constrained so it never
   overlaps the top-left immerse button or the right edge action button.
   On narrow screens it wraps into tidy rows that stack downward (never over
   other fixed UI). */
#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;
  /* leave clearance on BOTH sides for the immerse btn (left) + action btn (right) */
  max-width: calc(100vw - 200px);
  pointer-events: none;
}
/* On phones there is not room for left+right clearance AND a centered row;
   drop the row to its own line below the corner buttons and use full width. */
@media (max-width: 640px) {
  #as-hud-toprow {
    top: calc(env(safe-area-inset-top, 0px) + 56px);
    max-width: calc(100vw - 20px);
  }
}
#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.
   NOTE: as-realm-immerse-btn is intentionally top-LEFT (set by the realm shell);
   it must NOT be pulled to the right edge or it collides with the center row and
   the right action button. Only true edge-action buttons are right-aligned. */
.as-edge-action-btn {
  right: calc(env(safe-area-inset-right, 0px) + 12px) !important;
  max-width: 40vw !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* keep the immerse button clamped so its label never overflows, but leave its
   top-left position (from the realm shell) intact. */
#as-realm-immerse-btn {
  max-width: 38vw !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: 10px !important;
    padding: 0 8px !important;
    height: 32px !important;
    letter-spacing: 0.04em !important;
  }
}

/* v588: any button collected into the row MUST be relative-positioned so the
   flex layout controls it. This beats the engine's .as-realm-hud-btn class rule
   that re-applies position:fixed (which left as-cam-toggle floating + overflowing
   even after the coordinator moved it). High specificity + !important wins. */
#as-hud-toprow > button,
#as-hud-toprow > .as-realm-hud-btn,
#as-hud-toprow > .as-hud-control,
#as-hud-toprow > [id^="as-"] {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* v588 mid-right HUD clarity: keep the right-side action button (CREATE) fully
   on-screen with a readable label instead of clipping off the edge, and keep it
   visually aligned with the elite rail rather than floating into it. */
#as-realm-create-btn,
.as-edge-action-btn,
#as-edge-create {
  position: fixed !important;
  right: calc(env(safe-area-inset-right, 0px) + 12px) !important;
  top: 38% !important;
  max-width: 132px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 10px 16px !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  z-index: 98 !important;
}
/* the elite rail (circular control column) sits just below the CREATE button;
   nudge it down so the two never overlap, and tighten its look for clarity. */
#as-elite-rail {
  top: 52% !important;
}
#as-elite-rail .as-elite-slot {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}