/* hud-fit (R190): the realm HUD laid out so nothing overlaps at phone or desktop widths. Positions only; no behavior changes.
   Zones: top bar (brand, SNX) centre; shell menu top-right; HUD menu + district row beneath; camera bar beneath that;
   minimap left; rail right; toasts right column; joystick bottom-left; prompts above the joystick. */
#as-elite-topbar{max-width:calc(100vw - 96px)}
#as-shell-menu{position:fixed!important;top:10px!important;right:10px!important;left:auto!important;z-index:1200}
#as-shell-close{z-index:1300}
#as-dock-camerabar{top:116px!important}
#as-realm-toasts{top:172px!important;right:12px!important;left:auto!important;transform:none!important;max-width:min(320px,calc(100vw - 24px))}
@media (max-width:640px){
  #as-elite-topbar{left:8px!important;right:64px!important;width:auto!important;max-width:none;transform:none!important;justify-content:flex-start;gap:8px}
  #as-hud-menu-btn{position:fixed!important;top:64px!important;left:8px!important;transform:none!important}
  #as-life-district{position:fixed!important;top:auto!important;bottom:172px!important;left:50%!important;transform:translateX(-50%)!important;font-size:11px;letter-spacing:.14em;opacity:.85}
  #as-dock-topcenter{top:64px!important;left:56px!important;right:8px!important;width:auto!important;transform:none!important;justify-content:flex-end}
  #as-dock-camerabar{top:116px!important;left:56px!important;right:8px!important;width:auto!important;transform:none!important;justify-content:flex-end}
  .as-realm-sign{display:none!important}
  #as-realm-toasts{top:172px!important;right:8px!important;max-width:calc(100vw - 130px)}
  #as-realm-stick{left:16px!important;bottom:24px!important}
  [id^="as-avatar-onboard"],.as-avatar-prompt,#as-avatar-prompt{bottom:180px!important}
  #as-elite-rail{right:8px!important;top:auto!important;bottom:180px!important;transform:none!important}
}
@media (max-width:640px) and (orientation:landscape){
  #as-dock-camerabar{top:64px!important;left:auto!important;right:8px!important}
  #as-dock-topcenter{top:8px!important;left:auto!important;right:64px!important}
  #as-realm-toasts{top:110px!important}
}
.as-skip{position:fixed!important;top:-120px!important;left:8px!important;z-index:1400}.as-skip:focus{top:8px!important}

/* R195: the Life strip on phones. Measured at 390: the last link ran to 433 px (clipped) and the strip's left end sat under
   the move stick (16 to 140 px, bottom 24). The strip now clears the stick, wraps, and never runs past the viewport. */
@media (max-width:520px){
  #as-life-strip{flex-wrap:wrap;justify-content:flex-end;align-content:flex-end;padding-left:156px!important;padding-right:10px!important;box-sizing:border-box;max-width:100%;overflow:hidden;gap:0 8px}
  #as-life-strip .ls-back{white-space:nowrap;font-size:11px;padding:6px 6px;min-height:34px;box-sizing:border-box}
}

/* R198: the move stick sat at bottom:24 while the Life strip is a fixed 85px band at bottom:0, so 61 of the stick's
   124px lay underneath it. It stayed usable only because the stick's z-index (130) outranks the strip's (75): the
   control depended on stacking luck rather than on geometry. Reported twice from a phone as the left stick not
   working. The stick now clears the strip outright, so no stacking context, no later z-index change and no taller
   strip can ever bury it again. */
/* R213: iOS safe area. These realms set viewport-fit=cover, so on iOS the layout viewport extends BENEATH
   the browser chrome and the home indicator. Safari has placed its address bar at the bottom by default since
   iOS 15, which means a bare `bottom: 104px` puts the movement stick behind that bar: present in the DOM,
   correctly sized, and invisible to the person holding the phone. That matches every screenshot the founder
   sent, and it is why this reproduced on a device but never in a desktop engine, where the inset is zero.
   The HUD already normalises safe-area top and right, and the body already pads for the bottom inset, but
   padding the document does nothing for a position:fixed element, which is what the stick is. The inset has
   to be added to the element's own offset. env() falls back to 0px, so nothing changes anywhere else. */
@media (max-width: 900px) {
  #as-realm-stick, .as-realm-stick { bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 900px) and (orientation: landscape) {
  /* landscape has far less vertical room and the strip is a single line there */
  #as-realm-stick, .as-realm-stick { bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important; }
}