/* pbPT (29/10) hud-top: top bar like pweb. FPS/ping on the top left and the players online in the top
   centre, both against the top edge. They no longer move (performance-hud.js) and let clicks through
   to the game. The touch HUD (touch-hud.css, .pth-on) keeps its own places with !important. */
#pt-performance, #pt-online {
  position: fixed;
  z-index: 25;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 12px);
  color: #e8d9ad;
  font: 600 12px/1.25 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
#pt-performance[hidden], #pt-online[hidden] { display: none; }
#pt-performance {
  top: env(safe-area-inset-top, 0px);
  left: max(4px, env(safe-area-inset-left));
  min-height: 22px;
  gap: 6px;
  padding: 3px 6px;
}
#pt-performance .pt-fps, #pt-ping-value { color: #b9edb1; }
#pt-performance .pt-separator { color: #baaf94; }
#pt-server-name { max-width: min(180px, 32vw); overflow: hidden; text-overflow: ellipsis; }
#pt-online {
  top: max(4px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  min-height: 24px;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid #a88b4d66;
  border-radius: 20px;
  background: #15120bb3;
}
.pt-online-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #92938c; }
#pt-online.pt-connected .pt-online-dot { background: #67dd7c; box-shadow: 0 0 5px #67dd7c66; }
.pt-touch.pt-playing #pt-touch-ui [data-key=Escape] { top:64px; left:calc(max(8px,env(safe-area-inset-left)) + 82px); }
.pt-touch.pt-portrait #pt-performance, .pt-touch.pt-portrait #pt-online { display: none; }

/* Modal text needs a clear reading area at every screen size. */
.pt-menu-open #pt-performance { visibility:hidden; }

/* Keep status text above the touch toolbar on short landscape screens. */
@media(max-height:500px) { .pt-touch #pt-performance { top:32px; } }

/* Taller touch screens keep room below the status row. */
@media(min-height:501px) { .pt-touch #pt-toolbar,.pt-touch.pt-playing #pt-toolbar { top:112px; } .pt-touch.pt-playing #pt-touch-ui [data-key=Escape] { top:112px; } }

/* Short touch screens use two columns for the menu tools. */
@media(max-height:359px) { .pt-touch.pt-playing #pt-touch-ui [data-key=Escape] { left:calc(max(8px,env(safe-area-inset-left)) + 164px); } }