html, body { margin: 0; height: 100%; overflow: hidden; background: #2b5e3a; }
body { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0;
  font: 600 18px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff; }

/* The chat panel: over the top of the lobby, so the phone's keyboard and the
   buttons in the bottom corner stay clear of it. */
#chat { position: absolute; top: 0; left: 0; right: 0; z-index: 2; box-sizing: border-box;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));
  background: rgba(27, 20, 64, 0.92); color: #fff; font: 16px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#chat[hidden] { display: none; }
#chat-presets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; touch-action: pan-x; scrollbar-width: none; }
#chat-presets::-webkit-scrollbar { display: none; }
#chat-presets button { flex: none; min-height: 40px; padding: 0 14px; border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 20px; background: transparent; color: #fff; font: inherit; font-weight: 600; white-space: nowrap; }
#chat-row { display: flex; gap: 8px; }
#chat-text { flex: 1; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 2px solid #fff;
  border-radius: 12px; background: #fff; color: #1b1440; font: inherit; -webkit-user-select: text; user-select: text; }
#chat-send, #chat-close { flex: none; min-width: 44px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px;
  font: inherit; font-weight: 700; }
#chat-send { background: #ffc93c; color: #1b1440; }
#chat-close { background: rgba(255, 255, 255, 0.18); color: #fff; }
#chat button:focus-visible, #chat-text:focus-visible { outline: 3px solid #ffc93c; outline-offset: 2px; }
#chat-hint { margin: 6px 2px 0; font-size: 13px; color: rgba(255, 255, 255, 0.8); }

/* The way into a game, shown while the player stands in its portal: in the
   middle of the bottom edge, clear of the emote and chat buttons. */
#portal-go { position: absolute; left: 50%; bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px)); z-index: 1;
  transform: translateX(-50%); max-width: calc(100% - 32px); min-height: 52px; padding: 0 22px; overflow: hidden;
  border: 3px solid #1b1440; border-radius: 14px; background: #2fb463; color: #fff; box-shadow: 4px 4px 0 #1b1440;
  font: 700 18px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
#portal-go[hidden] { display: none; }
#portal-go:active { transform: translate(calc(-50% + 4px), 4px); box-shadow: none; }
#portal-go:focus-visible { outline: 3px solid #ffc93c; outline-offset: 2px; }