/* Shared space for the persistent HUD. Panels keep their own look; these rules reserve
   rows for controls, prompts and status so adding a phone or a banner cannot cover a tap. */
html body #brand { max-width:calc(100vw - 470px); }
html body #room { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
html body #emotes { bottom:max(16px,env(safe-area-inset-bottom)); }
html body #emotes button { min-width:44px;min-height:44px; }
html body #prompt, html body.pnn-phone #prompt { top:auto;bottom:max(86px,calc(env(safe-area-inset-bottom) + 70px));width:max-content;max-width:min(740px,calc(100vw - 48px));white-space:normal;overflow:visible;text-overflow:clip; }
html body #myEmote { bottom:150px; }
html body #fishPocket { top:116px; }
html body #fishPocket[hidden] { display:none; }
html body.pnn-phone #onnow { right:160px;max-width:min(250px,calc((100vw - 430px)/2 - 176px)); }
html body.pnn-phone #phoneButton { bottom:max(16px,env(safe-area-inset-bottom)); }
html body:is(.phone-open,.phone-riding) #onnow { visibility:hidden; }
html body:has(#menu:not([hidden]),#ask:not([hidden])) :is(#prompt,#emotes,#help,#onnow,#phoneButton,#fishPocket,#stick) { visibility:hidden; }
html body :is(#menu,#ask) { z-index:45; }
html body:has(#sitin:not([hidden])) #prompt { bottom:max(196px,22%); }
html body:is(.island-riding,.island-water,.pnn-driving,.motorRiding) :is(#phoneButton,#onnow) { visibility:hidden; }
@media(max-width:1100px) {
  html body #brand { max-width:calc(100vw - 450px); }
  html body #brand a.leave .long { display:none; }
  html body #onnow,html body.pnn-phone #onnow { top:64px;bottom:auto;right:16px;max-width:240px; }
  html body #fishPocket { top:140px; }
  html body #help { max-width:230px; }
}
@media(min-width:641px) {
  html.touch body #prompt { bottom:232px; }
}
@media(max-width:640px) {
  html body #brand { max-width:110px;gap:6px; }
  html body #brand a.leave .word { display:none; }
  html body #buttons { right:12px;gap:5px; }
  html body #emotes { bottom:max(16px,env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%);flex-direction:row;gap:2px;padding:5px; }
  html body #emotes button { padding:4px 5px;min-width:42px; }
  html body #prompt,html.touch body #prompt,html body.pnn-phone #prompt { bottom:232px;max-width:calc(100vw - 28px); }
  html body #myEmote { bottom:294px; }
  html body #onnow { max-width:146px; }
  html body #fishPocket { top:154px; }
  html body #purse,html body #here { max-width:calc(100vw - 185px); }
  html body #flCard { top:212px; }
}
@media(max-height:500px) {
  html.touch body #prompt,html.touch body.pnn-phone #prompt { bottom:140px;max-width:calc(100vw - 300px); }
  html.touch body #emotes { left:50%;right:auto;transform:translateX(-50%); }
}